Kh\u00f3a h\u1ecdc tokutei gino<\/title>\n\n<style>\n\/* =================================================\n TM Y COURSES \u2013 SCOPED CSS \n================================================= *\/\n.tmy-courses {\n font-family: 'Roboto', Arial, sans-serif;\n background: #f5f7fb;\n min-height: 100vh;\n margin: 0;\n}\n\n.tmy-courses *, .tmy-courses *::before, .tmy-courses *::after {\n box-sizing: border-box;\n}\n\n\/* ===== LAYOUT ===== *\/\n.tmy-courses .app {\n display: flex;\n flex-direction: column; \/* M\u1eb7c \u0111\u1ecbnh d\u1ecdc cho mobile *\/\n min-height: 100vh;\n}\n\n@media (min-width: 1024px) {\n .tmy-courses .app {\n flex-direction: row; \/* Ngang cho Desktop *\/\n }\n}\n\n\/* ===== SIDEBAR (Mobile Friendly) ===== *\/\n.tmy-courses .sidebar {\n width: 100%;\n background: #ffffff;\n border-bottom: 1px solid #e5e7eb;\n padding: 15px 20px;\n}\n\n@media (min-width: 1024px) {\n .tmy-courses .sidebar {\n width: 260px;\n border-right: 1px solid #e5e7eb;\n border-bottom: none;\n padding: 20px;\n position: sticky;\n top: 0;\n height: 100vh;\n }\n}\n\n.tmy-courses .sidebar h3 {\n margin-bottom: 15px;\n font-size: 16px;\n color: #111827;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n@media (min-width: 1024px) {\n .tmy-courses .sidebar h3 {\n margin-bottom: 30px;\n font-size: 18px;\n }\n}\n\n.tmy-courses .menu-group {\n display: flex;\n gap: 10px;\n}\n\n@media (min-width: 1024px) {\n .tmy-courses .menu-group {\n flex-direction: column;\n }\n}\n\n\/* Menu Item *\/\n.tmy-courses .menu-item {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 12px;\n border-radius: 8px;\n cursor: pointer;\n color: #374151;\n font-size: 14px;\n}\n\n.tmy-courses .menu-item.active {\n background: #eef2ff;\n color: #2563eb;\n font-weight: 600;\n}\n\n\/* ===== MAIN CONTENT ===== *\/\n.tmy-courses .main {\n flex: 1;\n padding: 20px;\n}\n\n@media (min-width: 768px) {\n .tmy-courses .main {\n padding: 30px;\n }\n}\n\n.tmy-courses .main h1 {\n font-size: 20px;\n margin-bottom: 20px;\n color: #111827;\n}\n\n\/* ===== COURSE GRID (Y\u00caU C\u1ea6U CH\u00cdNH) ===== *\/\n.tmy-courses .course-grid {\n display: grid;\n \/* MOBILE: 1 C\u1ed8T (M\u1eb7c \u0111\u1ecbnh) *\/\n grid-template-columns: 1fr; \n gap: 20px;\n}\n\n\/* TABLET: 2 C\u1ed8T (T\u1eeb 640px tr\u1edf l\u00ean) *\/\n@media (min-width: 640px) {\n .tmy-courses .course-grid {\n grid-template-columns: repeat(2, 1fr);\n }\n}\n\n\/* DESKTOP NH\u1ece: 3 C\u1ed8T (T\u1eeb 1024px tr\u1edf l\u00ean) *\/\n@media (min-width: 1024px) {\n .tmy-courses .course-grid {\n grid-template-columns: repeat(3, 1fr);\n }\n}\n\n\/* DESKTOP L\u1edaN: 4 C\u1ed8T (T\u1eeb 1440px tr\u1edf l\u00ean) *\/\n@media (min-width: 1440px) {\n .tmy-courses .course-grid {\n grid-template-columns: repeat(4, 1fr);\n }\n}\n\n\/* ===== COURSE CARD ===== *\/\n.tmy-courses .course-card {\n background: #ffffff;\n border-radius: 14px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.06);\n padding: 14px;\n display: flex;\n flex-direction: column;\n}\n\n.tmy-courses .course-image {\n width: 100%;\n aspect-ratio: 16 \/ 9; \/* Gi\u1eef khung h\u00ecnh lu\u00f4n chu\u1ea9n *\/\n border-radius: 10px;\n background: #f3f4f6;\n overflow: hidden;\n margin-bottom: 12px;\n cursor: pointer;\n}\n\n.tmy-courses .course-image img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.3s;\n}\n\n.tmy-courses .course-card:hover .course-image img {\n transform: scale(1.05);\n}\n\n.tmy-courses .course-title {\n font-size: 16px;\n font-weight: 600;\n margin-bottom: 6px;\n color: #1f2937;\n}\n\n.tmy-courses .course-meta {\n font-size: 13px;\n color: #6b7280;\n margin-top: auto;\n}\n<\/style>\n<\/head>\n\n<body>\n<div class=\"tmy-courses\">\n <div class=\"app\">\n\n <aside class=\"sidebar\">\n <h3 id=\"userNameLabel\">\u0110ang t\u1ea3i…<\/h3>\n <div class=\"menu-group\">\n <div class=\"menu-item active\">\ud83d\udcda Kh\u00f3a h\u1ecdc<\/div>\n <div class=\"menu-item\" id=\"logoutBtn\" onclick=\"logout()\">\ud83d\udeaa Tho\u00e1t<\/div>\n <\/div>\n <\/aside>\n\n <main class=\"main\">\n <h1>Kh\u00f3a h\u1ecdc c\u1ee7a t\u00f4i<\/h1>\n <div class=\"course-grid\" id=\"courseGrid\"><\/div>\n <\/main>\n\n <\/div>\n<\/div>\n<script>\nconst ALL_COURSES = [\n \"Cbtp gino1\", \"Nh\u00e0 h\u00e0ng gino1\", \"Cbtp gino2\", \"Nh\u00e0 h\u00e0ng gino2\", \"N\u00f4ng nghi\u1ec7p gino2\"\n];\n\nconst COURSE_LINKS = {\n \"Cbtp gino1\": \"https:\/\/tokuteigino.vn\/vi\/tokuteigino-1\/thuc-pham-gino-1\/\",\n \"Nh\u00e0 h\u00e0ng gino1\": \"https:\/\/tokuteigino.vn\/vi\/tokuteigino-1\/nha-hang-gino-1\/\",\n \"Cbtp gino2\": \"https:\/\/tokuteigino.vn\/vi\/tokuteigino-2\/thuc-pham-gino-2\/\",\n \"Nh\u00e0 h\u00e0ng gino2\": \"https:\/\/tokuteigino.vn\/vi\/tokuteigino-2\/nha-hang-gino-2\/\",\n \"N\u00f4ng nghi\u1ec7p gino2\": \"https:\/\/tokuteigino.vn\/vi\/tokuteigino-2\/nong-nghiep-gino-2\/\"\n};\n\nconst COURSE_IMAGES = {\n \"Cbtp gino1\": \"https:\/\/tokuteigino.vn\/wp-content\/uploads\/2026\/02\/4.png\",\n \"Nh\u00e0 h\u00e0ng gino1\": \"https:\/\/tokuteigino.vn\/wp-content\/uploads\/2026\/02\/2.png\",\n \"Cbtp gino2\": \"https:\/\/tokuteigino.vn\/wp-content\/uploads\/2026\/02\/4.png\",\n \"Nh\u00e0 h\u00e0ng gino2\": \"https:\/\/tokuteigino.vn\/wp-content\/uploads\/2026\/02\/2.png\",\n \"N\u00f4ng nghi\u1ec7p gino2\": \"https:\/\/tokuteigino.vn\/wp-content\/uploads\/2026\/02\/3.png\"\n};\n\n\/* ===== L\u00c0M M\u1edaI TR\u1ea0NG TH\u00c1I T\u1eea SERVER =====\n localStorage ch\u1ec9 l\u00e0 \u1ea3nh ch\u1ee5p t\u1ea1i th\u1eddi \u0111i\u1ec3m \u0111\u0103ng nh\u1eadp. N\u1ebfu h\u1ecdc vi\u00ean \u0111\u0103ng nh\u1eadp l\u00fac\n \u0111ang h\u1ecdc r\u1ed3i v\u00e0i ng\u00e0y\/tu\u1ea7n sau chuy\u1ec3n sang \"\u0110\u00e3 \u0111\u1ed7\", localStorage v\u1eabn c\u1ee9 b\u00e1o \u0111ang h\u1ecdc\n m\u00e3i v\u00ec kh\u00f4ng c\u00f3 g\u00ec khi\u1ebfn n\u00f3 t\u1ef1 c\u1eadp nh\u1eadt. H\u00e0m n\u00e0y g\u1ecdi l\u1ea1i server (kh\u00f4ng c\u1ea7n m\u1eadt kh\u1ea9u,\n ch\u1ec9 c\u1ea7n email) \u0111\u1ec3 l\u1ea5y \u0111\u00fang tr\u1ea1ng th\u00e1i hi\u1ec7n t\u1ea1i, r\u1ed3i ghi \u0111\u00e8 l\u00ean b\u1ea3n cache c\u0169. *\/\nconst STATUS_API = \"https:\/\/script.google.com\/macros\/s\/AKfycbyUlrzqJTp-PTtc53wVc9XJZykuC0i99Vxprv4CzgO6iMZZyYUb822F9ClPTbgqixWj\/exec\";\n\nasync function refreshStudentStatus(userId) {\n try {\n const url = `${STATUS_API}?action=checkStatus&tmy_userId=${encodeURIComponent(userId)}`;\n const res = await fetch(url);\n const result = await res.json();\n if (!result.exists) return null; \/\/ l\u1ed7i m\u1ea1ng\/kh\u00f4ng t\u00ecm th\u1ea5y: gi\u1eef nguy\u00ean cache c\u0169, kh\u00f4ng xo\u00e1 oan\n\n localStorage.setItem(\"tmy_userName\", result.tmy_userName || \"\");\n localStorage.setItem(\"tmy_classIds\", JSON.stringify(result.tmy_classIds || []));\n localStorage.setItem(\"tmy_courseStartDates\", JSON.stringify(result.tmy_courseStartDates || {}));\n localStorage.setItem(\"tmy_studentStatus\", result.tmy_studentStatus || \"\");\n localStorage.setItem(\"tmy_learningMode\", result.tmy_learningMode || \"\");\n return result;\n } catch (e) {\n return null; \/\/ l\u1ed7i k\u1ebft n\u1ed1i: kh\u00f4ng ch\u1eb7n h\u1ecdc vi\u00ean ch\u1ec9 v\u00ec m\u1ea1ng ch\u1eadp ch\u1eddn\n }\n}\n\nfunction parseDDMMYYYY(str) {\n if (!str) return null;\n const parts = str.trim().split(\"\/\");\n if(parts.length !== 3) return null;\n const [d, m, y] = parts.map(Number);\n return new Date(y, m - 1, d);\n}\n\nfunction isExpired(startDateStr) {\n const startDate = parseDDMMYYYY(startDateStr);\n if (!startDate || isNaN(startDate)) return false;\n const endDate = new Date(startDate);\n endDate.setDate(endDate.getDate() + 180);\n return new Date() > endDate;\n}\n\nasync function initPage() {\n const userId = localStorage.getItem(\"tmy_userId\");\n let userName = localStorage.getItem(\"tmy_userName\");\n let classIds = JSON.parse(localStorage.getItem(\"tmy_classIds\") || \"[]\");\n let rawStartDates = JSON.parse(localStorage.getItem(\"tmy_courseStartDates\") || \"{}\");\n let studentStatus = localStorage.getItem(\"tmy_studentStatus\") || \"\";\n const logoutBtn = document.getElementById(\"logoutBtn\");\n\n \/\/ KI\u1ec2M TRA \u0110\u0102NG NH\u1eacP\n if (!userName) {\n document.getElementById(\"userNameLabel\").textContent = \"B\u1ea1n ch\u01b0a \u0111\u0103ng nh\u1eadp\";\n if (logoutBtn) logoutBtn.style.display = \"none\"; \/\/ \u1ea8N N\u00daT THO\u00c1T\n renderLoginButton(\"Vui l\u00f2ng \u0111\u0103ng nh\u1eadp \u0111\u1ec3 xem c\u00e1c kh\u00f3a h\u1ecdc c\u1ee7a b\u1ea1n.\");\n return;\n }\n\n \/\/ Tr\u01b0\u1edbc khi quy\u1ebft \u0111\u1ecbnh cho v\u00e0o hay ch\u1eb7n, l\u00e0m m\u1edbi tr\u1ea1ng th\u00e1i t\u1eeb server (tr\u1eeb t\u00e0i kho\u1ea3n\n \/\/ admin, v\u1ed1n kh\u00f4ng c\u00f3 d\u00f2ng tr\u1ea1ng th\u00e1i trong sheet h\u1ecdc vi\u00ean). N\u1ebfu server kh\u00f4ng ph\u1ea3n h\u1ed3i\n \/\/ \u0111\u01b0\u1ee3c (m\u1ea5t m\u1ea1ng...) th\u00ec t\u1ea1m d\u00f9ng b\u1ea3n cache c\u0169, kh\u00f4ng ch\u1eb7n oan h\u1ecdc vi\u00ean v\u00ec l\u1ed7i k\u1ebft n\u1ed1i.\n if (userId && userName.trim().toLowerCase() !== \"admin\") {\n const fresh = await refreshStudentStatus(userId);\n if (fresh) {\n userName = fresh.tmy_userName || userName;\n classIds = fresh.tmy_classIds || classIds;\n rawStartDates = fresh.tmy_courseStartDates || rawStartDates;\n studentStatus = fresh.tmy_studentStatus || studentStatus;\n }\n }\n\n const startDates = {};\n Object.keys(rawStartDates).forEach(k => { startDates[k.trim()] = rawStartDates[k]; });\n\n \/\/ H\u1ecdc vi\u00ean \u0111\u00e3 \u0111\u1ed7 \u2014 d\u00f9 l\u00e0 l\u01b0u t\u1eeb l\u00fac \u0111\u0103ng nh\u1eadp hay v\u1eeba ph\u00e1t hi\u1ec7n qua b\u01b0\u1edbc l\u00e0m m\u1edbi \u1edf tr\u00ean \u2014\n \/\/ \u0111\u1ec1u b\u1ecb ch\u1eb7n t\u1ea1i \u0111\u00e2y, \u0111\u1ed3ng th\u1eddi d\u1ecdn s\u1ea1ch phi\u00ean \u0111\u1ec3 c\u00e1c l\u1ea7n load trang sau kh\u00f4ng c\u00f2n\n \/\/ coi l\u00e0 \u0111\u00e3 \u0111\u0103ng nh\u1eadp.\n if (studentStatus === \"2. \u0110\u00e3 \u0111\u1ed7\") {\n [\"tmy_userId\", \"tmy_userName\", \"tmy_classIds\", \"tmy_courseStartDates\",\n \"tmy_classId\", \"tmy_studentStatus\", \"tmy_learningMode\"].forEach(k => localStorage.removeItem(k));\n document.getElementById(\"userNameLabel\").textContent = \"B\u1ea1n ch\u01b0a \u0111\u0103ng nh\u1eadp\";\n if (logoutBtn) logoutBtn.style.display = \"none\";\n renderCourseEndedPrompt();\n return;\n }\n\n \/\/ N\u1ebeU C\u00d3 \u0110\u0102NG NH\u1eacP\n if (logoutBtn) logoutBtn.style.display = \"flex\"; \/\/ HI\u1ec6N N\u00daT THO\u00c1T\n document.getElementById(\"userNameLabel\").textContent = \"Ch\u00e0o, \" + userName;\n const isAdmin = userName.trim().toLowerCase() === \"admin\";\n\n const coursesToShow = isAdmin\n ? [...ALL_COURSES]\n : classIds.map(c => c.trim()).filter(c =>\n ALL_COURSES.some(course => course.toLowerCase() === c.toLowerCase())\n );\n\n renderCourses(coursesToShow, startDates, isAdmin);\n}\n\nfunction renderCourseEndedPrompt() {\n const grid = document.getElementById(\"courseGrid\");\n grid.style.display = \"block\";\n grid.innerHTML = `\n <div style=\"text-align: center; padding: 40px; background: white; border-radius: 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.06);\">\n <p style=\"margin-bottom: 20px; color: #6b7280;\">Ch\u00fac m\u1eebng b\u1ea1n \u0111\u00e3 ho\u00e0n th\u00e0nh kh\u00f3a h\u1ecdc! Kh\u00f3a h\u1ecdc \u0111\u00e3 k\u1ebft th\u00fac n\u00ean b\u1ea1n kh\u00f4ng th\u1ec3 ti\u1ebfp t\u1ee5c truy c\u1eadp b\u00e0i h\u1ecdc n\u1eefa.<\/p>\n <a href=\"https:\/\/tokuteigino.vn\/vi\/\"\n style=\"display: inline-block; padding: 12px 24px; background: #10291a; color: white; text-decoration: none; border-radius: 8px; font-weight: 600;\">\n V\u1ec1 trang ch\u1ee7\n <\/a>\n <\/div>\n `;\n}\n\nfunction renderLoginButton(message) {\n const grid = document.getElementById(\"courseGrid\");\n grid.style.display = \"block\"; \n grid.innerHTML = `\n <div style=\"text-align: center; padding: 40px; background: white; border-radius: 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.06);\">\n <p style=\"margin-bottom: 20px; color: #6b7280;\">${message}<\/p>\n <a href=\"https:\/\/tokuteigino.vn\/vi\/dang-nhap\/\" \n style=\"display: inline-block; padding: 12px 24px; background: #10291a; color: white; text-decoration: none; border-radius: 8px; font-weight: 600;\">\n \u0110\u0103ng nh\u1eadp ngay\n <\/a>\n <\/div>\n `;\n}\n\n\/\/ ... (Ph\u1ea7n ALL_COURSES, LINKS, IMAGES gi\u1eef nguy\u00ean)\n\nfunction renderCourses(courseNames, startDates, isAdmin) {\n const grid = document.getElementById(\"courseGrid\");\n grid.innerHTML = \"\";\n grid.style.display = \"grid\"; \n\n if (courseNames.length === 0) {\n grid.innerHTML = \"<p>B\u1ea1n ch\u01b0a tham gia kh\u00f3a h\u1ecdc n\u00e0o.<\/p>\";\n return;\n }\n\n \/\/ Lo\u1ea1i b\u1ecf tr\u00f9ng l\u1eb7p\n const uniqueCourses = [...new Set(courseNames)];\n\n uniqueCourses.forEach(name => {\n \/\/ T\u00ecm t\u00ean chu\u1ea9n trong ALL_COURSES\n const exactName = ALL_COURSES.find(c => c.toLowerCase().trim() === name.toLowerCase().trim());\n if (!exactName) return;\n\n \/\/ L\u1ea5y ng\u00e0y b\u1eaft \u0111\u1ea7u c\u1ee7a ri\u00eang kh\u00f3a n\u00e0y\n const startDateStr = startDates[name] || startDates[exactName];\n \n \/\/ Ki\u1ec3m tra h\u1ebft h\u1ea1n cho ri\u00eang kh\u00f3a n\u00e0y\n const expired = !isAdmin && startDateStr && isExpired(startDateStr);\n\n let metaHtml = \"\";\n if (isAdmin) {\n metaHtml = `<div class=\"course-meta\" style=\"color:var(--primary-color); font-weight:bold;\">Quy\u1ec1n Qu\u1ea3n tr\u1ecb vi\u00ean<\/div>`;\n } else if (expired) {\n metaHtml = `<div class=\"course-meta\" style=\"color:#ef4444; font-weight:bold;\">\u26a0\ufe0f Kh\u00f3a h\u1ecdc \u0111\u00e3 qu\u00e1 h\u1ea1n<\/div>`;\n }\n\n const div = document.createElement(\"div\");\n div.className = \"course-card\";\n \/\/ N\u1ebfu expired = true, kh\u00f4ng g\u00e1n h\u00e0m onclick v\u00e0 l\u00e0m m\u1edd \u1ea3nh\n div.innerHTML = `\n <div class=\"course-image\" \n ${expired ? \"\" : `onclick=\"goCourse('${exactName}')\"`} \n style=\"${expired ? 'cursor: not-allowed; opacity: 0.6; filter: grayscale(1);' : 'cursor: pointer;'}\">\n <img decoding=\"async\" src=\"${COURSE_IMAGES[exactName]}\" alt=\"${exactName}\">\n <\/div>\n <div class=\"course-title\" style=\"${expired ? 'color: #9ca3af;' : ''}\">${exactName}<\/div>\n ${metaHtml}\n `;\n grid.appendChild(div);\n });\n}\n\nfunction goCourse(courseName) {\n const link = COURSE_LINKS[courseName];\n if (!link || link === \"#\") {\n alert(\"Kh\u00f3a h\u1ecdc \u0111ang \u0111\u01b0\u1ee3c c\u1eadp nh\u1eadt n\u1ed9i dung.\");\n return;\n }\n window.location.href = link;\n}\n\nfunction logout() {\n if (!confirm(\"B\u1ea1n c\u00f3 ch\u1eafc mu\u1ed1n tho\u00e1t?\")) return;\n const keysToRemove = [\"tmy_userId\", \"tmy_userName\", \"tmy_classIds\", \"tmy_courseStartDates\", \"tmy_classId\", \"tmy_studentStatus\", \"tmy_learningMode\"];\n keysToRemove.forEach(k => localStorage.removeItem(k));\n \n \/\/ CHUY\u1ec2N H\u01af\u1edaNG V\u1ec0 TRANG CH\u1ee6 SAU KHI THO\u00c1T\n window.location.href = \"https:\/\/tokuteigino.vn\/\"; \n}\n\ninitPage();\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Kh\u00f3a h\u1ecdc tokutei gino \u0110ang t\u1ea3i… \ud83d\udcda Kh\u00f3a h\u1ecdc \ud83d\udeaa Tho\u00e1t Kh\u00f3a h\u1ecdc c\u1ee7a t\u00f4i<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"footnotes":""},"class_list":["post-7788","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tokuteigino.vn\/vi\/wp-json\/wp\/v2\/pages\/7788","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tokuteigino.vn\/vi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tokuteigino.vn\/vi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tokuteigino.vn\/vi\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/tokuteigino.vn\/vi\/wp-json\/wp\/v2\/comments?post=7788"}],"version-history":[{"count":12,"href":"https:\/\/tokuteigino.vn\/vi\/wp-json\/wp\/v2\/pages\/7788\/revisions"}],"predecessor-version":[{"id":8517,"href":"https:\/\/tokuteigino.vn\/vi\/wp-json\/wp\/v2\/pages\/7788\/revisions\/8517"}],"wp:attachment":[{"href":"https:\/\/tokuteigino.vn\/vi\/wp-json\/wp\/v2\/media?parent=7788"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":7788,"date":"2026-01-05T10:42:53","date_gmt":"2026-01-05T03:42:53","guid":{"rendered":"https:\/\/tokuteigino.vn\/?page_id=7788"},"modified":"2026-09-24T10:57:57","modified_gmt":"2026-09-24T03:57:57","slug":"khoa-hoc-cua-toi","status":"publish","type":"page","link":"https:\/\/tokuteigino.vn\/vi\/khoa-hoc-cua-toi\/","title":{"rendered":"Kh\u00f3a h\u1ecdc c\u1ee7a t\u00f4i"},"content":{"rendered":"\n\n\n\n\n\nKh\u00f3a h\u1ecdc tokutei gino<\/title>\n\n<style>\n\/* =================================================\n TM Y COURSES \u2013 SCOPED CSS \n================================================= *\/\n.tmy-courses {\n font-family: 'Roboto', Arial, sans-serif;\n background: #f5f7fb;\n min-height: 100vh;\n margin: 0;\n}\n\n.tmy-courses *, .tmy-courses *::before, .tmy-courses *::after {\n box-sizing: border-box;\n}\n\n\/* ===== LAYOUT ===== *\/\n.tmy-courses .app {\n display: flex;\n flex-direction: column; \/* M\u1eb7c \u0111\u1ecbnh d\u1ecdc cho mobile *\/\n min-height: 100vh;\n}\n\n@media (min-width: 1024px) {\n .tmy-courses .app {\n flex-direction: row; \/* Ngang cho Desktop *\/\n }\n}\n\n\/* ===== SIDEBAR (Mobile Friendly) ===== *\/\n.tmy-courses .sidebar {\n width: 100%;\n background: #ffffff;\n border-bottom: 1px solid #e5e7eb;\n padding: 15px 20px;\n}\n\n@media (min-width: 1024px) {\n .tmy-courses .sidebar {\n width: 260px;\n border-right: 1px solid #e5e7eb;\n border-bottom: none;\n padding: 20px;\n position: sticky;\n top: 0;\n height: 100vh;\n }\n}\n\n.tmy-courses .sidebar h3 {\n margin-bottom: 15px;\n font-size: 16px;\n color: #111827;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n@media (min-width: 1024px) {\n .tmy-courses .sidebar h3 {\n margin-bottom: 30px;\n font-size: 18px;\n }\n}\n\n.tmy-courses .menu-group {\n display: flex;\n gap: 10px;\n}\n\n@media (min-width: 1024px) {\n .tmy-courses .menu-group {\n flex-direction: column;\n }\n}\n\n\/* Menu Item *\/\n.tmy-courses .menu-item {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 12px;\n border-radius: 8px;\n cursor: pointer;\n color: #374151;\n font-size: 14px;\n}\n\n.tmy-courses .menu-item.active {\n background: #eef2ff;\n color: #2563eb;\n font-weight: 600;\n}\n\n\/* ===== MAIN CONTENT ===== *\/\n.tmy-courses .main {\n flex: 1;\n padding: 20px;\n}\n\n@media (min-width: 768px) {\n .tmy-courses .main {\n padding: 30px;\n }\n}\n\n.tmy-courses .main h1 {\n font-size: 20px;\n margin-bottom: 20px;\n color: #111827;\n}\n\n\/* ===== COURSE GRID (Y\u00caU C\u1ea6U CH\u00cdNH) ===== *\/\n.tmy-courses .course-grid {\n display: grid;\n \/* MOBILE: 1 C\u1ed8T (M\u1eb7c \u0111\u1ecbnh) *\/\n grid-template-columns: 1fr; \n gap: 20px;\n}\n\n\/* TABLET: 2 C\u1ed8T (T\u1eeb 640px tr\u1edf l\u00ean) *\/\n@media (min-width: 640px) {\n .tmy-courses .course-grid {\n grid-template-columns: repeat(2, 1fr);\n }\n}\n\n\/* DESKTOP NH\u1ece: 3 C\u1ed8T (T\u1eeb 1024px tr\u1edf l\u00ean) *\/\n@media (min-width: 1024px) {\n .tmy-courses .course-grid {\n grid-template-columns: repeat(3, 1fr);\n }\n}\n\n\/* DESKTOP L\u1edaN: 4 C\u1ed8T (T\u1eeb 1440px tr\u1edf l\u00ean) *\/\n@media (min-width: 1440px) {\n .tmy-courses .course-grid {\n grid-template-columns: repeat(4, 1fr);\n }\n}\n\n\/* ===== COURSE CARD ===== *\/\n.tmy-courses .course-card {\n background: #ffffff;\n border-radius: 14px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.06);\n padding: 14px;\n display: flex;\n flex-direction: column;\n}\n\n.tmy-courses .course-image {\n width: 100%;\n aspect-ratio: 16 \/ 9; \/* Gi\u1eef khung h\u00ecnh lu\u00f4n chu\u1ea9n *\/\n border-radius: 10px;\n background: #f3f4f6;\n overflow: hidden;\n margin-bottom: 12px;\n cursor: pointer;\n}\n\n.tmy-courses .course-image img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.3s;\n}\n\n.tmy-courses .course-card:hover .course-image img {\n transform: scale(1.05);\n}\n\n.tmy-courses .course-title {\n font-size: 16px;\n font-weight: 600;\n margin-bottom: 6px;\n color: #1f2937;\n}\n\n.tmy-courses .course-meta {\n font-size: 13px;\n color: #6b7280;\n margin-top: auto;\n}\n<\/style>\n<\/head>\n\n<body>\n<div class=\"tmy-courses\">\n <div class=\"app\">\n\n <aside class=\"sidebar\">\n <h3 id=\"userNameLabel\">\u0110ang t\u1ea3i…<\/h3>\n <div class=\"menu-group\">\n <div class=\"menu-item active\">\ud83d\udcda Kh\u00f3a h\u1ecdc<\/div>\n <div class=\"menu-item\" id=\"logoutBtn\" onclick=\"logout()\">\ud83d\udeaa Tho\u00e1t<\/div>\n <\/div>\n <\/aside>\n\n <main class=\"main\">\n <h1>Kh\u00f3a h\u1ecdc c\u1ee7a t\u00f4i<\/h1>\n <div class=\"course-grid\" id=\"courseGrid\"><\/div>\n <\/main>\n\n <\/div>\n<\/div>\n<script>\nconst ALL_COURSES = [\n \"Cbtp gino1\", \"Nh\u00e0 h\u00e0ng gino1\", \"Cbtp gino2\", \"Nh\u00e0 h\u00e0ng gino2\", \"N\u00f4ng nghi\u1ec7p gino2\"\n];\n\nconst COURSE_LINKS = {\n \"Cbtp gino1\": \"https:\/\/tokuteigino.vn\/vi\/tokuteigino-1\/thuc-pham-gino-1\/\",\n \"Nh\u00e0 h\u00e0ng gino1\": \"https:\/\/tokuteigino.vn\/vi\/tokuteigino-1\/nha-hang-gino-1\/\",\n \"Cbtp gino2\": \"https:\/\/tokuteigino.vn\/vi\/tokuteigino-2\/thuc-pham-gino-2\/\",\n \"Nh\u00e0 h\u00e0ng gino2\": \"https:\/\/tokuteigino.vn\/vi\/tokuteigino-2\/nha-hang-gino-2\/\",\n \"N\u00f4ng nghi\u1ec7p gino2\": \"https:\/\/tokuteigino.vn\/vi\/tokuteigino-2\/nong-nghiep-gino-2\/\"\n};\n\nconst COURSE_IMAGES = {\n \"Cbtp gino1\": \"https:\/\/tokuteigino.vn\/wp-content\/uploads\/2026\/02\/4.png\",\n \"Nh\u00e0 h\u00e0ng gino1\": \"https:\/\/tokuteigino.vn\/wp-content\/uploads\/2026\/02\/2.png\",\n \"Cbtp gino2\": \"https:\/\/tokuteigino.vn\/wp-content\/uploads\/2026\/02\/4.png\",\n \"Nh\u00e0 h\u00e0ng gino2\": \"https:\/\/tokuteigino.vn\/wp-content\/uploads\/2026\/02\/2.png\",\n \"N\u00f4ng nghi\u1ec7p gino2\": \"https:\/\/tokuteigino.vn\/wp-content\/uploads\/2026\/02\/3.png\"\n};\n\n\/* ===== L\u00c0M M\u1edaI TR\u1ea0NG TH\u00c1I T\u1eea SERVER =====\n localStorage ch\u1ec9 l\u00e0 \u1ea3nh ch\u1ee5p t\u1ea1i th\u1eddi \u0111i\u1ec3m \u0111\u0103ng nh\u1eadp. N\u1ebfu h\u1ecdc vi\u00ean \u0111\u0103ng nh\u1eadp l\u00fac\n \u0111ang h\u1ecdc r\u1ed3i v\u00e0i ng\u00e0y\/tu\u1ea7n sau chuy\u1ec3n sang \"\u0110\u00e3 \u0111\u1ed7\", localStorage v\u1eabn c\u1ee9 b\u00e1o \u0111ang h\u1ecdc\n m\u00e3i v\u00ec kh\u00f4ng c\u00f3 g\u00ec khi\u1ebfn n\u00f3 t\u1ef1 c\u1eadp nh\u1eadt. H\u00e0m n\u00e0y g\u1ecdi l\u1ea1i server (kh\u00f4ng c\u1ea7n m\u1eadt kh\u1ea9u,\n ch\u1ec9 c\u1ea7n email) \u0111\u1ec3 l\u1ea5y \u0111\u00fang tr\u1ea1ng th\u00e1i hi\u1ec7n t\u1ea1i, r\u1ed3i ghi \u0111\u00e8 l\u00ean b\u1ea3n cache c\u0169. *\/\nconst STATUS_API = \"https:\/\/script.google.com\/macros\/s\/AKfycbyUlrzqJTp-PTtc53wVc9XJZykuC0i99Vxprv4CzgO6iMZZyYUb822F9ClPTbgqixWj\/exec\";\n\nasync function refreshStudentStatus(userId) {\n try {\n const url = `${STATUS_API}?action=checkStatus&tmy_userId=${encodeURIComponent(userId)}`;\n const res = await fetch(url);\n const result = await res.json();\n if (!result.exists) return null; \/\/ l\u1ed7i m\u1ea1ng\/kh\u00f4ng t\u00ecm th\u1ea5y: gi\u1eef nguy\u00ean cache c\u0169, kh\u00f4ng xo\u00e1 oan\n\n localStorage.setItem(\"tmy_userName\", result.tmy_userName || \"\");\n localStorage.setItem(\"tmy_classIds\", JSON.stringify(result.tmy_classIds || []));\n localStorage.setItem(\"tmy_courseStartDates\", JSON.stringify(result.tmy_courseStartDates || {}));\n localStorage.setItem(\"tmy_studentStatus\", result.tmy_studentStatus || \"\");\n localStorage.setItem(\"tmy_learningMode\", result.tmy_learningMode || \"\");\n return result;\n } catch (e) {\n return null; \/\/ l\u1ed7i k\u1ebft n\u1ed1i: kh\u00f4ng ch\u1eb7n h\u1ecdc vi\u00ean ch\u1ec9 v\u00ec m\u1ea1ng ch\u1eadp ch\u1eddn\n }\n}\n\nfunction parseDDMMYYYY(str) {\n if (!str) return null;\n const parts = str.trim().split(\"\/\");\n if(parts.length !== 3) return null;\n const [d, m, y] = parts.map(Number);\n return new Date(y, m - 1, d);\n}\n\nfunction isExpired(startDateStr) {\n const startDate = parseDDMMYYYY(startDateStr);\n if (!startDate || isNaN(startDate)) return false;\n const endDate = new Date(startDate);\n endDate.setDate(endDate.getDate() + 180);\n return new Date() > endDate;\n}\n\nasync function initPage() {\n const userId = localStorage.getItem(\"tmy_userId\");\n let userName = localStorage.getItem(\"tmy_userName\");\n let classIds = JSON.parse(localStorage.getItem(\"tmy_classIds\") || \"[]\");\n let rawStartDates = JSON.parse(localStorage.getItem(\"tmy_courseStartDates\") || \"{}\");\n let studentStatus = localStorage.getItem(\"tmy_studentStatus\") || \"\";\n const logoutBtn = document.getElementById(\"logoutBtn\");\n\n \/\/ KI\u1ec2M TRA \u0110\u0102NG NH\u1eacP\n if (!userName) {\n document.getElementById(\"userNameLabel\").textContent = \"B\u1ea1n ch\u01b0a \u0111\u0103ng nh\u1eadp\";\n if (logoutBtn) logoutBtn.style.display = \"none\"; \/\/ \u1ea8N N\u00daT THO\u00c1T\n renderLoginButton(\"Vui l\u00f2ng \u0111\u0103ng nh\u1eadp \u0111\u1ec3 xem c\u00e1c kh\u00f3a h\u1ecdc c\u1ee7a b\u1ea1n.\");\n return;\n }\n\n \/\/ Tr\u01b0\u1edbc khi quy\u1ebft \u0111\u1ecbnh cho v\u00e0o hay ch\u1eb7n, l\u00e0m m\u1edbi tr\u1ea1ng th\u00e1i t\u1eeb server (tr\u1eeb t\u00e0i kho\u1ea3n\n \/\/ admin, v\u1ed1n kh\u00f4ng c\u00f3 d\u00f2ng tr\u1ea1ng th\u00e1i trong sheet h\u1ecdc vi\u00ean). N\u1ebfu server kh\u00f4ng ph\u1ea3n h\u1ed3i\n \/\/ \u0111\u01b0\u1ee3c (m\u1ea5t m\u1ea1ng...) th\u00ec t\u1ea1m d\u00f9ng b\u1ea3n cache c\u0169, kh\u00f4ng ch\u1eb7n oan h\u1ecdc vi\u00ean v\u00ec l\u1ed7i k\u1ebft n\u1ed1i.\n if (userId && userName.trim().toLowerCase() !== \"admin\") {\n const fresh = await refreshStudentStatus(userId);\n if (fresh) {\n userName = fresh.tmy_userName || userName;\n classIds = fresh.tmy_classIds || classIds;\n rawStartDates = fresh.tmy_courseStartDates || rawStartDates;\n studentStatus = fresh.tmy_studentStatus || studentStatus;\n }\n }\n\n const startDates = {};\n Object.keys(rawStartDates).forEach(k => { startDates[k.trim()] = rawStartDates[k]; });\n\n \/\/ H\u1ecdc vi\u00ean \u0111\u00e3 \u0111\u1ed7 \u2014 d\u00f9 l\u00e0 l\u01b0u t\u1eeb l\u00fac \u0111\u0103ng nh\u1eadp hay v\u1eeba ph\u00e1t hi\u1ec7n qua b\u01b0\u1edbc l\u00e0m m\u1edbi \u1edf tr\u00ean \u2014\n \/\/ \u0111\u1ec1u b\u1ecb ch\u1eb7n t\u1ea1i \u0111\u00e2y, \u0111\u1ed3ng th\u1eddi d\u1ecdn s\u1ea1ch phi\u00ean \u0111\u1ec3 c\u00e1c l\u1ea7n load trang sau kh\u00f4ng c\u00f2n\n \/\/ coi l\u00e0 \u0111\u00e3 \u0111\u0103ng nh\u1eadp.\n if (studentStatus === \"2. \u0110\u00e3 \u0111\u1ed7\") {\n [\"tmy_userId\", \"tmy_userName\", \"tmy_classIds\", \"tmy_courseStartDates\",\n \"tmy_classId\", \"tmy_studentStatus\", \"tmy_learningMode\"].forEach(k => localStorage.removeItem(k));\n document.getElementById(\"userNameLabel\").textContent = \"B\u1ea1n ch\u01b0a \u0111\u0103ng nh\u1eadp\";\n if (logoutBtn) logoutBtn.style.display = \"none\";\n renderCourseEndedPrompt();\n return;\n }\n\n \/\/ N\u1ebeU C\u00d3 \u0110\u0102NG NH\u1eacP\n if (logoutBtn) logoutBtn.style.display = \"flex\"; \/\/ HI\u1ec6N N\u00daT THO\u00c1T\n document.getElementById(\"userNameLabel\").textContent = \"Ch\u00e0o, \" + userName;\n const isAdmin = userName.trim().toLowerCase() === \"admin\";\n\n const coursesToShow = isAdmin\n ? [...ALL_COURSES]\n : classIds.map(c => c.trim()).filter(c =>\n ALL_COURSES.some(course => course.toLowerCase() === c.toLowerCase())\n );\n\n renderCourses(coursesToShow, startDates, isAdmin);\n}\n\nfunction renderCourseEndedPrompt() {\n const grid = document.getElementById(\"courseGrid\");\n grid.style.display = \"block\";\n grid.innerHTML = `\n <div style=\"text-align: center; padding: 40px; background: white; border-radius: 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.06);\">\n <p style=\"margin-bottom: 20px; color: #6b7280;\">Ch\u00fac m\u1eebng b\u1ea1n \u0111\u00e3 ho\u00e0n th\u00e0nh kh\u00f3a h\u1ecdc! Kh\u00f3a h\u1ecdc \u0111\u00e3 k\u1ebft th\u00fac n\u00ean b\u1ea1n kh\u00f4ng th\u1ec3 ti\u1ebfp t\u1ee5c truy c\u1eadp b\u00e0i h\u1ecdc n\u1eefa.<\/p>\n <a href=\"https:\/\/tokuteigino.vn\/vi\/\"\n style=\"display: inline-block; padding: 12px 24px; background: #10291a; color: white; text-decoration: none; border-radius: 8px; font-weight: 600;\">\n V\u1ec1 trang ch\u1ee7\n <\/a>\n <\/div>\n `;\n}\n\nfunction renderLoginButton(message) {\n const grid = document.getElementById(\"courseGrid\");\n grid.style.display = \"block\"; \n grid.innerHTML = `\n <div style=\"text-align: center; padding: 40px; background: white; border-radius: 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.06);\">\n <p style=\"margin-bottom: 20px; color: #6b7280;\">${message}<\/p>\n <a href=\"https:\/\/tokuteigino.vn\/vi\/dang-nhap\/\" \n style=\"display: inline-block; padding: 12px 24px; background: #10291a; color: white; text-decoration: none; border-radius: 8px; font-weight: 600;\">\n \u0110\u0103ng nh\u1eadp ngay\n <\/a>\n <\/div>\n `;\n}\n\n\/\/ ... (Ph\u1ea7n ALL_COURSES, LINKS, IMAGES gi\u1eef nguy\u00ean)\n\nfunction renderCourses(courseNames, startDates, isAdmin) {\n const grid = document.getElementById(\"courseGrid\");\n grid.innerHTML = \"\";\n grid.style.display = \"grid\"; \n\n if (courseNames.length === 0) {\n grid.innerHTML = \"<p>B\u1ea1n ch\u01b0a tham gia kh\u00f3a h\u1ecdc n\u00e0o.<\/p>\";\n return;\n }\n\n \/\/ Lo\u1ea1i b\u1ecf tr\u00f9ng l\u1eb7p\n const uniqueCourses = [...new Set(courseNames)];\n\n uniqueCourses.forEach(name => {\n \/\/ T\u00ecm t\u00ean chu\u1ea9n trong ALL_COURSES\n const exactName = ALL_COURSES.find(c => c.toLowerCase().trim() === name.toLowerCase().trim());\n if (!exactName) return;\n\n \/\/ L\u1ea5y ng\u00e0y b\u1eaft \u0111\u1ea7u c\u1ee7a ri\u00eang kh\u00f3a n\u00e0y\n const startDateStr = startDates[name] || startDates[exactName];\n \n \/\/ Ki\u1ec3m tra h\u1ebft h\u1ea1n cho ri\u00eang kh\u00f3a n\u00e0y\n const expired = !isAdmin && startDateStr && isExpired(startDateStr);\n\n let metaHtml = \"\";\n if (isAdmin) {\n metaHtml = `<div class=\"course-meta\" style=\"color:var(--primary-color); font-weight:bold;\">Quy\u1ec1n Qu\u1ea3n tr\u1ecb vi\u00ean<\/div>`;\n } else if (expired) {\n metaHtml = `<div class=\"course-meta\" style=\"color:#ef4444; font-weight:bold;\">\u26a0\ufe0f Kh\u00f3a h\u1ecdc \u0111\u00e3 qu\u00e1 h\u1ea1n<\/div>`;\n }\n\n const div = document.createElement(\"div\");\n div.className = \"course-card\";\n \/\/ N\u1ebfu expired = true, kh\u00f4ng g\u00e1n h\u00e0m onclick v\u00e0 l\u00e0m m\u1edd \u1ea3nh\n div.innerHTML = `\n <div class=\"course-image\" \n ${expired ? \"\" : `onclick=\"goCourse('${exactName}')\"`} \n style=\"${expired ? 'cursor: not-allowed; opacity: 0.6; filter: grayscale(1);' : 'cursor: pointer;'}\">\n <img decoding=\"async\" src=\"${COURSE_IMAGES[exactName]}\" alt=\"${exactName}\">\n <\/div>\n <div class=\"course-title\" style=\"${expired ? 'color: #9ca3af;' : ''}\">${exactName}<\/div>\n ${metaHtml}\n `;\n grid.appendChild(div);\n });\n}\n\nfunction goCourse(courseName) {\n const link = COURSE_LINKS[courseName];\n if (!link || link === \"#\") {\n alert(\"Kh\u00f3a h\u1ecdc \u0111ang \u0111\u01b0\u1ee3c c\u1eadp nh\u1eadt n\u1ed9i dung.\");\n return;\n }\n window.location.href = link;\n}\n\nfunction logout() {\n if (!confirm(\"B\u1ea1n c\u00f3 ch\u1eafc mu\u1ed1n tho\u00e1t?\")) return;\n const keysToRemove = [\"tmy_userId\", \"tmy_userName\", \"tmy_classIds\", \"tmy_courseStartDates\", \"tmy_classId\", \"tmy_studentStatus\", \"tmy_learningMode\"];\n keysToRemove.forEach(k => localStorage.removeItem(k));\n \n \/\/ CHUY\u1ec2N H\u01af\u1edaNG V\u1ec0 TRANG CH\u1ee6 SAU KHI THO\u00c1T\n window.location.href = \"https:\/\/tokuteigino.vn\/\"; \n}\n\ninitPage();\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Kh\u00f3a h\u1ecdc tokutei gino \u0110ang t\u1ea3i… \ud83d\udcda Kh\u00f3a h\u1ecdc \ud83d\udeaa Tho\u00e1t Kh\u00f3a h\u1ecdc c\u1ee7a t\u00f4i<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"footnotes":""},"class_list":["post-7788","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tokuteigino.vn\/vi\/wp-json\/wp\/v2\/pages\/7788","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tokuteigino.vn\/vi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tokuteigino.vn\/vi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tokuteigino.vn\/vi\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/tokuteigino.vn\/vi\/wp-json\/wp\/v2\/comments?post=7788"}],"version-history":[{"count":12,"href":"https:\/\/tokuteigino.vn\/vi\/wp-json\/wp\/v2\/pages\/7788\/revisions"}],"predecessor-version":[{"id":8517,"href":"https:\/\/tokuteigino.vn\/vi\/wp-json\/wp\/v2\/pages\/7788\/revisions\/8517"}],"wp:attachment":[{"href":"https:\/\/tokuteigino.vn\/vi\/wp-json\/wp\/v2\/media?parent=7788"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}