H\u1ecdc Ti\u1ebfng Nh\u1eadt Si\u00eau T\u1ed1c - Ng\u00e0y 1<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n body {\r\n font-family: 'Inter', sans-serif;\r\n background-color: #f7fafc;\r\n }\r\n .jp-font {\r\n font-family: 'Noto Sans JP', sans-serif;\r\n }\r\n ruby rt {\r\n font-size: 0.7em;\r\n font-weight: 500;\r\n user-select: none;\r\n }\r\n .hide-furigana ruby rt {\r\n visibility: hidden;\r\n }\r\n .transition-height {\r\n transition: max-height 0.5s ease-in-out;\r\n }\r\n .correct-char { color: #16a34a; }\r\n .incorrect-char { color: #dc2626; text-decoration: underline; }\r\n \r\n \/* --- NEW STYLES FOR UPGRADES --- *\/\r\n \/* Progress Bar *\/\r\n .progress-bar-container {\r\n background-color: #e5e7eb; \/* gray-200 *\/\r\n border-radius: 9999px;\r\n overflow: hidden;\r\n }\r\n .progress-bar {\r\n background-color: #22c55e; \/* green-500 *\/\r\n transition: width 0.5s ease-in-out;\r\n }\r\n \/* Fade transition for conversation *\/\r\n .content-fade {\r\n transition: opacity 0.3s ease-in-out;\r\n }\r\n .fading-out {\r\n opacity: 0;\r\n }\r\n \/* Quiz feedback icons *\/\r\n .feedback-icon {\r\n display: inline-block;\r\n margin-right: 0.5rem;\r\n font-weight: bold;\r\n }\r\n .feedback-correct { color: #16a34a; }\r\n .feedback-incorrect { color: #dc2626; }\r\n <\/style>\r\n<\/head>\r\n<body class=\"bg-gray-50 text-gray-800\">\r\n\r\n <div id=\"app\" class=\"container mx-auto p-4 md:p-8 max-w-4xl\">\r\n <header class=\"text-center mb-8\">\r\n <h1 class=\"text-3xl md:text-4xl font-bold text-sky-700 jp-font\" id=\"main-title\"><\/h1>\r\n <p class=\"text-gray-500 mt-2\">B\u00e0i h\u1ecdc \u0111\u1ea7u ti\u00ean tr\u00ean h\u00e0nh tr\u00ecnh chinh ph\u1ee5c ti\u1ebfng Nh\u1eadt!<\/p>\r\n <\/header>\r\n\r\n \r\n <div class=\"mb-8\">\r\n <h3 class=\"font-bold text-center mb-2\">Ti\u1ebfn \u0111\u1ed9 b\u00e0i h\u1ecdc<\/h3>\r\n <div class=\"progress-bar-container w-full h-4\">\r\n <div id=\"lesson-progress-bar\" class=\"progress-bar h-full text-xs text-white text-center\" style=\"width: 0%;\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <main class=\"space-y-8\">\r\n \r\n <div class=\"bg-white p-4 rounded-xl shadow-md border border-gray-200\">\r\n <h3 class=\"font-bold text-lg mb-3 text-gray-700\">B\u1ea3ng \u0111i\u1ec1u khi\u1ec3n<\/h3>\r\n <div class=\"flex flex-wrap gap-4\">\r\n <button id=\"toggle-furigana\" class=\"toggle-btn\">B\u1eadt Furigana<\/button>\r\n <button id=\"toggle-romaji\" class=\"toggle-btn\">Hi\u1ec7n Romaji<\/button>\r\n <button id=\"toggle-vietnamese\" class=\"toggle-btn\">Hi\u1ec7n Ti\u1ebfng Vi\u1ec7t<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <section id=\"conversation-section\" class=\"lesson-section\"><\/section>\r\n\r\n \r\n <section id=\"reading-section\" class=\"lesson-section\"><\/section>\r\n\r\n \r\n <section id=\"grammar-section\" class=\"lesson-section\"><\/section>\r\n \r\n \r\n <section id=\"quiz-section\" class=\"lesson-section\"><\/section>\r\n <\/main>\r\n\r\n <footer class=\"text-center mt-12 text-gray-400 text-sm\">\r\n <p>Copyright by AzaCan, 2025<\/p>\r\n <\/footer>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ --- DATA FOR DAY 1 ---\r\n const day1Data = {\r\n title: \"Ng\u00e0y 1: Gi\u1edbi thi\u1ec7u v\u00e0 nh\u1eefng \u0111i\u1ec1u \u0111\u01a1n gi\u1ea3n\",\r\n conversation: {\r\n id: 'conversation',\r\n title: \"\u4eca\u65e5\u306e\u4f1a\u8a71 (H\u1ed9i tho\u1ea1i trong ng\u00e0y)\",\r\n context: \"B\u1ed1i c\u1ea3nh: Hai ng\u01b0\u1eddi b\u1ea1n, Tanaka v\u00e0 Suzuki, t\u00ecnh c\u1edd g\u1eb7p nhau.\",\r\n modes: {\r\n polite: {\r\n name: \"Th\u1ec3 l\u1ecbch s\u1ef1 (\u4e01\u5be7\u5f62)\",\r\n dialogue: [\r\n { speaker: \"Tanaka\", jp: \"\u3042\u3001\u9234\u6728[\u3059\u305a\u304d]\u3055\u3093\u3002\u4eca\u65e5[\u304d\u3087\u3046]\u306f\u3069\u3053\u304b\u884c[\u3044]\u304d\u307e\u3059\u304b\u3002\", romaji: \"A, Suzuki-san. Kyou wa doko ka ikimasu ka.\", vi: \"A, anh Suzuki. H\u00f4m nay anh c\u00f3 \u0111i \u0111\u00e2u kh\u00f4ng?\" },\r\n { speaker: \"Suzuki\", jp: \"\u7530\u4e2d[\u305f\u306a\u304b]\u3055\u3093\u3002\u3053\u3093\u306b\u3061\u306f\u3002\u4eca\u65e5[\u304d\u3087\u3046]\u306f\u3069\u3053\u3082\u884c[\u3044]\u304d\u307e\u305b\u3093\u3002\u3042\u307e\u308a\u6691[\u3042\u3064]\u304f\u306a\u3044\u3067\u3059\u304c\u3001\u5bb6[\u3044\u3048]\u3067\u4f11[\u3084\u3059]\u307f\u307e\u3059\u3002\", romaji: \"Tanaka-san. Konnichiwa. Kyou wa doko mo ikimasen. Amari atsukunai desu ga, ie de yasumimasu.\", vi: \"Anh Tanaka. Ch\u00e0o anh. H\u00f4m nay t\u00f4i kh\u00f4ng \u0111i \u0111\u00e2u c\u1ea3. Tr\u1eddi kh\u00f4ng n\u00f3ng l\u1eafm nh\u01b0ng t\u00f4i s\u1ebd ngh\u1ec9 \u1edf nh\u00e0.\" },\r\n { speaker: \"Tanaka\", jp: \"\u305d\u3046\u3067\u3059\u304b\u3002\u79c1[\u308f\u305f\u3057]\u306f\u5e02\u5f79\u6240[\u3057\u3084\u304f\u3057\u3087]\u306b\u884c[\u3044]\u304d\u307e\u3059\u3002\u3067\u3082\u3001\u5e02\u5f79\u6240[\u3057\u3084\u304f\u3057\u3087]\u306f\u306a\u304b\u306a\u304b\u958b[\u3042]\u304d\u307e\u305b\u3093\u306d\u3002\", romaji: \"Sou desu ka. Watashi wa shiyakusho ni ikimasu. Demo, shiyakusho wa nakanaka akimasen ne.\", vi: \"V\u1eady \u00e0. T\u00f4i s\u1ebd \u0111\u1ebfn t\u00f2a th\u1ecb ch\u00ednh. Nh\u01b0ng m\u00e0, t\u00f2a th\u1ecb ch\u00ednh m\u00e3i m\u00e0 kh\u00f4ng m\u1edf c\u1eeda nh\u1ec9.\" },\r\n { speaker: \"Suzuki\", jp: \"\u3048\u3048\u3002\u3042\u305d\u3053\u306f\u4eba[\u3072\u3068]\u3082\u5168\u7136[\u305c\u3093\u305c\u3093]\u3044\u307e\u305b\u3093\u3002\u7530\u4e2d[\u305f\u306a\u304b]\u3055\u3093\u306f\u65e5\u672c\u8a9e[\u306b\u307b\u3093\u3054]\u3060\u3051\u8a71[\u306f\u306a]\u3057\u307e\u3059\u304b\u3002\", romaji: \"Ee. Asoko wa hito mo zenzen imasen. Tanaka-san wa nihongo dake hanashimasu ka.\", vi: \"V\u00e2ng. \u1ede \u0111\u00f3 c\u0169ng ho\u00e0n to\u00e0n kh\u00f4ng c\u00f3 ng\u01b0\u1eddi. Anh Tanaka ch\u1ec9 n\u00f3i ti\u1ebfng Nh\u1eadt th\u00f4i \u00e0?\" },\r\n { speaker: \"Tanaka\", jp: \"\u3044\u3044\u3048\u3001\u30d9\u30c8\u30ca\u30e0\u8a9e[\u3054]\u3082\u5c11[\u3059\u3053]\u3057\u3002\u3067\u3082\u3001\u4e0a\u624b[\u3058\u3087\u3046\u305a]\u3058\u3083\u306a\u3044\u3067\u3059\u3002\u30d9\u30c8\u30ca\u30e0\u8a9e[\u3054]\u3057\u304b\u8a71[\u306f\u306a]\u305b\u306a\u3044\u5916\u56fd[\u304c\u3044\u3053\u304f]\u4eba[\u3058\u3093]\u306e\u53cb\u9054[\u3068\u3082\u3060\u3061]\u304c\u3044\u307e\u3059\u304b\u3089\u3002\", romaji: \"Iie, betonamugo mo sukoshi. Demo, jouzu ja nai desu. Betonamugo shika hanasenai gaikokujin no tomodachi ga imasu kara.\", vi: \"Kh\u00f4ng, c\u1ea3 ti\u1ebfng Vi\u1ec7t m\u1ed9t ch\u00fat. Nh\u01b0ng kh\u00f4ng gi\u1ecfi \u0111\u00e2u. V\u00ec t\u00f4i c\u00f3 ng\u01b0\u1eddi b\u1ea1n n\u01b0\u1edbc ngo\u00e0i ch\u1ec9 c\u00f3 th\u1ec3 n\u00f3i ti\u1ebfng Vi\u1ec7t.\" },\r\n { speaker: \"Suzuki\", jp: \"\u3059\u3054\u3044\u3067\u3059\u306d\uff01\u3058\u3083\u3001\u307e\u305f\u3002\", romaji: \"Sugoi desu ne! Ja, mata.\", vi: \"Tuy\u1ec7t v\u1eddi nh\u1ec9! V\u1eady, h\u1eb9n g\u1eb7p l\u1ea1i.\" }\r\n ]\r\n },\r\n casual: {\r\n name: \"Th\u1ec3 th\u00f4ng th\u01b0\u1eddng (\u666e\u901a\u5f62)\",\r\n dialogue: [\r\n { speaker: \"Tanaka\", jp: \"\u3042\u3001\u9234\u6728[\u3059\u305a\u304d]\u304f\u3093\u3002\u4eca\u65e5[\u304d\u3087\u3046]\u3069\u3053\u304b\u884c[\u3044]\u304f\uff1f\", romaji: \"A, Suzuki-kun. Kyou doko ka iku?\", vi: \"A, Suzuki. Nay \u0111i \u0111\u00e2u kh\u00f4ng?\" },\r\n { speaker: \"Suzuki\", jp: \"\u7530\u4e2d[\u305f\u306a\u304b]\u3055\u3093\u3001\u3084\u3042\u3002\u4eca\u65e5[\u304d\u3087\u3046]\u306f\u3069\u3053\u3082\u884c[\u3044]\u304b\u306a\u3044\u3088\u3002\u3042\u307e\u308a\u6691[\u3042\u3064]\u304f\u306a\u3044\u3051\u3069\u3001\u5bb6[\u3044\u3048]\u3067\u4f11[\u3084\u3059]\u3080\u3002\", romaji: \"Tanaka-san, yaa. Kyou wa doko mo ikanai yo. Amari atsukunai kedo, ie de yasumu.\", vi: \"Tanaka, ch\u00e0o. H\u00f4m nay kh\u00f4ng \u0111i \u0111\u00e2u c\u1ea3. Kh\u00f4ng n\u00f3ng l\u1eafm nh\u01b0ng m\u00e0 ngh\u1ec9 \u1edf nh\u00e0.\" },\r\n { speaker: \"Tanaka\", jp: \"\u305d\u3063\u304b\u3002\u4ffa[\u304a\u308c]\u3001\u5e02\u5f79\u6240[\u3057\u3084\u304f\u3057\u3087]\u306b\u884c[\u3044]\u304f\u3093\u3060\u3002\u3067\u3082\u3001\u5e02\u5f79\u6240[\u3057\u3084\u304f\u3057\u3087]\u3063\u3066\u306a\u304b\u306a\u304b\u958b[\u3042]\u304b\u306a\u3044\u306d\u3002\", romaji: \"Sokka. Ore, shiyakusho ni ikunda. Demo, shiyakusho tte nakanaka akanai ne.\", vi: \"V\u1eady \u00e0. T\u1edb \u0111\u1ebfn t\u00f2a th\u1ecb ch\u00ednh \u0111\u00e2y. M\u00e0 t\u00f2a th\u1ecb ch\u00ednh m\u00e3i ch\u1ea3 m\u1edf c\u1eeda nh\u1ec9.\" },\r\n { speaker: \"Suzuki\", jp: \"\u3046\u3093\u3002\u3042\u305d\u3053\u3001\u4eba[\u3072\u3068]\u3082\u5168\u7136[\u305c\u3093\u305c\u3093]\u3044\u306a\u3044\u3057\u3002\u7530\u4e2d[\u305f\u306a\u304b]\u3055\u3093\u3063\u3066\u65e5\u672c\u8a9e[\u306b\u307b\u3093\u3054]\u3060\u3051\u8a71[\u306f\u306a]\u3059\u306e\uff1f\", romaji: \"Un. Asoko, hito mo zenzen inai shi. Tanaka-san tte nihongo dake hanasu no?\", vi: \"\u1eea. Ch\u1ed7 \u0111\u00f3 c\u0169ng ch\u1eb3ng c\u00f3 ai c\u1ea3. Tanaka n\u00e0y, c\u1eadu ch\u1ec9 n\u00f3i ti\u1ebfng Nh\u1eadt th\u00f4i \u00e0?\" },\r\n { speaker: \"Tanaka\", jp: \"\u3046\u3046\u3093\u3001\u30d9\u30c8\u30ca\u30e0\u8a9e[\u3054]\u3082\u5c11[\u3059\u3053]\u3057\u3002\u3067\u3082\u3001\u4e0a\u624b[\u3058\u3087\u3046\u305a]\u3058\u3083\u306a\u3044\u3002\u30d9\u30c8\u30ca\u30e0\u8a9e[\u3054]\u3057\u304b\u8a71[\u306f\u306a]\u305b\u306a\u3044\u5916\u56fd[\u304c\u3044\u3053\u304f]\u4eba[\u3058\u3093]\u306e\u53cb\u9054[\u3068\u3082\u3060\u3061]\u304c\u3044\u308b\u304b\u3089\u3055\u3002\", romaji: \"Uun, betonamugo mo sukoshi. Demo, jouzu ja nai. Betonamugo shika hanasenai gaikokujin no tomodachi ga iru kara sa.\", vi: \"Kh\u00f4ng, ti\u1ebfng Vi\u1ec7t c\u0169ng m\u1ed9t ch\u00fat. Nh\u01b0ng kh\u00f4ng gi\u1ecfi. V\u00ec t\u1edb c\u00f3 ng\u01b0\u1eddi b\u1ea1n n\u01b0\u1edbc ngo\u00e0i ch\u1ec9 n\u00f3i \u0111\u01b0\u1ee3c ti\u1ebfng Vi\u1ec7t th\u00f4i m\u00e0.\" },\r\n { speaker: \"Suzuki\", jp: \"\u3059\u3054\u3044\u306d\uff01\u3058\u3083\u3042\u306d\u3002\", romaji: \"Sugoi ne! Jaane.\", vi: \"Gh\u00ea v\u1eady! Th\u00f4i bai nh\u00e9.\" }\r\n ]\r\n }\r\n }\r\n },\r\n reading: {\r\n id: 'reading',\r\n title: \"\u4eca\u65e5\u306e\u8aad\u307f\u7269 (B\u00e0i \u0111\u1ecdc ng\u1eafn)\",\r\n content: {\r\n jp: \"\u79c1[\u308f\u305f\u3057]\u306e\u90e8\u5c4b[\u3078\u3084]\u306f\u3042\u307e\u308a\u5e83[\u3072\u308d]\u304f\u306a\u3044\u3067\u3059\u3002\u90e8\u5c4b[\u3078\u3084]\u306b\u30d9\u30c3\u30c9\u3068\u673a[\u3064\u304f\u3048]\u3060\u3051\u3042\u308a\u307e\u3059\u3002\u673a[\u3064\u304f\u3048]\u306e\u4e0a[\u3046\u3048]\u306b\u672c[\u307b\u3093]\u3084\u30d1\u30bd\u30b3\u30f3\u304c\u3042\u308a\u307e\u3059\u3002\u3067\u3082\u3001\u53e4[\u3075\u308b]\u3044\u672c[\u307b\u3093]\u3057\u304b\u3042\u308a\u307e\u305b\u3093\u3002\u65b0[\u3042\u305f\u3089]\u3057\u3044\u672c[\u307b\u3093]\u306f\u5168\u7136[\u305c\u3093\u305c\u3093]\u306a\u3044\u3067\u3059\u3002\u7a93[\u307e\u3069]\u306e\u53f3[\u307f\u304e]\u306b\u672c\u68da[\u307b\u3093\u3060\u306a]\u304c\u3042\u308a\u307e\u3059\u3002\u3067\u3082\u3001\u672c\u68da[\u307b\u3093\u3060\u306a]\u306f\u306a\u304b\u306a\u304b\u7247\u4ed8[\u304b\u305f\u3065]\u304d\u307e\u305b\u3093\u3002\u79c1[\u308f\u305f\u3057]\u306f\u3053\u306e\u90e8\u5c4b[\u3078\u3084]\u304c\u3042\u307e\u308a\u597d[\u3059]\u304d\u3058\u3083\u306a\u3044\u3067\u3059\u304c\u3001\u4fbf\u5229[\u3079\u3093\u308a]\u3067\u3059\u3002\",\r\n romaji: \"Watashi no heya wa amari hirokunai desu. Heya ni beddo to tsukue dake arimasu. Tsukue no ue ni hon ya pasokon ga arimasu. Demo, furui hon shika arimasen. Atarashii hon wa zenzen nai desu. Mado no migi ni hondana ga arimasu. Demo, hondana wa nakanaka katadzukimasen. Watashi wa kono heya ga amari suki ja nai desu ga, benri desu.\",\r\n vi: \"C\u0103n ph\u00f2ng c\u1ee7a t\u00f4i kh\u00f4ng r\u1ed9ng l\u1eafm. Trong ph\u00f2ng ch\u1ec9 c\u00f3 gi\u01b0\u1eddng v\u00e0 b\u00e0n. Tr\u00ean b\u00e0n c\u00f3 s\u00e1ch v\u00e0 m\u00e1y t\u00ednh. Nh\u01b0ng ch\u1ec9 c\u00f3 s\u00e1ch c\u0169 th\u00f4i. Ho\u00e0n to\u00e0n kh\u00f4ng c\u00f3 s\u00e1ch m\u1edbi. B\u00ean ph\u1ea3i c\u1eeda s\u1ed5 c\u00f3 m\u1ed9t gi\u00e1 s\u00e1ch. Nh\u01b0ng m\u00e0 c\u00e1i gi\u00e1 s\u00e1ch m\u00e3i m\u00e0 kh\u00f4ng \u0111\u01b0\u1ee3c d\u1ecdn d\u1eb9p g\u1ecdn g\u00e0ng. T\u00f4i kh\u00f4ng th\u00edch c\u0103n ph\u00f2ng n\u00e0y l\u1eafm nh\u01b0ng n\u00f3 ti\u1ec7n l\u1ee3i.\"\r\n }\r\n },\r\n grammar: {\r\n id: 'grammar',\r\n title: \"\u4eca\u65e5\u306e\u6587\u6cd5 (T\u1ed5ng h\u1ee3p ng\u1eef ph\u00e1p)\",\r\n points: [\r\n { rule: \"\u3042\u307e\u308a\u301c\u306a\u3044\", meaning: \"Kh\u00f4ng... l\u1eafm\", formula: \"\u3042\u307e\u308a + V\/A\/N (ph\u1ee7 \u0111\u1ecbnh)\", example: \"\u3053\u306e\u9053[\u307f\u3061]\u306f\u3042\u307e\u308a\u5e83[\u3072\u308d]\u304f\u306a\u3044\u3067\u3059\u3002\", example_vi: \"Con \u0111\u01b0\u1eddng n\u00e0y kh\u00f4ng r\u1ed9ng l\u1eafm.\" },\r\n { rule: \"\u5168\u7136\u301c\u306a\u3044\", meaning: \"Ho\u00e0n to\u00e0n kh\u00f4ng...\", formula: \"\u5168\u7136 + V\/A\/N (ph\u1ee7 \u0111\u1ecbnh)\", example: \"\u5168\u7136[\u305c\u3093\u305c\u3093]\u5206[\u308f]\u304b\u308a\u307e\u305b\u3093\u3002\", example_vi: \"T\u00f4i ho\u00e0n to\u00e0n kh\u00f4ng hi\u1ec3u g\u00ec.\" },\r\n { rule: \"\u306a\u304b\u306a\u304b\u301c\u306a\u3044\", meaning: \"M\u00e3i m\u00e0 kh\u00f4ng...\", formula: \"\u306a\u304b\u306a\u304b + V (ph\u1ee7 \u0111\u1ecbnh)\", example: \"\u3053\u306e\u554f\u984c[\u3082\u3093\u3060\u3044]\u306f\u306a\u304b\u306a\u304b\u89e3[\u3068]\u3051\u307e\u305b\u3093\u3002\", example_vi: \"V\u1ea5n \u0111\u1ec1 n\u00e0y m\u00e3i m\u00e0 kh\u00f4ng gi\u1ea3i quy\u1ebft \u0111\u01b0\u1ee3c.\" },\r\n { rule: \"\u301c\u3060\u3051\", meaning: \"Ch\u1ec9...\", formula: \"N\/L\u01b0\u1ee3ng t\u1eeb + \u3060\u3051\", example: \"\u65e5\u66dc\u65e5[\u306b\u3061\u3088\u3046\u3073]\u3060\u3051\u4f11[\u3084\u3059]\u307f\u307e\u3059\u3002\", example_vi: \"T\u00f4i ch\u1ec9 \u0111\u01b0\u1ee3c ngh\u1ec9 Ch\u1ee7 Nh\u1eadt.\" },\r\n { rule: \"\u301c\u3057\u304b\u301c\u306a\u3044\", meaning: \"Ch\u1ec9... (nh\u1ea5n m\u1ea1nh h\u01a1n \u3060\u3051)\", formula: \"N\/L\u01b0\u1ee3ng t\u1eeb + \u3057\u304b + V (ph\u1ee7 \u0111\u1ecbnh)\", example: \"\u30d9\u30c8\u30ca\u30e0\u8a9e[\u3054]\u3057\u304b\u8a71[\u306f\u306a]\u3057\u307e\u305b\u3093\u3002\", example_vi: \"T\u00f4i ch\u1ec9 n\u00f3i \u0111\u01b0\u1ee3c ti\u1ebfng Vi\u1ec7t th\u00f4i.\" }\r\n ]\r\n },\r\n quiz: {\r\n id: 'quiz',\r\n title: \"\u7df4\u7fd2\u3068\u30c6\u30b9\u30c8 (Luy\u1ec7n t\u1eadp & Ki\u1ec3m tra)\",\r\n questions: [\r\n { type: \"mcq\", question: \"\u3053\u306e\u554f\u984c[\u3082\u3093\u3060\u3044]\u306f\uff08___\uff09\u89e3[\u3068]\u3051\u307e\u305b\u3093\u3002\", options: [\"\u3042\u307e\u308a\", \"\u306a\u304b\u306a\u304b\", \"\u3060\u3051\"], answer: \"\u306a\u304b\u306a\u304b\" },\r\n { type: \"fill\", question: \"\u51b7\u8535\u5eab[\u308c\u3044\u305e\u3046\u3053]\u306b\u91ce\u83dc[\u3084\u3055\u3044]\uff08___\uff09\u3042\u308a\u307e\u305b\u3093\u3002\", answer: \"\u3057\u304b\" },\r\n { type: \"mcq\", question: \"\u4eca\u65e5[\u304d\u3087\u3046]\u306f\u3069\u3053\uff08___\uff09\u884c[\u3044]\u304d\u307e\u305b\u3093\u3002\", options: [\"\u304b\", \"\u304c\", \"\u3082\"], answer: \"\u3082\" },\r\n { type: \"audio\", jp: \"\u4eca\u65e5[\u304d\u3087\u3046]\u306f\u4ed5\u4e8b[\u3057\u3054\u3068]\u3060\u3051\u5fd9[\u3044\u305d\u304c]\u3057\u3044\u3067\u3059\u3002\", question: \"Nghe v\u00e0 g\u00f5 l\u1ea1i c\u00e2u b\u1ea1n v\u1eeba nghe:\" }\r\n ]\r\n }\r\n };\r\n\r\n \/\/ --- STATE MANAGEMENT & SETTINGS ---\r\n let settings = {\r\n hideFurigana: false,\r\n showRomaji: false,\r\n showVietnamese: false\r\n };\r\n\r\n let progress = {\r\n conversation: false,\r\n reading: false,\r\n grammar: false,\r\n quiz: false\r\n };\r\n\r\n function saveSettings() {\r\n localStorage.setItem('jpAppSettings', JSON.stringify(settings));\r\n }\r\n\r\n function loadSettings() {\r\n const saved = localStorage.getItem('jpAppSettings');\r\n if (saved) {\r\n settings = JSON.parse(saved);\r\n }\r\n }\r\n\r\n function applySettings() {\r\n \/\/ Buttons\r\n updateToggleButtonUI('toggle-furigana', !settings.hideFurigana, '\u1ea8n Furigana', 'Hi\u1ec7n Furigana');\r\n updateToggleButtonUI('toggle-romaji', settings.showRomaji, '\u1ea8n Romaji', 'Hi\u1ec7n Romaji');\r\n updateToggleButtonUI('toggle-vietnamese', settings.showVietnamese, '\u1ea8n Ti\u1ebfng Vi\u1ec7t', 'Hi\u1ec7n Ti\u1ebfng Vi\u1ec7t');\r\n \r\n \/\/ Content\r\n document.getElementById('app').classList.toggle('hide-furigana', settings.hideFurigana);\r\n document.querySelectorAll('.romaji-text').forEach(el => el.classList.toggle('hidden', !settings.showRomaji));\r\n document.querySelectorAll('.vi-text').forEach(el => el.classList.toggle('hidden', !settings.showVietnamese));\r\n }\r\n\r\n function updateToggleButtonUI(buttonId, isActive, activeText, inactiveText) {\r\n const button = document.getElementById(buttonId);\r\n button.textContent = isActive ? activeText : inactiveText;\r\n button.classList.toggle('bg-sky-500', isActive);\r\n button.classList.toggle('text-white', isActive);\r\n button.classList.toggle('bg-gray-200', !isActive);\r\n button.classList.toggle('text-gray-700', !isActive);\r\n }\r\n\r\n \/\/ --- PROGRESS ---\r\n function updateProgress(sectionId) {\r\n if (progress.hasOwnProperty(sectionId) && !progress[sectionId]) {\r\n progress[sectionId] = true;\r\n updateProgressBar();\r\n }\r\n }\r\n\r\n function updateProgressBar() {\r\n const completed = Object.values(progress).filter(Boolean).length;\r\n const total = Object.keys(progress).length;\r\n const percentage = (completed \/ total) * 100;\r\n const bar = document.getElementById('lesson-progress-bar');\r\n bar.style.width = `${percentage}%`;\r\n bar.textContent = `${Math.round(percentage)}%`;\r\n }\r\n\r\n\r\n \/\/ --- UTILITY FUNCTIONS ---\r\n function parseFurigana(text) {\r\n return text.replace(\/([^\\[\\]]+)\\[(.+?)\\]\/g, '<ruby>$1<rt>$2<\/rt><\/ruby>');\r\n }\r\n\r\n function speak(text) {\r\n speechSynthesis.cancel(); \/\/ Stop any previous speech\r\n const cleanText = text.replace(\/\\[.*?\\]\/g, '');\r\n const utterance = new SpeechSynthesisUtterance(cleanText);\r\n utterance.lang = 'ja-JP';\r\n utterance.rate = 0.9;\r\n speechSynthesis.speak(utterance);\r\n }\r\n\r\n \/\/ --- RENDER FUNCTIONS ---\r\n function renderConversation() {\r\n const section = document.getElementById('conversation-section');\r\n const data = day1Data.conversation;\r\n section.innerHTML = `\r\n <div class=\"bg-white p-6 rounded-xl shadow-md border border-gray-200\">\r\n <h2 class=\"text-2xl font-bold mb-1 jp-font\">${data.title}<\/h2>\r\n <p class=\"text-gray-500 mb-4\">${data.context}<\/p>\r\n <div class=\"flex items-center justify-center space-x-2 mb-6 p-1 bg-gray-100 rounded-full\">\r\n <button id=\"convo-mode-polite\" class=\"convo-mode-btn flex-1 py-2 px-4 rounded-full bg-sky-600 text-white shadow\">Th\u1ec3 l\u1ecbch s\u1ef1<\/button>\r\n <button id=\"convo-mode-casual\" class=\"convo-mode-btn flex-1 py-2 px-4 rounded-full\">Th\u1ec3 th\u00f4ng th\u01b0\u1eddng<\/button>\r\n <\/div>\r\n <div id=\"conversation-content\" class=\"space-y-4 content-fade\"><\/div>\r\n <\/div>\r\n `;\r\n renderDialogue('polite');\r\n updateProgress(data.id);\r\n }\r\n \r\n function renderDialogue(mode) {\r\n const container = document.getElementById('conversation-content');\r\n const dialogue = day1Data.conversation.modes[mode].dialogue;\r\n\r\n container.innerHTML = dialogue.map((line) => `\r\n <div class=\"dialogue-line p-4 rounded-lg bg-gray-50 border\">\r\n <div class=\"flex items-start space-x-3\">\r\n <div class=\"w-10 h-10 rounded-full ${line.speaker === 'Tanaka' ? 'bg-sky-100' : 'bg-emerald-100'} flex items-center justify-center font-bold text-sky-800\">${line.speaker.charAt(0)}<\/div>\r\n <div class=\"flex-1\">\r\n <p class=\"font-bold text-gray-800\">${line.speaker}<\/p>\r\n <p class=\"jp-font text-lg mt-1 leading-relaxed\">${parseFurigana(line.jp)}<\/p>\r\n <p class=\"romaji-text text-sm text-gray-500 mt-1\">${line.romaji}<\/p>\r\n <p class=\"vi-text text-sm text-emerald-700 mt-1\">${line.vi}<\/p>\r\n <div class=\"mt-3 flex items-center space-x-3\">\r\n <button class=\"speak-btn\" data-text=\"${line.jp}\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"text-gray-500\"><polygon points=\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\"><\/polygon><path d=\"M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07\"><\/path><\/svg>\r\n <\/button>\r\n <div class=\"w-full\">\r\n <input type=\"text\" class=\"typing-input w-full p-2 border rounded-md bg-white text-base\" data-correct=\"${line.jp.replace(\/\\[.*?\\]\/g, '')}\" placeholder=\"Luy\u1ec7n g\u00f5 \u1edf \u0111\u00e2y...\">\r\n <div class=\"typing-feedback text-xs mt-1 h-4\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n `).join('');\r\n attachEventListenersToRenderedContent(container);\r\n applySettings();\r\n }\r\n\r\n function renderReading() {\r\n const section = document.getElementById('reading-section');\r\n const data = day1Data.reading;\r\n section.innerHTML = `\r\n <div class=\"bg-white p-6 rounded-xl shadow-md border border-gray-200\">\r\n <h2 class=\"text-2xl font-bold mb-2 jp-font\">${data.title}<\/h2>\r\n <div class=\"reading-content p-4 rounded-lg bg-gray-50 border\">\r\n <p class=\"jp-font text-lg leading-relaxed\">${parseFurigana(data.content.jp)}<\/p>\r\n <p class=\"romaji-text text-sm text-gray-500 mt-2\">${data.content.romaji}<\/p>\r\n <p class=\"vi-text text-sm text-emerald-700 mt-2\">${data.content.vi}<\/p>\r\n <div class=\"mt-4 flex items-center space-x-3\">\r\n <button class=\"speak-btn\" data-text=\"${data.content.jp}\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"text-gray-500\"><polygon points=\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\"><\/polygon><path d=\"M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07\"><\/path><\/svg>\r\n <\/button>\r\n <div class=\"w-full\">\r\n <input type=\"text\" class=\"typing-input w-full p-2 border rounded-md bg-white text-base\" data-correct=\"${data.content.jp.replace(\/\\[.*?\\]\/g, '')}\" placeholder=\"Luy\u1ec7n g\u00f5 \u1edf \u0111\u00e2y...\">\r\n <div class=\"typing-feedback text-xs mt-1 h-4\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n `;\r\n attachEventListenersToRenderedContent(section);\r\n updateProgress(data.id);\r\n }\r\n\r\n function renderGrammar() {\r\n const section = document.getElementById('grammar-section');\r\n const data = day1Data.grammar;\r\n section.innerHTML = `\r\n <div class=\"bg-white p-6 rounded-xl shadow-md border border-gray-200\">\r\n <h2 class=\"text-2xl font-bold mb-4 jp-font\">${data.title}<\/h2>\r\n <div class=\"space-y-3\">\r\n ${data.points.map((point) => `\r\n <div class=\"grammar-point border border-gray-200 rounded-lg overflow-hidden\">\r\n <button class=\"grammar-toggle w-full flex justify-between items-center p-4 bg-gray-50 hover:bg-gray-100\">\r\n <span class=\"font-bold text-sky-800 jp-font text-lg\">${point.rule}<\/span>\r\n <svg class=\"w-5 h-5 transform transition-transform\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\" clip-rule=\"evenodd\" \/><\/svg>\r\n <\/button>\r\n <div class=\"grammar-details max-h-0 overflow-hidden transition-height\">\r\n <div class=\"p-4 border-t border-gray-200\">\r\n <p><strong>\u00dd ngh\u0129a:<\/strong> ${point.meaning}<\/p>\r\n <p><strong>C\u00f4ng th\u1ee9c:<\/strong> <code class=\"bg-gray-200 text-red-600 px-1 rounded\">${point.formula}<\/code><\/p>\r\n <div class=\"mt-2 p-3 bg-sky-50 rounded-md\">\r\n <div class=\"flex items-center justify-between\">\r\n <div>\r\n <p class=\"jp-font\">${parseFurigana(point.example)}<\/p>\r\n <p class=\"vi-text text-sm text-emerald-700 mt-1\">${point.example_vi}<\/p>\r\n <\/div>\r\n <button class=\"speak-btn\" data-text=\"${point.example}\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"text-gray-500\"><polygon points=\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\"><\/polygon><path d=\"M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07\"><\/path><\/svg>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n `).join('')}\r\n <\/div>\r\n <\/div>\r\n `;\r\n attachEventListenersToRenderedContent(section);\r\n updateProgress(data.id);\r\n }\r\n\r\n function renderQuiz() {\r\n const section = document.getElementById('quiz-section');\r\n const data = day1Data.quiz;\r\n section.innerHTML = `\r\n <div class=\"bg-white p-6 rounded-xl shadow-md border border-gray-200\">\r\n <h2 class=\"text-2xl font-bold mb-4 jp-font\">${data.title}<\/h2>\r\n <div id=\"quiz-content\" class=\"space-y-6\">\r\n ${data.questions.map((q, index) => {\r\n if (q.type === 'mcq') {\r\n return `\r\n <div class=\"quiz-question\" data-answer=\"${q.answer}\">\r\n <p class=\"mb-2 jp-font\">${index + 1}. ${parseFurigana(q.question)}<\/p>\r\n <div class=\"flex flex-col space-y-2\">\r\n ${q.options.map(opt => `<button class=\"mcq-option text-left p-3 border rounded-lg hover:bg-gray-100\">${opt}<\/button>`).join('')}\r\n <\/div>\r\n <div class=\"feedback mt-2 text-sm h-5\"><\/div>\r\n <\/div>\r\n `;\r\n }\r\n if (q.type === 'fill') {\r\n return `\r\n <div class=\"quiz-question\" data-answer=\"${q.answer}\">\r\n <p class=\"mb-2 jp-font\">${index + 1}. ${parseFurigana(q.question)}<\/p>\r\n <input type=\"text\" class=\"fill-input w-full p-2 border rounded-md\">\r\n <div class=\"feedback mt-2 text-sm h-5\"><\/div>\r\n <\/div>\r\n `;\r\n }\r\n if (q.type === 'audio') {\r\n return `\r\n <div class=\"quiz-question\" data-answer=\"${q.jp.replace(\/\\[.*?\\]\/g, '')}\">\r\n <p class=\"mb-2 jp-font\">${index + 1}. ${q.question}<\/p>\r\n <button class=\"speak-btn mb-2 flex items-center\" data-text=\"${q.jp}\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"text-sky-600\"><polygon points=\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\"><\/polygon><path d=\"M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07\"><\/path><\/svg>\r\n <span class=\"ml-2\">Nghe<\/span>\r\n <\/button>\r\n <input type=\"text\" class=\"fill-input w-full p-2 border rounded-md\">\r\n <div class=\"feedback mt-2 text-sm h-5\"><\/div>\r\n <\/div>\r\n `;\r\n }\r\n }).join('')}\r\n <\/div>\r\n <button id=\"check-quiz-btn\" class=\"mt-6 w-full bg-emerald-600 text-white font-bold py-3 rounded-lg hover:bg-emerald-700 transition-colors\">Ki\u1ec3m tra \u0111\u00e1p \u00e1n<\/button>\r\n <div id=\"quiz-result\" class=\"mt-4 text-center font-bold\"><\/div>\r\n <\/div>\r\n `;\r\n attachEventListenersToRenderedContent(section);\r\n }\r\n\r\n \/\/ --- EVENT LISTENERS ---\r\n function attachEventListenersToRenderedContent(container) {\r\n container.querySelectorAll('.speak-btn').forEach(btn => {\r\n btn.onclick = () => speak(btn.dataset.text);\r\n });\r\n\r\n container.querySelectorAll('.typing-input').forEach(input => {\r\n input.addEventListener('input', (e) => {\r\n const correctText = e.target.dataset.correct;\r\n const userText = e.target.value;\r\n const feedbackContainer = e.target.nextElementSibling;\r\n let styledText = '';\r\n for (let i = 0; i < userText.length; i++) {\r\n styledText += `<span class=\"${userText[i] === correctText[i] ? 'correct-char' : 'incorrect-char'}\">${userText[i]}<\/span>`;\r\n }\r\n feedbackContainer.innerHTML = styledText;\r\n if (userText === correctText) {\r\n feedbackContainer.innerHTML = '<span class=\"text-green-600 font-bold\">Ch\u00ednh x\u00e1c! \ud83c\udf89<\/span>';\r\n }\r\n });\r\n });\r\n \r\n container.querySelectorAll('.grammar-toggle').forEach(button => {\r\n button.addEventListener('click', () => {\r\n const details = button.nextElementSibling;\r\n const icon = button.querySelector('svg');\r\n if (details.style.maxHeight && details.style.maxHeight !== '0px') {\r\n details.style.maxHeight = '0px';\r\n icon.style.transform = 'rotate(0deg)';\r\n } else {\r\n details.style.maxHeight = details.scrollHeight + 'px';\r\n icon.style.transform = 'rotate(180deg)';\r\n }\r\n });\r\n });\r\n }\r\n\r\n function setupGlobalEventListeners() {\r\n document.getElementById('toggle-furigana').addEventListener('click', () => {\r\n settings.hideFurigana = !settings.hideFurigana;\r\n saveSettings();\r\n applySettings();\r\n });\r\n document.getElementById('toggle-romaji').addEventListener('click', () => {\r\n settings.showRomaji = !settings.showRomaji;\r\n saveSettings();\r\n applySettings();\r\n });\r\n document.getElementById('toggle-vietnamese').addEventListener('click', () => {\r\n settings.showVietnamese = !settings.showVietnamese;\r\n saveSettings();\r\n applySettings();\r\n });\r\n\r\n document.getElementById('convo-mode-polite').addEventListener('click', (e) => {\r\n const container = document.getElementById('conversation-content');\r\n container.classList.add('fading-out');\r\n setTimeout(() => {\r\n renderDialogue('polite');\r\n container.classList.remove('fading-out');\r\n e.target.classList.add('bg-sky-600', 'text-white', 'shadow');\r\n document.getElementById('convo-mode-casual').classList.remove('bg-sky-600', 'text-white', 'shadow');\r\n }, 300);\r\n });\r\n document.getElementById('convo-mode-casual').addEventListener('click', (e) => {\r\n const container = document.getElementById('conversation-content');\r\n container.classList.add('fading-out');\r\n setTimeout(() => {\r\n renderDialogue('casual');\r\n container.classList.remove('fading-out');\r\n e.target.classList.add('bg-sky-600', 'text-white', 'shadow');\r\n document.getElementById('convo-mode-polite').classList.remove('bg-sky-600', 'text-white', 'shadow');\r\n }, 300);\r\n });\r\n \r\n document.getElementById('check-quiz-btn').addEventListener('click', () => {\r\n const questions = document.querySelectorAll('.quiz-question');\r\n let score = 0;\r\n questions.forEach(q => {\r\n const answer = q.dataset.answer;\r\n const feedback = q.querySelector('.feedback');\r\n let isCorrect = false;\r\n\r\n const selectedOption = q.querySelector('.mcq-option.bg-sky-200');\r\n if (selectedOption) {\r\n isCorrect = selectedOption.textContent === answer;\r\n selectedOption.classList.add(isCorrect ? 'border-green-500' : 'border-red-500');\r\n }\r\n \r\n const input = q.querySelector('.fill-input');\r\n if (input) {\r\n isCorrect = input.value.trim() === answer;\r\n input.classList.add(isCorrect ? 'border-green-500' : 'border-red-500');\r\n }\r\n\r\n if (isCorrect) {\r\n score++;\r\n feedback.innerHTML = `<span class=\"feedback-icon feedback-correct\">\u2714\ufe0f<\/span><span class=\"text-green-600 font-bold\">\u0110\u00fang!<\/span>`;\r\n } else {\r\n feedback.innerHTML = `<span class=\"feedback-icon feedback-incorrect\">\u274c<\/span><span class=\"text-red-600 font-bold\">Sai! \u0110\u00e1p \u00e1n \u0111\u00fang l\u00e0: ${answer}<\/span>`;\r\n }\r\n });\r\n \r\n document.getElementById('quiz-result').innerHTML = `B\u1ea1n \u0111\u00e3 tr\u1ea3 l\u1eddi \u0111\u00fang ${score}\/${questions.length} c\u00e2u!`;\r\n updateProgress(day1Data.quiz.id);\r\n });\r\n \r\n document.querySelectorAll('.mcq-option').forEach(opt => {\r\n opt.addEventListener('click', () => {\r\n opt.parentElement.querySelectorAll('.mcq-option').forEach(sibling => {\r\n sibling.classList.remove('bg-sky-200', 'border-sky-500');\r\n });\r\n opt.classList.add('bg-sky-200', 'border-sky-500');\r\n });\r\n });\r\n }\r\n \r\n \/\/ --- INITIALIZATION ---\r\n function init() {\r\n document.getElementById('main-title').textContent = day1Data.title;\r\n loadSettings();\r\n renderConversation();\r\n renderReading();\r\n renderGrammar();\r\n renderQuiz();\r\n setupGlobalEventListeners();\r\n applySettings();\r\n updateProgressBar();\r\n }\r\n\r\n window.onload = init;\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\n\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":5,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-9961","page","type-page","status-publish","hentry"],"acf":[],"rankMath":{"parentDomain":"globalsolution.jp","noFollowDomains":[],"noFollowExcludeDomains":[],"noFollowExternalLinks":false,"featuredImageNotice":"The featured image should be at least 200 by 200 pixels to be picked up by Facebook and other social media sites.","pluginReviewed":false,"postSettings":{"linkSuggestions":true,"useFocusKeyword":false},"frontEndScore":false,"postName":"hoc-tieng-nhat-ngay-1","permalinkFormat":"https:\/\/globalsolution.jp\/vi\/%pagename%\/","showLockModifiedDate":true,"assessor":{"focusKeywordLink":"https:\/\/globalsolution.jp\/wp-admin\/edit.php?focus_keyword=%focus_keyword%&post_type=%post_type%","hasTOCPlugin":true,"primaryTaxonomy":false,"serpData":{"title":"","description":"","focusKeywords":"","pillarContent":false,"canonicalUrl":"","breadcrumbTitle":"","advancedRobots":[],"facebookTitle":"","facebookDescription":"","facebookImage":"","facebookImageID":"","facebookHasOverlay":false,"facebookImageOverlay":"","facebookAuthor":"","twitterCardType":"","twitterUseFacebook":true,"twitterTitle":"","twitterDescription":"","twitterImage":"","twitterImageID":"","twitterHasOverlay":false,"twitterImageOverlay":"","twitterPlayerUrl":"","twitterPlayerSize":"","twitterPlayerStream":"","twitterPlayerStreamCtype":"","twitterAppDescription":"","twitterAppIphoneName":"","twitterAppIphoneID":"","twitterAppIphoneUrl":"","twitterAppIpadName":"","twitterAppIpadID":"","twitterAppIpadUrl":"","twitterAppGoogleplayName":"","twitterAppGoogleplayID":"","twitterAppGoogleplayUrl":"","twitterAppCountry":"","robots":{"index":true},"twitterAuthor":"username","primaryTerm":0,"authorName":"Binh GS","titleTemplate":"%title% %sep% %sitename%","descriptionTemplate":"%excerpt%","showScoreFrontend":true,"lockModifiedDate":false},"powerWords":[],"diacritics":{"A":"[\\u0041\\u24B6\\uFF21\\u00C0\\u00C1\\u00C2\\u1EA6\\u1EA4\\u1EAA\\u1EA8\\u00C3\\u0100\\u0102\\u1EB0\\u1EAE\\u1EB4\\u1EB2\\u0226\\u01E0\\u00C4\\u01DE\\u1EA2\\u00C5\\u01FA\\u01CD\\u0200\\u0202\\u1EA0\\u1EAC\\u1EB6\\u1E00\\u0104\\u023A\\u2C6F]","AA":"[\\uA732]","AE":"[\\u00C6\\u01FC\\u01E2]","AO":"[\\uA734]","AU":"[\\uA736]","AV":"[\\uA738\\uA73A]","AY":"[\\uA73C]","B":"[\\u0042\\u24B7\\uFF22\\u1E02\\u1E04\\u1E06\\u0243\\u0182\\u0181]","C":"[\\u0043\\u24B8\\uFF23\\u0106\\u0108\\u010A\\u010C\\u00C7\\u1E08\\u0187\\u023B\\uA73E]","D":"[\\u0044\\u24B9\\uFF24\\u1E0A\\u010E\\u1E0C\\u1E10\\u1E12\\u1E0E\\u0110\\u018B\\u018A\\u0189\\uA779]","DZ":"[\\u01F1\\u01C4]","Dz":"[\\u01F2\\u01C5]","E":"[\\u0045\\u24BA\\uFF25\\u00C8\\u00C9\\u00CA\\u1EC0\\u1EBE\\u1EC4\\u1EC2\\u1EBC\\u0112\\u1E14\\u1E16\\u0114\\u0116\\u00CB\\u1EBA\\u011A\\u0204\\u0206\\u1EB8\\u1EC6\\u0228\\u1E1C\\u0118\\u1E18\\u1E1A\\u0190\\u018E]","F":"[\\u0046\\u24BB\\uFF26\\u1E1E\\u0191\\uA77B]","G":"[\\u0047\\u24BC\\uFF27\\u01F4\\u011C\\u1E20\\u011E\\u0120\\u01E6\\u0122\\u01E4\\u0193\\uA7A0\\uA77D\\uA77E]","H":"[\\u0048\\u24BD\\uFF28\\u0124\\u1E22\\u1E26\\u021E\\u1E24\\u1E28\\u1E2A\\u0126\\u2C67\\u2C75\\uA78D]","I":"[\\u0049\\u24BE\\uFF29\\u00CC\\u00CD\\u00CE\\u0128\\u012A\\u012C\\u0130\\u00CF\\u1E2E\\u1EC8\\u01CF\\u0208\\u020A\\u1ECA\\u012E\\u1E2C\\u0197]","J":"[\\u004A\\u24BF\\uFF2A\\u0134\\u0248]","K":"[\\u004B\\u24C0\\uFF2B\\u1E30\\u01E8\\u1E32\\u0136\\u1E34\\u0198\\u2C69\\uA740\\uA742\\uA744\\uA7A2]","L":"[\\u004C\\u24C1\\uFF2C\\u013F\\u0139\\u013D\\u1E36\\u1E38\\u013B\\u1E3C\\u1E3A\\u0141\\u023D\\u2C62\\u2C60\\uA748\\uA746\\uA780]","LJ":"[\\u01C7]","Lj":"[\\u01C8]","M":"[\\u004D\\u24C2\\uFF2D\\u1E3E\\u1E40\\u1E42\\u2C6E\\u019C]","N":"[\\u004E\\u24C3\\uFF2E\\u01F8\\u0143\\u00D1\\u1E44\\u0147\\u1E46\\u0145\\u1E4A\\u1E48\\u0220\\u019D\\uA790\\uA7A4]","NJ":"[\\u01CA]","Nj":"[\\u01CB]","O":"[\\u004F\\u24C4\\uFF2F\\u00D2\\u00D3\\u00D4\\u1ED2\\u1ED0\\u1ED6\\u1ED4\\u00D5\\u1E4C\\u022C\\u1E4E\\u014C\\u1E50\\u1E52\\u014E\\u022E\\u0230\\u00D6\\u022A\\u1ECE\\u0150\\u01D1\\u020C\\u020E\\u01A0\\u1EDC\\u1EDA\\u1EE0\\u1EDE\\u1EE2\\u1ECC\\u1ED8\\u01EA\\u01EC\\u00D8\\u01FE\\u0186\\u019F\\uA74A\\uA74C]","OI":"[\\u01A2]","OO":"[\\uA74E]","OU":"[\\u0222]","P":"[\\u0050\\u24C5\\uFF30\\u1E54\\u1E56\\u01A4\\u2C63\\uA750\\uA752\\uA754]","Q":"[\\u0051\\u24C6\\uFF31\\uA756\\uA758\\u024A]","R":"[\\u0052\\u24C7\\uFF32\\u0154\\u1E58\\u0158\\u0210\\u0212\\u1E5A\\u1E5C\\u0156\\u1E5E\\u024C\\u2C64\\uA75A\\uA7A6\\uA782]","S":"[\\u0053\\u24C8\\uFF33\\u1E9E\\u015A\\u1E64\\u015C\\u1E60\\u0160\\u1E66\\u1E62\\u1E68\\u0218\\u015E\\u2C7E\\uA7A8\\uA784]","T":"[\\u0054\\u24C9\\uFF34\\u1E6A\\u0164\\u1E6C\\u021A\\u0162\\u1E70\\u1E6E\\u0166\\u01AC\\u01AE\\u023E\\uA786]","TZ":"[\\uA728]","U":"[\\u0055\\u24CA\\uFF35\\u00D9\\u00DA\\u00DB\\u0168\\u1E78\\u016A\\u1E7A\\u016C\\u00DC\\u01DB\\u01D7\\u01D5\\u01D9\\u1EE6\\u016E\\u0170\\u01D3\\u0214\\u0216\\u01AF\\u1EEA\\u1EE8\\u1EEE\\u1EEC\\u1EF0\\u1EE4\\u1E72\\u0172\\u1E76\\u1E74\\u0244]","V":"[\\u0056\\u24CB\\uFF36\\u1E7C\\u1E7E\\u01B2\\uA75E\\u0245]","VY":"[\\uA760]","W":"[\\u0057\\u24CC\\uFF37\\u1E80\\u1E82\\u0174\\u1E86\\u1E84\\u1E88\\u2C72]","X":"[\\u0058\\u24CD\\uFF38\\u1E8A\\u1E8C]","Y":"[\\u0059\\u24CE\\uFF39\\u1EF2\\u00DD\\u0176\\u1EF8\\u0232\\u1E8E\\u0178\\u1EF6\\u1EF4\\u01B3\\u024E\\u1EFE]","Z":"[\\u005A\\u24CF\\uFF3A\\u0179\\u1E90\\u017B\\u017D\\u1E92\\u1E94\\u01B5\\u0224\\u2C7F\\u2C6B\\uA762]","a":"[\\u0061\\u24D0\\uFF41\\u1E9A\\u00E0\\u00E1\\u00E2\\u1EA7\\u1EA5\\u1EAB\\u1EA9\\u00E3\\u0101\\u0103\\u1EB1\\u1EAF\\u1EB5\\u1EB3\\u0227\\u01E1\\u00E4\\u01DF\\u1EA3\\u00E5\\u01FB\\u01CE\\u0201\\u0203\\u1EA1\\u1EAD\\u1EB7\\u1E01\\u0105\\u2C65\\u0250]","aa":"[\\uA733]","ae":"[\\u00E6\\u01FD\\u01E3]","ao":"[\\uA735]","au":"[\\uA737]","av":"[\\uA739\\uA73B]","ay":"[\\uA73D]","b":"[\\u0062\\u24D1\\uFF42\\u1E03\\u1E05\\u1E07\\u0180\\u0183\\u0253]","c":"[\\u0063\\u24D2\\uFF43\\u0107\\u0109\\u010B\\u010D\\u00E7\\u1E09\\u0188\\u023C\\uA73F\\u2184]","d":"[\\u0064\\u24D3\\uFF44\\u1E0B\\u010F\\u1E0D\\u1E11\\u1E13\\u1E0F\\u0111\\u018C\\u0256\\u0257\\uA77A]","dz":"[\\u01F3\\u01C6]","e":"[\\u0065\\u24D4\\uFF45\\u00E8\\u00E9\\u00EA\\u1EC1\\u1EBF\\u1EC5\\u1EC3\\u1EBD\\u0113\\u1E15\\u1E17\\u0115\\u0117\\u00EB\\u1EBB\\u011B\\u0205\\u0207\\u1EB9\\u1EC7\\u0229\\u1E1D\\u0119\\u1E19\\u1E1B\\u0247\\u025B\\u01DD]","f":"[\\u0066\\u24D5\\uFF46\\u1E1F\\u0192\\uA77C]","g":"[\\u0067\\u24D6\\uFF47\\u01F5\\u011D\\u1E21\\u011F\\u0121\\u01E7\\u0123\\u01E5\\u0260\\uA7A1\\u1D79\\uA77F]","h":"[\\u0068\\u24D7\\uFF48\\u0125\\u1E23\\u1E27\\u021F\\u1E25\\u1E29\\u1E2B\\u1E96\\u0127\\u2C68\\u2C76\\u0265]","hv":"[\\u0195]","i":"[\\u0069\\u24D8\\uFF49\\u00EC\\u00ED\\u00EE\\u0129\\u012B\\u012D\\u00EF\\u1E2F\\u1EC9\\u01D0\\u0209\\u020B\\u1ECB\\u012F\\u1E2D\\u0268\\u0131]","j":"[\\u006A\\u24D9\\uFF4A\\u0135\\u01F0\\u0249]","k":"[\\u006B\\u24DA\\uFF4B\\u1E31\\u01E9\\u1E33\\u0137\\u1E35\\u0199\\u2C6A\\uA741\\uA743\\uA745\\uA7A3]","l":"[\\u006C\\u24DB\\uFF4C\\u0140\\u013A\\u013E\\u1E37\\u1E39\\u013C\\u1E3D\\u1E3B\\u017F\\u0142\\u019A\\u026B\\u2C61\\uA749\\uA781\\uA747]","lj":"[\\u01C9]","m":"[\\u006D\\u24DC\\uFF4D\\u1E3F\\u1E41\\u1E43\\u0271\\u026F]","n":"[\\u006E\\u24DD\\uFF4E\\u01F9\\u0144\\u00F1\\u1E45\\u0148\\u1E47\\u0146\\u1E4B\\u1E49\\u019E\\u0272\\u0149\\uA791\\uA7A5]","nj":"[\\u01CC]","o":"[\\u006F\\u24DE\\uFF4F\\u00F2\\u00F3\\u00F4\\u1ED3\\u1ED1\\u1ED7\\u1ED5\\u00F5\\u1E4D\\u022D\\u1E4F\\u014D\\u1E51\\u1E53\\u014F\\u022F\\u0231\\u00F6\\u022B\\u1ECF\\u0151\\u01D2\\u020D\\u020F\\u01A1\\u1EDD\\u1EDB\\u1EE1\\u1EDF\\u1EE3\\u1ECD\\u1ED9\\u01EB\\u01ED\\u00F8\\u01FF\\u0254\\uA74B\\uA74D\\u0275]","oi":"[\\u01A3]","ou":"[\\u0223]","oo":"[\\uA74F]","p":"[\\u0070\\u24DF\\uFF50\\u1E55\\u1E57\\u01A5\\u1D7D\\uA751\\uA753\\uA755]","q":"[\\u0071\\u24E0\\uFF51\\u024B\\uA757\\uA759]","r":"[\\u0072\\u24E1\\uFF52\\u0155\\u1E59\\u0159\\u0211\\u0213\\u1E5B\\u1E5D\\u0157\\u1E5F\\u024D\\u027D\\uA75B\\uA7A7\\uA783]","s":"[\\u0073\\u24E2\\uFF53\\u015B\\u1E65\\u015D\\u1E61\\u0161\\u1E67\\u1E63\\u1E69\\u0219\\u015F\\u023F\\uA7A9\\uA785\\u1E9B]","ss":"[\\u00DF]","t":"[\\u0074\\u24E3\\uFF54\\u1E6B\\u1E97\\u0165\\u1E6D\\u021B\\u0163\\u1E71\\u1E6F\\u0167\\u01AD\\u0288\\u2C66\\uA787]","tz":"[\\uA729]","u":"[\\u0075\\u24E4\\uFF55\\u00F9\\u00FA\\u00FB\\u0169\\u1E79\\u016B\\u1E7B\\u016D\\u00FC\\u01DC\\u01D8\\u01D6\\u01DA\\u1EE7\\u016F\\u0171\\u01D4\\u0215\\u0217\\u01B0\\u1EEB\\u1EE9\\u1EEF\\u1EED\\u1EF1\\u1EE5\\u1E73\\u0173\\u1E77\\u1E75\\u0289]","v":"[\\u0076\\u24E5\\uFF56\\u1E7D\\u1E7F\\u028B\\uA75F\\u028C]","vy":"[\\uA761]","w":"[\\u0077\\u24E6\\uFF57\\u1E81\\u1E83\\u0175\\u1E87\\u1E85\\u1E98\\u1E89\\u2C73]","x":"[\\u0078\\u24E7\\uFF58\\u1E8B\\u1E8D]","y":"[\\u0079\\u24E8\\uFF59\\u1EF3\\u00FD\\u0177\\u1EF9\\u0233\\u1E8F\\u00FF\\u1EF7\\u1E99\\u1EF5\\u01B4\\u024F\\u1EFF]","z":"[\\u007A\\u24E9\\uFF5A\\u017A\\u1E91\\u017C\\u017E\\u1E93\\u1E95\\u01B6\\u0225\\u0240\\u2C6C\\uA763]"},"researchesTests":["contentHasTOC","contentHasShortParagraphs","contentHasAssets","keywordInTitle","keywordInMetaDescription","keywordInPermalink","keywordIn10Percent","keywordInContent","keywordInSubheadings","keywordInImageAlt","keywordDensity","keywordNotUsed","lengthContent","lengthPermalink","linksHasInternal","linksHasExternals","linksNotAllExternals","titleStartWithKeyword","titleSentiment","titleHasPowerWords","titleHasNumber","hasContentAI"],"hasRedirection":true,"hasBreadcrumb":false},"homeUrl":"https:\/\/globalsolution.jp\/vi\/","objectID":9961,"objectType":"post","locale":"vi","localeFull":"vi_VN","overlayImages":{"play":{"name":"Play icon","url":"https:\/\/globalsolution.jp\/wp-content\/plugins\/seo-by-rank-math\/assets\/admin\/img\/icon-play.png","path":"\/home\/p4jfnzb67jqv\/public_html\/wp-content\/plugins\/seo-by-rank-math\/assets\/admin\/img\/icon-play.png","position":"middle_center"},"gif":{"name":"GIF icon","url":"https:\/\/globalsolution.jp\/wp-content\/plugins\/seo-by-rank-math\/assets\/admin\/img\/icon-gif.png","path":"\/home\/p4jfnzb67jqv\/public_html\/wp-content\/plugins\/seo-by-rank-math\/assets\/admin\/img\/icon-gif.png","position":"middle_center"}},"defautOgImage":"https:\/\/globalsolution.jp\/wp-content\/uploads\/2024\/07\/logo-global-web-scaled.webp","customPermalinks":true,"isUserRegistered":true,"autoSuggestKeywords":true,"connectSiteUrl":"https:\/\/rankmath.com\/auth?site=https%3A%2F%2Fglobalsolution.jp%2Fvi%2F&r=https%3A%2F%2Fglobalsolution.jp%2Fvi%2Fwp-json%2Fwp%2Fv2%2Fpages%2F9961%3Fnonce%3D52395a9406&pro=1","maxTags":100,"trendsIcon":"<svg viewBox=\"0 0 610 610\"><path d=\"M18.85,446,174.32,290.48l58.08,58.08L76.93,504a14.54,14.54,0,0,1-20.55,0L18.83,466.48a14.54,14.54,0,0,1,0-20.55Z\" style=\"fill:#4285f4\"\/><path d=\"M242.65,242.66,377.59,377.6l-47.75,47.75a14.54,14.54,0,0,1-20.55,0L174.37,290.43l47.75-47.75A14.52,14.52,0,0,1,242.65,242.66Z\" style=\"fill:#ea4335\"\/><polygon points=\"319.53 319.53 479.26 159.8 537.34 217.88 377.61 377.62 319.53 319.53\" style=\"fill:#fabb05\"\/><path d=\"M594.26,262.73V118.61h0a16.94,16.94,0,0,0-16.94-16.94H433.2a16.94,16.94,0,0,0-12,28.92L565.34,274.71h0a16.94,16.94,0,0,0,28.92-12Z\" style=\"fill:#34a853\"\/><rect width=\"610\" height=\"610\" style=\"fill:none\"\/><\/svg>","showScore":true,"siteFavIcon":"https:\/\/globalsolution.jp\/wp-content\/uploads\/2024\/04\/cropped-logo-32x32.png","canUser":{"general":false,"advanced":false,"snippet":false,"social":false,"analysis":false,"analytics":false,"content_ai":false},"showKeywordIntent":true,"isPro":true,"is_front_page":false,"trendsUpgradeLink":"https:\/\/rankmath.com\/pricing\/?utm_source=Plugin&utm_medium=CE%20General%20Tab%20Trends&utm_campaign=WP","trendsUpgradeLabel":"Upgrade","trendsPreviewImage":"https:\/\/globalsolution.jp\/wp-content\/plugins\/seo-by-rank-math\/assets\/admin\/img\/trends-preview.jpg","currentEditor":false,"homepageData":{"assessor":{"powerWords":[],"diacritics":true,"researchesTests":["contentHasTOC","contentHasShortParagraphs","contentHasAssets","keywordInTitle","keywordInMetaDescription","keywordInPermalink","keywordIn10Percent","keywordInContent","keywordInSubheadings","keywordInImageAlt","keywordDensity","keywordNotUsed","lengthContent","lengthPermalink","linksHasInternal","linksHasExternals","linksNotAllExternals","titleStartWithKeyword","titleSentiment","titleHasPowerWords","titleHasNumber","hasContentAI"],"hasBreadcrumb":false,"serpData":{"title":"%sitename% %page% %sep% %sitedesc%","description":"","titleTemplate":"%sitename% %page% %sep% %sitedesc%","descriptionTemplate":"","focusKeywords":"","breadcrumbTitle":"T\u1ed5ng quan","robots":{"index":true},"advancedRobots":[],"facebookTitle":"","facebookDescription":"","facebookImage":"","facebookImageID":""}}},"tocTitle":"Table of Contents","tocExcludeHeadings":[],"listStyle":"ul"},"_links":{"self":[{"href":"https:\/\/globalsolution.jp\/vi\/wp-json\/wp\/v2\/pages\/9961","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/globalsolution.jp\/vi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/globalsolution.jp\/vi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/globalsolution.jp\/vi\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/globalsolution.jp\/vi\/wp-json\/wp\/v2\/comments?post=9961"}],"version-history":[{"count":1,"href":"https:\/\/globalsolution.jp\/vi\/wp-json\/wp\/v2\/pages\/9961\/revisions"}],"predecessor-version":[{"id":9962,"href":"https:\/\/globalsolution.jp\/vi\/wp-json\/wp\/v2\/pages\/9961\/revisions\/9962"}],"wp:attachment":[{"href":"https:\/\/globalsolution.jp\/vi\/wp-json\/wp\/v2\/media?parent=9961"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":9961,"date":"2025-07-29T14:47:35","date_gmt":"2025-07-29T07:47:35","guid":{"rendered":"https:\/\/globalsolution.jp\/?page_id=9961"},"modified":"2025-07-29T14:47:35","modified_gmt":"2025-07-29T07:47:35","slug":"hoc-tieng-nhat-ngay-1","status":"publish","type":"page","link":"https:\/\/globalsolution.jp\/vi\/hoc-tieng-nhat-ngay-1\/","title":{"rendered":"H\u1ecdc Ti\u1ebfng Nh\u1eadt Ng\u00e0y 1"},"content":{"rendered":"\n\r\n\r\n\r\n \r\n \r\n H\u1ecdc Ti\u1ebfng Nh\u1eadt Si\u00eau T\u1ed1c - Ng\u00e0y 1<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n body {\r\n font-family: 'Inter', sans-serif;\r\n background-color: #f7fafc;\r\n }\r\n .jp-font {\r\n font-family: 'Noto Sans JP', sans-serif;\r\n }\r\n ruby rt {\r\n font-size: 0.7em;\r\n font-weight: 500;\r\n user-select: none;\r\n }\r\n .hide-furigana ruby rt {\r\n visibility: hidden;\r\n }\r\n .transition-height {\r\n transition: max-height 0.5s ease-in-out;\r\n }\r\n .correct-char { color: #16a34a; }\r\n .incorrect-char { color: #dc2626; text-decoration: underline; }\r\n \r\n \/* --- NEW STYLES FOR UPGRADES --- *\/\r\n \/* Progress Bar *\/\r\n .progress-bar-container {\r\n background-color: #e5e7eb; \/* gray-200 *\/\r\n border-radius: 9999px;\r\n overflow: hidden;\r\n }\r\n .progress-bar {\r\n background-color: #22c55e; \/* green-500 *\/\r\n transition: width 0.5s ease-in-out;\r\n }\r\n \/* Fade transition for conversation *\/\r\n .content-fade {\r\n transition: opacity 0.3s ease-in-out;\r\n }\r\n .fading-out {\r\n opacity: 0;\r\n }\r\n \/* Quiz feedback icons *\/\r\n .feedback-icon {\r\n display: inline-block;\r\n margin-right: 0.5rem;\r\n font-weight: bold;\r\n }\r\n .feedback-correct { color: #16a34a; }\r\n .feedback-incorrect { color: #dc2626; }\r\n <\/style>\r\n<\/head>\r\n<body class=\"bg-gray-50 text-gray-800\">\r\n\r\n <div id=\"app\" class=\"container mx-auto p-4 md:p-8 max-w-4xl\">\r\n <header class=\"text-center mb-8\">\r\n <h1 class=\"text-3xl md:text-4xl font-bold text-sky-700 jp-font\" id=\"main-title\"><\/h1>\r\n <p class=\"text-gray-500 mt-2\">B\u00e0i h\u1ecdc \u0111\u1ea7u ti\u00ean tr\u00ean h\u00e0nh tr\u00ecnh chinh ph\u1ee5c ti\u1ebfng Nh\u1eadt!<\/p>\r\n <\/header>\r\n\r\n \r\n <div class=\"mb-8\">\r\n <h3 class=\"font-bold text-center mb-2\">Ti\u1ebfn \u0111\u1ed9 b\u00e0i h\u1ecdc<\/h3>\r\n <div class=\"progress-bar-container w-full h-4\">\r\n <div id=\"lesson-progress-bar\" class=\"progress-bar h-full text-xs text-white text-center\" style=\"width: 0%;\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <main class=\"space-y-8\">\r\n \r\n <div class=\"bg-white p-4 rounded-xl shadow-md border border-gray-200\">\r\n <h3 class=\"font-bold text-lg mb-3 text-gray-700\">B\u1ea3ng \u0111i\u1ec1u khi\u1ec3n<\/h3>\r\n <div class=\"flex flex-wrap gap-4\">\r\n <button id=\"toggle-furigana\" class=\"toggle-btn\">B\u1eadt Furigana<\/button>\r\n <button id=\"toggle-romaji\" class=\"toggle-btn\">Hi\u1ec7n Romaji<\/button>\r\n <button id=\"toggle-vietnamese\" class=\"toggle-btn\">Hi\u1ec7n Ti\u1ebfng Vi\u1ec7t<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <section id=\"conversation-section\" class=\"lesson-section\"><\/section>\r\n\r\n \r\n <section id=\"reading-section\" class=\"lesson-section\"><\/section>\r\n\r\n \r\n <section id=\"grammar-section\" class=\"lesson-section\"><\/section>\r\n \r\n \r\n <section id=\"quiz-section\" class=\"lesson-section\"><\/section>\r\n <\/main>\r\n\r\n <footer class=\"text-center mt-12 text-gray-400 text-sm\">\r\n <p>Copyright by AzaCan, 2025<\/p>\r\n <\/footer>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ --- DATA FOR DAY 1 ---\r\n const day1Data = {\r\n title: \"Ng\u00e0y 1: Gi\u1edbi thi\u1ec7u v\u00e0 nh\u1eefng \u0111i\u1ec1u \u0111\u01a1n gi\u1ea3n\",\r\n conversation: {\r\n id: 'conversation',\r\n title: \"\u4eca\u65e5\u306e\u4f1a\u8a71 (H\u1ed9i tho\u1ea1i trong ng\u00e0y)\",\r\n context: \"B\u1ed1i c\u1ea3nh: Hai ng\u01b0\u1eddi b\u1ea1n, Tanaka v\u00e0 Suzuki, t\u00ecnh c\u1edd g\u1eb7p nhau.\",\r\n modes: {\r\n polite: {\r\n name: \"Th\u1ec3 l\u1ecbch s\u1ef1 (\u4e01\u5be7\u5f62)\",\r\n dialogue: [\r\n { speaker: \"Tanaka\", jp: \"\u3042\u3001\u9234\u6728[\u3059\u305a\u304d]\u3055\u3093\u3002\u4eca\u65e5[\u304d\u3087\u3046]\u306f\u3069\u3053\u304b\u884c[\u3044]\u304d\u307e\u3059\u304b\u3002\", romaji: \"A, Suzuki-san. Kyou wa doko ka ikimasu ka.\", vi: \"A, anh Suzuki. H\u00f4m nay anh c\u00f3 \u0111i \u0111\u00e2u kh\u00f4ng?\" },\r\n { speaker: \"Suzuki\", jp: \"\u7530\u4e2d[\u305f\u306a\u304b]\u3055\u3093\u3002\u3053\u3093\u306b\u3061\u306f\u3002\u4eca\u65e5[\u304d\u3087\u3046]\u306f\u3069\u3053\u3082\u884c[\u3044]\u304d\u307e\u305b\u3093\u3002\u3042\u307e\u308a\u6691[\u3042\u3064]\u304f\u306a\u3044\u3067\u3059\u304c\u3001\u5bb6[\u3044\u3048]\u3067\u4f11[\u3084\u3059]\u307f\u307e\u3059\u3002\", romaji: \"Tanaka-san. Konnichiwa. Kyou wa doko mo ikimasen. Amari atsukunai desu ga, ie de yasumimasu.\", vi: \"Anh Tanaka. Ch\u00e0o anh. H\u00f4m nay t\u00f4i kh\u00f4ng \u0111i \u0111\u00e2u c\u1ea3. Tr\u1eddi kh\u00f4ng n\u00f3ng l\u1eafm nh\u01b0ng t\u00f4i s\u1ebd ngh\u1ec9 \u1edf nh\u00e0.\" },\r\n { speaker: \"Tanaka\", jp: \"\u305d\u3046\u3067\u3059\u304b\u3002\u79c1[\u308f\u305f\u3057]\u306f\u5e02\u5f79\u6240[\u3057\u3084\u304f\u3057\u3087]\u306b\u884c[\u3044]\u304d\u307e\u3059\u3002\u3067\u3082\u3001\u5e02\u5f79\u6240[\u3057\u3084\u304f\u3057\u3087]\u306f\u306a\u304b\u306a\u304b\u958b[\u3042]\u304d\u307e\u305b\u3093\u306d\u3002\", romaji: \"Sou desu ka. Watashi wa shiyakusho ni ikimasu. Demo, shiyakusho wa nakanaka akimasen ne.\", vi: \"V\u1eady \u00e0. T\u00f4i s\u1ebd \u0111\u1ebfn t\u00f2a th\u1ecb ch\u00ednh. Nh\u01b0ng m\u00e0, t\u00f2a th\u1ecb ch\u00ednh m\u00e3i m\u00e0 kh\u00f4ng m\u1edf c\u1eeda nh\u1ec9.\" },\r\n { speaker: \"Suzuki\", jp: \"\u3048\u3048\u3002\u3042\u305d\u3053\u306f\u4eba[\u3072\u3068]\u3082\u5168\u7136[\u305c\u3093\u305c\u3093]\u3044\u307e\u305b\u3093\u3002\u7530\u4e2d[\u305f\u306a\u304b]\u3055\u3093\u306f\u65e5\u672c\u8a9e[\u306b\u307b\u3093\u3054]\u3060\u3051\u8a71[\u306f\u306a]\u3057\u307e\u3059\u304b\u3002\", romaji: \"Ee. Asoko wa hito mo zenzen imasen. Tanaka-san wa nihongo dake hanashimasu ka.\", vi: \"V\u00e2ng. \u1ede \u0111\u00f3 c\u0169ng ho\u00e0n to\u00e0n kh\u00f4ng c\u00f3 ng\u01b0\u1eddi. Anh Tanaka ch\u1ec9 n\u00f3i ti\u1ebfng Nh\u1eadt th\u00f4i \u00e0?\" },\r\n { speaker: \"Tanaka\", jp: \"\u3044\u3044\u3048\u3001\u30d9\u30c8\u30ca\u30e0\u8a9e[\u3054]\u3082\u5c11[\u3059\u3053]\u3057\u3002\u3067\u3082\u3001\u4e0a\u624b[\u3058\u3087\u3046\u305a]\u3058\u3083\u306a\u3044\u3067\u3059\u3002\u30d9\u30c8\u30ca\u30e0\u8a9e[\u3054]\u3057\u304b\u8a71[\u306f\u306a]\u305b\u306a\u3044\u5916\u56fd[\u304c\u3044\u3053\u304f]\u4eba[\u3058\u3093]\u306e\u53cb\u9054[\u3068\u3082\u3060\u3061]\u304c\u3044\u307e\u3059\u304b\u3089\u3002\", romaji: \"Iie, betonamugo mo sukoshi. Demo, jouzu ja nai desu. Betonamugo shika hanasenai gaikokujin no tomodachi ga imasu kara.\", vi: \"Kh\u00f4ng, c\u1ea3 ti\u1ebfng Vi\u1ec7t m\u1ed9t ch\u00fat. Nh\u01b0ng kh\u00f4ng gi\u1ecfi \u0111\u00e2u. V\u00ec t\u00f4i c\u00f3 ng\u01b0\u1eddi b\u1ea1n n\u01b0\u1edbc ngo\u00e0i ch\u1ec9 c\u00f3 th\u1ec3 n\u00f3i ti\u1ebfng Vi\u1ec7t.\" },\r\n { speaker: \"Suzuki\", jp: \"\u3059\u3054\u3044\u3067\u3059\u306d\uff01\u3058\u3083\u3001\u307e\u305f\u3002\", romaji: \"Sugoi desu ne! Ja, mata.\", vi: \"Tuy\u1ec7t v\u1eddi nh\u1ec9! V\u1eady, h\u1eb9n g\u1eb7p l\u1ea1i.\" }\r\n ]\r\n },\r\n casual: {\r\n name: \"Th\u1ec3 th\u00f4ng th\u01b0\u1eddng (\u666e\u901a\u5f62)\",\r\n dialogue: [\r\n { speaker: \"Tanaka\", jp: \"\u3042\u3001\u9234\u6728[\u3059\u305a\u304d]\u304f\u3093\u3002\u4eca\u65e5[\u304d\u3087\u3046]\u3069\u3053\u304b\u884c[\u3044]\u304f\uff1f\", romaji: \"A, Suzuki-kun. Kyou doko ka iku?\", vi: \"A, Suzuki. Nay \u0111i \u0111\u00e2u kh\u00f4ng?\" },\r\n { speaker: \"Suzuki\", jp: \"\u7530\u4e2d[\u305f\u306a\u304b]\u3055\u3093\u3001\u3084\u3042\u3002\u4eca\u65e5[\u304d\u3087\u3046]\u306f\u3069\u3053\u3082\u884c[\u3044]\u304b\u306a\u3044\u3088\u3002\u3042\u307e\u308a\u6691[\u3042\u3064]\u304f\u306a\u3044\u3051\u3069\u3001\u5bb6[\u3044\u3048]\u3067\u4f11[\u3084\u3059]\u3080\u3002\", romaji: \"Tanaka-san, yaa. Kyou wa doko mo ikanai yo. Amari atsukunai kedo, ie de yasumu.\", vi: \"Tanaka, ch\u00e0o. H\u00f4m nay kh\u00f4ng \u0111i \u0111\u00e2u c\u1ea3. Kh\u00f4ng n\u00f3ng l\u1eafm nh\u01b0ng m\u00e0 ngh\u1ec9 \u1edf nh\u00e0.\" },\r\n { speaker: \"Tanaka\", jp: \"\u305d\u3063\u304b\u3002\u4ffa[\u304a\u308c]\u3001\u5e02\u5f79\u6240[\u3057\u3084\u304f\u3057\u3087]\u306b\u884c[\u3044]\u304f\u3093\u3060\u3002\u3067\u3082\u3001\u5e02\u5f79\u6240[\u3057\u3084\u304f\u3057\u3087]\u3063\u3066\u306a\u304b\u306a\u304b\u958b[\u3042]\u304b\u306a\u3044\u306d\u3002\", romaji: \"Sokka. Ore, shiyakusho ni ikunda. Demo, shiyakusho tte nakanaka akanai ne.\", vi: \"V\u1eady \u00e0. T\u1edb \u0111\u1ebfn t\u00f2a th\u1ecb ch\u00ednh \u0111\u00e2y. M\u00e0 t\u00f2a th\u1ecb ch\u00ednh m\u00e3i ch\u1ea3 m\u1edf c\u1eeda nh\u1ec9.\" },\r\n { speaker: \"Suzuki\", jp: \"\u3046\u3093\u3002\u3042\u305d\u3053\u3001\u4eba[\u3072\u3068]\u3082\u5168\u7136[\u305c\u3093\u305c\u3093]\u3044\u306a\u3044\u3057\u3002\u7530\u4e2d[\u305f\u306a\u304b]\u3055\u3093\u3063\u3066\u65e5\u672c\u8a9e[\u306b\u307b\u3093\u3054]\u3060\u3051\u8a71[\u306f\u306a]\u3059\u306e\uff1f\", romaji: \"Un. Asoko, hito mo zenzen inai shi. Tanaka-san tte nihongo dake hanasu no?\", vi: \"\u1eea. Ch\u1ed7 \u0111\u00f3 c\u0169ng ch\u1eb3ng c\u00f3 ai c\u1ea3. Tanaka n\u00e0y, c\u1eadu ch\u1ec9 n\u00f3i ti\u1ebfng Nh\u1eadt th\u00f4i \u00e0?\" },\r\n { speaker: \"Tanaka\", jp: \"\u3046\u3046\u3093\u3001\u30d9\u30c8\u30ca\u30e0\u8a9e[\u3054]\u3082\u5c11[\u3059\u3053]\u3057\u3002\u3067\u3082\u3001\u4e0a\u624b[\u3058\u3087\u3046\u305a]\u3058\u3083\u306a\u3044\u3002\u30d9\u30c8\u30ca\u30e0\u8a9e[\u3054]\u3057\u304b\u8a71[\u306f\u306a]\u305b\u306a\u3044\u5916\u56fd[\u304c\u3044\u3053\u304f]\u4eba[\u3058\u3093]\u306e\u53cb\u9054[\u3068\u3082\u3060\u3061]\u304c\u3044\u308b\u304b\u3089\u3055\u3002\", romaji: \"Uun, betonamugo mo sukoshi. Demo, jouzu ja nai. Betonamugo shika hanasenai gaikokujin no tomodachi ga iru kara sa.\", vi: \"Kh\u00f4ng, ti\u1ebfng Vi\u1ec7t c\u0169ng m\u1ed9t ch\u00fat. Nh\u01b0ng kh\u00f4ng gi\u1ecfi. V\u00ec t\u1edb c\u00f3 ng\u01b0\u1eddi b\u1ea1n n\u01b0\u1edbc ngo\u00e0i ch\u1ec9 n\u00f3i \u0111\u01b0\u1ee3c ti\u1ebfng Vi\u1ec7t th\u00f4i m\u00e0.\" },\r\n { speaker: \"Suzuki\", jp: \"\u3059\u3054\u3044\u306d\uff01\u3058\u3083\u3042\u306d\u3002\", romaji: \"Sugoi ne! Jaane.\", vi: \"Gh\u00ea v\u1eady! Th\u00f4i bai nh\u00e9.\" }\r\n ]\r\n }\r\n }\r\n },\r\n reading: {\r\n id: 'reading',\r\n title: \"\u4eca\u65e5\u306e\u8aad\u307f\u7269 (B\u00e0i \u0111\u1ecdc ng\u1eafn)\",\r\n content: {\r\n jp: \"\u79c1[\u308f\u305f\u3057]\u306e\u90e8\u5c4b[\u3078\u3084]\u306f\u3042\u307e\u308a\u5e83[\u3072\u308d]\u304f\u306a\u3044\u3067\u3059\u3002\u90e8\u5c4b[\u3078\u3084]\u306b\u30d9\u30c3\u30c9\u3068\u673a[\u3064\u304f\u3048]\u3060\u3051\u3042\u308a\u307e\u3059\u3002\u673a[\u3064\u304f\u3048]\u306e\u4e0a[\u3046\u3048]\u306b\u672c[\u307b\u3093]\u3084\u30d1\u30bd\u30b3\u30f3\u304c\u3042\u308a\u307e\u3059\u3002\u3067\u3082\u3001\u53e4[\u3075\u308b]\u3044\u672c[\u307b\u3093]\u3057\u304b\u3042\u308a\u307e\u305b\u3093\u3002\u65b0[\u3042\u305f\u3089]\u3057\u3044\u672c[\u307b\u3093]\u306f\u5168\u7136[\u305c\u3093\u305c\u3093]\u306a\u3044\u3067\u3059\u3002\u7a93[\u307e\u3069]\u306e\u53f3[\u307f\u304e]\u306b\u672c\u68da[\u307b\u3093\u3060\u306a]\u304c\u3042\u308a\u307e\u3059\u3002\u3067\u3082\u3001\u672c\u68da[\u307b\u3093\u3060\u306a]\u306f\u306a\u304b\u306a\u304b\u7247\u4ed8[\u304b\u305f\u3065]\u304d\u307e\u305b\u3093\u3002\u79c1[\u308f\u305f\u3057]\u306f\u3053\u306e\u90e8\u5c4b[\u3078\u3084]\u304c\u3042\u307e\u308a\u597d[\u3059]\u304d\u3058\u3083\u306a\u3044\u3067\u3059\u304c\u3001\u4fbf\u5229[\u3079\u3093\u308a]\u3067\u3059\u3002\",\r\n romaji: \"Watashi no heya wa amari hirokunai desu. Heya ni beddo to tsukue dake arimasu. Tsukue no ue ni hon ya pasokon ga arimasu. Demo, furui hon shika arimasen. Atarashii hon wa zenzen nai desu. Mado no migi ni hondana ga arimasu. Demo, hondana wa nakanaka katadzukimasen. Watashi wa kono heya ga amari suki ja nai desu ga, benri desu.\",\r\n vi: \"C\u0103n ph\u00f2ng c\u1ee7a t\u00f4i kh\u00f4ng r\u1ed9ng l\u1eafm. Trong ph\u00f2ng ch\u1ec9 c\u00f3 gi\u01b0\u1eddng v\u00e0 b\u00e0n. Tr\u00ean b\u00e0n c\u00f3 s\u00e1ch v\u00e0 m\u00e1y t\u00ednh. Nh\u01b0ng ch\u1ec9 c\u00f3 s\u00e1ch c\u0169 th\u00f4i. Ho\u00e0n to\u00e0n kh\u00f4ng c\u00f3 s\u00e1ch m\u1edbi. B\u00ean ph\u1ea3i c\u1eeda s\u1ed5 c\u00f3 m\u1ed9t gi\u00e1 s\u00e1ch. Nh\u01b0ng m\u00e0 c\u00e1i gi\u00e1 s\u00e1ch m\u00e3i m\u00e0 kh\u00f4ng \u0111\u01b0\u1ee3c d\u1ecdn d\u1eb9p g\u1ecdn g\u00e0ng. T\u00f4i kh\u00f4ng th\u00edch c\u0103n ph\u00f2ng n\u00e0y l\u1eafm nh\u01b0ng n\u00f3 ti\u1ec7n l\u1ee3i.\"\r\n }\r\n },\r\n grammar: {\r\n id: 'grammar',\r\n title: \"\u4eca\u65e5\u306e\u6587\u6cd5 (T\u1ed5ng h\u1ee3p ng\u1eef ph\u00e1p)\",\r\n points: [\r\n { rule: \"\u3042\u307e\u308a\u301c\u306a\u3044\", meaning: \"Kh\u00f4ng... l\u1eafm\", formula: \"\u3042\u307e\u308a + V\/A\/N (ph\u1ee7 \u0111\u1ecbnh)\", example: \"\u3053\u306e\u9053[\u307f\u3061]\u306f\u3042\u307e\u308a\u5e83[\u3072\u308d]\u304f\u306a\u3044\u3067\u3059\u3002\", example_vi: \"Con \u0111\u01b0\u1eddng n\u00e0y kh\u00f4ng r\u1ed9ng l\u1eafm.\" },\r\n { rule: \"\u5168\u7136\u301c\u306a\u3044\", meaning: \"Ho\u00e0n to\u00e0n kh\u00f4ng...\", formula: \"\u5168\u7136 + V\/A\/N (ph\u1ee7 \u0111\u1ecbnh)\", example: \"\u5168\u7136[\u305c\u3093\u305c\u3093]\u5206[\u308f]\u304b\u308a\u307e\u305b\u3093\u3002\", example_vi: \"T\u00f4i ho\u00e0n to\u00e0n kh\u00f4ng hi\u1ec3u g\u00ec.\" },\r\n { rule: \"\u306a\u304b\u306a\u304b\u301c\u306a\u3044\", meaning: \"M\u00e3i m\u00e0 kh\u00f4ng...\", formula: \"\u306a\u304b\u306a\u304b + V (ph\u1ee7 \u0111\u1ecbnh)\", example: \"\u3053\u306e\u554f\u984c[\u3082\u3093\u3060\u3044]\u306f\u306a\u304b\u306a\u304b\u89e3[\u3068]\u3051\u307e\u305b\u3093\u3002\", example_vi: \"V\u1ea5n \u0111\u1ec1 n\u00e0y m\u00e3i m\u00e0 kh\u00f4ng gi\u1ea3i quy\u1ebft \u0111\u01b0\u1ee3c.\" },\r\n { rule: \"\u301c\u3060\u3051\", meaning: \"Ch\u1ec9...\", formula: \"N\/L\u01b0\u1ee3ng t\u1eeb + \u3060\u3051\", example: \"\u65e5\u66dc\u65e5[\u306b\u3061\u3088\u3046\u3073]\u3060\u3051\u4f11[\u3084\u3059]\u307f\u307e\u3059\u3002\", example_vi: \"T\u00f4i ch\u1ec9 \u0111\u01b0\u1ee3c ngh\u1ec9 Ch\u1ee7 Nh\u1eadt.\" },\r\n { rule: \"\u301c\u3057\u304b\u301c\u306a\u3044\", meaning: \"Ch\u1ec9... (nh\u1ea5n m\u1ea1nh h\u01a1n \u3060\u3051)\", formula: \"N\/L\u01b0\u1ee3ng t\u1eeb + \u3057\u304b + V (ph\u1ee7 \u0111\u1ecbnh)\", example: \"\u30d9\u30c8\u30ca\u30e0\u8a9e[\u3054]\u3057\u304b\u8a71[\u306f\u306a]\u3057\u307e\u305b\u3093\u3002\", example_vi: \"T\u00f4i ch\u1ec9 n\u00f3i \u0111\u01b0\u1ee3c ti\u1ebfng Vi\u1ec7t th\u00f4i.\" }\r\n ]\r\n },\r\n quiz: {\r\n id: 'quiz',\r\n title: \"\u7df4\u7fd2\u3068\u30c6\u30b9\u30c8 (Luy\u1ec7n t\u1eadp & Ki\u1ec3m tra)\",\r\n questions: [\r\n { type: \"mcq\", question: \"\u3053\u306e\u554f\u984c[\u3082\u3093\u3060\u3044]\u306f\uff08___\uff09\u89e3[\u3068]\u3051\u307e\u305b\u3093\u3002\", options: [\"\u3042\u307e\u308a\", \"\u306a\u304b\u306a\u304b\", \"\u3060\u3051\"], answer: \"\u306a\u304b\u306a\u304b\" },\r\n { type: \"fill\", question: \"\u51b7\u8535\u5eab[\u308c\u3044\u305e\u3046\u3053]\u306b\u91ce\u83dc[\u3084\u3055\u3044]\uff08___\uff09\u3042\u308a\u307e\u305b\u3093\u3002\", answer: \"\u3057\u304b\" },\r\n { type: \"mcq\", question: \"\u4eca\u65e5[\u304d\u3087\u3046]\u306f\u3069\u3053\uff08___\uff09\u884c[\u3044]\u304d\u307e\u305b\u3093\u3002\", options: [\"\u304b\", \"\u304c\", \"\u3082\"], answer: \"\u3082\" },\r\n { type: \"audio\", jp: \"\u4eca\u65e5[\u304d\u3087\u3046]\u306f\u4ed5\u4e8b[\u3057\u3054\u3068]\u3060\u3051\u5fd9[\u3044\u305d\u304c]\u3057\u3044\u3067\u3059\u3002\", question: \"Nghe v\u00e0 g\u00f5 l\u1ea1i c\u00e2u b\u1ea1n v\u1eeba nghe:\" }\r\n ]\r\n }\r\n };\r\n\r\n \/\/ --- STATE MANAGEMENT & SETTINGS ---\r\n let settings = {\r\n hideFurigana: false,\r\n showRomaji: false,\r\n showVietnamese: false\r\n };\r\n\r\n let progress = {\r\n conversation: false,\r\n reading: false,\r\n grammar: false,\r\n quiz: false\r\n };\r\n\r\n function saveSettings() {\r\n localStorage.setItem('jpAppSettings', JSON.stringify(settings));\r\n }\r\n\r\n function loadSettings() {\r\n const saved = localStorage.getItem('jpAppSettings');\r\n if (saved) {\r\n settings = JSON.parse(saved);\r\n }\r\n }\r\n\r\n function applySettings() {\r\n \/\/ Buttons\r\n updateToggleButtonUI('toggle-furigana', !settings.hideFurigana, '\u1ea8n Furigana', 'Hi\u1ec7n Furigana');\r\n updateToggleButtonUI('toggle-romaji', settings.showRomaji, '\u1ea8n Romaji', 'Hi\u1ec7n Romaji');\r\n updateToggleButtonUI('toggle-vietnamese', settings.showVietnamese, '\u1ea8n Ti\u1ebfng Vi\u1ec7t', 'Hi\u1ec7n Ti\u1ebfng Vi\u1ec7t');\r\n \r\n \/\/ Content\r\n document.getElementById('app').classList.toggle('hide-furigana', settings.hideFurigana);\r\n document.querySelectorAll('.romaji-text').forEach(el => el.classList.toggle('hidden', !settings.showRomaji));\r\n document.querySelectorAll('.vi-text').forEach(el => el.classList.toggle('hidden', !settings.showVietnamese));\r\n }\r\n\r\n function updateToggleButtonUI(buttonId, isActive, activeText, inactiveText) {\r\n const button = document.getElementById(buttonId);\r\n button.textContent = isActive ? activeText : inactiveText;\r\n button.classList.toggle('bg-sky-500', isActive);\r\n button.classList.toggle('text-white', isActive);\r\n button.classList.toggle('bg-gray-200', !isActive);\r\n button.classList.toggle('text-gray-700', !isActive);\r\n }\r\n\r\n \/\/ --- PROGRESS ---\r\n function updateProgress(sectionId) {\r\n if (progress.hasOwnProperty(sectionId) && !progress[sectionId]) {\r\n progress[sectionId] = true;\r\n updateProgressBar();\r\n }\r\n }\r\n\r\n function updateProgressBar() {\r\n const completed = Object.values(progress).filter(Boolean).length;\r\n const total = Object.keys(progress).length;\r\n const percentage = (completed \/ total) * 100;\r\n const bar = document.getElementById('lesson-progress-bar');\r\n bar.style.width = `${percentage}%`;\r\n bar.textContent = `${Math.round(percentage)}%`;\r\n }\r\n\r\n\r\n \/\/ --- UTILITY FUNCTIONS ---\r\n function parseFurigana(text) {\r\n return text.replace(\/([^\\[\\]]+)\\[(.+?)\\]\/g, '<ruby>$1<rt>$2<\/rt><\/ruby>');\r\n }\r\n\r\n function speak(text) {\r\n speechSynthesis.cancel(); \/\/ Stop any previous speech\r\n const cleanText = text.replace(\/\\[.*?\\]\/g, '');\r\n const utterance = new SpeechSynthesisUtterance(cleanText);\r\n utterance.lang = 'ja-JP';\r\n utterance.rate = 0.9;\r\n speechSynthesis.speak(utterance);\r\n }\r\n\r\n \/\/ --- RENDER FUNCTIONS ---\r\n function renderConversation() {\r\n const section = document.getElementById('conversation-section');\r\n const data = day1Data.conversation;\r\n section.innerHTML = `\r\n <div class=\"bg-white p-6 rounded-xl shadow-md border border-gray-200\">\r\n <h2 class=\"text-2xl font-bold mb-1 jp-font\">${data.title}<\/h2>\r\n <p class=\"text-gray-500 mb-4\">${data.context}<\/p>\r\n <div class=\"flex items-center justify-center space-x-2 mb-6 p-1 bg-gray-100 rounded-full\">\r\n <button id=\"convo-mode-polite\" class=\"convo-mode-btn flex-1 py-2 px-4 rounded-full bg-sky-600 text-white shadow\">Th\u1ec3 l\u1ecbch s\u1ef1<\/button>\r\n <button id=\"convo-mode-casual\" class=\"convo-mode-btn flex-1 py-2 px-4 rounded-full\">Th\u1ec3 th\u00f4ng th\u01b0\u1eddng<\/button>\r\n <\/div>\r\n <div id=\"conversation-content\" class=\"space-y-4 content-fade\"><\/div>\r\n <\/div>\r\n `;\r\n renderDialogue('polite');\r\n updateProgress(data.id);\r\n }\r\n \r\n function renderDialogue(mode) {\r\n const container = document.getElementById('conversation-content');\r\n const dialogue = day1Data.conversation.modes[mode].dialogue;\r\n\r\n container.innerHTML = dialogue.map((line) => `\r\n <div class=\"dialogue-line p-4 rounded-lg bg-gray-50 border\">\r\n <div class=\"flex items-start space-x-3\">\r\n <div class=\"w-10 h-10 rounded-full ${line.speaker === 'Tanaka' ? 'bg-sky-100' : 'bg-emerald-100'} flex items-center justify-center font-bold text-sky-800\">${line.speaker.charAt(0)}<\/div>\r\n <div class=\"flex-1\">\r\n <p class=\"font-bold text-gray-800\">${line.speaker}<\/p>\r\n <p class=\"jp-font text-lg mt-1 leading-relaxed\">${parseFurigana(line.jp)}<\/p>\r\n <p class=\"romaji-text text-sm text-gray-500 mt-1\">${line.romaji}<\/p>\r\n <p class=\"vi-text text-sm text-emerald-700 mt-1\">${line.vi}<\/p>\r\n <div class=\"mt-3 flex items-center space-x-3\">\r\n <button class=\"speak-btn\" data-text=\"${line.jp}\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"text-gray-500\"><polygon points=\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\"><\/polygon><path d=\"M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07\"><\/path><\/svg>\r\n <\/button>\r\n <div class=\"w-full\">\r\n <input type=\"text\" class=\"typing-input w-full p-2 border rounded-md bg-white text-base\" data-correct=\"${line.jp.replace(\/\\[.*?\\]\/g, '')}\" placeholder=\"Luy\u1ec7n g\u00f5 \u1edf \u0111\u00e2y...\">\r\n <div class=\"typing-feedback text-xs mt-1 h-4\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n `).join('');\r\n attachEventListenersToRenderedContent(container);\r\n applySettings();\r\n }\r\n\r\n function renderReading() {\r\n const section = document.getElementById('reading-section');\r\n const data = day1Data.reading;\r\n section.innerHTML = `\r\n <div class=\"bg-white p-6 rounded-xl shadow-md border border-gray-200\">\r\n <h2 class=\"text-2xl font-bold mb-2 jp-font\">${data.title}<\/h2>\r\n <div class=\"reading-content p-4 rounded-lg bg-gray-50 border\">\r\n <p class=\"jp-font text-lg leading-relaxed\">${parseFurigana(data.content.jp)}<\/p>\r\n <p class=\"romaji-text text-sm text-gray-500 mt-2\">${data.content.romaji}<\/p>\r\n <p class=\"vi-text text-sm text-emerald-700 mt-2\">${data.content.vi}<\/p>\r\n <div class=\"mt-4 flex items-center space-x-3\">\r\n <button class=\"speak-btn\" data-text=\"${data.content.jp}\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"text-gray-500\"><polygon points=\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\"><\/polygon><path d=\"M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07\"><\/path><\/svg>\r\n <\/button>\r\n <div class=\"w-full\">\r\n <input type=\"text\" class=\"typing-input w-full p-2 border rounded-md bg-white text-base\" data-correct=\"${data.content.jp.replace(\/\\[.*?\\]\/g, '')}\" placeholder=\"Luy\u1ec7n g\u00f5 \u1edf \u0111\u00e2y...\">\r\n <div class=\"typing-feedback text-xs mt-1 h-4\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n `;\r\n attachEventListenersToRenderedContent(section);\r\n updateProgress(data.id);\r\n }\r\n\r\n function renderGrammar() {\r\n const section = document.getElementById('grammar-section');\r\n const data = day1Data.grammar;\r\n section.innerHTML = `\r\n <div class=\"bg-white p-6 rounded-xl shadow-md border border-gray-200\">\r\n <h2 class=\"text-2xl font-bold mb-4 jp-font\">${data.title}<\/h2>\r\n <div class=\"space-y-3\">\r\n ${data.points.map((point) => `\r\n <div class=\"grammar-point border border-gray-200 rounded-lg overflow-hidden\">\r\n <button class=\"grammar-toggle w-full flex justify-between items-center p-4 bg-gray-50 hover:bg-gray-100\">\r\n <span class=\"font-bold text-sky-800 jp-font text-lg\">${point.rule}<\/span>\r\n <svg class=\"w-5 h-5 transform transition-transform\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\" clip-rule=\"evenodd\" \/><\/svg>\r\n <\/button>\r\n <div class=\"grammar-details max-h-0 overflow-hidden transition-height\">\r\n <div class=\"p-4 border-t border-gray-200\">\r\n <p><strong>\u00dd ngh\u0129a:<\/strong> ${point.meaning}<\/p>\r\n <p><strong>C\u00f4ng th\u1ee9c:<\/strong> <code class=\"bg-gray-200 text-red-600 px-1 rounded\">${point.formula}<\/code><\/p>\r\n <div class=\"mt-2 p-3 bg-sky-50 rounded-md\">\r\n <div class=\"flex items-center justify-between\">\r\n <div>\r\n <p class=\"jp-font\">${parseFurigana(point.example)}<\/p>\r\n <p class=\"vi-text text-sm text-emerald-700 mt-1\">${point.example_vi}<\/p>\r\n <\/div>\r\n <button class=\"speak-btn\" data-text=\"${point.example}\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"text-gray-500\"><polygon points=\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\"><\/polygon><path d=\"M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07\"><\/path><\/svg>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n `).join('')}\r\n <\/div>\r\n <\/div>\r\n `;\r\n attachEventListenersToRenderedContent(section);\r\n updateProgress(data.id);\r\n }\r\n\r\n function renderQuiz() {\r\n const section = document.getElementById('quiz-section');\r\n const data = day1Data.quiz;\r\n section.innerHTML = `\r\n <div class=\"bg-white p-6 rounded-xl shadow-md border border-gray-200\">\r\n <h2 class=\"text-2xl font-bold mb-4 jp-font\">${data.title}<\/h2>\r\n <div id=\"quiz-content\" class=\"space-y-6\">\r\n ${data.questions.map((q, index) => {\r\n if (q.type === 'mcq') {\r\n return `\r\n <div class=\"quiz-question\" data-answer=\"${q.answer}\">\r\n <p class=\"mb-2 jp-font\">${index + 1}. ${parseFurigana(q.question)}<\/p>\r\n <div class=\"flex flex-col space-y-2\">\r\n ${q.options.map(opt => `<button class=\"mcq-option text-left p-3 border rounded-lg hover:bg-gray-100\">${opt}<\/button>`).join('')}\r\n <\/div>\r\n <div class=\"feedback mt-2 text-sm h-5\"><\/div>\r\n <\/div>\r\n `;\r\n }\r\n if (q.type === 'fill') {\r\n return `\r\n <div class=\"quiz-question\" data-answer=\"${q.answer}\">\r\n <p class=\"mb-2 jp-font\">${index + 1}. ${parseFurigana(q.question)}<\/p>\r\n <input type=\"text\" class=\"fill-input w-full p-2 border rounded-md\">\r\n <div class=\"feedback mt-2 text-sm h-5\"><\/div>\r\n <\/div>\r\n `;\r\n }\r\n if (q.type === 'audio') {\r\n return `\r\n <div class=\"quiz-question\" data-answer=\"${q.jp.replace(\/\\[.*?\\]\/g, '')}\">\r\n <p class=\"mb-2 jp-font\">${index + 1}. ${q.question}<\/p>\r\n <button class=\"speak-btn mb-2 flex items-center\" data-text=\"${q.jp}\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"text-sky-600\"><polygon points=\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\"><\/polygon><path d=\"M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07\"><\/path><\/svg>\r\n <span class=\"ml-2\">Nghe<\/span>\r\n <\/button>\r\n <input type=\"text\" class=\"fill-input w-full p-2 border rounded-md\">\r\n <div class=\"feedback mt-2 text-sm h-5\"><\/div>\r\n <\/div>\r\n `;\r\n }\r\n }).join('')}\r\n <\/div>\r\n <button id=\"check-quiz-btn\" class=\"mt-6 w-full bg-emerald-600 text-white font-bold py-3 rounded-lg hover:bg-emerald-700 transition-colors\">Ki\u1ec3m tra \u0111\u00e1p \u00e1n<\/button>\r\n <div id=\"quiz-result\" class=\"mt-4 text-center font-bold\"><\/div>\r\n <\/div>\r\n `;\r\n attachEventListenersToRenderedContent(section);\r\n }\r\n\r\n \/\/ --- EVENT LISTENERS ---\r\n function attachEventListenersToRenderedContent(container) {\r\n container.querySelectorAll('.speak-btn').forEach(btn => {\r\n btn.onclick = () => speak(btn.dataset.text);\r\n });\r\n\r\n container.querySelectorAll('.typing-input').forEach(input => {\r\n input.addEventListener('input', (e) => {\r\n const correctText = e.target.dataset.correct;\r\n const userText = e.target.value;\r\n const feedbackContainer = e.target.nextElementSibling;\r\n let styledText = '';\r\n for (let i = 0; i < userText.length; i++) {\r\n styledText += `<span class=\"${userText[i] === correctText[i] ? 'correct-char' : 'incorrect-char'}\">${userText[i]}<\/span>`;\r\n }\r\n feedbackContainer.innerHTML = styledText;\r\n if (userText === correctText) {\r\n feedbackContainer.innerHTML = '<span class=\"text-green-600 font-bold\">Ch\u00ednh x\u00e1c! \ud83c\udf89<\/span>';\r\n }\r\n });\r\n });\r\n \r\n container.querySelectorAll('.grammar-toggle').forEach(button => {\r\n button.addEventListener('click', () => {\r\n const details = button.nextElementSibling;\r\n const icon = button.querySelector('svg');\r\n if (details.style.maxHeight && details.style.maxHeight !== '0px') {\r\n details.style.maxHeight = '0px';\r\n icon.style.transform = 'rotate(0deg)';\r\n } else {\r\n details.style.maxHeight = details.scrollHeight + 'px';\r\n icon.style.transform = 'rotate(180deg)';\r\n }\r\n });\r\n });\r\n }\r\n\r\n function setupGlobalEventListeners() {\r\n document.getElementById('toggle-furigana').addEventListener('click', () => {\r\n settings.hideFurigana = !settings.hideFurigana;\r\n saveSettings();\r\n applySettings();\r\n });\r\n document.getElementById('toggle-romaji').addEventListener('click', () => {\r\n settings.showRomaji = !settings.showRomaji;\r\n saveSettings();\r\n applySettings();\r\n });\r\n document.getElementById('toggle-vietnamese').addEventListener('click', () => {\r\n settings.showVietnamese = !settings.showVietnamese;\r\n saveSettings();\r\n applySettings();\r\n });\r\n\r\n document.getElementById('convo-mode-polite').addEventListener('click', (e) => {\r\n const container = document.getElementById('conversation-content');\r\n container.classList.add('fading-out');\r\n setTimeout(() => {\r\n renderDialogue('polite');\r\n container.classList.remove('fading-out');\r\n e.target.classList.add('bg-sky-600', 'text-white', 'shadow');\r\n document.getElementById('convo-mode-casual').classList.remove('bg-sky-600', 'text-white', 'shadow');\r\n }, 300);\r\n });\r\n document.getElementById('convo-mode-casual').addEventListener('click', (e) => {\r\n const container = document.getElementById('conversation-content');\r\n container.classList.add('fading-out');\r\n setTimeout(() => {\r\n renderDialogue('casual');\r\n container.classList.remove('fading-out');\r\n e.target.classList.add('bg-sky-600', 'text-white', 'shadow');\r\n document.getElementById('convo-mode-polite').classList.remove('bg-sky-600', 'text-white', 'shadow');\r\n }, 300);\r\n });\r\n \r\n document.getElementById('check-quiz-btn').addEventListener('click', () => {\r\n const questions = document.querySelectorAll('.quiz-question');\r\n let score = 0;\r\n questions.forEach(q => {\r\n const answer = q.dataset.answer;\r\n const feedback = q.querySelector('.feedback');\r\n let isCorrect = false;\r\n\r\n const selectedOption = q.querySelector('.mcq-option.bg-sky-200');\r\n if (selectedOption) {\r\n isCorrect = selectedOption.textContent === answer;\r\n selectedOption.classList.add(isCorrect ? 'border-green-500' : 'border-red-500');\r\n }\r\n \r\n const input = q.querySelector('.fill-input');\r\n if (input) {\r\n isCorrect = input.value.trim() === answer;\r\n input.classList.add(isCorrect ? 'border-green-500' : 'border-red-500');\r\n }\r\n\r\n if (isCorrect) {\r\n score++;\r\n feedback.innerHTML = `<span class=\"feedback-icon feedback-correct\">\u2714\ufe0f<\/span><span class=\"text-green-600 font-bold\">\u0110\u00fang!<\/span>`;\r\n } else {\r\n feedback.innerHTML = `<span class=\"feedback-icon feedback-incorrect\">\u274c<\/span><span class=\"text-red-600 font-bold\">Sai! \u0110\u00e1p \u00e1n \u0111\u00fang l\u00e0: ${answer}<\/span>`;\r\n }\r\n });\r\n \r\n document.getElementById('quiz-result').innerHTML = `B\u1ea1n \u0111\u00e3 tr\u1ea3 l\u1eddi \u0111\u00fang ${score}\/${questions.length} c\u00e2u!`;\r\n updateProgress(day1Data.quiz.id);\r\n });\r\n \r\n document.querySelectorAll('.mcq-option').forEach(opt => {\r\n opt.addEventListener('click', () => {\r\n opt.parentElement.querySelectorAll('.mcq-option').forEach(sibling => {\r\n sibling.classList.remove('bg-sky-200', 'border-sky-500');\r\n });\r\n opt.classList.add('bg-sky-200', 'border-sky-500');\r\n });\r\n });\r\n }\r\n \r\n \/\/ --- INITIALIZATION ---\r\n function init() {\r\n document.getElementById('main-title').textContent = day1Data.title;\r\n loadSettings();\r\n renderConversation();\r\n renderReading();\r\n renderGrammar();\r\n renderQuiz();\r\n setupGlobalEventListeners();\r\n applySettings();\r\n updateProgressBar();\r\n }\r\n\r\n window.onload = init;\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\n\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":5,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-9961","page","type-page","status-publish","hentry"],"acf":[],"rankMath":{"parentDomain":"globalsolution.jp","noFollowDomains":[],"noFollowExcludeDomains":[],"noFollowExternalLinks":false,"featuredImageNotice":"The featured image should be at least 200 by 200 pixels to be picked up by Facebook and other social media sites.","pluginReviewed":false,"postSettings":{"linkSuggestions":true,"useFocusKeyword":false},"frontEndScore":false,"postName":"hoc-tieng-nhat-ngay-1","permalinkFormat":"https:\/\/globalsolution.jp\/vi\/%pagename%\/","showLockModifiedDate":true,"assessor":{"focusKeywordLink":"https:\/\/globalsolution.jp\/wp-admin\/edit.php?focus_keyword=%focus_keyword%&post_type=%post_type%","hasTOCPlugin":true,"primaryTaxonomy":false,"serpData":{"title":"","description":"","focusKeywords":"","pillarContent":false,"canonicalUrl":"","breadcrumbTitle":"","advancedRobots":[],"facebookTitle":"","facebookDescription":"","facebookImage":"","facebookImageID":"","facebookHasOverlay":false,"facebookImageOverlay":"","facebookAuthor":"","twitterCardType":"","twitterUseFacebook":true,"twitterTitle":"","twitterDescription":"","twitterImage":"","twitterImageID":"","twitterHasOverlay":false,"twitterImageOverlay":"","twitterPlayerUrl":"","twitterPlayerSize":"","twitterPlayerStream":"","twitterPlayerStreamCtype":"","twitterAppDescription":"","twitterAppIphoneName":"","twitterAppIphoneID":"","twitterAppIphoneUrl":"","twitterAppIpadName":"","twitterAppIpadID":"","twitterAppIpadUrl":"","twitterAppGoogleplayName":"","twitterAppGoogleplayID":"","twitterAppGoogleplayUrl":"","twitterAppCountry":"","robots":{"index":true},"twitterAuthor":"username","primaryTerm":0,"authorName":"Binh GS","titleTemplate":"%title% %sep% %sitename%","descriptionTemplate":"%excerpt%","showScoreFrontend":true,"lockModifiedDate":false},"powerWords":[],"diacritics":{"A":"[\\u0041\\u24B6\\uFF21\\u00C0\\u00C1\\u00C2\\u1EA6\\u1EA4\\u1EAA\\u1EA8\\u00C3\\u0100\\u0102\\u1EB0\\u1EAE\\u1EB4\\u1EB2\\u0226\\u01E0\\u00C4\\u01DE\\u1EA2\\u00C5\\u01FA\\u01CD\\u0200\\u0202\\u1EA0\\u1EAC\\u1EB6\\u1E00\\u0104\\u023A\\u2C6F]","AA":"[\\uA732]","AE":"[\\u00C6\\u01FC\\u01E2]","AO":"[\\uA734]","AU":"[\\uA736]","AV":"[\\uA738\\uA73A]","AY":"[\\uA73C]","B":"[\\u0042\\u24B7\\uFF22\\u1E02\\u1E04\\u1E06\\u0243\\u0182\\u0181]","C":"[\\u0043\\u24B8\\uFF23\\u0106\\u0108\\u010A\\u010C\\u00C7\\u1E08\\u0187\\u023B\\uA73E]","D":"[\\u0044\\u24B9\\uFF24\\u1E0A\\u010E\\u1E0C\\u1E10\\u1E12\\u1E0E\\u0110\\u018B\\u018A\\u0189\\uA779]","DZ":"[\\u01F1\\u01C4]","Dz":"[\\u01F2\\u01C5]","E":"[\\u0045\\u24BA\\uFF25\\u00C8\\u00C9\\u00CA\\u1EC0\\u1EBE\\u1EC4\\u1EC2\\u1EBC\\u0112\\u1E14\\u1E16\\u0114\\u0116\\u00CB\\u1EBA\\u011A\\u0204\\u0206\\u1EB8\\u1EC6\\u0228\\u1E1C\\u0118\\u1E18\\u1E1A\\u0190\\u018E]","F":"[\\u0046\\u24BB\\uFF26\\u1E1E\\u0191\\uA77B]","G":"[\\u0047\\u24BC\\uFF27\\u01F4\\u011C\\u1E20\\u011E\\u0120\\u01E6\\u0122\\u01E4\\u0193\\uA7A0\\uA77D\\uA77E]","H":"[\\u0048\\u24BD\\uFF28\\u0124\\u1E22\\u1E26\\u021E\\u1E24\\u1E28\\u1E2A\\u0126\\u2C67\\u2C75\\uA78D]","I":"[\\u0049\\u24BE\\uFF29\\u00CC\\u00CD\\u00CE\\u0128\\u012A\\u012C\\u0130\\u00CF\\u1E2E\\u1EC8\\u01CF\\u0208\\u020A\\u1ECA\\u012E\\u1E2C\\u0197]","J":"[\\u004A\\u24BF\\uFF2A\\u0134\\u0248]","K":"[\\u004B\\u24C0\\uFF2B\\u1E30\\u01E8\\u1E32\\u0136\\u1E34\\u0198\\u2C69\\uA740\\uA742\\uA744\\uA7A2]","L":"[\\u004C\\u24C1\\uFF2C\\u013F\\u0139\\u013D\\u1E36\\u1E38\\u013B\\u1E3C\\u1E3A\\u0141\\u023D\\u2C62\\u2C60\\uA748\\uA746\\uA780]","LJ":"[\\u01C7]","Lj":"[\\u01C8]","M":"[\\u004D\\u24C2\\uFF2D\\u1E3E\\u1E40\\u1E42\\u2C6E\\u019C]","N":"[\\u004E\\u24C3\\uFF2E\\u01F8\\u0143\\u00D1\\u1E44\\u0147\\u1E46\\u0145\\u1E4A\\u1E48\\u0220\\u019D\\uA790\\uA7A4]","NJ":"[\\u01CA]","Nj":"[\\u01CB]","O":"[\\u004F\\u24C4\\uFF2F\\u00D2\\u00D3\\u00D4\\u1ED2\\u1ED0\\u1ED6\\u1ED4\\u00D5\\u1E4C\\u022C\\u1E4E\\u014C\\u1E50\\u1E52\\u014E\\u022E\\u0230\\u00D6\\u022A\\u1ECE\\u0150\\u01D1\\u020C\\u020E\\u01A0\\u1EDC\\u1EDA\\u1EE0\\u1EDE\\u1EE2\\u1ECC\\u1ED8\\u01EA\\u01EC\\u00D8\\u01FE\\u0186\\u019F\\uA74A\\uA74C]","OI":"[\\u01A2]","OO":"[\\uA74E]","OU":"[\\u0222]","P":"[\\u0050\\u24C5\\uFF30\\u1E54\\u1E56\\u01A4\\u2C63\\uA750\\uA752\\uA754]","Q":"[\\u0051\\u24C6\\uFF31\\uA756\\uA758\\u024A]","R":"[\\u0052\\u24C7\\uFF32\\u0154\\u1E58\\u0158\\u0210\\u0212\\u1E5A\\u1E5C\\u0156\\u1E5E\\u024C\\u2C64\\uA75A\\uA7A6\\uA782]","S":"[\\u0053\\u24C8\\uFF33\\u1E9E\\u015A\\u1E64\\u015C\\u1E60\\u0160\\u1E66\\u1E62\\u1E68\\u0218\\u015E\\u2C7E\\uA7A8\\uA784]","T":"[\\u0054\\u24C9\\uFF34\\u1E6A\\u0164\\u1E6C\\u021A\\u0162\\u1E70\\u1E6E\\u0166\\u01AC\\u01AE\\u023E\\uA786]","TZ":"[\\uA728]","U":"[\\u0055\\u24CA\\uFF35\\u00D9\\u00DA\\u00DB\\u0168\\u1E78\\u016A\\u1E7A\\u016C\\u00DC\\u01DB\\u01D7\\u01D5\\u01D9\\u1EE6\\u016E\\u0170\\u01D3\\u0214\\u0216\\u01AF\\u1EEA\\u1EE8\\u1EEE\\u1EEC\\u1EF0\\u1EE4\\u1E72\\u0172\\u1E76\\u1E74\\u0244]","V":"[\\u0056\\u24CB\\uFF36\\u1E7C\\u1E7E\\u01B2\\uA75E\\u0245]","VY":"[\\uA760]","W":"[\\u0057\\u24CC\\uFF37\\u1E80\\u1E82\\u0174\\u1E86\\u1E84\\u1E88\\u2C72]","X":"[\\u0058\\u24CD\\uFF38\\u1E8A\\u1E8C]","Y":"[\\u0059\\u24CE\\uFF39\\u1EF2\\u00DD\\u0176\\u1EF8\\u0232\\u1E8E\\u0178\\u1EF6\\u1EF4\\u01B3\\u024E\\u1EFE]","Z":"[\\u005A\\u24CF\\uFF3A\\u0179\\u1E90\\u017B\\u017D\\u1E92\\u1E94\\u01B5\\u0224\\u2C7F\\u2C6B\\uA762]","a":"[\\u0061\\u24D0\\uFF41\\u1E9A\\u00E0\\u00E1\\u00E2\\u1EA7\\u1EA5\\u1EAB\\u1EA9\\u00E3\\u0101\\u0103\\u1EB1\\u1EAF\\u1EB5\\u1EB3\\u0227\\u01E1\\u00E4\\u01DF\\u1EA3\\u00E5\\u01FB\\u01CE\\u0201\\u0203\\u1EA1\\u1EAD\\u1EB7\\u1E01\\u0105\\u2C65\\u0250]","aa":"[\\uA733]","ae":"[\\u00E6\\u01FD\\u01E3]","ao":"[\\uA735]","au":"[\\uA737]","av":"[\\uA739\\uA73B]","ay":"[\\uA73D]","b":"[\\u0062\\u24D1\\uFF42\\u1E03\\u1E05\\u1E07\\u0180\\u0183\\u0253]","c":"[\\u0063\\u24D2\\uFF43\\u0107\\u0109\\u010B\\u010D\\u00E7\\u1E09\\u0188\\u023C\\uA73F\\u2184]","d":"[\\u0064\\u24D3\\uFF44\\u1E0B\\u010F\\u1E0D\\u1E11\\u1E13\\u1E0F\\u0111\\u018C\\u0256\\u0257\\uA77A]","dz":"[\\u01F3\\u01C6]","e":"[\\u0065\\u24D4\\uFF45\\u00E8\\u00E9\\u00EA\\u1EC1\\u1EBF\\u1EC5\\u1EC3\\u1EBD\\u0113\\u1E15\\u1E17\\u0115\\u0117\\u00EB\\u1EBB\\u011B\\u0205\\u0207\\u1EB9\\u1EC7\\u0229\\u1E1D\\u0119\\u1E19\\u1E1B\\u0247\\u025B\\u01DD]","f":"[\\u0066\\u24D5\\uFF46\\u1E1F\\u0192\\uA77C]","g":"[\\u0067\\u24D6\\uFF47\\u01F5\\u011D\\u1E21\\u011F\\u0121\\u01E7\\u0123\\u01E5\\u0260\\uA7A1\\u1D79\\uA77F]","h":"[\\u0068\\u24D7\\uFF48\\u0125\\u1E23\\u1E27\\u021F\\u1E25\\u1E29\\u1E2B\\u1E96\\u0127\\u2C68\\u2C76\\u0265]","hv":"[\\u0195]","i":"[\\u0069\\u24D8\\uFF49\\u00EC\\u00ED\\u00EE\\u0129\\u012B\\u012D\\u00EF\\u1E2F\\u1EC9\\u01D0\\u0209\\u020B\\u1ECB\\u012F\\u1E2D\\u0268\\u0131]","j":"[\\u006A\\u24D9\\uFF4A\\u0135\\u01F0\\u0249]","k":"[\\u006B\\u24DA\\uFF4B\\u1E31\\u01E9\\u1E33\\u0137\\u1E35\\u0199\\u2C6A\\uA741\\uA743\\uA745\\uA7A3]","l":"[\\u006C\\u24DB\\uFF4C\\u0140\\u013A\\u013E\\u1E37\\u1E39\\u013C\\u1E3D\\u1E3B\\u017F\\u0142\\u019A\\u026B\\u2C61\\uA749\\uA781\\uA747]","lj":"[\\u01C9]","m":"[\\u006D\\u24DC\\uFF4D\\u1E3F\\u1E41\\u1E43\\u0271\\u026F]","n":"[\\u006E\\u24DD\\uFF4E\\u01F9\\u0144\\u00F1\\u1E45\\u0148\\u1E47\\u0146\\u1E4B\\u1E49\\u019E\\u0272\\u0149\\uA791\\uA7A5]","nj":"[\\u01CC]","o":"[\\u006F\\u24DE\\uFF4F\\u00F2\\u00F3\\u00F4\\u1ED3\\u1ED1\\u1ED7\\u1ED5\\u00F5\\u1E4D\\u022D\\u1E4F\\u014D\\u1E51\\u1E53\\u014F\\u022F\\u0231\\u00F6\\u022B\\u1ECF\\u0151\\u01D2\\u020D\\u020F\\u01A1\\u1EDD\\u1EDB\\u1EE1\\u1EDF\\u1EE3\\u1ECD\\u1ED9\\u01EB\\u01ED\\u00F8\\u01FF\\u0254\\uA74B\\uA74D\\u0275]","oi":"[\\u01A3]","ou":"[\\u0223]","oo":"[\\uA74F]","p":"[\\u0070\\u24DF\\uFF50\\u1E55\\u1E57\\u01A5\\u1D7D\\uA751\\uA753\\uA755]","q":"[\\u0071\\u24E0\\uFF51\\u024B\\uA757\\uA759]","r":"[\\u0072\\u24E1\\uFF52\\u0155\\u1E59\\u0159\\u0211\\u0213\\u1E5B\\u1E5D\\u0157\\u1E5F\\u024D\\u027D\\uA75B\\uA7A7\\uA783]","s":"[\\u0073\\u24E2\\uFF53\\u015B\\u1E65\\u015D\\u1E61\\u0161\\u1E67\\u1E63\\u1E69\\u0219\\u015F\\u023F\\uA7A9\\uA785\\u1E9B]","ss":"[\\u00DF]","t":"[\\u0074\\u24E3\\uFF54\\u1E6B\\u1E97\\u0165\\u1E6D\\u021B\\u0163\\u1E71\\u1E6F\\u0167\\u01AD\\u0288\\u2C66\\uA787]","tz":"[\\uA729]","u":"[\\u0075\\u24E4\\uFF55\\u00F9\\u00FA\\u00FB\\u0169\\u1E79\\u016B\\u1E7B\\u016D\\u00FC\\u01DC\\u01D8\\u01D6\\u01DA\\u1EE7\\u016F\\u0171\\u01D4\\u0215\\u0217\\u01B0\\u1EEB\\u1EE9\\u1EEF\\u1EED\\u1EF1\\u1EE5\\u1E73\\u0173\\u1E77\\u1E75\\u0289]","v":"[\\u0076\\u24E5\\uFF56\\u1E7D\\u1E7F\\u028B\\uA75F\\u028C]","vy":"[\\uA761]","w":"[\\u0077\\u24E6\\uFF57\\u1E81\\u1E83\\u0175\\u1E87\\u1E85\\u1E98\\u1E89\\u2C73]","x":"[\\u0078\\u24E7\\uFF58\\u1E8B\\u1E8D]","y":"[\\u0079\\u24E8\\uFF59\\u1EF3\\u00FD\\u0177\\u1EF9\\u0233\\u1E8F\\u00FF\\u1EF7\\u1E99\\u1EF5\\u01B4\\u024F\\u1EFF]","z":"[\\u007A\\u24E9\\uFF5A\\u017A\\u1E91\\u017C\\u017E\\u1E93\\u1E95\\u01B6\\u0225\\u0240\\u2C6C\\uA763]"},"researchesTests":["contentHasTOC","contentHasShortParagraphs","contentHasAssets","keywordInTitle","keywordInMetaDescription","keywordInPermalink","keywordIn10Percent","keywordInContent","keywordInSubheadings","keywordInImageAlt","keywordDensity","keywordNotUsed","lengthContent","lengthPermalink","linksHasInternal","linksHasExternals","linksNotAllExternals","titleStartWithKeyword","titleSentiment","titleHasPowerWords","titleHasNumber","hasContentAI"],"hasRedirection":true,"hasBreadcrumb":false},"homeUrl":"https:\/\/globalsolution.jp\/vi\/","objectID":9961,"objectType":"post","locale":"vi","localeFull":"vi_VN","overlayImages":{"play":{"name":"Play icon","url":"https:\/\/globalsolution.jp\/wp-content\/plugins\/seo-by-rank-math\/assets\/admin\/img\/icon-play.png","path":"\/home\/p4jfnzb67jqv\/public_html\/wp-content\/plugins\/seo-by-rank-math\/assets\/admin\/img\/icon-play.png","position":"middle_center"},"gif":{"name":"GIF icon","url":"https:\/\/globalsolution.jp\/wp-content\/plugins\/seo-by-rank-math\/assets\/admin\/img\/icon-gif.png","path":"\/home\/p4jfnzb67jqv\/public_html\/wp-content\/plugins\/seo-by-rank-math\/assets\/admin\/img\/icon-gif.png","position":"middle_center"}},"defautOgImage":"https:\/\/globalsolution.jp\/wp-content\/uploads\/2024\/07\/logo-global-web-scaled.webp","customPermalinks":true,"isUserRegistered":true,"autoSuggestKeywords":true,"connectSiteUrl":"https:\/\/rankmath.com\/auth?site=https%3A%2F%2Fglobalsolution.jp%2Fvi%2F&r=https%3A%2F%2Fglobalsolution.jp%2Fvi%2Fwp-json%2Fwp%2Fv2%2Fpages%2F9961%3Fnonce%3D52395a9406&pro=1","maxTags":100,"trendsIcon":"<svg viewBox=\"0 0 610 610\"><path d=\"M18.85,446,174.32,290.48l58.08,58.08L76.93,504a14.54,14.54,0,0,1-20.55,0L18.83,466.48a14.54,14.54,0,0,1,0-20.55Z\" style=\"fill:#4285f4\"\/><path d=\"M242.65,242.66,377.59,377.6l-47.75,47.75a14.54,14.54,0,0,1-20.55,0L174.37,290.43l47.75-47.75A14.52,14.52,0,0,1,242.65,242.66Z\" style=\"fill:#ea4335\"\/><polygon points=\"319.53 319.53 479.26 159.8 537.34 217.88 377.61 377.62 319.53 319.53\" style=\"fill:#fabb05\"\/><path d=\"M594.26,262.73V118.61h0a16.94,16.94,0,0,0-16.94-16.94H433.2a16.94,16.94,0,0,0-12,28.92L565.34,274.71h0a16.94,16.94,0,0,0,28.92-12Z\" style=\"fill:#34a853\"\/><rect width=\"610\" height=\"610\" style=\"fill:none\"\/><\/svg>","showScore":true,"siteFavIcon":"https:\/\/globalsolution.jp\/wp-content\/uploads\/2024\/04\/cropped-logo-32x32.png","canUser":{"general":false,"advanced":false,"snippet":false,"social":false,"analysis":false,"analytics":false,"content_ai":false},"showKeywordIntent":true,"isPro":true,"is_front_page":false,"trendsUpgradeLink":"https:\/\/rankmath.com\/pricing\/?utm_source=Plugin&utm_medium=CE%20General%20Tab%20Trends&utm_campaign=WP","trendsUpgradeLabel":"Upgrade","trendsPreviewImage":"https:\/\/globalsolution.jp\/wp-content\/plugins\/seo-by-rank-math\/assets\/admin\/img\/trends-preview.jpg","currentEditor":false,"homepageData":{"assessor":{"powerWords":[],"diacritics":true,"researchesTests":["contentHasTOC","contentHasShortParagraphs","contentHasAssets","keywordInTitle","keywordInMetaDescription","keywordInPermalink","keywordIn10Percent","keywordInContent","keywordInSubheadings","keywordInImageAlt","keywordDensity","keywordNotUsed","lengthContent","lengthPermalink","linksHasInternal","linksHasExternals","linksNotAllExternals","titleStartWithKeyword","titleSentiment","titleHasPowerWords","titleHasNumber","hasContentAI"],"hasBreadcrumb":false,"serpData":{"title":"%sitename% %page% %sep% %sitedesc%","description":"","titleTemplate":"%sitename% %page% %sep% %sitedesc%","descriptionTemplate":"","focusKeywords":"","breadcrumbTitle":"T\u1ed5ng quan","robots":{"index":true},"advancedRobots":[],"facebookTitle":"","facebookDescription":"","facebookImage":"","facebookImageID":""}}},"tocTitle":"Table of Contents","tocExcludeHeadings":[],"listStyle":"ul"},"_links":{"self":[{"href":"https:\/\/globalsolution.jp\/vi\/wp-json\/wp\/v2\/pages\/9961","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/globalsolution.jp\/vi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/globalsolution.jp\/vi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/globalsolution.jp\/vi\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/globalsolution.jp\/vi\/wp-json\/wp\/v2\/comments?post=9961"}],"version-history":[{"count":1,"href":"https:\/\/globalsolution.jp\/vi\/wp-json\/wp\/v2\/pages\/9961\/revisions"}],"predecessor-version":[{"id":9962,"href":"https:\/\/globalsolution.jp\/vi\/wp-json\/wp\/v2\/pages\/9961\/revisions\/9962"}],"wp:attachment":[{"href":"https:\/\/globalsolution.jp\/vi\/wp-json\/wp\/v2\/media?parent=9961"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}