\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t

Kinh th\u00e0nh Hu\u1ebf <\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t<\/iframe>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"has_eae_slider elementor-element elementor-element-4eb6fa2 e-flex e-con-boxed e-con e-parent\" data-id=\"4eb6fa2\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7add871 elementor-widget elementor-widget-html\" data-id=\"7add871\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"vi\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Thuy\u1ebft Minh - Audio Guide<\/title>\r\n <link rel=\"stylesheet\" href=\"audio-guide.css\">\r\n <link href=\"https:\/\/historyhub.id.vn\/wp\/wp-content\/uploads\/2025\/07\/mp3-output-ttsfreedotcom-18.mp3\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\r\n<\/head>\r\n<body>\r\n <div class=\"audio-guide-container\">\r\n <div class=\"sealed-scroll\" id=\"sealedScroll\">\r\n <div class=\"scroll-paper\">\r\n <div class=\"wax-seal\" id=\"waxSeal\">\r\n <i class=\"fas fa-stamp\"><\/i>\r\n <\/div>\r\n <div class=\"scroll-content\">\r\n <div class=\"scroll-text\">\r\n <h3>Nghe m\u00f4 t\u1ea3<\/h3>\r\n <p>T\u01b0 li\u1ec7u, th\u00f4ng tin v\u1ec1 di t\u00edch<\/p>\r\n <\/div>\r\n <button class=\"open-button\" id=\"openButton\">\r\n <span>M\u1ede T\u01af LI\u1ec6U<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"opened-parchment\" id=\"openedParchment\">\r\n <div class=\"parchment-left\">\r\n <button id=\"playPauseBtn\" class=\"control-btn\">\r\n <i class=\"fas fa-play\"><\/i>\r\n <\/button>\r\n <div class=\"parchment-header\">\r\n <h2>C\u00d9NG NGHE, C\u00d9NG HI\u1ec2U<\/h2>\r\n <h3 id=\"placeName\">Kinh th\u00e0nh Hu\u1ebf <\/h3>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"audio-player\">\r\n <audio id=\"audioElement\" src=\"https:\/\/historyhub.id.vn\/wp\/wp-content\/uploads\/2025\/07\/mp3-output-ttsfreedotcom-18.mp3\"><\/audio>\r\n \r\n <div class=\"player-controls\">\r\n <div class=\"progress-container\">\r\n <span id=\"currentTime\" class=\"time\">0:00<\/span>\r\n <div class=\"progress-bar\" id=\"progressContainer\">\r\n <div class=\"progress\" id=\"progress\"><\/div>\r\n <\/div>\r\n <span id=\"duration\" class=\"time\">0:00<\/span>\r\n <\/div>\r\n\r\n <div class=\"volume-control\">\r\n <i class=\"fas fa-volume-up\"><\/i>\r\n <input type=\"range\" id=\"volumeSlider\" min=\"0\" max=\"1\" step=\"0.01\" value=\"0.8\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"transcript\">\r\n <p id=\"transcriptText\">\"Xin k\u00ednh m\u1eddi m\u1ecdi ng\u01b0\u1eddi c\u00f9ng d\u1ea1o b\u01b0\u1edbc \u0111\u1ebfn di t\u00edch c\u00f9ng History Hub\"<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script src=\"audio-guide.js\"><\/script>\r\n<\/body>\r\n<\/html>\r\n\r\n<style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n}\r\n\r\n.audio-guide-container {\r\n max-width: 650px;\r\n margin: 0 auto;\r\n position: relative;\r\n font-family: 'Poppins', sans-serif;\r\n}\r\n\r\n\/* Sealed Scroll (Card Ngang ch\u01b0a m\u1edf) \/\r\n.sealed-scroll {\r\n position: relative;\r\n width: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: all 0.5s ease;\r\n}\r\n\r\n.scroll-paper {\r\n width: 100%;\r\n height: 140px; \/ Kh\u00f3a c\u1ee9ng chi\u1ec1u cao card ch\u01b0a m\u1edf l\u00e0 140px \/\r\n background: linear-gradient(135deg, #F6E2A5 0%, #E8D4A0 100%);\r\n border-radius: 12px 60px 12px 12px;\r\n box-shadow: 0 15px 35px -10px rgba(0,0,0,0.5),\r\n inset 0 4px 10px rgba(255,255,255,0.6),\r\n inset 0 -4px 10px rgba(138,103,50,0.3);\r\n position: relative;\r\n cursor: pointer;\r\n overflow: hidden;\r\n transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n display: flex;\r\n align-items: center;\r\n padding: 0 30px;\r\n}\r\n\r\n.sealed-scroll:hover .scroll-paper {\r\n transform: scale(1.02) rotate(1deg);\r\n}\r\n\r\n.wax-seal {\r\n position: absolute;\r\n left: 40px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n width: 80px;\r\n height: 80px;\r\n background: radial-gradient(circle at 40% 40%, #9B2C2C, #6B1F1F);\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: #F6E2A5;\r\n font-size: 2.2rem;\r\n box-shadow: 0 10px 20px rgba(0,0,0,0.4),\r\n inset 0 4px 8px rgba(255,255,255,0.3);\r\n border: 4px solid #C59A42;\r\n transition: all 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);\r\n pointer-events: none;\r\n}\r\n\r\n.scroll-content {\r\n margin-left: 110px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n width: 100%;\r\n color: #2E2115;\r\n text-align: left;\r\n pointer-events: none;\r\n}\r\n\r\n.scroll-text h3 {\r\n font-family: 'Cinzel', serif;\r\n font-size: 1.3rem;\r\n margin-bottom: 4px;\r\n}\r\n\r\n.scroll-text p {\r\n color: #5A3E1B;\r\n font-weight: 500;\r\n font-size: 0.9rem;\r\n}\r\n\r\n.open-button {\r\n margin-top: 0;\r\n padding: 10px 25px;\r\n background: #2E2115;\r\n color: #F6E2A5;\r\n border: 2px solid #C59A42;\r\n border-radius: 50px;\r\n font-size: 0.9rem;\r\n font-weight: 500;\r\n cursor: pointer;\r\n transition: all 0.4s ease;\r\n white-space: nowrap;\r\n pointer-events: auto;\r\n}\r\n\r\n.open-button:hover {\r\n background: #C59A42;\r\n color: #2E2115;\r\n}\r\n\r\n\/ Opened Parchment (Khung m\u1edf r\u1ed9ng sau khi b\u1ea5m - \u0110\u00daNG B\u1eb0NG K\u00cdCH TH\u01af\u1edaC CARD CH\u01afA M\u1ede) \/\r\n.opened-parchment {\r\n display: none; \/ JS s\u1ebd k\u00edch ho\u1ea1t chuy\u1ec3n th\u00e0nh flex \/\r\n background: linear-gradient(#F6E2A5, #E8D8B0);\r\n border-radius: 12px;\r\n padding: 15px 25px;\r\n box-shadow: 0 15px 35px -10px rgba(0,0,0,0.5),\r\n inset 0 0 80px rgba(245,220,140,0.6);\r\n position: relative;\r\n overflow: hidden;\r\n width: 100%;\r\n height: 140px; \/ Kh\u00f3a c\u1ee9ng chi\u1ec1u cao b\u1eb1ng \u0111\u00fang card c\u0169 140px \/\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 20px;\r\n}\r\n\r\n.opened-parchment::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(138,103,50,0.08) 20px, rgba(138,103,50,0.08) 40px);\r\n pointer-events: none;\r\n}\r\n\r\n\/ V\u00f9ng b\u00ean tr\u00e1i: N\u00fat Play & Ti\u00eau \u0111\u1ec1 \/\r\n.parchment-left {\r\n display: flex;\r\n align-items: center;\r\n gap: 15px;\r\n flex-shrink: 0;\r\n z-index: 1;\r\n}\r\n\r\n.parchment-header {\r\n text-align: left;\r\n}\r\n\r\n.parchment-header h2 {\r\n font-family: 'Cinzel', serif;\r\n font-size: 0.85rem;\r\n color: #8A6732;\r\n letter-spacing: 1px;\r\n}\r\n\r\n.parchment-header h3 {\r\n font-family: 'Cormorant Garamond', serif;\r\n font-size: 1.1rem;\r\n color: #2E2115;\r\n font-weight: bold;\r\n margin-top: 2px;\r\n}\r\n\r\n\/ V\u00f9ng \u1edf gi\u1eefa: B\u1ed9 \u0111i\u1ec1u khi\u1ec3n \u00e2m thanh \/\r\n.audio-player {\r\n flex: 1;\r\n background: rgba(44, 33, 21, 0.95);\r\n border-radius: 12px;\r\n padding: 12px 18px;\r\n border: 1px solid #8A6732;\r\n box-shadow: inset 0 3px 10px rgba(0,0,0,0.6);\r\n z-index: 1;\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.player-controls {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n width: 100%;\r\n}\r\n\r\n.control-btn {\r\n width: 48px;\r\n height: 48px;\r\n background: #C59A42;\r\n color: #2E2115;\r\n border: none;\r\n border-radius: 50%;\r\n font-size: 1.1rem;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n box-shadow: 0 4px 10px rgba(197,154,66,0.4);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.control-btn:hover {\r\n transform: scale(1.08);\r\n background: #F6E2A5;\r\n}\r\n\r\n.progress-container {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n width: 100%;\r\n}\r\n\r\n.progress-bar {\r\n flex: 1;\r\n height: 5px;\r\n background: #5A3E1B;\r\n border-radius: 999px;\r\n position: relative;\r\n cursor: pointer;\r\n}\r\n\r\n.progress {\r\n height: 100%;\r\n width: 0%;\r\n background: linear-gradient(to right, #C59A42, #F6E2A5);\r\n border-radius: 999px;\r\n box-shadow: 0 0 8px #F6E2A5;\r\n}\r\n\r\n.time {\r\n font-family: monospace;\r\n font-size: 0.8rem;\r\n min-width: 32px;\r\n color: #C59A42;\r\n}\r\n\r\n.volume-control {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #C59A42;\r\n justify-content: flex-end;\r\n}\r\n\r\n.volume-control i {\r\n font-size: 0.85rem;\r\n}\r\n\r\n.volume-control input {\r\n accent-color: #C59A42;\r\n width: 65px;\r\n height: 3px;\r\n}\r\n\r\n\/ V\u00f9ng b\u00ean ph\u1ea3i: V\u0103n b\u1ea3n thu nh\u1ecf \/\r\n.transcript {\r\n width: 160px;\r\n font-style: italic;\r\n color: #5A3E1B;\r\n line-height: 1.4;\r\n text-align: left;\r\n font-size: 0.78rem;\r\n border-left: 1px solid rgba(138,103,50,0.3);\r\n padding-left: 15px;\r\n z-index: 1;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 4;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n}\r\n\r\n\/ Responsive \/\r\n@media (max-width: 640px) {\r\n .audio-guide-container { \r\n padding: 0 15px; \r\n }\r\n .scroll-paper { \r\n padding: 0 15px;\r\n height: 120px;\r\n }\r\n .wax-seal {\r\n left: 15px;\r\n width: 60px;\r\n height: 60px;\r\n font-size: 1.6rem;\r\n }\r\n .scroll-content {\r\n margin-left: 75px;\r\n }\r\n .scroll-text h3 { font-size: 0.8rem; }\r\n .scroll-text p { font-size: 0.6rem; }\r\n .open-button { padding: 8px 15px; font-size: 0.8rem; }\r\n \r\n .opened-parchment { \r\n flex-direction: column; \r\n height: auto; \r\n padding: 15px;\r\n gap: 10px;\r\n }\r\n .parchment-left { width: 100%; justify-content: flex-start; }\r\n .audio-player { width: 100%; }\r\n .transcript { width: 100%; border-left: none; padding-left: 0; text-align: center; }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n document.addEventListener('DOMContentLoaded', () => {\r\n\r\n document.querySelectorAll('.audio-guide-container').forEach(container => {\r\n\r\n const sealedScroll = container.querySelector('.sealed-scroll');\r\n const openedParchment = container.querySelector('.opened-parchment');\r\n const openButton = container.querySelector('.open-button');\r\n const waxSeal = container.querySelector('.wax-seal');\r\n\r\n const audio = container.querySelector('audio');\r\n const playPauseBtn = container.querySelector('.control-btn');\r\n const progress = container.querySelector('.progress');\r\n const progressContainer = container.querySelector('.progress-bar');\r\n const currentTimeEl = container.querySelector('#currentTime');\r\n const durationEl = container.querySelector('#duration');\r\n const volumeSlider = container.querySelector('#volumeSlider');\r\n\r\n let isPlaying = false;\r\n\r\n function formatTime(seconds) {\r\n if (!seconds || isNaN(seconds)) return \"0:00\";\r\n const min = Math.floor(seconds \/ 60);\r\n const sec = Math.floor(seconds % 60);\r\n return `${min}:${sec < 10 ? \"0\" : \"\"}${sec}`;\r\n }\r\n\r\n audio.volume = 0.8;\r\n\r\n audio.addEventListener(\"loadedmetadata\", () => {\r\n durationEl.textContent = formatTime(audio.duration);\r\n });\r\n\r\n audio.addEventListener(\"timeupdate\", () => {\r\n if (!audio.duration) return;\r\n\r\n progress.style.width =\r\n (audio.currentTime \/ audio.duration) 100 + \"%\";\r\n\r\n currentTimeEl.textContent =\r\n formatTime(audio.currentTime);\r\n });\r\n\r\n audio.addEventListener(\"ended\", () => {\r\n isPlaying = false;\r\n playPauseBtn.innerHTML =\r\n '<i class=\"fas fa-play\"><\/i>';\r\n });\r\n\r\n function openAudioGuide() {\r\n\r\n waxSeal.style.transform =\r\n 'translateY(-50%) scale(1.45) rotate(28deg)';\r\n waxSeal.style.opacity = \"0.25\";\r\n\r\n setTimeout(() => {\r\n\r\n sealedScroll.style.opacity = \"0\";\r\n sealedScroll.style.transform =\r\n \"scale(.8) translateY(50px)\";\r\n\r\n setTimeout(() => {\r\n\r\n sealedScroll.style.display = \"none\";\r\n\r\n openedParchment.style.display = \"flex\";\r\n openedParchment.style.opacity = \"0\";\r\n openedParchment.style.transform =\r\n \"translateY(40px)\";\r\n\r\n setTimeout(() => {\r\n\r\n openedParchment.style.transition =\r\n \"all .8s ease\";\r\n\r\n openedParchment.style.opacity = \"1\";\r\n openedParchment.style.transform =\r\n \"translateY(0)\";\r\n\r\n }, 50);\r\n\r\n }, 500);\r\n\r\n }, 400);\r\n\r\n }\r\n\r\n openButton.addEventListener(\"click\", e => {\r\n\r\n e.stopPropagation();\r\n openAudioGuide();\r\n\r\n });\r\n\r\n sealedScroll.addEventListener(\"click\", openAudioGuide);\r\n\r\n playPauseBtn.addEventListener(\"click\", e => {\r\n\r\n e.stopPropagation();\r\n\r\n if (isPlaying) {\r\n\r\n audio.pause();\r\n\r\n playPauseBtn.innerHTML =\r\n '<i class=\"fas fa-play\"><\/i>';\r\n\r\n } else {\r\n\r\n audio.play();\r\n\r\n playPauseBtn.innerHTML =\r\n '<i class=\"fas fa-pause\"><\/i>';\r\n\r\n }\r\n\r\n isPlaying = !isPlaying;\r\n\r\n });\r\n\r\n progressContainer.addEventListener(\"click\", e => {\r\n\r\n const rect =\r\n progressContainer.getBoundingClientRect();\r\n\r\n const pos =\r\n (e.clientX - rect.left) \/ rect.width;\r\n\r\n audio.currentTime =\r\n pos * audio.duration;\r\n\r\n });\r\n\r\n volumeSlider.addEventListener(\"input\", () => {\r\n\r\n audio.volume = volumeSlider.value;\r\n\r\n });\r\n\r\n });\r\n\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3ccc8d0 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"3ccc8d0\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"has_eae_slider elementor-element elementor-element-82f5512 e-flex e-con-boxed e-con e-parent\" data-id=\"82f5512\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e24f180 elementor-widget elementor-widget-heading\" data-id=\"e24f180\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Khu c\u0103n c\u1ee9 T\u1ec9nh \u1ee7y S\u00f3c Tr\u0103ng<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"has_eae_slider elementor-element elementor-element-b616b69 e-flex e-con-boxed e-con e-parent\" data-id=\"b616b69\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-55547d8 elementor-widget elementor-widget-html\" data-id=\"55547d8\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<iframe src=\"https:\/\/www.google.com\/maps\/embed?pb=!4v1784194141958!6m8!1m7!1sCAoSFkNJSE0wb2dLRUlDQWdJQy12S0h5Ymc.!2m2!1d9.571812487690115!2d105.7516874630732!3f71.32137!4f0!5f0.7820865974627469\" width=\"600\" height=\"450\" style=\"border:0;\" allowfullscreen=\"\" loading=\"lazy\" referrerpolicy=\"strict-origin-when-cross-origin\"><\/iframe>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"has_eae_slider elementor-element elementor-element-75a6267 e-flex e-con-boxed e-con e-parent\" data-id=\"75a6267\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-88e1997 elementor-widget elementor-widget-html\" data-id=\"88e1997\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"vi\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Thuy\u1ebft Minh - Audio Guide<\/title>\r\n <link rel=\"stylesheet\" href=\"audio-guide.css\">\r\n <link href=\"https:\/\/historyhub.id.vn\/wp\/wp-content\/uploads\/2025\/07\/mp3-output-ttsfreedotcom-18.mp3\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\r\n<\/head>\r\n<body>\r\n <div class=\"audio-guide-container\">\r\n <div class=\"sealed-scroll\" id=\"sealedScroll\">\r\n <div class=\"scroll-paper\">\r\n <div class=\"wax-seal\" id=\"waxSeal\">\r\n <i class=\"fas fa-stamp\"><\/i>\r\n <\/div>\r\n <div class=\"scroll-content\">\r\n <div class=\"scroll-text\">\r\n <h3>Nghe m\u00f4 t\u1ea3<\/h3>\r\n <p>T\u01b0 li\u1ec7u, th\u00f4ng tin v\u1ec1 di t\u00edch<\/p>\r\n <\/div>\r\n <button class=\"open-button\" id=\"openButton\">\r\n <span>M\u1ede T\u01af LI\u1ec6U<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"opened-parchment\" id=\"openedParchment\">\r\n <div class=\"parchment-left\">\r\n <button id=\"playPauseBtn\" class=\"control-btn\">\r\n <i class=\"fas fa-play\"><\/i>\r\n <\/button>\r\n <div class=\"parchment-header\">\r\n <h2>C\u00d9NG NGHE, C\u00d9NG HI\u1ec2U<\/h2>\r\n <h3 id=\"placeName\">Khu c\u0103n c\u1ee9 T\u1ec9nh \u1ee7y S\u00f3c Tr\u0103ng<\/h3>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"audio-player\">\r\n <audio id=\"audioElement\" src=\"https:\/\/historyhub.id.vn\/wp\/wp-content\/uploads\/2025\/06\/mp3-output-ttsfreedotcom-1.mp3\"><\/audio>\r\n \r\n <div class=\"player-controls\">\r\n <div class=\"progress-container\">\r\n <span id=\"currentTime\" class=\"time\">0:00<\/span>\r\n <div class=\"progress-bar\" id=\"progressContainer\">\r\n <div class=\"progress\" id=\"progress\"><\/div>\r\n <\/div>\r\n <span id=\"duration\" class=\"time\">0:00<\/span>\r\n <\/div>\r\n\r\n <div class=\"volume-control\">\r\n <i class=\"fas fa-volume-up\"><\/i>\r\n <input type=\"range\" id=\"volumeSlider\" min=\"0\" max=\"1\" step=\"0.01\" value=\"0.8\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"transcript\">\r\n <p id=\"transcriptText\">\"Xin k\u00ednh m\u1eddi m\u1ecdi ng\u01b0\u1eddi c\u00f9ng d\u1ea1o b\u01b0\u1edbc \u0111\u1ebfn di t\u00edch c\u00f9ng History Hub\"<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script src=\"audio-guide.js\"><\/script>\r\n<\/body>\r\n<\/html>\r\n\r\n<style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n}\r\n\r\n.audio-guide-container {\r\n max-width: 650px;\r\n margin: 0 auto;\r\n position: relative;\r\n font-family: 'Poppins', sans-serif;\r\n}\r\n\r\n\/* Sealed Scroll (Card Ngang ch\u01b0a m\u1edf) \/\r\n.sealed-scroll {\r\n position: relative;\r\n width: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: all 0.5s ease;\r\n}\r\n\r\n.scroll-paper {\r\n width: 100%;\r\n height: 140px; \/ Kh\u00f3a c\u1ee9ng chi\u1ec1u cao card ch\u01b0a m\u1edf l\u00e0 140px \/\r\n background: linear-gradient(135deg, #F6E2A5 0%, #E8D4A0 100%);\r\n border-radius: 12px 60px 12px 12px;\r\n box-shadow: 0 15px 35px -10px rgba(0,0,0,0.5),\r\n inset 0 4px 10px rgba(255,255,255,0.6),\r\n inset 0 -4px 10px rgba(138,103,50,0.3);\r\n position: relative;\r\n cursor: pointer;\r\n overflow: hidden;\r\n transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n display: flex;\r\n align-items: center;\r\n padding: 0 30px;\r\n}\r\n\r\n.sealed-scroll:hover .scroll-paper {\r\n transform: scale(1.02) rotate(1deg);\r\n}\r\n\r\n.wax-seal {\r\n position: absolute;\r\n left: 40px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n width: 80px;\r\n height: 80px;\r\n background: radial-gradient(circle at 40% 40%, #9B2C2C, #6B1F1F);\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: #F6E2A5;\r\n font-size: 2.2rem;\r\n box-shadow: 0 10px 20px rgba(0,0,0,0.4),\r\n inset 0 4px 8px rgba(255,255,255,0.3);\r\n border: 4px solid #C59A42;\r\n transition: all 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);\r\n pointer-events: none;\r\n}\r\n\r\n.scroll-content {\r\n margin-left: 110px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n width: 100%;\r\n color: #2E2115;\r\n text-align: left;\r\n pointer-events: none;\r\n}\r\n\r\n.scroll-text h3 {\r\n font-family: 'Cinzel', serif;\r\n font-size: 1.3rem;\r\n margin-bottom: 4px;\r\n}\r\n\r\n.scroll-text p {\r\n color: #5A3E1B;\r\n font-weight: 500;\r\n font-size: 0.9rem;\r\n}\r\n\r\n.open-button {\r\n margin-top: 0;\r\n padding: 10px 25px;\r\n background: #2E2115;\r\n color: #F6E2A5;\r\n border: 2px solid #C59A42;\r\n border-radius: 50px;\r\n font-size: 0.9rem;\r\n font-weight: 500;\r\n cursor: pointer;\r\n transition: all 0.4s ease;\r\n white-space: nowrap;\r\n pointer-events: auto;\r\n}\r\n\r\n.open-button:hover {\r\n background: #C59A42;\r\n color: #2E2115;\r\n}\r\n\r\n\/ Opened Parchment (Khung m\u1edf r\u1ed9ng sau khi b\u1ea5m - \u0110\u00daNG B\u1eb0NG K\u00cdCH TH\u01af\u1edaC CARD CH\u01afA M\u1ede) \/\r\n.opened-parchment {\r\n display: none; \/ JS s\u1ebd k\u00edch ho\u1ea1t chuy\u1ec3n th\u00e0nh flex \/\r\n background: linear-gradient(#F6E2A5, #E8D8B0);\r\n border-radius: 12px;\r\n padding: 15px 25px;\r\n box-shadow: 0 15px 35px -10px rgba(0,0,0,0.5),\r\n inset 0 0 80px rgba(245,220,140,0.6);\r\n position: relative;\r\n overflow: hidden;\r\n width: 100%;\r\n height: 140px; \/ Kh\u00f3a c\u1ee9ng chi\u1ec1u cao b\u1eb1ng \u0111\u00fang card c\u0169 140px \/\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 20px;\r\n}\r\n\r\n.opened-parchment::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(138,103,50,0.08) 20px, rgba(138,103,50,0.08) 40px);\r\n pointer-events: none;\r\n}\r\n\r\n\/ V\u00f9ng b\u00ean tr\u00e1i: N\u00fat Play & Ti\u00eau \u0111\u1ec1 \/\r\n.parchment-left {\r\n display: flex;\r\n align-items: center;\r\n gap: 15px;\r\n flex-shrink: 0;\r\n z-index: 1;\r\n}\r\n\r\n.parchment-header {\r\n text-align: left;\r\n}\r\n\r\n.parchment-header h2 {\r\n font-family: 'Cinzel', serif;\r\n font-size: 0.85rem;\r\n color: #8A6732;\r\n letter-spacing: 1px;\r\n}\r\n\r\n.parchment-header h3 {\r\n font-family: 'Cormorant Garamond', serif;\r\n font-size: 1.1rem;\r\n color: #2E2115;\r\n font-weight: bold;\r\n margin-top: 2px;\r\n}\r\n\r\n\/ V\u00f9ng \u1edf gi\u1eefa: B\u1ed9 \u0111i\u1ec1u khi\u1ec3n \u00e2m thanh \/\r\n.audio-player {\r\n flex: 1;\r\n background: rgba(44, 33, 21, 0.95);\r\n border-radius: 12px;\r\n padding: 12px 18px;\r\n border: 1px solid #8A6732;\r\n box-shadow: inset 0 3px 10px rgba(0,0,0,0.6);\r\n z-index: 1;\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.player-controls {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n width: 100%;\r\n}\r\n\r\n.control-btn {\r\n width: 48px;\r\n height: 48px;\r\n background: #C59A42;\r\n color: #2E2115;\r\n border: none;\r\n border-radius: 50%;\r\n font-size: 1.1rem;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n box-shadow: 0 4px 10px rgba(197,154,66,0.4);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.control-btn:hover {\r\n transform: scale(1.08);\r\n background: #F6E2A5;\r\n}\r\n\r\n.progress-container {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n width: 100%;\r\n}\r\n\r\n.progress-bar {\r\n flex: 1;\r\n height: 5px;\r\n background: #5A3E1B;\r\n border-radius: 999px;\r\n position: relative;\r\n cursor: pointer;\r\n}\r\n\r\n.progress {\r\n height: 100%;\r\n width: 0%;\r\n background: linear-gradient(to right, #C59A42, #F6E2A5);\r\n border-radius: 999px;\r\n box-shadow: 0 0 8px #F6E2A5;\r\n}\r\n\r\n.time {\r\n font-family: monospace;\r\n font-size: 0.8rem;\r\n min-width: 32px;\r\n color: #C59A42;\r\n}\r\n\r\n.volume-control {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #C59A42;\r\n justify-content: flex-end;\r\n}\r\n\r\n.volume-control i {\r\n font-size: 0.85rem;\r\n}\r\n\r\n.volume-control input {\r\n accent-color: #C59A42;\r\n width: 65px;\r\n height: 3px;\r\n}\r\n\r\n\/ V\u00f9ng b\u00ean ph\u1ea3i: V\u0103n b\u1ea3n thu nh\u1ecf \/\r\n.transcript {\r\n width: 160px;\r\n font-style: italic;\r\n color: #5A3E1B;\r\n line-height: 1.4;\r\n text-align: left;\r\n font-size: 0.78rem;\r\n border-left: 1px solid rgba(138,103,50,0.3);\r\n padding-left: 15px;\r\n z-index: 1;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 4;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n}\r\n\r\n\/ Responsive \/\r\n@media (max-width: 640px) {\r\n .audio-guide-container { \r\n padding: 0 15px; \r\n }\r\n .scroll-paper { \r\n padding: 0 15px;\r\n height: 120px;\r\n }\r\n .wax-seal {\r\n left: 15px;\r\n width: 60px;\r\n height: 60px;\r\n font-size: 1.6rem;\r\n }\r\n .scroll-content {\r\n margin-left: 75px;\r\n }\r\n .scroll-text h3 { font-size: 0.8rem; }\r\n .scroll-text p { font-size: 0.6rem; }\r\n .open-button { padding: 8px 15px; font-size: 0.8rem; }\r\n \r\n .opened-parchment { \r\n flex-direction: column; \r\n height: auto; \r\n padding: 15px;\r\n gap: 10px;\r\n }\r\n .parchment-left { width: 100%; justify-content: flex-start; }\r\n .audio-player { width: 100%; }\r\n .transcript { width: 100%; border-left: none; padding-left: 0; text-align: center; }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n document.addEventListener('DOMContentLoaded', () => {\r\n\r\n document.querySelectorAll('.audio-guide-container').forEach(container => {\r\n\r\n const sealedScroll = container.querySelector('.sealed-scroll');\r\n const openedParchment = container.querySelector('.opened-parchment');\r\n const openButton = container.querySelector('.open-button');\r\n const waxSeal = container.querySelector('.wax-seal');\r\n\r\n const audio = container.querySelector('audio');\r\n const playPauseBtn = container.querySelector('.control-btn');\r\n const progress = container.querySelector('.progress');\r\n const progressContainer = container.querySelector('.progress-bar');\r\n const currentTimeEl = container.querySelector('#currentTime');\r\n const durationEl = container.querySelector('#duration');\r\n const volumeSlider = container.querySelector('#volumeSlider');\r\n\r\n let isPlaying = false;\r\n\r\n function formatTime(seconds) {\r\n if (!seconds || isNaN(seconds)) return \"0:00\";\r\n const min = Math.floor(seconds \/ 60);\r\n const sec = Math.floor(seconds % 60);\r\n return `${min}:${sec < 10 ? \"0\" : \"\"}${sec}`;\r\n }\r\n\r\n audio.volume = 0.8;\r\n\r\n audio.addEventListener(\"loadedmetadata\", () => {\r\n durationEl.textContent = formatTime(audio.duration);\r\n });\r\n\r\n audio.addEventListener(\"timeupdate\", () => {\r\n if (!audio.duration) return;\r\n\r\n progress.style.width =\r\n (audio.currentTime \/ audio.duration) 100 + \"%\";\r\n\r\n currentTimeEl.textContent =\r\n formatTime(audio.currentTime);\r\n });\r\n\r\n audio.addEventListener(\"ended\", () => {\r\n isPlaying = false;\r\n playPauseBtn.innerHTML =\r\n '<i class=\"fas fa-play\"><\/i>';\r\n });\r\n\r\n function openAudioGuide() {\r\n\r\n waxSeal.style.transform =\r\n 'translateY(-50%) scale(1.45) rotate(28deg)';\r\n waxSeal.style.opacity = \"0.25\";\r\n\r\n setTimeout(() => {\r\n\r\n sealedScroll.style.opacity = \"0\";\r\n sealedScroll.style.transform =\r\n \"scale(.8) translateY(50px)\";\r\n\r\n setTimeout(() => {\r\n\r\n sealedScroll.style.display = \"none\";\r\n\r\n openedParchment.style.display = \"flex\";\r\n openedParchment.style.opacity = \"0\";\r\n openedParchment.style.transform =\r\n \"translateY(40px)\";\r\n\r\n setTimeout(() => {\r\n\r\n openedParchment.style.transition =\r\n \"all .8s ease\";\r\n\r\n openedParchment.style.opacity = \"1\";\r\n openedParchment.style.transform =\r\n \"translateY(0)\";\r\n\r\n }, 50);\r\n\r\n }, 500);\r\n\r\n }, 400);\r\n\r\n }\r\n\r\n openButton.addEventListener(\"click\", e => {\r\n\r\n e.stopPropagation();\r\n openAudioGuide();\r\n\r\n });\r\n\r\n sealedScroll.addEventListener(\"click\", openAudioGuide);\r\n\r\n playPauseBtn.addEventListener(\"click\", e => {\r\n\r\n e.stopPropagation();\r\n\r\n if (isPlaying) {\r\n\r\n audio.pause();\r\n\r\n playPauseBtn.innerHTML =\r\n '<i class=\"fas fa-play\"><\/i>';\r\n\r\n } else {\r\n\r\n audio.play();\r\n\r\n playPauseBtn.innerHTML =\r\n '<i class=\"fas fa-pause\"><\/i>';\r\n\r\n }\r\n\r\n isPlaying = !isPlaying;\r\n\r\n });\r\n\r\n progressContainer.addEventListener(\"click\", e => {\r\n\r\n const rect =\r\n progressContainer.getBoundingClientRect();\r\n\r\n const pos =\r\n (e.clientX - rect.left) \/ rect.width;\r\n\r\n audio.currentTime =\r\n pos * audio.duration;\r\n\r\n });\r\n\r\n volumeSlider.addEventListener(\"input\", () => {\r\n\r\n audio.volume = volumeSlider.value;\r\n\r\n });\r\n\r\n });\r\n\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"has_eae_slider elementor-element elementor-element-823199f e-flex e-con-boxed e-con e-parent\" data-id=\"823199f\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7f14e43 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"7f14e43\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"has_eae_slider elementor-element elementor-element-8302f42 e-flex e-con-boxed e-con e-parent\" data-id=\"8302f42\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0b8d82b elementor-widget elementor-widget-heading\" data-id=\"0b8d82b\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">H\u1ed3 Ho\u00e0n Ki\u1ebfm<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"has_eae_slider elementor-element elementor-element-ccae7da e-flex e-con-boxed e-con e-parent\" data-id=\"ccae7da\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-35c2268 elementor-widget elementor-widget-html\" data-id=\"35c2268\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<iframe src=\"https:\/\/www.google.com\/maps\/embed?pb=!4v1784212216497!6m8!1m7!1sCAoSFkNJSE0wb2dLRUlDQWdJRDRfOWFlWFE.!2m2!1d21.0286301307459!2d105.8524792676769!3f41.69964765294321!4f-54.91830885782092!5f0.4000000000000002\" width=\"600\" height=\"450\" style=\"border:0;\" allowfullscreen=\"\" loading=\"lazy\" referrerpolicy=\"strict-origin-when-cross-origin\"><\/iframe>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"has_eae_slider elementor-element elementor-element-0fc7050 e-flex e-con-boxed e-con e-parent\" data-id=\"0fc7050\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2c547ee elementor-widget elementor-widget-html\" data-id=\"2c547ee\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"vi\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Thuy\u1ebft Minh - Audio Guide<\/title>\r\n <link rel=\"stylesheet\" href=\"audio-guide.css\">\r\n <link href=\"https:\/\/historyhub.id.vn\/wp\/wp-content\/uploads\/2025\/07\/mp3-output-ttsfreedotcom-18.mp3\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\r\n<\/head>\r\n<body>\r\n <div class=\"audio-guide-container\">\r\n <div class=\"sealed-scroll\" id=\"sealedScroll\">\r\n <div class=\"scroll-paper\">\r\n <div class=\"wax-seal\" id=\"waxSeal\">\r\n <i class=\"fas fa-stamp\"><\/i>\r\n <\/div>\r\n <div class=\"scroll-content\">\r\n <div class=\"scroll-text\">\r\n <h3>Nghe m\u00f4 t\u1ea3<\/h3>\r\n <p>T\u01b0 li\u1ec7u, th\u00f4ng tin v\u1ec1 di t\u00edch<\/p>\r\n <\/div>\r\n <button class=\"open-button\" id=\"openButton\">\r\n <span>M\u1ede T\u01af LI\u1ec6U<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"opened-parchment\" id=\"openedParchment\">\r\n <div class=\"parchment-left\">\r\n <button id=\"playPauseBtn\" class=\"control-btn\">\r\n <i class=\"fas fa-play\"><\/i>\r\n <\/button>\r\n <div class=\"parchment-header\">\r\n <h2>C\u00d9NG NGHE, C\u00d9NG HI\u1ec2U<\/h2>\r\n <h3 id=\"placeName\">H\u1ed3 Ho\u00e0n Ki\u1ebfm<\/h3>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"audio-player\">\r\n <audio id=\"audioElement\" src=\"https:\/\/historyhub.id.vn\/wp\/wp-content\/uploads\/2025\/06\/mp3-output-ttsfreedotcom-2.mp3\"><\/audio>\r\n \r\n <div class=\"player-controls\">\r\n <div class=\"progress-container\">\r\n <span id=\"currentTime\" class=\"time\">0:00<\/span>\r\n <div class=\"progress-bar\" id=\"progressContainer\">\r\n <div class=\"progress\" id=\"progress\"><\/div>\r\n <\/div>\r\n <span id=\"duration\" class=\"time\">0:00<\/span>\r\n <\/div>\r\n\r\n <div class=\"volume-control\">\r\n <i class=\"fas fa-volume-up\"><\/i>\r\n <input type=\"range\" id=\"volumeSlider\" min=\"0\" max=\"1\" step=\"0.01\" value=\"0.8\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"transcript\">\r\n <p id=\"transcriptText\">\"Xin k\u00ednh m\u1eddi m\u1ecdi ng\u01b0\u1eddi c\u00f9ng d\u1ea1o b\u01b0\u1edbc \u0111\u1ebfn di t\u00edch c\u00f9ng History Hub\"<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script src=\"audio-guide.js\"><\/script>\r\n<\/body>\r\n<\/html>\r\n\r\n<style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n}\r\n\r\n.audio-guide-container {\r\n max-width: 650px;\r\n margin: 0 auto;\r\n position: relative;\r\n font-family: 'Poppins', sans-serif;\r\n}\r\n\r\n\/* Sealed Scroll (Card Ngang ch\u01b0a m\u1edf) \/\r\n.sealed-scroll {\r\n position: relative;\r\n width: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: all 0.5s ease;\r\n}\r\n\r\n.scroll-paper {\r\n width: 100%;\r\n height: 140px; \/ Kh\u00f3a c\u1ee9ng chi\u1ec1u cao card ch\u01b0a m\u1edf l\u00e0 140px \/\r\n background: linear-gradient(135deg, #F6E2A5 0%, #E8D4A0 100%);\r\n border-radius: 12px 60px 12px 12px;\r\n box-shadow: 0 15px 35px -10px rgba(0,0,0,0.5),\r\n inset 0 4px 10px rgba(255,255,255,0.6),\r\n inset 0 -4px 10px rgba(138,103,50,0.3);\r\n position: relative;\r\n cursor: pointer;\r\n overflow: hidden;\r\n transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n display: flex;\r\n align-items: center;\r\n padding: 0 30px;\r\n}\r\n\r\n.sealed-scroll:hover .scroll-paper {\r\n transform: scale(1.02) rotate(1deg);\r\n}\r\n\r\n.wax-seal {\r\n position: absolute;\r\n left: 40px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n width: 80px;\r\n height: 80px;\r\n background: radial-gradient(circle at 40% 40%, #9B2C2C, #6B1F1F);\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: #F6E2A5;\r\n font-size: 2.2rem;\r\n box-shadow: 0 10px 20px rgba(0,0,0,0.4),\r\n inset 0 4px 8px rgba(255,255,255,0.3);\r\n border: 4px solid #C59A42;\r\n transition: all 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);\r\n pointer-events: none;\r\n}\r\n\r\n.scroll-content {\r\n margin-left: 110px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n width: 100%;\r\n color: #2E2115;\r\n text-align: left;\r\n pointer-events: none;\r\n}\r\n\r\n.scroll-text h3 {\r\n font-family: 'Cinzel', serif;\r\n font-size: 1.3rem;\r\n margin-bottom: 4px;\r\n}\r\n\r\n.scroll-text p {\r\n color: #5A3E1B;\r\n font-weight: 500;\r\n font-size: 0.9rem;\r\n}\r\n\r\n.open-button {\r\n margin-top: 0;\r\n padding: 10px 25px;\r\n background: #2E2115;\r\n color: #F6E2A5;\r\n border: 2px solid #C59A42;\r\n border-radius: 50px;\r\n font-size: 0.9rem;\r\n font-weight: 500;\r\n cursor: pointer;\r\n transition: all 0.4s ease;\r\n white-space: nowrap;\r\n pointer-events: auto;\r\n}\r\n\r\n.open-button:hover {\r\n background: #C59A42;\r\n color: #2E2115;\r\n}\r\n\r\n\/ Opened Parchment (Khung m\u1edf r\u1ed9ng sau khi b\u1ea5m - \u0110\u00daNG B\u1eb0NG K\u00cdCH TH\u01af\u1edaC CARD CH\u01afA M\u1ede) \/\r\n.opened-parchment {\r\n display: none; \/ JS s\u1ebd k\u00edch ho\u1ea1t chuy\u1ec3n th\u00e0nh flex \/\r\n background: linear-gradient(#F6E2A5, #E8D8B0);\r\n border-radius: 12px;\r\n padding: 15px 25px;\r\n box-shadow: 0 15px 35px -10px rgba(0,0,0,0.5),\r\n inset 0 0 80px rgba(245,220,140,0.6);\r\n position: relative;\r\n overflow: hidden;\r\n width: 100%;\r\n height: 140px; \/ Kh\u00f3a c\u1ee9ng chi\u1ec1u cao b\u1eb1ng \u0111\u00fang card c\u0169 140px \/\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 20px;\r\n}\r\n\r\n.opened-parchment::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(138,103,50,0.08) 20px, rgba(138,103,50,0.08) 40px);\r\n pointer-events: none;\r\n}\r\n\r\n\/ V\u00f9ng b\u00ean tr\u00e1i: N\u00fat Play & Ti\u00eau \u0111\u1ec1 \/\r\n.parchment-left {\r\n display: flex;\r\n align-items: center;\r\n gap: 15px;\r\n flex-shrink: 0;\r\n z-index: 1;\r\n}\r\n\r\n.parchment-header {\r\n text-align: left;\r\n}\r\n\r\n.parchment-header h2 {\r\n font-family: 'Cinzel', serif;\r\n font-size: 0.85rem;\r\n color: #8A6732;\r\n letter-spacing: 1px;\r\n}\r\n\r\n.parchment-header h3 {\r\n font-family: 'Cormorant Garamond', serif;\r\n font-size: 1.1rem;\r\n color: #2E2115;\r\n font-weight: bold;\r\n margin-top: 2px;\r\n}\r\n\r\n\/ V\u00f9ng \u1edf gi\u1eefa: B\u1ed9 \u0111i\u1ec1u khi\u1ec3n \u00e2m thanh \/\r\n.audio-player {\r\n flex: 1;\r\n background: rgba(44, 33, 21, 0.95);\r\n border-radius: 12px;\r\n padding: 12px 18px;\r\n border: 1px solid #8A6732;\r\n box-shadow: inset 0 3px 10px rgba(0,0,0,0.6);\r\n z-index: 1;\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.player-controls {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n width: 100%;\r\n}\r\n\r\n.control-btn {\r\n width: 48px;\r\n height: 48px;\r\n background: #C59A42;\r\n color: #2E2115;\r\n border: none;\r\n border-radius: 50%;\r\n font-size: 1.1rem;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n box-shadow: 0 4px 10px rgba(197,154,66,0.4);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.control-btn:hover {\r\n transform: scale(1.08);\r\n background: #F6E2A5;\r\n}\r\n\r\n.progress-container {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n width: 100%;\r\n}\r\n\r\n.progress-bar {\r\n flex: 1;\r\n height: 5px;\r\n background: #5A3E1B;\r\n border-radius: 999px;\r\n position: relative;\r\n cursor: pointer;\r\n}\r\n\r\n.progress {\r\n height: 100%;\r\n width: 0%;\r\n background: linear-gradient(to right, #C59A42, #F6E2A5);\r\n border-radius: 999px;\r\n box-shadow: 0 0 8px #F6E2A5;\r\n}\r\n\r\n.time {\r\n font-family: monospace;\r\n font-size: 0.8rem;\r\n min-width: 32px;\r\n color: #C59A42;\r\n}\r\n\r\n.volume-control {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #C59A42;\r\n justify-content: flex-end;\r\n}\r\n\r\n.volume-control i {\r\n font-size: 0.85rem;\r\n}\r\n\r\n.volume-control input {\r\n accent-color: #C59A42;\r\n width: 65px;\r\n height: 3px;\r\n}\r\n\r\n\/ V\u00f9ng b\u00ean ph\u1ea3i: V\u0103n b\u1ea3n thu nh\u1ecf \/\r\n.transcript {\r\n width: 160px;\r\n font-style: italic;\r\n color: #5A3E1B;\r\n line-height: 1.4;\r\n text-align: left;\r\n font-size: 0.78rem;\r\n border-left: 1px solid rgba(138,103,50,0.3);\r\n padding-left: 15px;\r\n z-index: 1;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 4;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n}\r\n\r\n\/ Responsive \/\r\n@media (max-width: 640px) {\r\n .audio-guide-container { \r\n padding: 0 15px; \r\n }\r\n .scroll-paper { \r\n padding: 0 15px;\r\n height: 120px;\r\n }\r\n .wax-seal {\r\n left: 15px;\r\n width: 60px;\r\n height: 60px;\r\n font-size: 1.6rem;\r\n }\r\n .scroll-content {\r\n margin-left: 75px;\r\n }\r\n .scroll-text h3 { font-size: 0.8rem; }\r\n .scroll-text p { font-size: 0.6rem; }\r\n .open-button { padding: 8px 15px; font-size: 0.8rem; }\r\n \r\n .opened-parchment { \r\n flex-direction: column; \r\n height: auto; \r\n padding: 15px;\r\n gap: 10px;\r\n }\r\n .parchment-left { width: 100%; justify-content: flex-start; }\r\n .audio-player { width: 100%; }\r\n .transcript { width: 100%; border-left: none; padding-left: 0; text-align: center; }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n document.addEventListener('DOMContentLoaded', () => {\r\n const sealedScroll = document.getElementById('sealedScroll');\r\n const openedParchment = document.getElementById('openedParchment');\r\n const openButton = document.getElementById('openButton');\r\n const waxSeal = document.getElementById('waxSeal');\r\n \r\n const audio = document.getElementById('audioElement');\r\n const playPauseBtn = document.getElementById('playPauseBtn');\r\n const progress = document.getElementById('progress');\r\n const progressContainer = document.getElementById('progressContainer');\r\n const currentTimeEl = document.getElementById('currentTime');\r\n const durationEl = document.getElementById('duration');\r\n const volumeSlider = document.getElementById('volumeSlider');\r\n\r\n let isPlaying = false;\r\n\r\n \/\/ Format time\r\n function formatTime(seconds) {\r\n if (!seconds || isNaN(seconds)) return '0:00';\r\n const min = Math.floor(seconds \/ 60);\r\n const sec = Math.floor(seconds % 60);\r\n return `${min}:${sec < 10 ? '0' : ''}${sec}`;\r\n }\r\n\r\n \/\/ Initialize audio\r\n function initAudio() {\r\n audio.volume = 0.8;\r\n \r\n audio.addEventListener('loadedmetadata', () => {\r\n durationEl.textContent = formatTime(audio.duration);\r\n });\r\n\r\n audio.addEventListener('timeupdate', () => {\r\n if (!audio.duration) return;\r\n const percent = (audio.currentTime \/ audio.duration) 100;\r\n progress.style.width = percent + '%';\r\n currentTimeEl.textContent = formatTime(audio.currentTime);\r\n });\r\n\r\n audio.addEventListener('ended', () => {\r\n isPlaying = false;\r\n playPauseBtn.innerHTML = `<i class=\"fas fa-play\"><\/i>`;\r\n });\r\n }\r\n\r\n \/\/ Open animation\r\n function openAudioGuide() {\r\n waxSeal.style.transition = 'all 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55)';\r\n waxSeal.style.transform = 'translateY(-50%) scale(1.45) rotate(28deg)';\r\n waxSeal.style.opacity = '0.25';\r\n\r\n setTimeout(() => {\r\n sealedScroll.style.opacity = '0';\r\n sealedScroll.style.transform = 'scale(0.8) translateY(50px)';\r\n\r\n setTimeout(() => {\r\n sealedScroll.style.display = 'none';\r\n \r\n \/\/ \u0110\u1ed5i hi\u1ec3n th\u1ecb sang flex cho \u0111\u00fang layout ngang\r\n openedParchment.style.display = 'flex';\r\n\r\n openedParchment.style.opacity = '0';\r\n openedParchment.style.transform = 'translateY(40px)';\r\n\r\n setTimeout(() => {\r\n openedParchment.style.transition = 'all 1s cubic-bezier(0.23,1,0.32,1)';\r\n openedParchment.style.opacity = '1';\r\n openedParchment.style.transform = 'translateY(0)';\r\n }, 50);\r\n }, 550);\r\n }, 400);\r\n }\r\n\r\n \/\/ Event Listeners\r\n openButton.addEventListener('click', (e) => {\r\n e.stopPropagation();\r\n openAudioGuide();\r\n });\r\n sealedScroll.addEventListener('click', openAudioGuide);\r\n\r\n playPauseBtn.addEventListener('click', (e) => {\r\n e.stopPropagation(); \/\/ Ng\u0103n s\u1ef1 ki\u1ec7n click lan ra ngo\u00e0i\r\n if (!audio) return;\r\n \r\n if (isPlaying) {\r\n audio.pause();\r\n playPauseBtn.innerHTML = `<i class=\"fas fa-play\"><\/i>`;\r\n } else {\r\n audio.play();\r\n playPauseBtn.innerHTML = `<i class=\"fas fa-pause\"><\/i>`;\r\n }\r\n isPlaying = !isPlaying;\r\n });\r\n\r\n progressContainer.addEventListener('click', (e) => {\r\n e.stopPropagation();\r\n const rect = progressContainer.getBoundingClientRect();\r\n const pos = (e.clientX - rect.left) \/ rect.width;\r\n audio.currentTime = pos * audio.duration;\r\n });\r\n\r\n volumeSlider.addEventListener('click', (e) => {\r\n e.stopPropagation(); \/\/ Ng\u0103n click tr\u01b0\u1ee3t volume l\u00e0m \u1ea3nh h\u01b0\u1edfng card\r\n });\r\n\r\n volumeSlider.addEventListener('input', (e) => {\r\n audio.volume = parseFloat(volumeSlider.value);\r\n });\r\n\r\n \/\/ Initialize\r\n initAudio();\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-251ad6e elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"251ad6e\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"has_eae_slider elementor-element elementor-element-497e351 e-flex e-con-boxed e-con e-parent\" data-id=\"497e351\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-185b499 elementor-widget elementor-widget-heading\" data-id=\"185b499\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\"> V\u0103n Mi\u1ebfu - Qu\u1ed1c T\u1eed Gi\u00e1m<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"has_eae_slider elementor-element elementor-element-c73f970 e-flex e-con-boxed e-con e-parent\" data-id=\"c73f970\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-04b559d elementor-widget elementor-widget-html\" data-id=\"04b559d\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<iframe src=\"https:\/\/www.google.com\/maps\/embed?pb=!4v1784212268599!6m8!1m7!1sCAoSF0NJSE0wb2dLRUlDQWdJRDQzT2I3b3dF!2m2!1d21.02890612727117!2d105.8359041663968!3f93.4015724236975!4f-3.3999125910939654!5f0.4000000000000002\" width=\"600\" height=\"450\" style=\"border:0;\" allowfullscreen=\"\" loading=\"lazy\" referrerpolicy=\"strict-origin-when-cross-origin\"><\/iframe>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"has_eae_slider elementor-element elementor-element-9abab2f e-flex e-con-boxed e-con e-parent\" data-id=\"9abab2f\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cd04fdb elementor-widget elementor-widget-html\" data-id=\"cd04fdb\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"vi\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Thuy\u1ebft Minh - Audio Guide<\/title>\r\n <link rel=\"stylesheet\" href=\"audio-guide.css\">\r\n <link href=\"https:\/\/historyhub.id.vn\/wp\/wp-content\/uploads\/2025\/07\/mp3-output-ttsfreedotcom-18.mp3\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\r\n<\/head>\r\n<body>\r\n <div class=\"audio-guide-container\">\r\n <div class=\"sealed-scroll\" id=\"sealedScroll\">\r\n <div class=\"scroll-paper\">\r\n <div class=\"wax-seal\" id=\"waxSeal\">\r\n <i class=\"fas fa-stamp\"><\/i>\r\n <\/div>\r\n <div class=\"scroll-content\">\r\n <div class=\"scroll-text\">\r\n <h3>Nghe m\u00f4 t\u1ea3<\/h3>\r\n <p>T\u01b0 li\u1ec7u, th\u00f4ng tin v\u1ec1 di t\u00edch<\/p>\r\n <\/div>\r\n <button class=\"open-button\" id=\"openButton\">\r\n <span>M\u1ede T\u01af LI\u1ec6U<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"opened-parchment\" id=\"openedParchment\">\r\n <div class=\"parchment-left\">\r\n <button id=\"playPauseBtn\" class=\"control-btn\">\r\n <i class=\"fas fa-play\"><\/i>\r\n <\/button>\r\n <div class=\"parchment-header\">\r\n <h2>C\u00d9NG NGHE, C\u00d9NG HI\u1ec2U<\/h2>\r\n <h3 id=\"placeName\">V\u0103n Mi\u1ebfu - Qu\u1ed1c T\u1eed Gi\u00e1m<\/h3>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"audio-player\">\r\n <audio id=\"audioElement\" src=\"https:\/\/historyhub.id.vn\/wp\/wp-content\/uploads\/2025\/06\/mp3-output-ttsfreedotcom-3.mp3\"><\/audio>\r\n \r\n <div class=\"player-controls\">\r\n <div class=\"progress-container\">\r\n <span id=\"currentTime\" class=\"time\">0:00<\/span>\r\n <div class=\"progress-bar\" id=\"progressContainer\">\r\n <div class=\"progress\" id=\"progress\"><\/div>\r\n <\/div>\r\n <span id=\"duration\" class=\"time\">0:00<\/span>\r\n <\/div>\r\n\r\n <div class=\"volume-control\">\r\n <i class=\"fas fa-volume-up\"><\/i>\r\n <input type=\"range\" id=\"volumeSlider\" min=\"0\" max=\"1\" step=\"0.01\" value=\"0.8\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"transcript\">\r\n <p id=\"transcriptText\">\"Xin k\u00ednh m\u1eddi m\u1ecdi ng\u01b0\u1eddi c\u00f9ng d\u1ea1o b\u01b0\u1edbc \u0111\u1ebfn di t\u00edch c\u00f9ng History Hub\"<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script src=\"audio-guide.js\"><\/script>\r\n<\/body>\r\n<\/html>\r\n\r\n<style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n}\r\n\r\n.audio-guide-container {\r\n max-width: 650px;\r\n margin: 0 auto;\r\n position: relative;\r\n font-family: 'Poppins', sans-serif;\r\n}\r\n\r\n\/* Sealed Scroll (Card Ngang ch\u01b0a m\u1edf) \/\r\n.sealed-scroll {\r\n position: relative;\r\n width: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: all 0.5s ease;\r\n}\r\n\r\n.scroll-paper {\r\n width: 100%;\r\n height: 140px; \/ Kh\u00f3a c\u1ee9ng chi\u1ec1u cao card ch\u01b0a m\u1edf l\u00e0 140px \/\r\n background: linear-gradient(135deg, #F6E2A5 0%, #E8D4A0 100%);\r\n border-radius: 12px 60px 12px 12px;\r\n box-shadow: 0 15px 35px -10px rgba(0,0,0,0.5),\r\n inset 0 4px 10px rgba(255,255,255,0.6),\r\n inset 0 -4px 10px rgba(138,103,50,0.3);\r\n position: relative;\r\n cursor: pointer;\r\n overflow: hidden;\r\n transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n display: flex;\r\n align-items: center;\r\n padding: 0 30px;\r\n}\r\n\r\n.sealed-scroll:hover .scroll-paper {\r\n transform: scale(1.02) rotate(1deg);\r\n}\r\n\r\n.wax-seal {\r\n position: absolute;\r\n left: 40px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n width: 80px;\r\n height: 80px;\r\n background: radial-gradient(circle at 40% 40%, #9B2C2C, #6B1F1F);\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: #F6E2A5;\r\n font-size: 2.2rem;\r\n box-shadow: 0 10px 20px rgba(0,0,0,0.4),\r\n inset 0 4px 8px rgba(255,255,255,0.3);\r\n border: 4px solid #C59A42;\r\n transition: all 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);\r\n pointer-events: none;\r\n}\r\n\r\n.scroll-content {\r\n margin-left: 110px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n width: 100%;\r\n color: #2E2115;\r\n text-align: left;\r\n pointer-events: none;\r\n}\r\n\r\n.scroll-text h3 {\r\n font-family: 'Cinzel', serif;\r\n font-size: 1.3rem;\r\n margin-bottom: 4px;\r\n}\r\n\r\n.scroll-text p {\r\n color: #5A3E1B;\r\n font-weight: 500;\r\n font-size: 0.9rem;\r\n}\r\n\r\n.open-button {\r\n margin-top: 0;\r\n padding: 10px 25px;\r\n background: #2E2115;\r\n color: #F6E2A5;\r\n border: 2px solid #C59A42;\r\n border-radius: 50px;\r\n font-size: 0.9rem;\r\n font-weight: 500;\r\n cursor: pointer;\r\n transition: all 0.4s ease;\r\n white-space: nowrap;\r\n pointer-events: auto;\r\n}\r\n\r\n.open-button:hover {\r\n background: #C59A42;\r\n color: #2E2115;\r\n}\r\n\r\n\/ Opened Parchment (Khung m\u1edf r\u1ed9ng sau khi b\u1ea5m - \u0110\u00daNG B\u1eb0NG K\u00cdCH TH\u01af\u1edaC CARD CH\u01afA M\u1ede) \/\r\n.opened-parchment {\r\n display: none; \/ JS s\u1ebd k\u00edch ho\u1ea1t chuy\u1ec3n th\u00e0nh flex \/\r\n background: linear-gradient(#F6E2A5, #E8D8B0);\r\n border-radius: 12px;\r\n padding: 15px 25px;\r\n box-shadow: 0 15px 35px -10px rgba(0,0,0,0.5),\r\n inset 0 0 80px rgba(245,220,140,0.6);\r\n position: relative;\r\n overflow: hidden;\r\n width: 100%;\r\n height: 140px; \/ Kh\u00f3a c\u1ee9ng chi\u1ec1u cao b\u1eb1ng \u0111\u00fang card c\u0169 140px \/\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 20px;\r\n}\r\n\r\n.opened-parchment::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(138,103,50,0.08) 20px, rgba(138,103,50,0.08) 40px);\r\n pointer-events: none;\r\n}\r\n\r\n\/ V\u00f9ng b\u00ean tr\u00e1i: N\u00fat Play & Ti\u00eau \u0111\u1ec1 \/\r\n.parchment-left {\r\n display: flex;\r\n align-items: center;\r\n gap: 15px;\r\n flex-shrink: 0;\r\n z-index: 1;\r\n}\r\n\r\n.parchment-header {\r\n text-align: left;\r\n}\r\n\r\n.parchment-header h2 {\r\n font-family: 'Cinzel', serif;\r\n font-size: 0.85rem;\r\n color: #8A6732;\r\n letter-spacing: 1px;\r\n}\r\n\r\n.parchment-header h3 {\r\n font-family: 'Cormorant Garamond', serif;\r\n font-size: 1.1rem;\r\n color: #2E2115;\r\n font-weight: bold;\r\n margin-top: 2px;\r\n}\r\n\r\n\/ V\u00f9ng \u1edf gi\u1eefa: B\u1ed9 \u0111i\u1ec1u khi\u1ec3n \u00e2m thanh \/\r\n.audio-player {\r\n flex: 1;\r\n background: rgba(44, 33, 21, 0.95);\r\n border-radius: 12px;\r\n padding: 12px 18px;\r\n border: 1px solid #8A6732;\r\n box-shadow: inset 0 3px 10px rgba(0,0,0,0.6);\r\n z-index: 1;\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.player-controls {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n width: 100%;\r\n}\r\n\r\n.control-btn {\r\n width: 48px;\r\n height: 48px;\r\n background: #C59A42;\r\n color: #2E2115;\r\n border: none;\r\n border-radius: 50%;\r\n font-size: 1.1rem;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n box-shadow: 0 4px 10px rgba(197,154,66,0.4);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.control-btn:hover {\r\n transform: scale(1.08);\r\n background: #F6E2A5;\r\n}\r\n\r\n.progress-container {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n width: 100%;\r\n}\r\n\r\n.progress-bar {\r\n flex: 1;\r\n height: 5px;\r\n background: #5A3E1B;\r\n border-radius: 999px;\r\n position: relative;\r\n cursor: pointer;\r\n}\r\n\r\n.progress {\r\n height: 100%;\r\n width: 0%;\r\n background: linear-gradient(to right, #C59A42, #F6E2A5);\r\n border-radius: 999px;\r\n box-shadow: 0 0 8px #F6E2A5;\r\n}\r\n\r\n.time {\r\n font-family: monospace;\r\n font-size: 0.8rem;\r\n min-width: 32px;\r\n color: #C59A42;\r\n}\r\n\r\n.volume-control {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #C59A42;\r\n justify-content: flex-end;\r\n}\r\n\r\n.volume-control i {\r\n font-size: 0.85rem;\r\n}\r\n\r\n.volume-control input {\r\n accent-color: #C59A42;\r\n width: 65px;\r\n height: 3px;\r\n}\r\n\r\n\/ V\u00f9ng b\u00ean ph\u1ea3i: V\u0103n b\u1ea3n thu nh\u1ecf \/\r\n.transcript {\r\n width: 160px;\r\n font-style: italic;\r\n color: #5A3E1B;\r\n line-height: 1.4;\r\n text-align: left;\r\n font-size: 0.78rem;\r\n border-left: 1px solid rgba(138,103,50,0.3);\r\n padding-left: 15px;\r\n z-index: 1;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 4;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n}\r\n\r\n\/ Responsive \/\r\n@media (max-width: 640px) {\r\n .audio-guide-container { \r\n padding: 0 15px; \r\n }\r\n .scroll-paper { \r\n padding: 0 15px;\r\n height: 120px;\r\n }\r\n .wax-seal {\r\n left: 15px;\r\n width: 60px;\r\n height: 60px;\r\n font-size: 1.6rem;\r\n }\r\n .scroll-content {\r\n margin-left: 75px;\r\n }\r\n .scroll-text h3 { font-size: 0.8rem; }\r\n .scroll-text p { font-size: 0.6rem; }\r\n .open-button { padding: 8px 15px; font-size: 0.8rem; }\r\n \r\n .opened-parchment { \r\n flex-direction: column; \r\n height: auto; \r\n padding: 15px;\r\n gap: 10px;\r\n }\r\n .parchment-left { width: 100%; justify-content: flex-start; }\r\n .audio-player { width: 100%; }\r\n .transcript { width: 100%; border-left: none; padding-left: 0; text-align: center; }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n document.addEventListener('DOMContentLoaded', () => {\r\n const sealedScroll = document.getElementById('sealedScroll');\r\n const openedParchment = document.getElementById('openedParchment');\r\n const openButton = document.getElementById('openButton');\r\n const waxSeal = document.getElementById('waxSeal');\r\n \r\n const audio = document.getElementById('audioElement');\r\n const playPauseBtn = document.getElementById('playPauseBtn');\r\n const progress = document.getElementById('progress');\r\n const progressContainer = document.getElementById('progressContainer');\r\n const currentTimeEl = document.getElementById('currentTime');\r\n const durationEl = document.getElementById('duration');\r\n const volumeSlider = document.getElementById('volumeSlider');\r\n\r\n let isPlaying = false;\r\n\r\n \/\/ Format time\r\n function formatTime(seconds) {\r\n if (!seconds || isNaN(seconds)) return '0:00';\r\n const min = Math.floor(seconds \/ 60);\r\n const sec = Math.floor(seconds % 60);\r\n return `${min}:${sec < 10 ? '0' : ''}${sec}`;\r\n }\r\n\r\n \/\/ Initialize audio\r\n function initAudio() {\r\n audio.volume = 0.8;\r\n \r\n audio.addEventListener('loadedmetadata', () => {\r\n durationEl.textContent = formatTime(audio.duration);\r\n });\r\n\r\n audio.addEventListener('timeupdate', () => {\r\n if (!audio.duration) return;\r\n const percent = (audio.currentTime \/ audio.duration) 100;\r\n progress.style.width = percent + '%';\r\n currentTimeEl.textContent = formatTime(audio.currentTime);\r\n });\r\n\r\n audio.addEventListener('ended', () => {\r\n isPlaying = false;\r\n playPauseBtn.innerHTML = `<i class=\"fas fa-play\"><\/i>`;\r\n });\r\n }\r\n\r\n \/\/ Open animation\r\n function openAudioGuide() {\r\n waxSeal.style.transition = 'all 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55)';\r\n waxSeal.style.transform = 'translateY(-50%) scale(1.45) rotate(28deg)';\r\n waxSeal.style.opacity = '0.25';\r\n\r\n setTimeout(() => {\r\n sealedScroll.style.opacity = '0';\r\n sealedScroll.style.transform = 'scale(0.8) translateY(50px)';\r\n\r\n setTimeout(() => {\r\n sealedScroll.style.display = 'none';\r\n \r\n \/\/ \u0110\u1ed5i hi\u1ec3n th\u1ecb sang flex cho \u0111\u00fang layout ngang\r\n openedParchment.style.display = 'flex';\r\n\r\n openedParchment.style.opacity = '0';\r\n openedParchment.style.transform = 'translateY(40px)';\r\n\r\n setTimeout(() => {\r\n openedParchment.style.transition = 'all 1s cubic-bezier(0.23,1,0.32,1)';\r\n openedParchment.style.opacity = '1';\r\n openedParchment.style.transform = 'translateY(0)';\r\n }, 50);\r\n }, 550);\r\n }, 400);\r\n }\r\n\r\n \/\/ Event Listeners\r\n openButton.addEventListener('click', (e) => {\r\n e.stopPropagation();\r\n openAudioGuide();\r\n });\r\n sealedScroll.addEventListener('click', openAudioGuide);\r\n\r\n playPauseBtn.addEventListener('click', (e) => {\r\n e.stopPropagation(); \/\/ Ng\u0103n s\u1ef1 ki\u1ec7n click lan ra ngo\u00e0i\r\n if (!audio) return;\r\n \r\n if (isPlaying) {\r\n audio.pause();\r\n playPauseBtn.innerHTML = `<i class=\"fas fa-play\"><\/i>`;\r\n } else {\r\n audio.play();\r\n playPauseBtn.innerHTML = `<i class=\"fas fa-pause\"><\/i>`;\r\n }\r\n isPlaying = !isPlaying;\r\n });\r\n\r\n progressContainer.addEventListener('click', (e) => {\r\n e.stopPropagation();\r\n const rect = progressContainer.getBoundingClientRect();\r\n const pos = (e.clientX - rect.left) \/ rect.width;\r\n audio.currentTime = pos * audio.duration;\r\n });\r\n\r\n volumeSlider.addEventListener('click', (e) => {\r\n e.stopPropagation(); \/\/ Ng\u0103n click tr\u01b0\u1ee3t volume l\u00e0m \u1ea3nh h\u01b0\u1edfng card\r\n });\r\n\r\n volumeSlider.addEventListener('input', (e) => {\r\n audio.volume = parseFloat(volumeSlider.value);\r\n });\r\n\r\n \/\/ Initialize\r\n initAudio();\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-98e29a4 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"98e29a4\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"has_eae_slider elementor-element elementor-element-ec604a5 e-flex e-con-boxed e-con e-parent\" data-id=\"ec604a5\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5022a43 elementor-widget elementor-widget-heading\" data-id=\"5022a43\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Dinh \u0110\u1ed9c L\u1eadp<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"has_eae_slider elementor-element elementor-element-6dccf14 e-flex e-con-boxed e-con e-parent\" data-id=\"6dccf14\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9bdb88f elementor-widget elementor-widget-html\" data-id=\"9bdb88f\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<iframe src=\"https:\/\/www.google.com\/maps\/embed?pb=!4v1784213105510!6m8!1m7!1sCAoSF0NJSE0wb2dLRUlDQWdJRFI5dkNZOWdF!2m2!1d10.77699416993686!2d106.6953021096846!3f351.91126414517475!4f8.276848364453386!5f0.4000000000000002\" width=\"600\" height=\"450\" style=\"border:0;\" allowfullscreen=\"\" loading=\"lazy\" referrerpolicy=\"strict-origin-when-cross-origin\"><\/iframe>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"has_eae_slider elementor-element elementor-element-562546c e-flex e-con-boxed e-con e-parent\" data-id=\"562546c\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fbfa319 elementor-widget elementor-widget-html\" data-id=\"fbfa319\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"vi\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Thuy\u1ebft Minh - Audio Guide<\/title>\r\n <link rel=\"stylesheet\" href=\"audio-guide.css\">\r\n <link href=\"https:\/\/historyhub.id.vn\/wp\/wp-content\/uploads\/2025\/07\/mp3-output-ttsfreedotcom-18.mp3\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\r\n<\/head>\r\n<body>\r\n <div class=\"audio-guide-container\">\r\n <div class=\"sealed-scroll\" id=\"sealedScroll\">\r\n <div class=\"scroll-paper\">\r\n <div class=\"wax-seal\" id=\"waxSeal\">\r\n <i class=\"fas fa-stamp\"><\/i>\r\n <\/div>\r\n <div class=\"scroll-content\">\r\n <div class=\"scroll-text\">\r\n <h3>Nghe m\u00f4 t\u1ea3<\/h3>\r\n <p>T\u01b0 li\u1ec7u, th\u00f4ng tin v\u1ec1 di t\u00edch<\/p>\r\n <\/div>\r\n <button class=\"open-button\" id=\"openButton\">\r\n <span>M\u1ede T\u01af LI\u1ec6U<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"opened-parchment\" id=\"openedParchment\">\r\n <div class=\"parchment-left\">\r\n <button id=\"playPauseBtn\" class=\"control-btn\">\r\n <i class=\"fas fa-play\"><\/i>\r\n <\/button>\r\n <div class=\"parchment-header\">\r\n <h2>C\u00d9NG NGHE, C\u00d9NG HI\u1ec2U<\/h2>\r\n <h3 id=\"placeName\">Dinh \u0110\u1ed9c L\u1eadp<\/h3>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"audio-player\">\r\n <audio id=\"audioElement\" src=\"https:\/\/historyhub.id.vn\/wp\/wp-content\/uploads\/2026\/07\/Dinh-Doc-Lap.mp3\"><\/audio>\r\n \r\n <div class=\"player-controls\">\r\n <div class=\"progress-container\">\r\n <span id=\"currentTime\" class=\"time\">0:00<\/span>\r\n <div class=\"progress-bar\" id=\"progressContainer\">\r\n <div class=\"progress\" id=\"progress\"><\/div>\r\n <\/div>\r\n <span id=\"duration\" class=\"time\">0:00<\/span>\r\n <\/div>\r\n\r\n <div class=\"volume-control\">\r\n <i class=\"fas fa-volume-up\"><\/i>\r\n <input type=\"range\" id=\"volumeSlider\" min=\"0\" max=\"1\" step=\"0.01\" value=\"0.8\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"transcript\">\r\n <p id=\"transcriptText\">\"Xin k\u00ednh m\u1eddi m\u1ecdi ng\u01b0\u1eddi c\u00f9ng d\u1ea1o b\u01b0\u1edbc \u0111\u1ebfn di t\u00edch c\u00f9ng History Hub\"<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script src=\"audio-guide.js\"><\/script>\r\n<\/body>\r\n<\/html>\r\n\r\n<style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n}\r\n\r\n.audio-guide-container {\r\n max-width: 650px;\r\n margin: 0 auto;\r\n position: relative;\r\n font-family: 'Poppins', sans-serif;\r\n}\r\n\r\n\/* Sealed Scroll (Card Ngang ch\u01b0a m\u1edf) \/\r\n.sealed-scroll {\r\n position: relative;\r\n width: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: all 0.5s ease;\r\n}\r\n\r\n.scroll-paper {\r\n width: 100%;\r\n height: 140px; \/ Kh\u00f3a c\u1ee9ng chi\u1ec1u cao card ch\u01b0a m\u1edf l\u00e0 140px \/\r\n background: linear-gradient(135deg, #F6E2A5 0%, #E8D4A0 100%);\r\n border-radius: 12px 60px 12px 12px;\r\n box-shadow: 0 15px 35px -10px rgba(0,0,0,0.5),\r\n inset 0 4px 10px rgba(255,255,255,0.6),\r\n inset 0 -4px 10px rgba(138,103,50,0.3);\r\n position: relative;\r\n cursor: pointer;\r\n overflow: hidden;\r\n transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n display: flex;\r\n align-items: center;\r\n padding: 0 30px;\r\n}\r\n\r\n.sealed-scroll:hover .scroll-paper {\r\n transform: scale(1.02) rotate(1deg);\r\n}\r\n\r\n.wax-seal {\r\n position: absolute;\r\n left: 40px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n width: 80px;\r\n height: 80px;\r\n background: radial-gradient(circle at 40% 40%, #9B2C2C, #6B1F1F);\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: #F6E2A5;\r\n font-size: 2.2rem;\r\n box-shadow: 0 10px 20px rgba(0,0,0,0.4),\r\n inset 0 4px 8px rgba(255,255,255,0.3);\r\n border: 4px solid #C59A42;\r\n transition: all 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);\r\n pointer-events: none;\r\n}\r\n\r\n.scroll-content {\r\n margin-left: 110px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n width: 100%;\r\n color: #2E2115;\r\n text-align: left;\r\n pointer-events: none;\r\n}\r\n\r\n.scroll-text h3 {\r\n font-family: 'Cinzel', serif;\r\n font-size: 1.3rem;\r\n margin-bottom: 4px;\r\n}\r\n\r\n.scroll-text p {\r\n color: #5A3E1B;\r\n font-weight: 500;\r\n font-size: 0.9rem;\r\n}\r\n\r\n.open-button {\r\n margin-top: 0;\r\n padding: 10px 25px;\r\n background: #2E2115;\r\n color: #F6E2A5;\r\n border: 2px solid #C59A42;\r\n border-radius: 50px;\r\n font-size: 0.9rem;\r\n font-weight: 500;\r\n cursor: pointer;\r\n transition: all 0.4s ease;\r\n white-space: nowrap;\r\n pointer-events: auto;\r\n}\r\n\r\n.open-button:hover {\r\n background: #C59A42;\r\n color: #2E2115;\r\n}\r\n\r\n\/ Opened Parchment (Khung m\u1edf r\u1ed9ng sau khi b\u1ea5m - \u0110\u00daNG B\u1eb0NG K\u00cdCH TH\u01af\u1edaC CARD CH\u01afA M\u1ede) \/\r\n.opened-parchment {\r\n display: none; \/ JS s\u1ebd k\u00edch ho\u1ea1t chuy\u1ec3n th\u00e0nh flex \/\r\n background: linear-gradient(#F6E2A5, #E8D8B0);\r\n border-radius: 12px;\r\n padding: 15px 25px;\r\n box-shadow: 0 15px 35px -10px rgba(0,0,0,0.5),\r\n inset 0 0 80px rgba(245,220,140,0.6);\r\n position: relative;\r\n overflow: hidden;\r\n width: 100%;\r\n height: 140px; \/ Kh\u00f3a c\u1ee9ng chi\u1ec1u cao b\u1eb1ng \u0111\u00fang card c\u0169 140px \/\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 20px;\r\n}\r\n\r\n.opened-parchment::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(138,103,50,0.08) 20px, rgba(138,103,50,0.08) 40px);\r\n pointer-events: none;\r\n}\r\n\r\n\/ V\u00f9ng b\u00ean tr\u00e1i: N\u00fat Play & Ti\u00eau \u0111\u1ec1 \/\r\n.parchment-left {\r\n display: flex;\r\n align-items: center;\r\n gap: 15px;\r\n flex-shrink: 0;\r\n z-index: 1;\r\n}\r\n\r\n.parchment-header {\r\n text-align: left;\r\n}\r\n\r\n.parchment-header h2 {\r\n font-family: 'Cinzel', serif;\r\n font-size: 0.85rem;\r\n color: #8A6732;\r\n letter-spacing: 1px;\r\n}\r\n\r\n.parchment-header h3 {\r\n font-family: 'Cormorant Garamond', serif;\r\n font-size: 1.1rem;\r\n color: #2E2115;\r\n font-weight: bold;\r\n margin-top: 2px;\r\n}\r\n\r\n\/ V\u00f9ng \u1edf gi\u1eefa: B\u1ed9 \u0111i\u1ec1u khi\u1ec3n \u00e2m thanh \/\r\n.audio-player {\r\n flex: 1;\r\n background: rgba(44, 33, 21, 0.95);\r\n border-radius: 12px;\r\n padding: 12px 18px;\r\n border: 1px solid #8A6732;\r\n box-shadow: inset 0 3px 10px rgba(0,0,0,0.6);\r\n z-index: 1;\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.player-controls {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n width: 100%;\r\n}\r\n\r\n.control-btn {\r\n width: 48px;\r\n height: 48px;\r\n background: #C59A42;\r\n color: #2E2115;\r\n border: none;\r\n border-radius: 50%;\r\n font-size: 1.1rem;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n box-shadow: 0 4px 10px rgba(197,154,66,0.4);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.control-btn:hover {\r\n transform: scale(1.08);\r\n background: #F6E2A5;\r\n}\r\n\r\n.progress-container {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n width: 100%;\r\n}\r\n\r\n.progress-bar {\r\n flex: 1;\r\n height: 5px;\r\n background: #5A3E1B;\r\n border-radius: 999px;\r\n position: relative;\r\n cursor: pointer;\r\n}\r\n\r\n.progress {\r\n height: 100%;\r\n width: 0%;\r\n background: linear-gradient(to right, #C59A42, #F6E2A5);\r\n border-radius: 999px;\r\n box-shadow: 0 0 8px #F6E2A5;\r\n}\r\n\r\n.time {\r\n font-family: monospace;\r\n font-size: 0.8rem;\r\n min-width: 32px;\r\n color: #C59A42;\r\n}\r\n\r\n.volume-control {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #C59A42;\r\n justify-content: flex-end;\r\n}\r\n\r\n.volume-control i {\r\n font-size: 0.85rem;\r\n}\r\n\r\n.volume-control input {\r\n accent-color: #C59A42;\r\n width: 65px;\r\n height: 3px;\r\n}\r\n\r\n\/ V\u00f9ng b\u00ean ph\u1ea3i: V\u0103n b\u1ea3n thu nh\u1ecf \/\r\n.transcript {\r\n width: 160px;\r\n font-style: italic;\r\n color: #5A3E1B;\r\n line-height: 1.4;\r\n text-align: left;\r\n font-size: 0.78rem;\r\n border-left: 1px solid rgba(138,103,50,0.3);\r\n padding-left: 15px;\r\n z-index: 1;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 4;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n}\r\n\r\n\/ Responsive \/\r\n@media (max-width: 640px) {\r\n .audio-guide-container { \r\n padding: 0 15px; \r\n }\r\n .scroll-paper { \r\n padding: 0 15px;\r\n height: 120px;\r\n }\r\n .wax-seal {\r\n left: 15px;\r\n width: 60px;\r\n height: 60px;\r\n font-size: 1.6rem;\r\n }\r\n .scroll-content {\r\n margin-left: 75px;\r\n }\r\n .scroll-text h3 { font-size: 0.8rem; }\r\n .scroll-text p { font-size: 0.6rem; }\r\n .open-button { padding: 8px 15px; font-size: 0.8rem; }\r\n \r\n .opened-parchment { \r\n flex-direction: column; \r\n height: auto; \r\n padding: 15px;\r\n gap: 10px;\r\n }\r\n .parchment-left { width: 100%; justify-content: flex-start; }\r\n .audio-player { width: 100%; }\r\n .transcript { width: 100%; border-left: none; padding-left: 0; text-align: center; }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n document.addEventListener('DOMContentLoaded', () => {\r\n const sealedScroll = document.getElementById('sealedScroll');\r\n const openedParchment = document.getElementById('openedParchment');\r\n const openButton = document.getElementById('openButton');\r\n const waxSeal = document.getElementById('waxSeal');\r\n \r\n const audio = document.getElementById('audioElement');\r\n const playPauseBtn = document.getElementById('playPauseBtn');\r\n const progress = document.getElementById('progress');\r\n const progressContainer = document.getElementById('progressContainer');\r\n const currentTimeEl = document.getElementById('currentTime');\r\n const durationEl = document.getElementById('duration');\r\n const volumeSlider = document.getElementById('volumeSlider');\r\n\r\n let isPlaying = false;\r\n\r\n \/\/ Format time\r\n function formatTime(seconds) {\r\n if (!seconds || isNaN(seconds)) return '0:00';\r\n const min = Math.floor(seconds \/ 60);\r\n const sec = Math.floor(seconds % 60);\r\n return `${min}:${sec < 10 ? '0' : ''}${sec}`;\r\n }\r\n\r\n \/\/ Initialize audio\r\n function initAudio() {\r\n audio.volume = 0.8;\r\n \r\n audio.addEventListener('loadedmetadata', () => {\r\n durationEl.textContent = formatTime(audio.duration);\r\n });\r\n\r\n audio.addEventListener('timeupdate', () => {\r\n if (!audio.duration) return;\r\n const percent = (audio.currentTime \/ audio.duration) 100;\r\n progress.style.width = percent + '%';\r\n currentTimeEl.textContent = formatTime(audio.currentTime);\r\n });\r\n\r\n audio.addEventListener('ended', () => {\r\n isPlaying = false;\r\n playPauseBtn.innerHTML = `<i class=\"fas fa-play\"><\/i>`;\r\n });\r\n }\r\n\r\n \/\/ Open animation\r\n function openAudioGuide() {\r\n waxSeal.style.transition = 'all 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55)';\r\n waxSeal.style.transform = 'translateY(-50%) scale(1.45) rotate(28deg)';\r\n waxSeal.style.opacity = '0.25';\r\n\r\n setTimeout(() => {\r\n sealedScroll.style.opacity = '0';\r\n sealedScroll.style.transform = 'scale(0.8) translateY(50px)';\r\n\r\n setTimeout(() => {\r\n sealedScroll.style.display = 'none';\r\n \r\n \/\/ \u0110\u1ed5i hi\u1ec3n th\u1ecb sang flex cho \u0111\u00fang layout ngang\r\n openedParchment.style.display = 'flex';\r\n\r\n openedParchment.style.opacity = '0';\r\n openedParchment.style.transform = 'translateY(40px)';\r\n\r\n setTimeout(() => {\r\n openedParchment.style.transition = 'all 1s cubic-bezier(0.23,1,0.32,1)';\r\n openedParchment.style.opacity = '1';\r\n openedParchment.style.transform = 'translateY(0)';\r\n }, 50);\r\n }, 550);\r\n }, 400);\r\n }\r\n\r\n \/\/ Event Listeners\r\n openButton.addEventListener('click', (e) => {\r\n e.stopPropagation();\r\n openAudioGuide();\r\n });\r\n sealedScroll.addEventListener('click', openAudioGuide);\r\n\r\n playPauseBtn.addEventListener('click', (e) => {\r\n e.stopPropagation(); \/\/ Ng\u0103n s\u1ef1 ki\u1ec7n click lan ra ngo\u00e0i\r\n if (!audio) return;\r\n \r\n if (isPlaying) {\r\n audio.pause();\r\n playPauseBtn.innerHTML = `<i class=\"fas fa-play\"><\/i>`;\r\n } else {\r\n audio.play();\r\n playPauseBtn.innerHTML = `<i class=\"fas fa-pause\"><\/i>`;\r\n }\r\n isPlaying = !isPlaying;\r\n });\r\n\r\n progressContainer.addEventListener('click', (e) => {\r\n e.stopPropagation();\r\n const rect = progressContainer.getBoundingClientRect();\r\n const pos = (e.clientX - rect.left) \/ rect.width;\r\n audio.currentTime = pos * audio.duration;\r\n });\r\n\r\n volumeSlider.addEventListener('click', (e) => {\r\n e.stopPropagation(); \/\/ Ng\u0103n click tr\u01b0\u1ee3t volume l\u00e0m \u1ea3nh h\u01b0\u1edfng card\r\n });\r\n\r\n volumeSlider.addEventListener('input', (e) => {\r\n audio.volume = parseFloat(volumeSlider.value);\r\n });\r\n\r\n \/\/ Initialize\r\n initAudio();\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"has_eae_slider elementor-element elementor-element-a450f4e e-flex e-con-boxed e-con e-parent\" data-id=\"a450f4e\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-35d6354 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"35d6354\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"has_eae_slider elementor-element elementor-element-036cd8e e-flex e-con-boxed e-con e-parent\" data-id=\"036cd8e\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d885891 elementor-widget elementor-widget-heading\" data-id=\"d885891\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Di t\u00edch l\u1ecbch s\u1eed P\u00e1c B\u00f3<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"has_eae_slider elementor-element elementor-element-1f170a8 e-flex e-con-boxed e-con e-parent\" data-id=\"1f170a8\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ce37013 elementor-widget elementor-widget-html\" data-id=\"ce37013\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<iframe src=\"https:\/\/www.google.com\/maps\/embed?pb=!4v1784258703842!6m8!1m7!1sCAoSHENJQUJJaEJKaU1JMjR5RlJkRWRDQW12elRqTmM.!2m2!1d22.97786002705249!2d106.0503560061201!3f4.370703860608103!4f-43.25958780080053!5f0.6061731953494907\" width=\"600\" height=\"450\" style=\"border:0;\" allowfullscreen=\"\" loading=\"lazy\" referrerpolicy=\"strict-origin-when-cross-origin\"><\/iframe>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"has_eae_slider elementor-element elementor-element-18ebe82 e-flex e-con-boxed e-con e-parent\" data-id=\"18ebe82\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d3c86ed elementor-widget elementor-widget-html\" data-id=\"d3c86ed\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"vi\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Thuy\u1ebft Minh - Audio Guide<\/title>\r\n <link rel=\"stylesheet\" href=\"audio-guide.css\">\r\n <link href=\"https:\/\/historyhub.id.vn\/wp\/wp-content\/uploads\/2025\/07\/mp3-output-ttsfreedotcom-18.mp3\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\r\n<\/head>\r\n<body>\r\n <div class=\"audio-guide-container\">\r\n <div class=\"sealed-scroll\" id=\"sealedScroll\">\r\n <div class=\"scroll-paper\">\r\n <div class=\"wax-seal\" id=\"waxSeal\">\r\n <i class=\"fas fa-stamp\"><\/i>\r\n <\/div>\r\n <div class=\"scroll-content\">\r\n <div class=\"scroll-text\">\r\n <h3>Nghe m\u00f4 t\u1ea3<\/h3>\r\n <p>T\u01b0 li\u1ec7u, th\u00f4ng tin v\u1ec1 di t\u00edch<\/p>\r\n <\/div>\r\n <button class=\"open-button\" id=\"openButton\">\r\n <span>M\u1ede T\u01af LI\u1ec6U<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"opened-parchment\" id=\"openedParchment\">\r\n <div class=\"parchment-left\">\r\n <button id=\"playPauseBtn\" class=\"control-btn\">\r\n <i class=\"fas fa-play\"><\/i>\r\n <\/button>\r\n <div class=\"parchment-header\">\r\n <h2>C\u00d9NG NGHE, C\u00d9NG HI\u1ec2U<\/h2>\r\n <h3 id=\"placeName\">Di t\u00edch l\u1ecbch s\u1eed P\u00e1c B\u00f3\u200b<\/h3>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"audio-player\">\r\n <audio id=\"audioElement\" src=\"https:\/\/historyhub.id.vn\/wp\/wp-content\/uploads\/2026\/07\/Di-tich-lich-su-Pac-Bo\u200b.mp3\"><\/audio>\r\n \r\n <div class=\"player-controls\">\r\n <div class=\"progress-container\">\r\n <span id=\"currentTime\" class=\"time\">0:00<\/span>\r\n <div class=\"progress-bar\" id=\"progressContainer\">\r\n <div class=\"progress\" id=\"progress\"><\/div>\r\n <\/div>\r\n <span id=\"duration\" class=\"time\">0:00<\/span>\r\n <\/div>\r\n\r\n <div class=\"volume-control\">\r\n <i class=\"fas fa-volume-up\"><\/i>\r\n <input type=\"range\" id=\"volumeSlider\" min=\"0\" max=\"1\" step=\"0.01\" value=\"0.8\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"transcript\">\r\n <p id=\"transcriptText\">\"Xin k\u00ednh m\u1eddi m\u1ecdi ng\u01b0\u1eddi c\u00f9ng d\u1ea1o b\u01b0\u1edbc \u0111\u1ebfn di t\u00edch c\u00f9ng History Hub\"<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script src=\"audio-guide.js\"><\/script>\r\n<\/body>\r\n<\/html>\r\n\r\n<style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n}\r\n\r\n.audio-guide-container {\r\n max-width: 650px;\r\n margin: 0 auto;\r\n position: relative;\r\n font-family: 'Poppins', sans-serif;\r\n}\r\n\r\n\/* Sealed Scroll (Card Ngang ch\u01b0a m\u1edf) \/\r\n.sealed-scroll {\r\n position: relative;\r\n width: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: all 0.5s ease;\r\n}\r\n\r\n.scroll-paper {\r\n width: 100%;\r\n height: 140px; \/ Kh\u00f3a c\u1ee9ng chi\u1ec1u cao card ch\u01b0a m\u1edf l\u00e0 140px \/\r\n background: linear-gradient(135deg, #F6E2A5 0%, #E8D4A0 100%);\r\n border-radius: 12px 60px 12px 12px;\r\n box-shadow: 0 15px 35px -10px rgba(0,0,0,0.5),\r\n inset 0 4px 10px rgba(255,255,255,0.6),\r\n inset 0 -4px 10px rgba(138,103,50,0.3);\r\n position: relative;\r\n cursor: pointer;\r\n overflow: hidden;\r\n transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n display: flex;\r\n align-items: center;\r\n padding: 0 30px;\r\n}\r\n\r\n.sealed-scroll:hover .scroll-paper {\r\n transform: scale(1.02) rotate(1deg);\r\n}\r\n\r\n.wax-seal {\r\n position: absolute;\r\n left: 40px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n width: 80px;\r\n height: 80px;\r\n background: radial-gradient(circle at 40% 40%, #9B2C2C, #6B1F1F);\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: #F6E2A5;\r\n font-size: 2.2rem;\r\n box-shadow: 0 10px 20px rgba(0,0,0,0.4),\r\n inset 0 4px 8px rgba(255,255,255,0.3);\r\n border: 4px solid #C59A42;\r\n transition: all 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);\r\n pointer-events: none;\r\n}\r\n\r\n.scroll-content {\r\n margin-left: 110px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n width: 100%;\r\n color: #2E2115;\r\n text-align: left;\r\n pointer-events: none;\r\n}\r\n\r\n.scroll-text h3 {\r\n font-family: 'Cinzel', serif;\r\n font-size: 1.3rem;\r\n margin-bottom: 4px;\r\n}\r\n\r\n.scroll-text p {\r\n color: #5A3E1B;\r\n font-weight: 500;\r\n font-size: 0.9rem;\r\n}\r\n\r\n.open-button {\r\n margin-top: 0;\r\n padding: 10px 25px;\r\n background: #2E2115;\r\n color: #F6E2A5;\r\n border: 2px solid #C59A42;\r\n border-radius: 50px;\r\n font-size: 0.9rem;\r\n font-weight: 500;\r\n cursor: pointer;\r\n transition: all 0.4s ease;\r\n white-space: nowrap;\r\n pointer-events: auto;\r\n}\r\n\r\n.open-button:hover {\r\n background: #C59A42;\r\n color: #2E2115;\r\n}\r\n\r\n\/ Opened Parchment (Khung m\u1edf r\u1ed9ng sau khi b\u1ea5m - \u0110\u00daNG B\u1eb0NG K\u00cdCH TH\u01af\u1edaC CARD CH\u01afA M\u1ede) \/\r\n.opened-parchment {\r\n display: none; \/ JS s\u1ebd k\u00edch ho\u1ea1t chuy\u1ec3n th\u00e0nh flex \/\r\n background: linear-gradient(#F6E2A5, #E8D8B0);\r\n border-radius: 12px;\r\n padding: 15px 25px;\r\n box-shadow: 0 15px 35px -10px rgba(0,0,0,0.5),\r\n inset 0 0 80px rgba(245,220,140,0.6);\r\n position: relative;\r\n overflow: hidden;\r\n width: 100%;\r\n height: 140px; \/ Kh\u00f3a c\u1ee9ng chi\u1ec1u cao b\u1eb1ng \u0111\u00fang card c\u0169 140px \/\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 20px;\r\n}\r\n\r\n.opened-parchment::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(138,103,50,0.08) 20px, rgba(138,103,50,0.08) 40px);\r\n pointer-events: none;\r\n}\r\n\r\n\/ V\u00f9ng b\u00ean tr\u00e1i: N\u00fat Play & Ti\u00eau \u0111\u1ec1 \/\r\n.parchment-left {\r\n display: flex;\r\n align-items: center;\r\n gap: 15px;\r\n flex-shrink: 0;\r\n z-index: 1;\r\n}\r\n\r\n.parchment-header {\r\n text-align: left;\r\n}\r\n\r\n.parchment-header h2 {\r\n font-family: 'Cinzel', serif;\r\n font-size: 0.85rem;\r\n color: #8A6732;\r\n letter-spacing: 1px;\r\n}\r\n\r\n.parchment-header h3 {\r\n font-family: 'Cormorant Garamond', serif;\r\n font-size: 1.1rem;\r\n color: #2E2115;\r\n font-weight: bold;\r\n margin-top: 2px;\r\n}\r\n\r\n\/ V\u00f9ng \u1edf gi\u1eefa: B\u1ed9 \u0111i\u1ec1u khi\u1ec3n \u00e2m thanh \/\r\n.audio-player {\r\n flex: 1;\r\n background: rgba(44, 33, 21, 0.95);\r\n border-radius: 12px;\r\n padding: 12px 18px;\r\n border: 1px solid #8A6732;\r\n box-shadow: inset 0 3px 10px rgba(0,0,0,0.6);\r\n z-index: 1;\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.player-controls {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n width: 100%;\r\n}\r\n\r\n.control-btn {\r\n width: 48px;\r\n height: 48px;\r\n background: #C59A42;\r\n color: #2E2115;\r\n border: none;\r\n border-radius: 50%;\r\n font-size: 1.1rem;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n box-shadow: 0 4px 10px rgba(197,154,66,0.4);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.control-btn:hover {\r\n transform: scale(1.08);\r\n background: #F6E2A5;\r\n}\r\n\r\n.progress-container {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n width: 100%;\r\n}\r\n\r\n.progress-bar {\r\n flex: 1;\r\n height: 5px;\r\n background: #5A3E1B;\r\n border-radius: 999px;\r\n position: relative;\r\n cursor: pointer;\r\n}\r\n\r\n.progress {\r\n height: 100%;\r\n width: 0%;\r\n background: linear-gradient(to right, #C59A42, #F6E2A5);\r\n border-radius: 999px;\r\n box-shadow: 0 0 8px #F6E2A5;\r\n}\r\n\r\n.time {\r\n font-family: monospace;\r\n font-size: 0.8rem;\r\n min-width: 32px;\r\n color: #C59A42;\r\n}\r\n\r\n.volume-control {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #C59A42;\r\n justify-content: flex-end;\r\n}\r\n\r\n.volume-control i {\r\n font-size: 0.85rem;\r\n}\r\n\r\n.volume-control input {\r\n accent-color: #C59A42;\r\n width: 65px;\r\n height: 3px;\r\n}\r\n\r\n\/ V\u00f9ng b\u00ean ph\u1ea3i: V\u0103n b\u1ea3n thu nh\u1ecf \/\r\n.transcript {\r\n width: 160px;\r\n font-style: italic;\r\n color: #5A3E1B;\r\n line-height: 1.4;\r\n text-align: left;\r\n font-size: 0.78rem;\r\n border-left: 1px solid rgba(138,103,50,0.3);\r\n padding-left: 15px;\r\n z-index: 1;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 4;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n}\r\n\r\n\/ Responsive \/\r\n@media (max-width: 640px) {\r\n .audio-guide-container { \r\n padding: 0 15px; \r\n }\r\n .scroll-paper { \r\n padding: 0 15px;\r\n height: 120px;\r\n }\r\n .wax-seal {\r\n left: 15px;\r\n width: 60px;\r\n height: 60px;\r\n font-size: 1.6rem;\r\n }\r\n .scroll-content {\r\n margin-left: 75px;\r\n }\r\n .scroll-text h3 { font-size: 0.8rem; }\r\n .scroll-text p { font-size: 0.6rem; }\r\n .open-button { padding: 8px 15px; font-size: 0.8rem; }\r\n \r\n .opened-parchment { \r\n flex-direction: column; \r\n height: auto; \r\n padding: 15px;\r\n gap: 10px;\r\n }\r\n .parchment-left { width: 100%; justify-content: flex-start; }\r\n .audio-player { width: 100%; }\r\n .transcript { width: 100%; border-left: none; padding-left: 0; text-align: center; }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n document.addEventListener('DOMContentLoaded', () => {\r\n const sealedScroll = document.getElementById('sealedScroll');\r\n const openedParchment = document.getElementById('openedParchment');\r\n const openButton = document.getElementById('openButton');\r\n const waxSeal = document.getElementById('waxSeal');\r\n \r\n const audio = document.getElementById('audioElement');\r\n const playPauseBtn = document.getElementById('playPauseBtn');\r\n const progress = document.getElementById('progress');\r\n const progressContainer = document.getElementById('progressContainer');\r\n const currentTimeEl = document.getElementById('currentTime');\r\n const durationEl = document.getElementById('duration');\r\n const volumeSlider = document.getElementById('volumeSlider');\r\n\r\n let isPlaying = false;\r\n\r\n \/\/ Format time\r\n function formatTime(seconds) {\r\n if (!seconds || isNaN(seconds)) return '0:00';\r\n const min = Math.floor(seconds \/ 60);\r\n const sec = Math.floor(seconds % 60);\r\n return `${min}:${sec < 10 ? '0' : ''}${sec}`;\r\n }\r\n\r\n \/\/ Initialize audio\r\n function initAudio() {\r\n audio.volume = 0.8;\r\n \r\n audio.addEventListener('loadedmetadata', () => {\r\n durationEl.textContent = formatTime(audio.duration);\r\n });\r\n\r\n audio.addEventListener('timeupdate', () => {\r\n if (!audio.duration) return;\r\n const percent = (audio.currentTime \/ audio.duration) 100;\r\n progress.style.width = percent + '%';\r\n currentTimeEl.textContent = formatTime(audio.currentTime);\r\n });\r\n\r\n audio.addEventListener('ended', () => {\r\n isPlaying = false;\r\n playPauseBtn.innerHTML = `<i class=\"fas fa-play\"><\/i>`;\r\n });\r\n }\r\n\r\n \/\/ Open animation\r\n function openAudioGuide() {\r\n waxSeal.style.transition = 'all 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55)';\r\n waxSeal.style.transform = 'translateY(-50%) scale(1.45) rotate(28deg)';\r\n waxSeal.style.opacity = '0.25';\r\n\r\n setTimeout(() => {\r\n sealedScroll.style.opacity = '0';\r\n sealedScroll.style.transform = 'scale(0.8) translateY(50px)';\r\n\r\n setTimeout(() => {\r\n sealedScroll.style.display = 'none';\r\n \r\n \/\/ \u0110\u1ed5i hi\u1ec3n th\u1ecb sang flex cho \u0111\u00fang layout ngang\r\n openedParchment.style.display = 'flex';\r\n\r\n openedParchment.style.opacity = '0';\r\n openedParchment.style.transform = 'translateY(40px)';\r\n\r\n setTimeout(() => {\r\n openedParchment.style.transition = 'all 1s cubic-bezier(0.23,1,0.32,1)';\r\n openedParchment.style.opacity = '1';\r\n openedParchment.style.transform = 'translateY(0)';\r\n }, 50);\r\n }, 550);\r\n }, 400);\r\n }\r\n\r\n \/\/ Event Listeners\r\n openButton.addEventListener('click', (e) => {\r\n e.stopPropagation();\r\n openAudioGuide();\r\n });\r\n sealedScroll.addEventListener('click', openAudioGuide);\r\n\r\n playPauseBtn.addEventListener('click', (e) => {\r\n e.stopPropagation(); \/\/ Ng\u0103n s\u1ef1 ki\u1ec7n click lan ra ngo\u00e0i\r\n if (!audio) return;\r\n \r\n if (isPlaying) {\r\n audio.pause();\r\n playPauseBtn.innerHTML = `<i class=\"fas fa-play\"><\/i>`;\r\n } else {\r\n audio.play();\r\n playPauseBtn.innerHTML = `<i class=\"fas fa-pause\"><\/i>`;\r\n }\r\n isPlaying = !isPlaying;\r\n });\r\n\r\n progressContainer.addEventListener('click', (e) => {\r\n e.stopPropagation();\r\n const rect = progressContainer.getBoundingClientRect();\r\n const pos = (e.clientX - rect.left) \/ rect.width;\r\n audio.currentTime = pos * audio.duration;\r\n });\r\n\r\n volumeSlider.addEventListener('click', (e) => {\r\n e.stopPropagation(); \/\/ Ng\u0103n click tr\u01b0\u1ee3t volume l\u00e0m \u1ea3nh h\u01b0\u1edfng card\r\n });\r\n\r\n volumeSlider.addEventListener('input', (e) => {\r\n audio.volume = parseFloat(volumeSlider.value);\r\n });\r\n\r\n \/\/ Initialize\r\n initAudio();\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5fc387c elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"5fc387c\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"has_eae_slider elementor-element elementor-element-e54ca88 e-flex e-con-boxed e-con e-parent\" data-id=\"e54ca88\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c0ac8ee elementor-widget elementor-widget-heading\" data-id=\"c0ac8ee\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Ho\u00e0ng Th\u00e0nh Hu\u1ebf<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"has_eae_slider elementor-element elementor-element-96e7f93 e-flex e-con-boxed e-con e-parent\" data-id=\"96e7f93\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ef40e21 elementor-widget elementor-widget-html\" data-id=\"ef40e21\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<iframe src=\"https:\/\/www.google.com\/maps\/embed?pb=!4v1784258894655!6m8!1m7!1sCAoSHENJQUJJaERnMFZWXzdoWmdITEFEN3MyNjhfT00.!2m2!1d16.46952701233272!2d107.5774320239445!3f290.3801434896994!4f-4.7641143319067965!5f0.4000000000000002\" width=\"600\" height=\"450\" style=\"border:0;\" allowfullscreen=\"\" loading=\"lazy\" referrerpolicy=\"strict-origin-when-cross-origin\"><\/iframe>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"has_eae_slider elementor-element elementor-element-629719c e-flex e-con-boxed e-con e-parent\" data-id=\"629719c\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e2f563f elementor-widget elementor-widget-html\" data-id=\"e2f563f\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"vi\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Thuy\u1ebft Minh - Audio Guide<\/title>\r\n <link rel=\"stylesheet\" href=\"audio-guide.css\">\r\n <link href=\"https:\/\/historyhub.id.vn\/wp\/wp-content\/uploads\/2025\/07\/mp3-output-ttsfreedotcom-18.mp3\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\r\n<\/head>\r\n<body>\r\n <div class=\"audio-guide-container\">\r\n <div class=\"sealed-scroll\" id=\"sealedScroll\">\r\n <div class=\"scroll-paper\">\r\n <div class=\"wax-seal\" id=\"waxSeal\">\r\n <i class=\"fas fa-stamp\"><\/i>\r\n <\/div>\r\n <div class=\"scroll-content\">\r\n <div class=\"scroll-text\">\r\n <h3>Nghe m\u00f4 t\u1ea3<\/h3>\r\n <p>T\u01b0 li\u1ec7u, th\u00f4ng tin v\u1ec1 di t\u00edch<\/p>\r\n <\/div>\r\n <button class=\"open-button\" id=\"openButton\">\r\n <span>M\u1ede T\u01af LI\u1ec6U<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"opened-parchment\" id=\"openedParchment\">\r\n <div class=\"parchment-left\">\r\n <button id=\"playPauseBtn\" class=\"control-btn\">\r\n <i class=\"fas fa-play\"><\/i>\r\n <\/button>\r\n <div class=\"parchment-header\">\r\n <h2>C\u00d9NG NGHE, C\u00d9NG HI\u1ec2U<\/h2>\r\n <h3 id=\"placeName\">Ho\u00e0ng Th\u00e0nh Hu\u1ebf<\/h3>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"audio-player\">\r\n <audio id=\"audioElement\" src=\"https:\/\/historyhub.id.vn\/wp\/wp-content\/uploads\/2026\/07\/Hoang-Thanh-Hue.mp3\"><\/audio>\r\n \r\n <div class=\"player-controls\">\r\n <div class=\"progress-container\">\r\n <span id=\"currentTime\" class=\"time\">0:00<\/span>\r\n <div class=\"progress-bar\" id=\"progressContainer\">\r\n <div class=\"progress\" id=\"progress\"><\/div>\r\n <\/div>\r\n <span id=\"duration\" class=\"time\">0:00<\/span>\r\n <\/div>\r\n\r\n <div class=\"volume-control\">\r\n <i class=\"fas fa-volume-up\"><\/i>\r\n <input type=\"range\" id=\"volumeSlider\" min=\"0\" max=\"1\" step=\"0.01\" value=\"0.8\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"transcript\">\r\n <p id=\"transcriptText\">\"Xin k\u00ednh m\u1eddi m\u1ecdi ng\u01b0\u1eddi c\u00f9ng d\u1ea1o b\u01b0\u1edbc \u0111\u1ebfn di t\u00edch c\u00f9ng History Hub\"<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script src=\"audio-guide.js\"><\/script>\r\n<\/body>\r\n<\/html>\r\n\r\n<style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n}\r\n\r\n.audio-guide-container {\r\n max-width: 650px;\r\n margin: 0 auto;\r\n position: relative;\r\n font-family: 'Poppins', sans-serif;\r\n}\r\n\r\n\/* Sealed Scroll (Card Ngang ch\u01b0a m\u1edf) \/\r\n.sealed-scroll {\r\n position: relative;\r\n width: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: all 0.5s ease;\r\n}\r\n\r\n.scroll-paper {\r\n width: 100%;\r\n height: 140px; \/ Kh\u00f3a c\u1ee9ng chi\u1ec1u cao card ch\u01b0a m\u1edf l\u00e0 140px \/\r\n background: linear-gradient(135deg, #F6E2A5 0%, #E8D4A0 100%);\r\n border-radius: 12px 60px 12px 12px;\r\n box-shadow: 0 15px 35px -10px rgba(0,0,0,0.5),\r\n inset 0 4px 10px rgba(255,255,255,0.6),\r\n inset 0 -4px 10px rgba(138,103,50,0.3);\r\n position: relative;\r\n cursor: pointer;\r\n overflow: hidden;\r\n transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n display: flex;\r\n align-items: center;\r\n padding: 0 30px;\r\n}\r\n\r\n.sealed-scroll:hover .scroll-paper {\r\n transform: scale(1.02) rotate(1deg);\r\n}\r\n\r\n.wax-seal {\r\n position: absolute;\r\n left: 40px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n width: 80px;\r\n height: 80px;\r\n background: radial-gradient(circle at 40% 40%, #9B2C2C, #6B1F1F);\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: #F6E2A5;\r\n font-size: 2.2rem;\r\n box-shadow: 0 10px 20px rgba(0,0,0,0.4),\r\n inset 0 4px 8px rgba(255,255,255,0.3);\r\n border: 4px solid #C59A42;\r\n transition: all 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);\r\n pointer-events: none;\r\n}\r\n\r\n.scroll-content {\r\n margin-left: 110px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n width: 100%;\r\n color: #2E2115;\r\n text-align: left;\r\n pointer-events: none;\r\n}\r\n\r\n.scroll-text h3 {\r\n font-family: 'Cinzel', serif;\r\n font-size: 1.3rem;\r\n margin-bottom: 4px;\r\n}\r\n\r\n.scroll-text p {\r\n color: #5A3E1B;\r\n font-weight: 500;\r\n font-size: 0.9rem;\r\n}\r\n\r\n.open-button {\r\n margin-top: 0;\r\n padding: 10px 25px;\r\n background: #2E2115;\r\n color: #F6E2A5;\r\n border: 2px solid #C59A42;\r\n border-radius: 50px;\r\n font-size: 0.9rem;\r\n font-weight: 500;\r\n cursor: pointer;\r\n transition: all 0.4s ease;\r\n white-space: nowrap;\r\n pointer-events: auto;\r\n}\r\n\r\n.open-button:hover {\r\n background: #C59A42;\r\n color: #2E2115;\r\n}\r\n\r\n\/ Opened Parchment (Khung m\u1edf r\u1ed9ng sau khi b\u1ea5m - \u0110\u00daNG B\u1eb0NG K\u00cdCH TH\u01af\u1edaC CARD CH\u01afA M\u1ede) \/\r\n.opened-parchment {\r\n display: none; \/ JS s\u1ebd k\u00edch ho\u1ea1t chuy\u1ec3n th\u00e0nh flex \/\r\n background: linear-gradient(#F6E2A5, #E8D8B0);\r\n border-radius: 12px;\r\n padding: 15px 25px;\r\n box-shadow: 0 15px 35px -10px rgba(0,0,0,0.5),\r\n inset 0 0 80px rgba(245,220,140,0.6);\r\n position: relative;\r\n overflow: hidden;\r\n width: 100%;\r\n height: 140px; \/ Kh\u00f3a c\u1ee9ng chi\u1ec1u cao b\u1eb1ng \u0111\u00fang card c\u0169 140px \/\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 20px;\r\n}\r\n\r\n.opened-parchment::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(138,103,50,0.08) 20px, rgba(138,103,50,0.08) 40px);\r\n pointer-events: none;\r\n}\r\n\r\n\/ V\u00f9ng b\u00ean tr\u00e1i: N\u00fat Play & Ti\u00eau \u0111\u1ec1 \/\r\n.parchment-left {\r\n display: flex;\r\n align-items: center;\r\n gap: 15px;\r\n flex-shrink: 0;\r\n z-index: 1;\r\n}\r\n\r\n.parchment-header {\r\n text-align: left;\r\n}\r\n\r\n.parchment-header h2 {\r\n font-family: 'Cinzel', serif;\r\n font-size: 0.85rem;\r\n color: #8A6732;\r\n letter-spacing: 1px;\r\n}\r\n\r\n.parchment-header h3 {\r\n font-family: 'Cormorant Garamond', serif;\r\n font-size: 1.1rem;\r\n color: #2E2115;\r\n font-weight: bold;\r\n margin-top: 2px;\r\n}\r\n\r\n\/ V\u00f9ng \u1edf gi\u1eefa: B\u1ed9 \u0111i\u1ec1u khi\u1ec3n \u00e2m thanh \/\r\n.audio-player {\r\n flex: 1;\r\n background: rgba(44, 33, 21, 0.95);\r\n border-radius: 12px;\r\n padding: 12px 18px;\r\n border: 1px solid #8A6732;\r\n box-shadow: inset 0 3px 10px rgba(0,0,0,0.6);\r\n z-index: 1;\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.player-controls {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n width: 100%;\r\n}\r\n\r\n.control-btn {\r\n width: 48px;\r\n height: 48px;\r\n background: #C59A42;\r\n color: #2E2115;\r\n border: none;\r\n border-radius: 50%;\r\n font-size: 1.1rem;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n box-shadow: 0 4px 10px rgba(197,154,66,0.4);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.control-btn:hover {\r\n transform: scale(1.08);\r\n background: #F6E2A5;\r\n}\r\n\r\n.progress-container {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n width: 100%;\r\n}\r\n\r\n.progress-bar {\r\n flex: 1;\r\n height: 5px;\r\n background: #5A3E1B;\r\n border-radius: 999px;\r\n position: relative;\r\n cursor: pointer;\r\n}\r\n\r\n.progress {\r\n height: 100%;\r\n width: 0%;\r\n background: linear-gradient(to right, #C59A42, #F6E2A5);\r\n border-radius: 999px;\r\n box-shadow: 0 0 8px #F6E2A5;\r\n}\r\n\r\n.time {\r\n font-family: monospace;\r\n font-size: 0.8rem;\r\n min-width: 32px;\r\n color: #C59A42;\r\n}\r\n\r\n.volume-control {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #C59A42;\r\n justify-content: flex-end;\r\n}\r\n\r\n.volume-control i {\r\n font-size: 0.85rem;\r\n}\r\n\r\n.volume-control input {\r\n accent-color: #C59A42;\r\n width: 65px;\r\n height: 3px;\r\n}\r\n\r\n\/ V\u00f9ng b\u00ean ph\u1ea3i: V\u0103n b\u1ea3n thu nh\u1ecf \/\r\n.transcript {\r\n width: 160px;\r\n font-style: italic;\r\n color: #5A3E1B;\r\n line-height: 1.4;\r\n text-align: left;\r\n font-size: 0.78rem;\r\n border-left: 1px solid rgba(138,103,50,0.3);\r\n padding-left: 15px;\r\n z-index: 1;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 4;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n}\r\n\r\n\/ Responsive \/\r\n@media (max-width: 640px) {\r\n .audio-guide-container { \r\n padding: 0 15px; \r\n }\r\n .scroll-paper { \r\n padding: 0 15px;\r\n height: 120px;\r\n }\r\n .wax-seal {\r\n left: 15px;\r\n width: 60px;\r\n height: 60px;\r\n font-size: 1.6rem;\r\n }\r\n .scroll-content {\r\n margin-left: 75px;\r\n }\r\n .scroll-text h3 { font-size: 0.8rem; }\r\n .scroll-text p { font-size: 0.6rem; }\r\n .open-button { padding: 8px 15px; font-size: 0.8rem; }\r\n \r\n .opened-parchment { \r\n flex-direction: column; \r\n height: auto; \r\n padding: 15px;\r\n gap: 10px;\r\n }\r\n .parchment-left { width: 100%; justify-content: flex-start; }\r\n .audio-player { width: 100%; }\r\n .transcript { width: 100%; border-left: none; padding-left: 0; text-align: center; }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n document.addEventListener('DOMContentLoaded', () => {\r\n const sealedScroll = document.getElementById('sealedScroll');\r\n const openedParchment = document.getElementById('openedParchment');\r\n const openButton = document.getElementById('openButton');\r\n const waxSeal = document.getElementById('waxSeal');\r\n \r\n const audio = document.getElementById('audioElement');\r\n const playPauseBtn = document.getElementById('playPauseBtn');\r\n const progress = document.getElementById('progress');\r\n const progressContainer = document.getElementById('progressContainer');\r\n const currentTimeEl = document.getElementById('currentTime');\r\n const durationEl = document.getElementById('duration');\r\n const volumeSlider = document.getElementById('volumeSlider');\r\n\r\n let isPlaying = false;\r\n\r\n \/\/ Format time\r\n function formatTime(seconds) {\r\n if (!seconds || isNaN(seconds)) return '0:00';\r\n const min = Math.floor(seconds \/ 60);\r\n const sec = Math.floor(seconds % 60);\r\n return `${min}:${sec < 10 ? '0' : ''}${sec}`;\r\n }\r\n\r\n \/\/ Initialize audio\r\n function initAudio() {\r\n audio.volume = 0.8;\r\n \r\n audio.addEventListener('loadedmetadata', () => {\r\n durationEl.textContent = formatTime(audio.duration);\r\n });\r\n\r\n audio.addEventListener('timeupdate', () => {\r\n if (!audio.duration) return;\r\n const percent = (audio.currentTime \/ audio.duration) 100;\r\n progress.style.width = percent + '%';\r\n currentTimeEl.textContent = formatTime(audio.currentTime);\r\n });\r\n\r\n audio.addEventListener('ended', () => {\r\n isPlaying = false;\r\n playPauseBtn.innerHTML = `<i class=\"fas fa-play\"><\/i>`;\r\n });\r\n }\r\n\r\n \/\/ Open animation\r\n function openAudioGuide() {\r\n waxSeal.style.transition = 'all 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55)';\r\n waxSeal.style.transform = 'translateY(-50%) scale(1.45) rotate(28deg)';\r\n waxSeal.style.opacity = '0.25';\r\n\r\n setTimeout(() => {\r\n sealedScroll.style.opacity = '0';\r\n sealedScroll.style.transform = 'scale(0.8) translateY(50px)';\r\n\r\n setTimeout(() => {\r\n sealedScroll.style.display = 'none';\r\n \r\n \/\/ \u0110\u1ed5i hi\u1ec3n th\u1ecb sang flex cho \u0111\u00fang layout ngang\r\n openedParchment.style.display = 'flex';\r\n\r\n openedParchment.style.opacity = '0';\r\n openedParchment.style.transform = 'translateY(40px)';\r\n\r\n setTimeout(() => {\r\n openedParchment.style.transition = 'all 1s cubic-bezier(0.23,1,0.32,1)';\r\n openedParchment.style.opacity = '1';\r\n openedParchment.style.transform = 'translateY(0)';\r\n }, 50);\r\n }, 550);\r\n }, 400);\r\n }\r\n\r\n \/\/ Event Listeners\r\n openButton.addEventListener('click', (e) => {\r\n e.stopPropagation();\r\n openAudioGuide();\r\n });\r\n sealedScroll.addEventListener('click', openAudioGuide);\r\n\r\n playPauseBtn.addEventListener('click', (e) => {\r\n e.stopPropagation(); \/\/ Ng\u0103n s\u1ef1 ki\u1ec7n click lan ra ngo\u00e0i\r\n if (!audio) return;\r\n \r\n if (isPlaying) {\r\n audio.pause();\r\n playPauseBtn.innerHTML = `<i class=\"fas fa-play\"><\/i>`;\r\n } else {\r\n audio.play();\r\n playPauseBtn.innerHTML = `<i class=\"fas fa-pause\"><\/i>`;\r\n }\r\n isPlaying = !isPlaying;\r\n });\r\n\r\n progressContainer.addEventListener('click', (e) => {\r\n e.stopPropagation();\r\n const rect = progressContainer.getBoundingClientRect();\r\n const pos = (e.clientX - rect.left) \/ rect.width;\r\n audio.currentTime = pos * audio.duration;\r\n });\r\n\r\n volumeSlider.addEventListener('click', (e) => {\r\n e.stopPropagation(); \/\/ Ng\u0103n click tr\u01b0\u1ee3t volume l\u00e0m \u1ea3nh h\u01b0\u1edfng card\r\n });\r\n\r\n volumeSlider.addEventListener('input', (e) => {\r\n audio.volume = parseFloat(volumeSlider.value);\r\n });\r\n\r\n \/\/ Initialize\r\n initAudio();\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-77aba5f elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"77aba5f\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"has_eae_slider elementor-element elementor-element-37e5763 e-flex e-con-boxed e-con e-parent\" data-id=\"37e5763\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-23f0328 elementor-widget elementor-widget-heading\" data-id=\"23f0328\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Ch\u00f9a M\u1ed9t C\u1ed9t<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"has_eae_slider elementor-element elementor-element-c3b6165 e-flex e-con-boxed e-con e-parent\" data-id=\"c3b6165\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ef799be elementor-widget elementor-widget-html\" data-id=\"ef799be\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<iframe src=\"https:\/\/www.google.com\/maps\/embed?pb=!4v1784259205882!6m8!1m7!1sCAoSFkNJSE0wb2dLRUlDQWdJREVsT25xQ0E.!2m2!1d21.03584137507609!2d105.8335868017091!3f36.16880594285509!4f-7.05367579987265!5f0.4000000000000002\" width=\"600\" height=\"450\" style=\"border:0;\" allowfullscreen=\"\" loading=\"lazy\" referrerpolicy=\"strict-origin-when-cross-origin\"><\/iframe>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"has_eae_slider elementor-element elementor-element-d651296 e-flex e-con-boxed e-con e-parent\" data-id=\"d651296\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-456eb24 elementor-widget elementor-widget-html\" data-id=\"456eb24\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"vi\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Thuy\u1ebft Minh - Audio Guide<\/title>\r\n <link rel=\"stylesheet\" href=\"audio-guide.css\">\r\n <link href=\"https:\/\/historyhub.id.vn\/wp\/wp-content\/uploads\/2025\/07\/mp3-output-ttsfreedotcom-18.mp3\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\r\n<\/head>\r\n<body>\r\n <div class=\"audio-guide-container\">\r\n <div class=\"sealed-scroll\" id=\"sealedScroll\">\r\n <div class=\"scroll-paper\">\r\n <div class=\"wax-seal\" id=\"waxSeal\">\r\n <i class=\"fas fa-stamp\"><\/i>\r\n <\/div>\r\n <div class=\"scroll-content\">\r\n <div class=\"scroll-text\">\r\n <h3>Nghe m\u00f4 t\u1ea3<\/h3>\r\n <p>T\u01b0 li\u1ec7u, th\u00f4ng tin v\u1ec1 di t\u00edch<\/p>\r\n <\/div>\r\n <button class=\"open-button\" id=\"openButton\">\r\n <span>M\u1ede T\u01af LI\u1ec6U<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"opened-parchment\" id=\"openedParchment\">\r\n <div class=\"parchment-left\">\r\n <button id=\"playPauseBtn\" class=\"control-btn\">\r\n <i class=\"fas fa-play\"><\/i>\r\n <\/button>\r\n <div class=\"parchment-header\">\r\n <h2>C\u00d9NG NGHE, C\u00d9NG HI\u1ec2U<\/h2>\r\n <h3 id=\"placeName\">Ch\u00f9a M\u1ed9t C\u1ed9t<\/h3>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"audio-player\">\r\n <audio id=\"audioElement\" src=\"https:\/\/historyhub.id.vn\/wp\/wp-content\/uploads\/2026\/07\/Chua-Mot-Cot.mp3\"><\/audio>\r\n \r\n <div class=\"player-controls\">\r\n <div class=\"progress-container\">\r\n <span id=\"currentTime\" class=\"time\">0:00<\/span>\r\n <div class=\"progress-bar\" id=\"progressContainer\">\r\n <div class=\"progress\" id=\"progress\"><\/div>\r\n <\/div>\r\n <span id=\"duration\" class=\"time\">0:00<\/span>\r\n <\/div>\r\n\r\n <div class=\"volume-control\">\r\n <i class=\"fas fa-volume-up\"><\/i>\r\n <input type=\"range\" id=\"volumeSlider\" min=\"0\" max=\"1\" step=\"0.01\" value=\"0.8\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"transcript\">\r\n <p id=\"transcriptText\">\"Xin k\u00ednh m\u1eddi m\u1ecdi ng\u01b0\u1eddi c\u00f9ng d\u1ea1o b\u01b0\u1edbc \u0111\u1ebfn di t\u00edch c\u00f9ng History Hub\"<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script src=\"audio-guide.js\"><\/script>\r\n<\/body>\r\n<\/html>\r\n\r\n<style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n}\r\n\r\n.audio-guide-container {\r\n max-width: 650px;\r\n margin: 0 auto;\r\n position: relative;\r\n font-family: 'Poppins', sans-serif;\r\n}\r\n\r\n\/* Sealed Scroll (Card Ngang ch\u01b0a m\u1edf) \/\r\n.sealed-scroll {\r\n position: relative;\r\n width: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: all 0.5s ease;\r\n}\r\n\r\n.scroll-paper {\r\n width: 100%;\r\n height: 140px; \/ Kh\u00f3a c\u1ee9ng chi\u1ec1u cao card ch\u01b0a m\u1edf l\u00e0 140px \/\r\n background: linear-gradient(135deg, #F6E2A5 0%, #E8D4A0 100%);\r\n border-radius: 12px 60px 12px 12px;\r\n box-shadow: 0 15px 35px -10px rgba(0,0,0,0.5),\r\n inset 0 4px 10px rgba(255,255,255,0.6),\r\n inset 0 -4px 10px rgba(138,103,50,0.3);\r\n position: relative;\r\n cursor: pointer;\r\n overflow: hidden;\r\n transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n display: flex;\r\n align-items: center;\r\n padding: 0 30px;\r\n}\r\n\r\n.sealed-scroll:hover .scroll-paper {\r\n transform: scale(1.02) rotate(1deg);\r\n}\r\n\r\n.wax-seal {\r\n position: absolute;\r\n left: 40px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n width: 80px;\r\n height: 80px;\r\n background: radial-gradient(circle at 40% 40%, #9B2C2C, #6B1F1F);\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: #F6E2A5;\r\n font-size: 2.2rem;\r\n box-shadow: 0 10px 20px rgba(0,0,0,0.4),\r\n inset 0 4px 8px rgba(255,255,255,0.3);\r\n border: 4px solid #C59A42;\r\n transition: all 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);\r\n pointer-events: none;\r\n}\r\n\r\n.scroll-content {\r\n margin-left: 110px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n width: 100%;\r\n color: #2E2115;\r\n text-align: left;\r\n pointer-events: none;\r\n}\r\n\r\n.scroll-text h3 {\r\n font-family: 'Cinzel', serif;\r\n font-size: 1.3rem;\r\n margin-bottom: 4px;\r\n}\r\n\r\n.scroll-text p {\r\n color: #5A3E1B;\r\n font-weight: 500;\r\n font-size: 0.9rem;\r\n}\r\n\r\n.open-button {\r\n margin-top: 0;\r\n padding: 10px 25px;\r\n background: #2E2115;\r\n color: #F6E2A5;\r\n border: 2px solid #C59A42;\r\n border-radius: 50px;\r\n font-size: 0.9rem;\r\n font-weight: 500;\r\n cursor: pointer;\r\n transition: all 0.4s ease;\r\n white-space: nowrap;\r\n pointer-events: auto;\r\n}\r\n\r\n.open-button:hover {\r\n background: #C59A42;\r\n color: #2E2115;\r\n}\r\n\r\n\/ Opened Parchment (Khung m\u1edf r\u1ed9ng sau khi b\u1ea5m - \u0110\u00daNG B\u1eb0NG K\u00cdCH TH\u01af\u1edaC CARD CH\u01afA M\u1ede) \/\r\n.opened-parchment {\r\n display: none; \/ JS s\u1ebd k\u00edch ho\u1ea1t chuy\u1ec3n th\u00e0nh flex \/\r\n background: linear-gradient(#F6E2A5, #E8D8B0);\r\n border-radius: 12px;\r\n padding: 15px 25px;\r\n box-shadow: 0 15px 35px -10px rgba(0,0,0,0.5),\r\n inset 0 0 80px rgba(245,220,140,0.6);\r\n position: relative;\r\n overflow: hidden;\r\n width: 100%;\r\n height: 140px; \/ Kh\u00f3a c\u1ee9ng chi\u1ec1u cao b\u1eb1ng \u0111\u00fang card c\u0169 140px \/\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 20px;\r\n}\r\n\r\n.opened-parchment::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(138,103,50,0.08) 20px, rgba(138,103,50,0.08) 40px);\r\n pointer-events: none;\r\n}\r\n\r\n\/ V\u00f9ng b\u00ean tr\u00e1i: N\u00fat Play & Ti\u00eau \u0111\u1ec1 \/\r\n.parchment-left {\r\n display: flex;\r\n align-items: center;\r\n gap: 15px;\r\n flex-shrink: 0;\r\n z-index: 1;\r\n}\r\n\r\n.parchment-header {\r\n text-align: left;\r\n}\r\n\r\n.parchment-header h2 {\r\n font-family: 'Cinzel', serif;\r\n font-size: 0.85rem;\r\n color: #8A6732;\r\n letter-spacing: 1px;\r\n}\r\n\r\n.parchment-header h3 {\r\n font-family: 'Cormorant Garamond', serif;\r\n font-size: 1.1rem;\r\n color: #2E2115;\r\n font-weight: bold;\r\n margin-top: 2px;\r\n}\r\n\r\n\/ V\u00f9ng \u1edf gi\u1eefa: B\u1ed9 \u0111i\u1ec1u khi\u1ec3n \u00e2m thanh \/\r\n.audio-player {\r\n flex: 1;\r\n background: rgba(44, 33, 21, 0.95);\r\n border-radius: 12px;\r\n padding: 12px 18px;\r\n border: 1px solid #8A6732;\r\n box-shadow: inset 0 3px 10px rgba(0,0,0,0.6);\r\n z-index: 1;\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.player-controls {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n width: 100%;\r\n}\r\n\r\n.control-btn {\r\n width: 48px;\r\n height: 48px;\r\n background: #C59A42;\r\n color: #2E2115;\r\n border: none;\r\n border-radius: 50%;\r\n font-size: 1.1rem;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n box-shadow: 0 4px 10px rgba(197,154,66,0.4);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.control-btn:hover {\r\n transform: scale(1.08);\r\n background: #F6E2A5;\r\n}\r\n\r\n.progress-container {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n width: 100%;\r\n}\r\n\r\n.progress-bar {\r\n flex: 1;\r\n height: 5px;\r\n background: #5A3E1B;\r\n border-radius: 999px;\r\n position: relative;\r\n cursor: pointer;\r\n}\r\n\r\n.progress {\r\n height: 100%;\r\n width: 0%;\r\n background: linear-gradient(to right, #C59A42, #F6E2A5);\r\n border-radius: 999px;\r\n box-shadow: 0 0 8px #F6E2A5;\r\n}\r\n\r\n.time {\r\n font-family: monospace;\r\n font-size: 0.8rem;\r\n min-width: 32px;\r\n color: #C59A42;\r\n}\r\n\r\n.volume-control {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #C59A42;\r\n justify-content: flex-end;\r\n}\r\n\r\n.volume-control i {\r\n font-size: 0.85rem;\r\n}\r\n\r\n.volume-control input {\r\n accent-color: #C59A42;\r\n width: 65px;\r\n height: 3px;\r\n}\r\n\r\n\/ V\u00f9ng b\u00ean ph\u1ea3i: V\u0103n b\u1ea3n thu nh\u1ecf \/\r\n.transcript {\r\n width: 160px;\r\n font-style: italic;\r\n color: #5A3E1B;\r\n line-height: 1.4;\r\n text-align: left;\r\n font-size: 0.78rem;\r\n border-left: 1px solid rgba(138,103,50,0.3);\r\n padding-left: 15px;\r\n z-index: 1;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 4;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n}\r\n\r\n\/ Responsive \/\r\n@media (max-width: 640px) {\r\n .audio-guide-container { \r\n padding: 0 15px; \r\n }\r\n .scroll-paper { \r\n padding: 0 15px;\r\n height: 120px;\r\n }\r\n .wax-seal {\r\n left: 15px;\r\n width: 60px;\r\n height: 60px;\r\n font-size: 1.6rem;\r\n }\r\n .scroll-content {\r\n margin-left: 75px;\r\n }\r\n .scroll-text h3 { font-size: 0.8rem; }\r\n .scroll-text p { font-size: 0.6rem; }\r\n .open-button { padding: 8px 15px; font-size: 0.8rem; }\r\n \r\n .opened-parchment { \r\n flex-direction: column; \r\n height: auto; \r\n padding: 15px;\r\n gap: 10px;\r\n }\r\n .parchment-left { width: 100%; justify-content: flex-start; }\r\n .audio-player { width: 100%; }\r\n .transcript { width: 100%; border-left: none; padding-left: 0; text-align: center; }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n document.addEventListener('DOMContentLoaded', () => {\r\n const sealedScroll = document.getElementById('sealedScroll');\r\n const openedParchment = document.getElementById('openedParchment');\r\n const openButton = document.getElementById('openButton');\r\n const waxSeal = document.getElementById('waxSeal');\r\n \r\n const audio = document.getElementById('audioElement');\r\n const playPauseBtn = document.getElementById('playPauseBtn');\r\n const progress = document.getElementById('progress');\r\n const progressContainer = document.getElementById('progressContainer');\r\n const currentTimeEl = document.getElementById('currentTime');\r\n const durationEl = document.getElementById('duration');\r\n const volumeSlider = document.getElementById('volumeSlider');\r\n\r\n let isPlaying = false;\r\n\r\n \/\/ Format time\r\n function formatTime(seconds) {\r\n if (!seconds || isNaN(seconds)) return '0:00';\r\n const min = Math.floor(seconds \/ 60);\r\n const sec = Math.floor(seconds % 60);\r\n return `${min}:${sec < 10 ? '0' : ''}${sec}`;\r\n }\r\n\r\n \/\/ Initialize audio\r\n function initAudio() {\r\n audio.volume = 0.8;\r\n \r\n audio.addEventListener('loadedmetadata', () => {\r\n durationEl.textContent = formatTime(audio.duration);\r\n });\r\n\r\n audio.addEventListener('timeupdate', () => {\r\n if (!audio.duration) return;\r\n const percent = (audio.currentTime \/ audio.duration) 100;\r\n progress.style.width = percent + '%';\r\n currentTimeEl.textContent = formatTime(audio.currentTime);\r\n });\r\n\r\n audio.addEventListener('ended', () => {\r\n isPlaying = false;\r\n playPauseBtn.innerHTML = `<i class=\"fas fa-play\"><\/i>`;\r\n });\r\n }\r\n\r\n \/\/ Open animation\r\n function openAudioGuide() {\r\n waxSeal.style.transition = 'all 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55)';\r\n waxSeal.style.transform = 'translateY(-50%) scale(1.45) rotate(28deg)';\r\n waxSeal.style.opacity = '0.25';\r\n\r\n setTimeout(() => {\r\n sealedScroll.style.opacity = '0';\r\n sealedScroll.style.transform = 'scale(0.8) translateY(50px)';\r\n\r\n setTimeout(() => {\r\n sealedScroll.style.display = 'none';\r\n \r\n \/\/ \u0110\u1ed5i hi\u1ec3n th\u1ecb sang flex cho \u0111\u00fang layout ngang\r\n openedParchment.style.display = 'flex';\r\n\r\n openedParchment.style.opacity = '0';\r\n openedParchment.style.transform = 'translateY(40px)';\r\n\r\n setTimeout(() => {\r\n openedParchment.style.transition = 'all 1s cubic-bezier(0.23,1,0.32,1)';\r\n openedParchment.style.opacity = '1';\r\n openedParchment.style.transform = 'translateY(0)';\r\n }, 50);\r\n }, 550);\r\n }, 400);\r\n }\r\n\r\n \/\/ Event Listeners\r\n openButton.addEventListener('click', (e) => {\r\n e.stopPropagation();\r\n openAudioGuide();\r\n });\r\n sealedScroll.addEventListener('click', openAudioGuide);\r\n\r\n playPauseBtn.addEventListener('click', (e) => {\r\n e.stopPropagation(); \/\/ Ng\u0103n s\u1ef1 ki\u1ec7n click lan ra ngo\u00e0i\r\n if (!audio) return;\r\n \r\n if (isPlaying) {\r\n audio.pause();\r\n playPauseBtn.innerHTML = `<i class=\"fas fa-play\"><\/i>`;\r\n } else {\r\n audio.play();\r\n playPauseBtn.innerHTML = `<i class=\"fas fa-pause\"><\/i>`;\r\n }\r\n isPlaying = !isPlaying;\r\n });\r\n\r\n progressContainer.addEventListener('click', (e) => {\r\n e.stopPropagation();\r\n const rect = progressContainer.getBoundingClientRect();\r\n const pos = (e.clientX - rect.left) \/ rect.width;\r\n audio.currentTime = pos * audio.duration;\r\n });\r\n\r\n volumeSlider.addEventListener('click', (e) => {\r\n e.stopPropagation(); \/\/ Ng\u0103n click tr\u01b0\u1ee3t volume l\u00e0m \u1ea3nh h\u01b0\u1edfng card\r\n });\r\n\r\n volumeSlider.addEventListener('input', (e) => {\r\n audio.volume = parseFloat(volumeSlider.value);\r\n });\r\n\r\n \/\/ Initialize\r\n initAudio();\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9ba58c4 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"9ba58c4\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"has_eae_slider elementor-element elementor-element-e21fb2d e-flex e-con-boxed e-con e-parent\" data-id=\"e21fb2d\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1c48b66 elementor-widget elementor-widget-heading\" data-id=\"1c48b66\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Ph\u1ed1 c\u1ed5 H\u1ed9i An<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"has_eae_slider elementor-element elementor-element-3b6e978 e-flex e-con-boxed e-con e-parent\" data-id=\"3b6e978\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-66d0fe9 elementor-widget elementor-widget-html\" data-id=\"66d0fe9\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<iframe src=\"https:\/\/www.google.com\/maps\/embed?pb=!4v1784213461677!6m8!1m7!1s7eTrCoQmFH5h293dm8iXMQ!2m2!1d15.87755636676581!2d108.3321788448332!3f237.85441627968203!4f-4.675569976644809!5f0.4000000000000002\" width=\"600\" height=\"450\" style=\"border:0;\" allowfullscreen=\"\" loading=\"lazy\" referrerpolicy=\"strict-origin-when-cross-origin\"><\/iframe>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a34ee0d elementor-widget elementor-widget-html\" data-id=\"a34ee0d\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"vi\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Thuy\u1ebft Minh - Audio Guide<\/title>\r\n <link rel=\"stylesheet\" href=\"audio-guide.css\">\r\n <link href=\"https:\/\/historyhub.id.vn\/wp\/wp-content\/uploads\/2025\/07\/mp3-output-ttsfreedotcom-18.mp3\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\r\n<\/head>\r\n<body>\r\n <div class=\"audio-guide-container\">\r\n <div class=\"sealed-scroll\" id=\"sealedScroll\">\r\n <div class=\"scroll-paper\">\r\n <div class=\"wax-seal\" id=\"waxSeal\">\r\n <i class=\"fas fa-stamp\"><\/i>\r\n <\/div>\r\n <div class=\"scroll-content\">\r\n <div class=\"scroll-text\">\r\n <h3>Nghe m\u00f4 t\u1ea3<\/h3>\r\n <p>T\u01b0 li\u1ec7u, th\u00f4ng tin v\u1ec1 di t\u00edch<\/p>\r\n <\/div>\r\n <button class=\"open-button\" id=\"openButton\">\r\n <span>M\u1ede T\u01af LI\u1ec6U<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"opened-parchment\" id=\"openedParchment\">\r\n <div class=\"parchment-left\">\r\n <button id=\"playPauseBtn\" class=\"control-btn\">\r\n <i class=\"fas fa-play\"><\/i>\r\n <\/button>\r\n <div class=\"parchment-header\">\r\n <h2>C\u00d9NG NGHE, C\u00d9NG HI\u1ec2U<\/h2>\r\n <h3 id=\"placeName\">Ph\u1ed1 c\u1ed5 H\u1ed9i An<\/h3>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"audio-player\">\r\n <audio id=\"audioElement\" src=\"https:\/\/historyhub.id.vn\/wp\/wp-content\/uploads\/2026\/07\/Pho-co-Hoi-An.mp3\"><\/audio>\r\n \r\n <div class=\"player-controls\">\r\n <div class=\"progress-container\">\r\n <span id=\"currentTime\" class=\"time\">0:00<\/span>\r\n <div class=\"progress-bar\" id=\"progressContainer\">\r\n <div class=\"progress\" id=\"progress\"><\/div>\r\n <\/div>\r\n <span id=\"duration\" class=\"time\">0:00<\/span>\r\n <\/div>\r\n\r\n <div class=\"volume-control\">\r\n <i class=\"fas fa-volume-up\"><\/i>\r\n <input type=\"range\" id=\"volumeSlider\" min=\"0\" max=\"1\" step=\"0.01\" value=\"0.8\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"transcript\">\r\n <p id=\"transcriptText\">\"Xin k\u00ednh m\u1eddi m\u1ecdi ng\u01b0\u1eddi c\u00f9ng d\u1ea1o b\u01b0\u1edbc \u0111\u1ebfn di t\u00edch c\u00f9ng History Hub\"<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script src=\"audio-guide.js\"><\/script>\r\n<\/body>\r\n<\/html>\r\n\r\n<style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n}\r\n\r\n.audio-guide-container {\r\n max-width: 650px;\r\n margin: 0 auto;\r\n position: relative;\r\n font-family: 'Poppins', sans-serif;\r\n}\r\n\r\n\/* Sealed Scroll (Card Ngang ch\u01b0a m\u1edf) \/\r\n.sealed-scroll {\r\n position: relative;\r\n width: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: all 0.5s ease;\r\n}\r\n\r\n.scroll-paper {\r\n width: 100%;\r\n height: 140px; \/ Kh\u00f3a c\u1ee9ng chi\u1ec1u cao card ch\u01b0a m\u1edf l\u00e0 140px \/\r\n background: linear-gradient(135deg, #F6E2A5 0%, #E8D4A0 100%);\r\n border-radius: 12px 60px 12px 12px;\r\n box-shadow: 0 15px 35px -10px rgba(0,0,0,0.5),\r\n inset 0 4px 10px rgba(255,255,255,0.6),\r\n inset 0 -4px 10px rgba(138,103,50,0.3);\r\n position: relative;\r\n cursor: pointer;\r\n overflow: hidden;\r\n transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n display: flex;\r\n align-items: center;\r\n padding: 0 30px;\r\n}\r\n\r\n.sealed-scroll:hover .scroll-paper {\r\n transform: scale(1.02) rotate(1deg);\r\n}\r\n\r\n.wax-seal {\r\n position: absolute;\r\n left: 40px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n width: 80px;\r\n height: 80px;\r\n background: radial-gradient(circle at 40% 40%, #9B2C2C, #6B1F1F);\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: #F6E2A5;\r\n font-size: 2.2rem;\r\n box-shadow: 0 10px 20px rgba(0,0,0,0.4),\r\n inset 0 4px 8px rgba(255,255,255,0.3);\r\n border: 4px solid #C59A42;\r\n transition: all 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);\r\n pointer-events: none;\r\n}\r\n\r\n.scroll-content {\r\n margin-left: 110px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n width: 100%;\r\n color: #2E2115;\r\n text-align: left;\r\n pointer-events: none;\r\n}\r\n\r\n.scroll-text h3 {\r\n font-family: 'Cinzel', serif;\r\n font-size: 1.3rem;\r\n margin-bottom: 4px;\r\n}\r\n\r\n.scroll-text p {\r\n color: #5A3E1B;\r\n font-weight: 500;\r\n font-size: 0.9rem;\r\n}\r\n\r\n.open-button {\r\n margin-top: 0;\r\n padding: 10px 25px;\r\n background: #2E2115;\r\n color: #F6E2A5;\r\n border: 2px solid #C59A42;\r\n border-radius: 50px;\r\n font-size: 0.9rem;\r\n font-weight: 500;\r\n cursor: pointer;\r\n transition: all 0.4s ease;\r\n white-space: nowrap;\r\n pointer-events: auto;\r\n}\r\n\r\n.open-button:hover {\r\n background: #C59A42;\r\n color: #2E2115;\r\n}\r\n\r\n\/ Opened Parchment (Khung m\u1edf r\u1ed9ng sau khi b\u1ea5m - \u0110\u00daNG B\u1eb0NG K\u00cdCH TH\u01af\u1edaC CARD CH\u01afA M\u1ede) \/\r\n.opened-parchment {\r\n display: none; \/ JS s\u1ebd k\u00edch ho\u1ea1t chuy\u1ec3n th\u00e0nh flex \/\r\n background: linear-gradient(#F6E2A5, #E8D8B0);\r\n border-radius: 12px;\r\n padding: 15px 25px;\r\n box-shadow: 0 15px 35px -10px rgba(0,0,0,0.5),\r\n inset 0 0 80px rgba(245,220,140,0.6);\r\n position: relative;\r\n overflow: hidden;\r\n width: 100%;\r\n height: 140px; \/ Kh\u00f3a c\u1ee9ng chi\u1ec1u cao b\u1eb1ng \u0111\u00fang card c\u0169 140px \/\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 20px;\r\n}\r\n\r\n.opened-parchment::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(138,103,50,0.08) 20px, rgba(138,103,50,0.08) 40px);\r\n pointer-events: none;\r\n}\r\n\r\n\/ V\u00f9ng b\u00ean tr\u00e1i: N\u00fat Play & Ti\u00eau \u0111\u1ec1 \/\r\n.parchment-left {\r\n display: flex;\r\n align-items: center;\r\n gap: 15px;\r\n flex-shrink: 0;\r\n z-index: 1;\r\n}\r\n\r\n.parchment-header {\r\n text-align: left;\r\n}\r\n\r\n.parchment-header h2 {\r\n font-family: 'Cinzel', serif;\r\n font-size: 0.85rem;\r\n color: #8A6732;\r\n letter-spacing: 1px;\r\n}\r\n\r\n.parchment-header h3 {\r\n font-family: 'Cormorant Garamond', serif;\r\n font-size: 1.1rem;\r\n color: #2E2115;\r\n font-weight: bold;\r\n margin-top: 2px;\r\n}\r\n\r\n\/ V\u00f9ng \u1edf gi\u1eefa: B\u1ed9 \u0111i\u1ec1u khi\u1ec3n \u00e2m thanh \/\r\n.audio-player {\r\n flex: 1;\r\n background: rgba(44, 33, 21, 0.95);\r\n border-radius: 12px;\r\n padding: 12px 18px;\r\n border: 1px solid #8A6732;\r\n box-shadow: inset 0 3px 10px rgba(0,0,0,0.6);\r\n z-index: 1;\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.player-controls {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n width: 100%;\r\n}\r\n\r\n.control-btn {\r\n width: 48px;\r\n height: 48px;\r\n background: #C59A42;\r\n color: #2E2115;\r\n border: none;\r\n border-radius: 50%;\r\n font-size: 1.1rem;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n box-shadow: 0 4px 10px rgba(197,154,66,0.4);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.control-btn:hover {\r\n transform: scale(1.08);\r\n background: #F6E2A5;\r\n}\r\n\r\n.progress-container {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n width: 100%;\r\n}\r\n\r\n.progress-bar {\r\n flex: 1;\r\n height: 5px;\r\n background: #5A3E1B;\r\n border-radius: 999px;\r\n position: relative;\r\n cursor: pointer;\r\n}\r\n\r\n.progress {\r\n height: 100%;\r\n width: 0%;\r\n background: linear-gradient(to right, #C59A42, #F6E2A5);\r\n border-radius: 999px;\r\n box-shadow: 0 0 8px #F6E2A5;\r\n}\r\n\r\n.time {\r\n font-family: monospace;\r\n font-size: 0.8rem;\r\n min-width: 32px;\r\n color: #C59A42;\r\n}\r\n\r\n.volume-control {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #C59A42;\r\n justify-content: flex-end;\r\n}\r\n\r\n.volume-control i {\r\n font-size: 0.85rem;\r\n}\r\n\r\n.volume-control input {\r\n accent-color: #C59A42;\r\n width: 65px;\r\n height: 3px;\r\n}\r\n\r\n\/ V\u00f9ng b\u00ean ph\u1ea3i: V\u0103n b\u1ea3n thu nh\u1ecf \/\r\n.transcript {\r\n width: 160px;\r\n font-style: italic;\r\n color: #5A3E1B;\r\n line-height: 1.4;\r\n text-align: left;\r\n font-size: 0.78rem;\r\n border-left: 1px solid rgba(138,103,50,0.3);\r\n padding-left: 15px;\r\n z-index: 1;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 4;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n}\r\n\r\n\/ Responsive \/\r\n@media (max-width: 640px) {\r\n .audio-guide-container { \r\n padding: 0 15px; \r\n }\r\n .scroll-paper { \r\n padding: 0 15px;\r\n height: 120px;\r\n }\r\n .wax-seal {\r\n left: 15px;\r\n width: 60px;\r\n height: 60px;\r\n font-size: 1.6rem;\r\n }\r\n .scroll-content {\r\n margin-left: 75px;\r\n }\r\n .scroll-text h3 { font-size: 0.8rem; }\r\n .scroll-text p { font-size: 0.6rem; }\r\n .open-button { padding: 8px 15px; font-size: 0.8rem; }\r\n \r\n .opened-parchment { \r\n flex-direction: column; \r\n height: auto; \r\n padding: 15px;\r\n gap: 10px;\r\n }\r\n .parchment-left { width: 100%; justify-content: flex-start; }\r\n .audio-player { width: 100%; }\r\n .transcript { width: 100%; border-left: none; padding-left: 0; text-align: center; }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n document.addEventListener('DOMContentLoaded', () => {\r\n const sealedScroll = document.getElementById('sealedScroll');\r\n const openedParchment = document.getElementById('openedParchment');\r\n const openButton = document.getElementById('openButton');\r\n const waxSeal = document.getElementById('waxSeal');\r\n \r\n const audio = document.getElementById('audioElement');\r\n const playPauseBtn = document.getElementById('playPauseBtn');\r\n const progress = document.getElementById('progress');\r\n const progressContainer = document.getElementById('progressContainer');\r\n const currentTimeEl = document.getElementById('currentTime');\r\n const durationEl = document.getElementById('duration');\r\n const volumeSlider = document.getElementById('volumeSlider');\r\n\r\n let isPlaying = false;\r\n\r\n \/\/ Format time\r\n function formatTime(seconds) {\r\n if (!seconds || isNaN(seconds)) return '0:00';\r\n const min = Math.floor(seconds \/ 60);\r\n const sec = Math.floor(seconds % 60);\r\n return `${min}:${sec < 10 ? '0' : ''}${sec}`;\r\n }\r\n\r\n \/\/ Initialize audio\r\n function initAudio() {\r\n audio.volume = 0.8;\r\n \r\n audio.addEventListener('loadedmetadata', () => {\r\n durationEl.textContent = formatTime(audio.duration);\r\n });\r\n\r\n audio.addEventListener('timeupdate', () => {\r\n if (!audio.duration) return;\r\n const percent = (audio.currentTime \/ audio.duration) 100;\r\n progress.style.width = percent + '%';\r\n currentTimeEl.textContent = formatTime(audio.currentTime);\r\n });\r\n\r\n audio.addEventListener('ended', () => {\r\n isPlaying = false;\r\n playPauseBtn.innerHTML = `<i class=\"fas fa-play\"><\/i>`;\r\n });\r\n }\r\n\r\n \/\/ Open animation\r\n function openAudioGuide() {\r\n waxSeal.style.transition = 'all 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55)';\r\n waxSeal.style.transform = 'translateY(-50%) scale(1.45) rotate(28deg)';\r\n waxSeal.style.opacity = '0.25';\r\n\r\n setTimeout(() => {\r\n sealedScroll.style.opacity = '0';\r\n sealedScroll.style.transform = 'scale(0.8) translateY(50px)';\r\n\r\n setTimeout(() => {\r\n sealedScroll.style.display = 'none';\r\n \r\n \/\/ \u0110\u1ed5i hi\u1ec3n th\u1ecb sang flex cho \u0111\u00fang layout ngang\r\n openedParchment.style.display = 'flex';\r\n\r\n openedParchment.style.opacity = '0';\r\n openedParchment.style.transform = 'translateY(40px)';\r\n\r\n setTimeout(() => {\r\n openedParchment.style.transition = 'all 1s cubic-bezier(0.23,1,0.32,1)';\r\n openedParchment.style.opacity = '1';\r\n openedParchment.style.transform = 'translateY(0)';\r\n }, 50);\r\n }, 550);\r\n }, 400);\r\n }\r\n\r\n \/\/ Event Listeners\r\n openButton.addEventListener('click', (e) => {\r\n e.stopPropagation();\r\n openAudioGuide();\r\n });\r\n sealedScroll.addEventListener('click', openAudioGuide);\r\n\r\n playPauseBtn.addEventListener('click', (e) => {\r\n e.stopPropagation(); \/\/ Ng\u0103n s\u1ef1 ki\u1ec7n click lan ra ngo\u00e0i\r\n if (!audio) return;\r\n \r\n if (isPlaying) {\r\n audio.pause();\r\n playPauseBtn.innerHTML = `<i class=\"fas fa-play\"><\/i>`;\r\n } else {\r\n audio.play();\r\n playPauseBtn.innerHTML = `<i class=\"fas fa-pause\"><\/i>`;\r\n }\r\n isPlaying = !isPlaying;\r\n });\r\n\r\n progressContainer.addEventListener('click', (e) => {\r\n e.stopPropagation();\r\n const rect = progressContainer.getBoundingClientRect();\r\n const pos = (e.clientX - rect.left) \/ rect.width;\r\n audio.currentTime = pos * audio.duration;\r\n });\r\n\r\n volumeSlider.addEventListener('click', (e) => {\r\n e.stopPropagation(); \/\/ Ng\u0103n click tr\u01b0\u1ee3t volume l\u00e0m \u1ea3nh h\u01b0\u1edfng card\r\n });\r\n\r\n volumeSlider.addEventListener('input', (e) => {\r\n audio.volume = parseFloat(volumeSlider.value);\r\n });\r\n\r\n \/\/ Initialize\r\n initAudio();\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fa117aa elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"fa117aa\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"has_eae_slider elementor-element elementor-element-605e843 e-flex e-con-boxed e-con e-parent\" data-id=\"605e843\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ea08a57 elementor-widget elementor-widget-heading\" data-id=\"ea08a57\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Ho\u00e0ng th\u00e0nh Th\u0103ng Long<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"has_eae_slider elementor-element elementor-element-97b257c e-flex e-con-boxed e-con e-parent\" data-id=\"97b257c\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-58b8012 elementor-widget elementor-widget-html\" data-id=\"58b8012\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<iframe width=\"100%\" height=\"640\" frameborder=\"0\" allow=\"xr-spatial-tracking; gyroscope; accelerometer\" allowfullscreen scrolling=\"no\" src=\"https:\/\/kuula.co\/share\/collection\/71RHr?logo=1&info=1&fs=1&vr=0&zoom=1&sd=1&autorotate=0.16&thumbs=3&inst=0\"><\/iframe>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"has_eae_slider elementor-element elementor-element-ee95a1b e-flex e-con-boxed e-con e-parent\" data-id=\"ee95a1b\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0a7bf35 elementor-widget elementor-widget-html\" data-id=\"0a7bf35\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"vi\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Thuy\u1ebft Minh - Audio Guide<\/title>\r\n <link rel=\"stylesheet\" href=\"audio-guide.css\">\r\n <link href=\"https:\/\/historyhub.id.vn\/wp\/wp-content\/uploads\/2025\/07\/mp3-output-ttsfreedotcom-18.mp3\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\r\n<\/head>\r\n<body>\r\n <div class=\"audio-guide-container\">\r\n <div class=\"sealed-scroll\" id=\"sealedScroll\">\r\n <div class=\"scroll-paper\">\r\n <div class=\"wax-seal\" id=\"waxSeal\">\r\n <i class=\"fas fa-stamp\"><\/i>\r\n <\/div>\r\n <div class=\"scroll-content\">\r\n <div class=\"scroll-text\">\r\n <h3>Nghe m\u00f4 t\u1ea3<\/h3>\r\n <p>T\u01b0 li\u1ec7u, th\u00f4ng tin v\u1ec1 di t\u00edch<\/p>\r\n <\/div>\r\n <button class=\"open-button\" id=\"openButton\">\r\n <span>M\u1ede T\u01af LI\u1ec6U<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"opened-parchment\" id=\"openedParchment\">\r\n <div class=\"parchment-left\">\r\n <button id=\"playPauseBtn\" class=\"control-btn\">\r\n <i class=\"fas fa-play\"><\/i>\r\n <\/button>\r\n <div class=\"parchment-header\">\r\n <h2>C\u00d9NG NGHE, C\u00d9NG HI\u1ec2U<\/h2>\r\n <h3 id=\"placeName\">Ho\u00e0ng th\u00e0nh Th\u0103ng Long<\/h3>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"audio-player\">\r\n <audio id=\"audioElement\" src=\"https:\/\/historyhub.id.vn\/wp\/wp-content\/uploads\/2025\/06\/mp3-output-ttsfreedotcom.mp3\"><\/audio>\r\n \r\n <div class=\"player-controls\">\r\n <div class=\"progress-container\">\r\n <span id=\"currentTime\" class=\"time\">0:00<\/span>\r\n <div class=\"progress-bar\" id=\"progressContainer\">\r\n <div class=\"progress\" id=\"progress\"><\/div>\r\n <\/div>\r\n <span id=\"duration\" class=\"time\">0:00<\/span>\r\n <\/div>\r\n\r\n <div class=\"volume-control\">\r\n <i class=\"fas fa-volume-up\"><\/i>\r\n <input type=\"range\" id=\"volumeSlider\" min=\"0\" max=\"1\" step=\"0.01\" value=\"0.8\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"transcript\">\r\n <p id=\"transcriptText\">\"Xin k\u00ednh m\u1eddi m\u1ecdi ng\u01b0\u1eddi c\u00f9ng d\u1ea1o b\u01b0\u1edbc \u0111\u1ebfn di t\u00edch c\u00f9ng History Hub\"<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script src=\"audio-guide.js\"><\/script>\r\n<\/body>\r\n<\/html>\r\n\r\n<style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n}\r\n\r\n.audio-guide-container {\r\n max-width: 650px;\r\n margin: 0 auto;\r\n position: relative;\r\n font-family: 'Poppins', sans-serif;\r\n}\r\n\r\n\/* Sealed Scroll (Card Ngang ch\u01b0a m\u1edf) \/\r\n.sealed-scroll {\r\n position: relative;\r\n width: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: all 0.5s ease;\r\n}\r\n\r\n.scroll-paper {\r\n width: 100%;\r\n height: 140px; \/ Kh\u00f3a c\u1ee9ng chi\u1ec1u cao card ch\u01b0a m\u1edf l\u00e0 140px \/\r\n background: linear-gradient(135deg, #F6E2A5 0%, #E8D4A0 100%);\r\n border-radius: 12px 60px 12px 12px;\r\n box-shadow: 0 15px 35px -10px rgba(0,0,0,0.5),\r\n inset 0 4px 10px rgba(255,255,255,0.6),\r\n inset 0 -4px 10px rgba(138,103,50,0.3);\r\n position: relative;\r\n cursor: pointer;\r\n overflow: hidden;\r\n transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n display: flex;\r\n align-items: center;\r\n padding: 0 30px;\r\n}\r\n\r\n.sealed-scroll:hover .scroll-paper {\r\n transform: scale(1.02) rotate(1deg);\r\n}\r\n\r\n.wax-seal {\r\n position: absolute;\r\n left: 40px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n width: 80px;\r\n height: 80px;\r\n background: radial-gradient(circle at 40% 40%, #9B2C2C, #6B1F1F);\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: #F6E2A5;\r\n font-size: 2.2rem;\r\n box-shadow: 0 10px 20px rgba(0,0,0,0.4),\r\n inset 0 4px 8px rgba(255,255,255,0.3);\r\n border: 4px solid #C59A42;\r\n transition: all 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);\r\n pointer-events: none;\r\n}\r\n\r\n.scroll-content {\r\n margin-left: 110px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n width: 100%;\r\n color: #2E2115;\r\n text-align: left;\r\n pointer-events: none;\r\n}\r\n\r\n.scroll-text h3 {\r\n font-family: 'Cinzel', serif;\r\n font-size: 1.3rem;\r\n margin-bottom: 4px;\r\n}\r\n\r\n.scroll-text p {\r\n color: #5A3E1B;\r\n font-weight: 500;\r\n font-size: 0.9rem;\r\n}\r\n\r\n.open-button {\r\n margin-top: 0;\r\n padding: 10px 25px;\r\n background: #2E2115;\r\n color: #F6E2A5;\r\n border: 2px solid #C59A42;\r\n border-radius: 50px;\r\n font-size: 0.9rem;\r\n font-weight: 500;\r\n cursor: pointer;\r\n transition: all 0.4s ease;\r\n white-space: nowrap;\r\n pointer-events: auto;\r\n}\r\n\r\n.open-button:hover {\r\n background: #C59A42;\r\n color: #2E2115;\r\n}\r\n\r\n\/ Opened Parchment (Khung m\u1edf r\u1ed9ng sau khi b\u1ea5m - \u0110\u00daNG B\u1eb0NG K\u00cdCH TH\u01af\u1edaC CARD CH\u01afA M\u1ede) \/\r\n.opened-parchment {\r\n display: none; \/ JS s\u1ebd k\u00edch ho\u1ea1t chuy\u1ec3n th\u00e0nh flex \/\r\n background: linear-gradient(#F6E2A5, #E8D8B0);\r\n border-radius: 12px;\r\n padding: 15px 25px;\r\n box-shadow: 0 15px 35px -10px rgba(0,0,0,0.5),\r\n inset 0 0 80px rgba(245,220,140,0.6);\r\n position: relative;\r\n overflow: hidden;\r\n width: 100%;\r\n height: 140px; \/ Kh\u00f3a c\u1ee9ng chi\u1ec1u cao b\u1eb1ng \u0111\u00fang card c\u0169 140px \/\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 20px;\r\n}\r\n\r\n.opened-parchment::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(138,103,50,0.08) 20px, rgba(138,103,50,0.08) 40px);\r\n pointer-events: none;\r\n}\r\n\r\n\/ V\u00f9ng b\u00ean tr\u00e1i: N\u00fat Play & Ti\u00eau \u0111\u1ec1 \/\r\n.parchment-left {\r\n display: flex;\r\n align-items: center;\r\n gap: 15px;\r\n flex-shrink: 0;\r\n z-index: 1;\r\n}\r\n\r\n.parchment-header {\r\n text-align: left;\r\n}\r\n\r\n.parchment-header h2 {\r\n font-family: 'Cinzel', serif;\r\n font-size: 0.85rem;\r\n color: #8A6732;\r\n letter-spacing: 1px;\r\n}\r\n\r\n.parchment-header h3 {\r\n font-family: 'Cormorant Garamond', serif;\r\n font-size: 1.1rem;\r\n color: #2E2115;\r\n font-weight: bold;\r\n margin-top: 2px;\r\n}\r\n\r\n\/ V\u00f9ng \u1edf gi\u1eefa: B\u1ed9 \u0111i\u1ec1u khi\u1ec3n \u00e2m thanh \/\r\n.audio-player {\r\n flex: 1;\r\n background: rgba(44, 33, 21, 0.95);\r\n border-radius: 12px;\r\n padding: 12px 18px;\r\n border: 1px solid #8A6732;\r\n box-shadow: inset 0 3px 10px rgba(0,0,0,0.6);\r\n z-index: 1;\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.player-controls {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n width: 100%;\r\n}\r\n\r\n.control-btn {\r\n width: 48px;\r\n height: 48px;\r\n background: #C59A42;\r\n color: #2E2115;\r\n border: none;\r\n border-radius: 50%;\r\n font-size: 1.1rem;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n box-shadow: 0 4px 10px rgba(197,154,66,0.4);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.control-btn:hover {\r\n transform: scale(1.08);\r\n background: #F6E2A5;\r\n}\r\n\r\n.progress-container {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n width: 100%;\r\n}\r\n\r\n.progress-bar {\r\n flex: 1;\r\n height: 5px;\r\n background: #5A3E1B;\r\n border-radius: 999px;\r\n position: relative;\r\n cursor: pointer;\r\n}\r\n\r\n.progress {\r\n height: 100%;\r\n width: 0%;\r\n background: linear-gradient(to right, #C59A42, #F6E2A5);\r\n border-radius: 999px;\r\n box-shadow: 0 0 8px #F6E2A5;\r\n}\r\n\r\n.time {\r\n font-family: monospace;\r\n font-size: 0.8rem;\r\n min-width: 32px;\r\n color: #C59A42;\r\n}\r\n\r\n.volume-control {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #C59A42;\r\n justify-content: flex-end;\r\n}\r\n\r\n.volume-control i {\r\n font-size: 0.85rem;\r\n}\r\n\r\n.volume-control input {\r\n accent-color: #C59A42;\r\n width: 65px;\r\n height: 3px;\r\n}\r\n\r\n\/ V\u00f9ng b\u00ean ph\u1ea3i: V\u0103n b\u1ea3n thu nh\u1ecf \/\r\n.transcript {\r\n width: 160px;\r\n font-style: italic;\r\n color: #5A3E1B;\r\n line-height: 1.4;\r\n text-align: left;\r\n font-size: 0.78rem;\r\n border-left: 1px solid rgba(138,103,50,0.3);\r\n padding-left: 15px;\r\n z-index: 1;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 4;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n}\r\n\r\n\/ Responsive \/\r\n@media (max-width: 640px) {\r\n .audio-guide-container { \r\n padding: 0 15px; \r\n }\r\n .scroll-paper { \r\n padding: 0 15px;\r\n height: 120px;\r\n }\r\n .wax-seal {\r\n left: 15px;\r\n width: 60px;\r\n height: 60px;\r\n font-size: 1.6rem;\r\n }\r\n .scroll-content {\r\n margin-left: 75px;\r\n }\r\n .scroll-text h3 { font-size: 0.8rem; }\r\n .scroll-text p { font-size: 0.6rem; }\r\n .open-button { padding: 8px 15px; font-size: 0.8rem; }\r\n \r\n .opened-parchment { \r\n flex-direction: column; \r\n height: auto; \r\n padding: 15px;\r\n gap: 10px;\r\n }\r\n .parchment-left { width: 100%; justify-content: flex-start; }\r\n .audio-player { width: 100%; }\r\n .transcript { width: 100%; border-left: none; padding-left: 0; text-align: center; }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n document.addEventListener('DOMContentLoaded', () => {\r\n const sealedScroll = document.getElementById('sealedScroll');\r\n const openedParchment = document.getElementById('openedParchment');\r\n const openButton = document.getElementById('openButton');\r\n const waxSeal = document.getElementById('waxSeal');\r\n \r\n const audio = document.getElementById('audioElement');\r\n const playPauseBtn = document.getElementById('playPauseBtn');\r\n const progress = document.getElementById('progress');\r\n const progressContainer = document.getElementById('progressContainer');\r\n const currentTimeEl = document.getElementById('currentTime');\r\n const durationEl = document.getElementById('duration');\r\n const volumeSlider = document.getElementById('volumeSlider');\r\n\r\n let isPlaying = false;\r\n\r\n \/\/ Format time\r\n function formatTime(seconds) {\r\n if (!seconds || isNaN(seconds)) return '0:00';\r\n const min = Math.floor(seconds \/ 60);\r\n const sec = Math.floor(seconds % 60);\r\n return `${min}:${sec < 10 ? '0' : ''}${sec}`;\r\n }\r\n\r\n \/\/ Initialize audio\r\n function initAudio() {\r\n audio.volume = 0.8;\r\n \r\n audio.addEventListener('loadedmetadata', () => {\r\n durationEl.textContent = formatTime(audio.duration);\r\n });\r\n\r\n audio.addEventListener('timeupdate', () => {\r\n if (!audio.duration) return;\r\n const percent = (audio.currentTime \/ audio.duration) 100;\r\n progress.style.width = percent + '%';\r\n currentTimeEl.textContent = formatTime(audio.currentTime);\r\n });\r\n\r\n audio.addEventListener('ended', () => {\r\n isPlaying = false;\r\n playPauseBtn.innerHTML = `<i class=\"fas fa-play\"><\/i>`;\r\n });\r\n }\r\n\r\n \/\/ Open animation\r\n function openAudioGuide() {\r\n waxSeal.style.transition = 'all 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55)';\r\n waxSeal.style.transform = 'translateY(-50%) scale(1.45) rotate(28deg)';\r\n waxSeal.style.opacity = '0.25';\r\n\r\n setTimeout(() => {\r\n sealedScroll.style.opacity = '0';\r\n sealedScroll.style.transform = 'scale(0.8) translateY(50px)';\r\n\r\n setTimeout(() => {\r\n sealedScroll.style.display = 'none';\r\n \r\n \/\/ \u0110\u1ed5i hi\u1ec3n th\u1ecb sang flex cho \u0111\u00fang layout ngang\r\n openedParchment.style.display = 'flex';\r\n\r\n openedParchment.style.opacity = '0';\r\n openedParchment.style.transform = 'translateY(40px)';\r\n\r\n setTimeout(() => {\r\n openedParchment.style.transition = 'all 1s cubic-bezier(0.23,1,0.32,1)';\r\n openedParchment.style.opacity = '1';\r\n openedParchment.style.transform = 'translateY(0)';\r\n }, 50);\r\n }, 550);\r\n }, 400);\r\n }\r\n\r\n \/\/ Event Listeners\r\n openButton.addEventListener('click', (e) => {\r\n e.stopPropagation();\r\n openAudioGuide();\r\n });\r\n sealedScroll.addEventListener('click', openAudioGuide);\r\n\r\n playPauseBtn.addEventListener('click', (e) => {\r\n e.stopPropagation(); \/\/ Ng\u0103n s\u1ef1 ki\u1ec7n click lan ra ngo\u00e0i\r\n if (!audio) return;\r\n \r\n if (isPlaying) {\r\n audio.pause();\r\n playPauseBtn.innerHTML = `<i class=\"fas fa-play\"><\/i>`;\r\n } else {\r\n audio.play();\r\n playPauseBtn.innerHTML = `<i class=\"fas fa-pause\"><\/i>`;\r\n }\r\n isPlaying = !isPlaying;\r\n });\r\n\r\n progressContainer.addEventListener('click', (e) => {\r\n e.stopPropagation();\r\n const rect = progressContainer.getBoundingClientRect();\r\n const pos = (e.clientX - rect.left) \/ rect.width;\r\n audio.currentTime = pos * audio.duration;\r\n });\r\n\r\n volumeSlider.addEventListener('click', (e) => {\r\n e.stopPropagation(); \/\/ Ng\u0103n click tr\u01b0\u1ee3t volume l\u00e0m \u1ea3nh h\u01b0\u1edfng card\r\n });\r\n\r\n volumeSlider.addEventListener('input', (e) => {\r\n audio.volume = parseFloat(volumeSlider.value);\r\n });\r\n\r\n \/\/ Initialize\r\n initAudio();\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-60c1392 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"60c1392\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"has_eae_slider elementor-element elementor-element-3b7c5cb e-flex e-con-boxed e-con e-parent\" data-id=\"3b7c5cb\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7c8bc20 elementor-widget elementor-widget-text-editor\" data-id=\"7c8bc20\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Ch\u00fang m\u00ecnh \u0111ang c\u1ed1 g\u1eafng t\u00edch h\u1ee3p th\u00eam c\u00e1c h\u00ecnh \u1ea3nh 360 \u0111\u1ed9, trong th\u1eddi gian t\u1edbi s\u1ebd ra m\u1eaft nhi\u1ec1u \u0111\u1ecba \u0111i\u1ec3m h\u01a1n n\u1eefa!<\/p>\t\t\t\t\t\t\t\t<\/div>\n\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>Kinh th\u00e0nh Hu\u1ebf Thuy\u1ebft Minh – Audio Guide Nghe m\u00f4 t\u1ea3 T\u01b0 li\u1ec7u, th\u00f4ng tin v\u1ec1 di t\u00edch M\u1ede T\u01af […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_siteseo_robots_primary_cat":"","site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1597","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/historyhub.id.vn\/wp\/wp-json\/wp\/v2\/pages\/1597","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/historyhub.id.vn\/wp\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/historyhub.id.vn\/wp\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/historyhub.id.vn\/wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/historyhub.id.vn\/wp\/wp-json\/wp\/v2\/comments?post=1597"}],"version-history":[{"count":218,"href":"https:\/\/historyhub.id.vn\/wp\/wp-json\/wp\/v2\/pages\/1597\/revisions"}],"predecessor-version":[{"id":4081,"href":"https:\/\/historyhub.id.vn\/wp\/wp-json\/wp\/v2\/pages\/1597\/revisions\/4081"}],"wp:attachment":[{"href":"https:\/\/historyhub.id.vn\/wp\/wp-json\/wp\/v2\/media?parent=1597"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}