{"product_id":"html-book","title":"HTML Book","description":"\u003cp\u003e\u003cmeta charset=\"UTF-8\"\u003e \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\u003c\/p\u003e\n\u003c!-- Tailwind CSS CDN --\u003e\n\u003cp\u003e\u003cscript src=\"https:\/\/cdn.tailwindcss.com\"\u003e\u003c\/script\u003e \u003clink rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\"\u003e \u003clink rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin=\"\"\u003e \u003clink href=\"https:\/\/fonts.googleapis.com\/css2?family=Be+Vietnam+Pro:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500\u0026amp;family=Playfair+Display:ital,wght@0,700;0,800;1,700\u0026amp;family=Lora:ital,wght@0,400;0,600;1,400;1,600\u0026amp;display=swap\" rel=\"stylesheet\"\u003e\u003c\/p\u003e\n\u003cstyle\u003e\n    body {\n      background-color: #f0eae1;\n      font-family: 'Be Vietnam Pro', sans-serif;\n      -webkit-font-smoothing: antialiased;\n    }\n\n    \/* HIỆU ỨNG TỪNG TỪ *\/\n    .word-span {\n      display: inline-block;\n      padding: 0 2px;\n      border-radius: 4px;\n      transition: all 0.15s ease;\n    }\n\n    \/* Chế độ Tra từ lẻ *\/\n    body.mode-word .word-span {\n      cursor: pointer;\n      border-bottom: 2px dashed #8d4925;\n    }\n    body.mode-word .word-span:hover {\n      color: #c66b27;\n      background-color: #f5e6d3;\n      transform: translateY(-1px);\n    }\n\n    \/* Highlight từ khi nghe ở chế độ 1 *\/\n    body.mode-paragraph .word-span.highlight-reading {\n      background-color: #ffe082 !important;\n      color: #000000 !important;\n      font-weight: 600;\n      box-shadow: 0 2px 6px rgba(255, 224, 130, 0.4);\n    }\n\n    \/* Highlight đoạn văn đang được đọc *\/\n    .content-row-item {\n      transition: all 0.3s ease;\n    }\n    .content-row-item.active-reading-row {\n      border-left-color: #d84315 !important;\n      background-color: #fdf8f2;\n      box-shadow: inset 4px 0 0 0 #d84315;\n    }\n\n    \/* ==========================================================================\n       HỆ THỐNG KHUNG LẬT ẢNH 3D - HIỂN THỊ TRỌN VẸN 100% ẢNH\n       ========================================================================== *\/\n    .flip-container {\n      perspective: 1000px;\n    }\n\n    \/* Ô tải ảnh ban đầu *\/\n    .initial-uploader {\n      position: relative;\n      background: #fdfaf5;\n      border: 2px dashed #8d4925;\n      border-radius: 12px;\n      padding: 30px 20px;\n      cursor: pointer;\n      text-align: center;\n      transition: all 0.3s ease;\n    }\n    .initial-uploader:hover {\n      background: #f5e6d3;\n      border-color: #c66b27;\n    }\n    .initial-uploader input[type=\"file\"] {\n      position: absolute;\n      width: 100%; height: 100%;\n      top: 0; left: 0;\n      opacity: 0; cursor: pointer;\n    }\n\n    \/* Thẻ lật 3D co giãn tự động *\/\n    .flip-card {\n      width: 100%;\n      position: relative;\n      transform-style: preserve-3d;\n      transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n      display: none;\n      cursor: pointer;\n    }\n\n    .flip-card.flipped {\n      transform: rotateY(180deg);\n    }\n\n    .card-face {\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      -webkit-backface-visibility: hidden;\n      backface-visibility: hidden;\n      border-radius: 12px;\n      box-sizing: border-box;\n    }\n\n    \/* MẶT TRƯỚC: GIỮ NGUYÊN 100% HÌNH ẢNH *\/\n    .card-front {\n      background: transparent;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n    .card-front img {\n      width: 100%;\n      height: 100%;\n      object-fit: contain;\n      border-radius: 12px;\n      box-shadow: 0 8px 25px rgba(0,0,0,0.1);\n    }\n\n    \/* MẶT SAU: Chứa thông tin Prompt *\/\n    .card-back {\n      background: #8d4925;\n      color: #f2e3c9;\n      transform: rotateY(180deg);\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 24px;\n      text-align: center;\n      box-shadow: 0 8px 25px rgba(0,0,0,0.15);\n    }\n\n    .flip-hint {\n      position: absolute;\n      bottom: 12px;\n      left: 50%;\n      transform: translateX(-50%);\n      font-size: 11px;\n      background: rgba(75, 44, 32, 0.9);\n      color: #fff;\n      padding: 4px 14px;\n      border-radius: 20px;\n      pointer-events: none;\n      letter-spacing: 1px;\n      white-space: nowrap;\n      box-shadow: 0 2px 8px rgba(0,0,0,0.2);\n    }\n    .card-back .flip-hint {\n      background: rgba(255, 255, 255, 0.2);\n      color: #f2e3c9;\n    }\n\n    \/* KHU VỰC HIỂN THỊ CHẾ ĐỘ 3: KARAOKE SONG NGỮ THEO PHÂN ĐOẠN NGẮN *\/\n    .chunk-translation-container {\n      display: none;\n      background: #1e1e1e;\n      border-radius: 14px;\n      box-shadow: 0 10px 30px rgba(0,0,0,0.25);\n      border: 1px solid #333;\n    }\n    body.mode-translation .chunk-translation-container {\n      display: block; \n    }\n\n    \/* Các phần tử con (từng từ hoặc cụm từ) *\/\n    .kr-en, .kr-vi {\n      display: inline-block;\n      margin: 0 4px;\n      padding: 2px 6px;\n      border-radius: 4px;\n      transition: all 0.1s ease;\n    }\n\n    \/* HIỆU ỨNG TÔ MÀU ĐUỔI KARAOKE *\/\n    .kr-en.active {\n      color: #ffffff;\n      background-color: #d84315; \n      font-weight: 700;\n      transform: scale(1.08);\n      box-shadow: 0 4px 10px rgba(216, 67, 21, 0.4);\n    }\n    .kr-vi.active {\n      color: #000000;\n      background-color: #ffe082; \n      font-weight: 700;\n      transform: scale(1.05);\n      box-shadow: 0 4px 10px rgba(255, 224, 130, 0.4);\n    }\n\n    \/* POP-UP THANH ĐÁY (Được đẩy cao lên để tránh đè Nav Bar) *\/\n    .sync-translation-bar {\n      position: fixed;\n      bottom: -150px;\n      left: 50%;\n      transform: translateX(-50%);\n      width: 92%;\n      max-width: 600px;\n      background: rgba(75, 44, 32, 0.96);\n      backdrop-filter: blur(10px);\n      color: #ffffff;\n      padding: 16px 20px;\n      border-radius: 14px;\n      box-shadow: 0 -8px 30px rgba(0,0,0,0.3);\n      z-index: 9999;\n      transition: bottom 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.1);\n    }\n    .sync-translation-bar.active { bottom: 85px; }\n  \u003c\/style\u003e\n\u003c!-- ==========================================================================\n       TAB 1: HOME (Giao diện chính đọc sách và soạn thảo)\n       ========================================================================== --\u003e\n\u003cdiv class=\"tab-view block\" id=\"view-home\"\u003e\n\u003cdiv class=\"max-w-[860px] mx-auto bg-[#fdfaf5] rounded-2xl overflow-hidden shadow-xl border border-[#e2d1b0] mb-6\"\u003e\n\u003c!-- HEADER SÁCH SANG TRỌNG --\u003e\n\u003cdiv class=\"bg-gradient-to-r from-[#4b2c20] via-[#8d4925] to-[#c66b27] px-6 py-10 text-center\"\u003e\n\u003cdiv class=\"text-[11px] tracking-[4px] text-[#f2e3c9] uppercase mb-3 font-semibold opacity-90\"\u003eBilingual Heartfelt Edition · Ấn Bản Song Ngữ Cảm Xúc\u003c\/div\u003e\n\u003ch1 class=\"font-['Playfair_Display'] text-3xl md:text-4xl text-white font-extrabold mb-2 leading-tight\"\u003eShadows over the Savannah\u003c\/h1\u003e\n\u003ch2 class=\"text-lg md:text-xl text-[#f2e3c9] font-light italic mb-5\"\u003eBóng Tối Trên Vùng Savannah\u003c\/h2\u003e\n\u003cdiv class=\"w-20 h-1 bg-[#f4a623] mx-auto rounded\"\u003e\u003cbr\u003e\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c!-- NỘI DUNG CHÍNH CỦA SÁCH --\u003e\n\u003cdiv class=\"px-6 py-8 md:px-12 md:py-10\"\u003e\n\u003cdiv class=\"text-center mb-8\"\u003e\n\u003cspan class=\"inline-block bg-[#4b2c20] text-[#f2e3c9] text-[10px] tracking-[3px] uppercase px-5 py-1.5 rounded-full font-semibold\"\u003eChapter 1 · Chương 1\u003c\/span\u003e\n\u003ch3 class=\"font-['Playfair_Display'] text-2xl text-[#4b2c20] mt-4 mb-2 font-bold\"\u003eThe Cradle of Humanity's Tears\u003c\/h3\u003e\n\u003c\/div\u003e\n\u003c!-- BỘ ĐIỀU KHIỂN \u0026 CHUYỂN CHẾ ĐỘ --\u003e\n\u003cdiv class=\"flex flex-col items-center gap-4 mb-8\"\u003e\n\u003cdiv class=\"bg-[#f4ece1] p-1.5 rounded-full inline-flex flex-wrap justify-center gap-1 border border-[#e2d1b0]\"\u003e\n\u003cbutton id=\"mode-p-btn\" class=\"px-4 py-2 text-xs md:text-sm font-semibold text-[#795548] rounded-full transition-all duration-200 active\"\u003e🎧 Nghe cả đoạn\u003c\/button\u003e \u003cbutton id=\"mode-w-btn\" class=\"px-4 py-2 text-xs md:text-sm font-semibold text-[#795548] rounded-full transition-all duration-200\"\u003e🔤 Tra từ lẻ\u003c\/button\u003e \u003cbutton id=\"mode-t-btn\" class=\"px-4 py-2 text-xs md:text-sm font-semibold text-[#795548] rounded-full transition-all duration-200\"\u003e📝 Karaoke cụm ngắn\u003c\/button\u003e\n\u003c\/div\u003e\n\u003c!-- Khung điều khiển phát Audiobook toàn quyển sách --\u003e\n\u003cdiv id=\"audio-panel\" class=\"flex gap-3\"\u003e\n\u003cbutton id=\"btn-play\" class=\"bg-[#4b2c20] hover:bg-[#5d3a2e] text-white px-6 py-2.5 rounded-full font-semibold text-sm flex items-center gap-2 shadow-md transition-all\"\u003e \u003cspan\u003e▶\u003c\/span\u003e Nghe từ đầu sách \u003c\/button\u003e \u003cbutton id=\"btn-stop\" class=\"bg-[#b71c1c] hover:bg-[#d32f2f] text-white px-6 py-2.5 rounded-full font-semibold text-sm flex items-center gap-2 shadow-md transition-all hidden\"\u003e \u003cspan\u003e⏹\u003c\/span\u003e Dừng đọc sách \u003c\/button\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c!-- DANH SÁCH CÁC ĐOẠN VĂN TRẢI DÀI LIÊN TỤC --\u003e\n\u003cdiv class=\"space-y-8\" id=\"paragraphs-container\"\u003e\n\u003c!-- ĐOẠN VĂN SỐ 1 --\u003e\n\u003cdiv data-id=\"paragraph-1\" class=\"grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8 border-l-4 border-[#c66b27] pl-4 md:pl-6 py-3 rounded-r-xl content-row-item\"\u003e\n\u003c!-- Cột Tiếng Anh --\u003e\n\u003cdiv class=\"relative group\"\u003e\n\u003c!-- Nút phát nhanh riêng cho đoạn này --\u003e \u003cbutton title=\"Nghe riêng đoạn này\" class=\"absolute -left-10 top-1\/2 -translate-y-1\/2 bg-[#8d4925] text-white w-7 h-7 rounded-full flex items-center justify-center text-xs opacity-0 group-hover:opacity-100 transition-opacity duration-200 shadow-md\"\u003e ▶ \u003c\/button\u003e\n\u003cp class=\"font-['Lora'] text-[16.5px] leading-relaxed text-[#2c2c2c] text-justify\" id=\"paragraph-1\"\u003e\u003cspan data-vn=\"Châu Phi\" data-local-en-idx=\"0\" data-chunk=\"0\" data-global-idx=\"0\" class=\"word-span\"\u003eAfrica\u003c\/span\u003e \u003cspan data-vn=\"thì, là\" data-local-en-idx=\"1\" data-chunk=\"0\" data-global-idx=\"1\" class=\"word-span\"\u003eis\u003c\/span\u003e \u003cspan data-vn=\"thường xuyên\" data-local-en-idx=\"2\" data-chunk=\"0\" data-global-idx=\"2\" class=\"word-span\"\u003eoften\u003c\/span\u003e \u003cspan data-vn=\"được ca ngợi\" data-local-en-idx=\"3\" data-chunk=\"0\" data-global-idx=\"3\" class=\"word-span\"\u003ecelebrated\u003c\/span\u003e \u003cspan data-vn=\"như là\" data-local-en-idx=\"4\" data-chunk=\"0\" data-global-idx=\"4\" class=\"word-span\"\u003eas\u003c\/span\u003e \u003cspan data-vn=\"từ xác định (the)\" data-local-en-idx=\"0\" data-chunk=\"1\" data-global-idx=\"5\" class=\"word-span\"\u003ethe\u003c\/span\u003e \u003cspan data-vn=\"cái nôi\" data-local-en-idx=\"1\" data-chunk=\"1\" data-global-idx=\"6\" class=\"word-span\"\u003ecradle\u003c\/span\u003e \u003cspan data-vn=\"của\" data-local-en-idx=\"2\" data-chunk=\"1\" data-global-idx=\"7\" class=\"word-span\"\u003eof\u003c\/span\u003e \u003cspan data-vn=\"nền văn minh\" data-local-en-idx=\"3\" data-chunk=\"1\" data-global-idx=\"8\" class=\"word-span\"\u003ecivilization,\u003c\/span\u003e \u003cspan data-vn=\"một\" data-local-en-idx=\"0\" data-chunk=\"2\" data-global-idx=\"9\" class=\"word-span\"\u003ea\u003c\/span\u003e \u003cspan data-vn=\"bao la\" data-local-en-idx=\"1\" data-chunk=\"2\" data-global-idx=\"10\" class=\"word-span\"\u003evast\u003c\/span\u003e \u003cspan data-vn=\"lục địa\" data-local-en-idx=\"2\" data-chunk=\"2\" data-global-idx=\"11\" class=\"word-span\"\u003econtinent\u003c\/span\u003e \u003cspan data-vn=\"của\" data-local-en-idx=\"0\" data-chunk=\"3\" data-global-idx=\"12\" class=\"word-span\"\u003eof\u003c\/span\u003e \u003cspan data-vn=\"đẹp ngộp thở\" data-local-en-idx=\"1\" data-chunk=\"3\" data-global-idx=\"13\" class=\"word-span\"\u003ebreathtaking\u003c\/span\u003e \u003cspan data-vn=\"phong cảnh\" data-local-en-idx=\"2\" data-chunk=\"3\" data-global-idx=\"14\" class=\"word-span\"\u003elandscapes\u003c\/span\u003e \u003cspan data-vn=\"và\" data-local-en-idx=\"0\" data-chunk=\"4\" data-global-idx=\"15\" class=\"word-span\"\u003eand\u003c\/span\u003e \u003cspan data-vn=\"vô tận\" data-local-en-idx=\"1\" data-chunk=\"4\" data-global-idx=\"16\" class=\"word-span\"\u003eimmense\u003c\/span\u003e \u003cspan data-vn=\"tự nhiên\" data-local-en-idx=\"2\" data-chunk=\"4\" data-global-idx=\"17\" class=\"word-span\"\u003enatural\u003c\/span\u003e \u003cspan data-vn=\"tài nguyên\" data-local-en-idx=\"3\" data-chunk=\"4\" data-global-idx=\"18\" class=\"word-span\"\u003ewealth.\u003c\/span\u003e \u003cspan data-vn=\"Thế nhưng\" data-local-en-idx=\"0\" data-chunk=\"5\" data-global-idx=\"19\" class=\"word-span\"\u003eYet,\u003c\/span\u003e \u003cspan data-vn=\"phía sau, dưới\" data-local-en-idx=\"1\" data-chunk=\"5\" data-global-idx=\"20\" class=\"word-span\"\u003ebeneath\u003c\/span\u003e \u003cspan data-vn=\"từ xác định (the)\" data-local-en-idx=\"2\" data-chunk=\"5\" data-global-idx=\"21\" class=\"word-span\"\u003ethe\u003c\/span\u003e \u003cspan data-vn=\"vàng rực\" data-local-en-idx=\"3\" data-chunk=\"5\" data-global-idx=\"22\" class=\"word-span\"\u003egolden\u003c\/span\u003e \u003cspan data-vn=\"hoàng hôn\" data-local-en-idx=\"4\" data-chunk=\"5\" data-global-idx=\"23\" class=\"word-span\"\u003esunsets\u003c\/span\u003e \u003cspan data-vn=\"của\" data-local-en-idx=\"0\" data-chunk=\"6\" data-global-idx=\"24\" class=\"word-span\"\u003eof\u003c\/span\u003e \u003cspan data-vn=\"từ xác định (the)\" data-local-en-idx=\"1\" data-chunk=\"6\" data-global-idx=\"25\" class=\"word-span\"\u003ethe\u003c\/span\u003e \u003cspan data-vn=\"vùng Savannah\" data-local-en-idx=\"2\" data-chunk=\"6\" data-global-idx=\"26\" class=\"word-span\"\u003eSavannah\u003c\/span\u003e \u003cspan data-vn=\"ẩn chứa, nằm\" data-local-en-idx=\"0\" data-chunk=\"7\" data-global-idx=\"27\" class=\"word-span\"\u003elies\u003c\/span\u003e \u003cspan data-vn=\"một\" data-local-en-idx=\"1\" data-chunk=\"7\" data-global-idx=\"28\" class=\"word-span\"\u003ea\u003c\/span\u003e \u003cspan data-vn=\"lịch sử\" data-local-en-idx=\"2\" data-chunk=\"7\" data-global-idx=\"29\" class=\"word-span\"\u003ehistory\u003c\/span\u003e \u003cspan data-vn=\"khắc sâu\" data-local-en-idx=\"0\" data-chunk=\"8\" data-global-idx=\"30\" class=\"word-span\"\u003eetched\u003c\/span\u003e \u003cspan data-vn=\"trong\" data-local-en-idx=\"1\" data-chunk=\"8\" data-global-idx=\"31\" class=\"word-span\"\u003ein\u003c\/span\u003e \u003cspan data-vn=\"sâu sắc\" data-local-en-idx=\"2\" data-chunk=\"8\" data-global-idx=\"32\" class=\"word-span\"\u003eprofound\u003c\/span\u003e \u003cspan data-vn=\"nỗi buồn đau\" data-local-en-idx=\"3\" data-chunk=\"8\" data-global-idx=\"33\" class=\"word-span\"\u003esorrow.\u003c\/span\u003e\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c!-- Cột Tiếng Việt --\u003e\n\u003cdiv class=\"bg-[#fdf2e9] rounded-xl p-5 border border-[#f5d9c3]\"\u003e\n\u003cp class=\"text-[15.5px] leading-relaxed text-[#4b2c20] text-justify font-sans\"\u003eChâu Phi thường được ca ngợi là cái nôi của nền văn minh, một lục địa bao la với những phong cảnh đẹp ngộp thở cùng nguồn tài nguyên thiên nhiên vô tận. Thế nhưng, ẩn sâu đằng sau dải hoàng hôn vàng rực rỡ của vùng đồng cỏ hoang dã Savannah lại ẩn chứa một dòng lịch sử khắc sâu những nỗi buồn đau thấu tận tâm can.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c!-- KHU VỰC HIỂN THỊ CHẾ ĐỘ 3: KARAOKE SONG NGỮ THEO PHÂN ĐOẠN NGẮN --\u003e\n\u003cdiv id=\"chunk-container\" class=\"chunk-translation-container p-8 my-8 text-center\"\u003e\n\u003cdiv id=\"sub-en\" class=\"font-['Lora'] text-2xl md:text-3xl font-semibold text-[#888] mb-4 min-h-[38px] subtitle-row-en\"\u003eReady...\u003c\/div\u003e\n\u003cdiv id=\"sub-vi\" class=\"font-sans text-lg md:text-xl font-medium text-[#666] min-h-[30px] subtitle-row-vi\"\u003eHệ thống Karaoke song ngữ sẵn sàng...\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c!-- HỆ THỐNG KHUNG LẬT ẢNH 3D --\u003e\n\u003cdiv class=\"flip-container my-8\"\u003e\n\u003cdiv id=\"upload-box-1\" class=\"initial-uploader\"\u003e\n\u003cinput accept=\"image\/*\" type=\"file\"\u003e\n\u003cp class=\"text-xs text-[#8d4925] font-bold tracking-wider uppercase\"\u003e📸 [BẤM ĐỂ TẢI TRANH MINH HỌA]\u003c\/p\u003e\n\u003cp class=\"text-sm text-[#5d4037] mt-1.5 italic\"\u003ePrompt: \"A poignant 3D Pixar-style scene: A small, cute African child...\"\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv id=\"card-1\" class=\"flip-card\"\u003e\n\u003cdiv class=\"card-face card-front\"\u003e\n\u003cimg alt=\"Mặt trước ảnh\" id=\"img-1\"\u003e\n\u003cdiv class=\"flip-hint\"\u003e🔄 Bấm xem Prompt gợi ý\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"card-face card-back\"\u003e\n\u003ch5 class=\"text-[#f4a623] text-sm tracking-widest uppercase mb-2 font-bold\"\u003e🎨 Prompt Artwork\u003c\/h5\u003e\n\u003cp class=\"text-sm md:text-base leading-relaxed italic max-w-md mx-auto font-sans\"\u003e\"A poignant 3D Pixar-style scene: A small, cute African child sitting alone on cracked, dry earth. In the child's hand is a single, withered wildflower. The lighting is warm yet melancholic.\"\u003c\/p\u003e\n\u003cdiv class=\"flip-hint\"\u003e🔄 Bấm xem lại ảnh\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c!-- PHÂN TRANG --\u003e\n\u003cdiv class=\"text-center border-t border-[#e6dcc5] pt-5 mt-8\"\u003e\u003cspan class=\"text-xs text-[#8d6e63] tracking-widest font-medium uppercase\"\u003e— Page 1 — · Shadows over the Savannah\u003c\/span\u003e\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c!-- BẢNG SOẠN THẢO NỘI DUNG MỚI (CREATOR PANEL) --\u003e\n\u003cdiv class=\"max-w-[860px] mx-auto bg-[#eae1d4] rounded-2xl p-6 mb-12 border border-[#c6aa8c] shadow-lg\"\u003e\n\u003cdiv class=\"flex justify-between items-center mb-2\"\u003e\n\u003ch4 class=\"text-[#4b2c20] font-bold text-lg flex items-center gap-2\"\u003e✍️ Công cụ soạn thảo bài học Song Ngữ\u003c\/h4\u003e\n\u003cspan class=\"text-[10px] bg-[#8d4925] text-[#f2e3c9] px-2.5 py-1 rounded-full font-bold uppercase tracking-wider\"\u003e⚡️ Powered by Google Translate AI\u003c\/span\u003e\n\u003c\/div\u003e\n\u003cp class=\"text-xs text-[#6d4c41] mb-4 leading-relaxed\"\u003eNhập văn bản tiếng Anh vào ô bên dưới. Bạn có thể bấm nút \u003cb\u003e\"✨ Tự động dịch cả đoạn\"\u003c\/b\u003e để hệ thống tự điền nghĩa tiếng Việt, hoặc để trống ô dịch nghĩa để hệ thống tự dịch từng từ đơn khi click tra cứu.\u003c\/p\u003e\n\u003cdiv class=\"space-y-4\"\u003e\n\u003cdiv\u003e\n\u003cdiv class=\"flex justify-between items-center mb-1\"\u003e\n\u003clabel class=\"block text-xs font-bold text-[#4b2c20] uppercase\"\u003eNội dung Tiếng Anh:\u003c\/label\u003e \u003cbutton class=\"text-xs text-[#8d4925] hover:text-[#4b2c20] font-bold flex items-center gap-1 transition-all\" id=\"btn-auto-translate\"\u003e ✨ Tự động dịch cả đoạn \u003c\/button\u003e\n\u003c\/div\u003e\n\u003ctextarea placeholder=\"Ví dụ: Herds of wildlife still roam freely across the plains.\" class=\"w-full p-3 text-sm rounded-lg bg-[#fdfaf5] border border-[#c6aa8c] text-[#2c2c2c] focus:outline-none focus:ring-2 focus:ring-[#8d4925]\" rows=\"3\" id=\"input-en\"\u003e\u003c\/textarea\u003e\n\u003c\/div\u003e\n\u003cdiv\u003e\n\u003clabel class=\"block text-xs font-bold text-[#4b2c20] uppercase mb-1\"\u003eDịch nghĩa Tiếng Việt cả đoạn:\u003c\/label\u003e \u003ctextarea placeholder=\"Bản dịch tiếng Việt xuất hiện tại đây...\" class=\"w-full p-3 text-sm rounded-lg bg-[#fdfaf5] border border-[#c6aa8c] text-[#2c2c2c] focus:outline-none focus:ring-2 focus:ring-[#8d4925]\" rows=\"2\" id=\"input-vi\"\u003e\u003c\/textarea\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"flex justify-between items-center\"\u003e\n\u003cspan class=\"text-[11px] text-[#8d6e63] font-medium\"\u003e💡 Mẹo: Nhấn \u003ckbd class=\"bg-white px-1.5 py-0.5 rounded shadow text-xs\"\u003eCtrl + Enter\u003c\/kbd\u003e để thêm nhanh.\u003c\/span\u003e \u003cbutton class=\"bg-[#8d4925] hover:bg-[#4b2c20] text-white px-6 py-2 rounded-lg text-sm font-bold shadow transition-all flex items-center gap-2\"\u003e ➕ Thêm vào sách \u003c\/button\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c!-- ==========================================================================\n       TAB 2: MANAGE (Quản lý bài học \u0026 Xuất bản tải file)\n       ========================================================================== --\u003e\n\u003cdiv class=\"tab-view hidden max-w-[860px] mx-auto min-h-[60vh] p-6 bg-[#fdfaf5] rounded-2xl shadow-xl border border-[#e2d1b0] mb-6\" id=\"view-manage\"\u003e\n\u003cdiv class=\"text-center py-8 border-b border-[#e2d1b0] mb-6\"\u003e\n\u003cdiv class=\"w-20 h-20 bg-[#f5e6d3] rounded-full flex items-center justify-center mx-auto mb-4 border border-[#8d4925]\"\u003e\u003cspan class=\"text-4xl\"\u003e📂\u003c\/span\u003e\u003c\/div\u003e\n\u003ch3 class=\"font-['Playfair_Display'] text-2xl font-bold text-[#4b2c20] mb-2\"\u003eTrung tâm Xuất Bản \u0026amp; Quản Lý\u003c\/h3\u003e\n\u003cp class=\"text-sm text-[#8d6e63] max-w-md mx-auto leading-relaxed\"\u003eLưu giữ ấn bản cá nhân hóa của bạn. Khi tải xuống, toàn bộ nội dung sách mới tạo và hình ảnh minh họa sẽ được đóng gói offline hoàn hảo.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c!-- KHU VỰC TẢI FILE HTML --\u003e\n\u003cdiv class=\"bg-[#eae1d4] p-6 rounded-xl border border-[#c6aa8c] text-center max-w-xl mx-auto shadow-md\"\u003e\n\u003ch4 class=\"text-[#4b2c20] font-bold text-lg mb-2\"\u003e💾 Lưu trữ Toàn bộ Cuốn sách\u003c\/h4\u003e\n\u003cp class=\"text-xs text-[#6d4c41] mb-6 leading-relaxed\"\u003eFile HTML tải xuống sẽ chứa đầy đủ mã nguồn CSS, JavaScript, nội dung bài học hiện tại, cùng tất cả các đoạn văn bạn đã thêm và ảnh minh họa đã tải lên.\u003c\/p\u003e\n\u003cbutton class=\"w-full md:w-auto bg-[#8d4925] hover:bg-[#4b2c20] text-white px-8 py-4 rounded-xl font-bold text-base shadow-lg transition-all flex items-center justify-center gap-3 mx-auto\"\u003e \u003cspan\u003e📥\u003c\/span\u003e Tải xuống File HTML (.html) \u003c\/button\u003e\n\u003c\/div\u003e\n\u003c!-- THÔNG SỐ ĐOẠN VĂN --\u003e\n\u003cdiv class=\"grid grid-cols-2 gap-4 mt-8 max-w-xl mx-auto\"\u003e\n\u003cdiv class=\"bg-white p-4 rounded-lg border border-[#e2d1b0] text-center\"\u003e\n\u003cspan class=\"block text-xs font-bold text-[#8d6e63] uppercase\"\u003eTổng số đoạn văn\u003c\/span\u003e \u003cspan id=\"stats-paragraphs\" class=\"text-3xl font-extrabold text-[#4b2c20]\"\u003e1\u003c\/span\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"bg-white p-4 rounded-lg border border-[#e2d1b0] text-center\"\u003e\n\u003cspan class=\"block text-xs font-bold text-[#8d6e63] uppercase\"\u003eTrạng thái lưu trữ\u003c\/span\u003e \u003cspan class=\"text-sm font-bold text-green-600 flex items-center justify-center gap-1 mt-2\"\u003e \u003cspan class=\"w-2.5 h-2.5 bg-green-500 rounded-full inline-block animate-pulse\"\u003e\u003c\/span\u003e Sẵn sàng xuất bản \u003c\/span\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c!-- ==========================================================================\n       TAB 3: SETTING (Cài đặt cấu hình giọng đọc AI)\n       ========================================================================== --\u003e\n\u003cdiv class=\"tab-view hidden max-w-[860px] mx-auto min-h-[60vh] p-6 bg-[#fdfaf5] rounded-2xl shadow-xl border border-[#e2d1b0] mb-6\" id=\"view-setting\"\u003e\n\u003cdiv class=\"text-center py-8 border-b border-[#e2d1b0] mb-6\"\u003e\n\u003cdiv class=\"w-20 h-20 bg-[#f5e6d3] rounded-full flex items-center justify-center mx-auto mb-4 border border-[#8d4925]\"\u003e\u003cspan class=\"text-4xl\"\u003e⚙️\u003c\/span\u003e\u003c\/div\u003e\n\u003ch3 class=\"font-['Playfair_Display'] text-2xl font-bold text-[#4b2c20] mb-2\"\u003eCấu hình Hệ thống\u003c\/h3\u003e\n\u003cp class=\"text-sm text-[#8d6e63] max-w-md mx-auto leading-relaxed\"\u003eTùy chỉnh các thông số để tối ưu hóa trải nghiệm học ngoại ngữ của bạn.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"max-w-xl mx-auto space-y-6\"\u003e\n\u003c!-- ĐIỀU CHỈNH TỐC ĐỘ ĐỌC --\u003e\n\u003cdiv class=\"bg-white p-5 rounded-xl border border-[#e2d1b0] shadow-sm\"\u003e\n\u003cdiv class=\"flex justify-between items-center mb-2\"\u003e\n\u003clabel class=\"text-sm font-bold text-[#4b2c20] uppercase\"\u003e⚡️ Tốc độ đọc AI:\u003c\/label\u003e \u003cspan id=\"speed-val\" class=\"text-sm font-bold text-[#8d4925]\"\u003e0.78x\u003c\/span\u003e\n\u003c\/div\u003e\n\u003cinput class=\"w-full h-2 bg-[#f0eae1] rounded-lg appearance-none cursor-pointer accent-[#8d4925]\" id=\"setting-speed\" value=\"0.78\" step=\"0.05\" max=\"1.5\" min=\"0.5\" type=\"range\"\u003e\n\u003cdiv class=\"flex justify-between text-[10px] text-[#8d6e63] mt-1\"\u003e\n\u003cspan\u003e0.5x (Chậm)\u003c\/span\u003e \u003cspan\u003e1.0x (Bình thường)\u003c\/span\u003e \u003cspan\u003e1.5x (Nhanh)\u003c\/span\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c!-- ĐIỀU CHỈNH CỠ CHỮ --\u003e\n\u003cdiv class=\"bg-white p-5 rounded-xl border border-[#e2d1b0] shadow-sm\"\u003e\n\u003clabel class=\"block text-sm font-bold text-[#4b2c20] uppercase mb-3\"\u003e🔎 Cỡ chữ hiển thị:\u003c\/label\u003e\n\u003cdiv class=\"grid grid-cols-3 gap-2\"\u003e\n\u003cbutton class=\"py-2 text-xs font-semibold rounded-lg bg-[#f0eae1] hover:bg-[#8d4925] hover:text-white transition-all text-[#4b2c20]\"\u003eNhỏ\u003c\/button\u003e \u003cbutton class=\"py-2 text-xs font-semibold rounded-lg bg-[#8d4925] text-white transition-all\"\u003eVừa\u003c\/button\u003e \u003cbutton class=\"py-2 text-xs font-semibold rounded-lg bg-[#f0eae1] hover:bg-[#8d4925] hover:text-white transition-all text-[#4b2c20]\"\u003eLớn\u003c\/button\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c!-- POP-UP THANH ĐÁY (Dùng cho Chế độ 1 và Chế độ 2) --\u003e\n\u003cdiv id=\"sync-bar\" class=\"sync-translation-bar\"\u003e\n\u003cbutton class=\"absolute top-2 right-3 text-white opacity-60 hover:opacity-100 text-lg\"\u003e×\u003c\/button\u003e\n\u003cdiv id=\"popup-title\" class=\"text-[10px] text-[#f4a623] font-bold tracking-widest uppercase mb-1\"\u003e🔊 Đang phát âm\u003c\/div\u003e\n\u003cdiv id=\"sync-en\" class=\"font-['Lora'] text-2xl font-bold text-white mb-0.5\"\u003eWord\u003c\/div\u003e\n\u003cdiv id=\"sync-vn\" class=\"text-base text-[#ffe082]\"\u003eNghĩa tiếng Việt\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c!-- ==========================================================================\n       STICKY BOTTOM NAVIGATION BAR (Thanh điều hướng cố định chân trang)\n       ========================================================================== --\u003e\n\u003cdiv class=\"fixed bottom-0 left-0 right-0 bg-[#4b2c20] border-t-2 border-[#8d4925] z-50 shadow-[0_-8px_30px_rgba(0,0,0,0.3)] backdrop-blur-md bg-opacity-95\"\u003e\n\u003cdiv class=\"max-w-[860px] mx-auto flex justify-around items-center py-2.5 px-4\"\u003e\n\u003c!-- Tab Home Button --\u003e \u003cbutton class=\"flex flex-col items-center gap-1 text-[#f2e3c9] transition-all duration-300 scale-105\" id=\"tab-btn-home\"\u003e \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 20 20\" fill=\"currentColor\" class=\"w-6 h-6\"\u003e\n          \u003cpath d=\"M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z\"\u003e\u003c\/path\u003e\n        \u003c\/svg\u003e \u003cspan class=\"text-[10px] font-bold tracking-wider uppercase\"\u003eHome\u003c\/span\u003e \u003c\/button\u003e \u003c!-- Tab Manage Button --\u003e \u003cbutton class=\"flex flex-col items-center gap-1 text-[#8d6e63] hover:text-[#f2e3c9] transition-all duration-300\" id=\"tab-btn-manage\"\u003e \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" fill=\"none\" class=\"w-6 h-6\"\u003e\n          \u003cpath d=\"M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z\" stroke-linejoin=\"round\" stroke-linecap=\"round\"\u003e\u003c\/path\u003e\n        \u003c\/svg\u003e \u003cspan class=\"text-[10px] font-bold tracking-wider uppercase\"\u003eManage\u003c\/span\u003e \u003c\/button\u003e \u003c!-- Tab Setting Button --\u003e \u003cbutton class=\"flex flex-col items-center gap-1 text-[#8d6e63] hover:text-[#f2e3c9] transition-all duration-300\" id=\"tab-btn-setting\"\u003e \u003csvg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" fill=\"none\" class=\"w-6 h-6\"\u003e\n          \u003cpath d=\"M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z\" stroke-linejoin=\"round\" stroke-linecap=\"round\"\u003e\u003c\/path\u003e\n          \u003cpath d=\"M15 12a3 3 0 11-6 0 3 3 0 016 0z\" stroke-linejoin=\"round\" stroke-linecap=\"round\"\u003e\u003c\/path\u003e\n        \u003c\/svg\u003e \u003cspan class=\"text-[10px] font-bold tracking-wider uppercase\"\u003eSetting\u003c\/span\u003e \u003c\/button\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cp\u003e \u003c\/p\u003e","brand":"Solar Gift Card","offers":[{"title":"10,00 $","offer_id":45160737079478,"sku":null,"price":10.0,"currency_code":"USD","in_stock":true},{"title":"25,00 $","offer_id":45160737112246,"sku":null,"price":25.0,"currency_code":"USD","in_stock":true},{"title":"50,00 $","offer_id":45160737145014,"sku":null,"price":50.0,"currency_code":"USD","in_stock":true},{"title":"100,00 $","offer_id":45160737177782,"sku":null,"price":100.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0728\/6734\/8662\/files\/IMG_9370.jpg?v=1780382762","url":"https:\/\/huazang.app\/products\/html-book","provider":"Solar Gift Card","version":"1.0","type":"link"}