diff --git a/public/glycemic-index/foods.json b/public/glycemic-index/foods.json
new file mode 100644
index 00000000..3a6b15ff
--- /dev/null
+++ b/public/glycemic-index/foods.json
@@ -0,0 +1,97 @@
+[
+  {"name":"Cơm trắng","group":"tinh-bot","gi":73,"carbs":28,"serving":150,"alt":"Cơm gạo lứt"},
+  {"name":"Cơm gạo lứt","group":"tinh-bot","gi":50,"carbs":24,"serving":150,"alt":""},
+  {"name":"Bún","group":"tinh-bot","gi":46,"carbs":25,"serving":150,"alt":""},
+  {"name":"Phở","group":"tinh-bot","gi":54,"carbs":30,"serving":200,"alt":"Bún"},
+  {"name":"Mì tôm","group":"tinh-bot","gi":67,"carbs":48,"serving":75,"alt":"Mì gạo lứt"},
+  {"name":"Mì gạo lứt","group":"tinh-bot","gi":42,"carbs":35,"serving":75,"alt":""},
+  {"name":"Bánh mì trắng","group":"tinh-bot","gi":75,"carbs":49,"serving":100,"alt":"Bánh mì đen"},
+  {"name":"Bánh mì đen","group":"tinh-bot","gi":50,"carbs":42,"serving":100,"alt":""},
+  {"name":"Xôi","group":"tinh-bot","gi":87,"carbs":40,"serving":150,"alt":"Cơm gạo lứt"},
+  {"name":"Cháo trắng","group":"tinh-bot","gi":89,"carbs":12,"serving":250,"alt":"Cháo yến mạch"},
+  {"name":"Cháo yến mạch","group":"tinh-bot","gi":55,"carbs":14,"serving":250,"alt":""},
+  {"name":"Yến mạch nguyên hạt","group":"tinh-bot","gi":55,"carbs":27,"serving":50,"alt":""},
+  {"name":"Khoai lang","group":"tinh-bot","gi":54,"carbs":20,"serving":150,"alt":""},
+  {"name":"Khoai tây luộc","group":"tinh-bot","gi":78,"carbs":18,"serving":150,"alt":"Khoai lang"},
+  {"name":"Khoai tây chiên","group":"tinh-bot","gi":75,"carbs":33,"serving":150,"alt":"Khoai lang nướng"},
+  {"name":"Khoai lang nướng","group":"tinh-bot","gi":46,"carbs":20,"serving":150,"alt":""},
+  {"name":"Ngô luộc","group":"tinh-bot","gi":52,"carbs":19,"serving":150,"alt":""},
+  {"name":"Bánh cuốn","group":"tinh-bot","gi":58,"carbs":22,"serving":150,"alt":""},
+  {"name":"Miến dong","group":"tinh-bot","gi":39,"carbs":20,"serving":100,"alt":""},
+  {"name":"Chuối","group":"trai-cay","gi":51,"carbs":23,"serving":120,"alt":""},
+  {"name":"Xoài","group":"trai-cay","gi":51,"carbs":15,"serving":120,"alt":""},
+  {"name":"Dưa hấu","group":"trai-cay","gi":76,"carbs":8,"serving":150,"alt":"Ổi"},
+  {"name":"Ổi","group":"trai-cay","gi":12,"carbs":14,"serving":150,"alt":""},
+  {"name":"Táo","group":"trai-cay","gi":36,"carbs":14,"serving":150,"alt":""},
+  {"name":"Cam","group":"trai-cay","gi":43,"carbs":9,"serving":150,"alt":""},
+  {"name":"Nho","group":"trai-cay","gi":46,"carbs":17,"serving":120,"alt":""},
+  {"name":"Thanh long","group":"trai-cay","gi":48,"carbs":11,"serving":150,"alt":""},
+  {"name":"Bưởi","group":"trai-cay","gi":25,"carbs":10,"serving":200,"alt":""},
+  {"name":"Mít","group":"trai-cay","gi":50,"carbs":24,"serving":120,"alt":""},
+  {"name":"Vải","group":"trai-cay","gi":57,"carbs":16,"serving":100,"alt":"Bưởi"},
+  {"name":"Chôm chôm","group":"trai-cay","gi":59,"carbs":17,"serving":100,"alt":"Ổi"},
+  {"name":"Sầu riêng","group":"trai-cay","gi":49,"carbs":27,"serving":120,"alt":""},
+  {"name":"Đu đủ","group":"trai-cay","gi":59,"carbs":11,"serving":150,"alt":"Táo"},
+  {"name":"Dứa (thơm)","group":"trai-cay","gi":59,"carbs":13,"serving":150,"alt":"Cam"},
+  {"name":"Măng cụt","group":"trai-cay","gi":35,"carbs":15,"serving":100,"alt":""},
+  {"name":"Bơ","group":"trai-cay","gi":15,"carbs":9,"serving":100,"alt":""},
+  {"name":"Dâu tây","group":"trai-cay","gi":40,"carbs":6,"serving":150,"alt":""},
+  {"name":"Kiwi","group":"trai-cay","gi":52,"carbs":15,"serving":150,"alt":""},
+  {"name":"Bắp cải","group":"rau-cu","gi":10,"carbs":6,"serving":100,"alt":""},
+  {"name":"Cải bó xôi","group":"rau-cu","gi":15,"carbs":4,"serving":100,"alt":""},
+  {"name":"Bí đỏ","group":"rau-cu","gi":75,"carbs":7,"serving":100,"alt":"Bí xanh"},
+  {"name":"Bí xanh","group":"rau-cu","gi":15,"carbs":3,"serving":100,"alt":""},
+  {"name":"Cà rốt (nấu)","group":"rau-cu","gi":39,"carbs":7,"serving":80,"alt":""},
+  {"name":"Cà chua","group":"rau-cu","gi":15,"carbs":4,"serving":100,"alt":""},
+  {"name":"Dưa leo","group":"rau-cu","gi":15,"carbs":2,"serving":100,"alt":""},
+  {"name":"Mướp đắng (khổ qua)","group":"rau-cu","gi":15,"carbs":4,"serving":100,"alt":""},
+  {"name":"Rau muống","group":"rau-cu","gi":15,"carbs":3,"serving":100,"alt":""},
+  {"name":"Đậu bắp","group":"rau-cu","gi":20,"carbs":7,"serving":100,"alt":""},
+  {"name":"Giá đỗ","group":"rau-cu","gi":15,"carbs":5,"serving":100,"alt":""},
+  {"name":"Nấm","group":"rau-cu","gi":10,"carbs":3,"serving":100,"alt":""},
+  {"name":"Đậu lăng (nấu)","group":"dau-hat","gi":29,"carbs":20,"serving":150,"alt":""},
+  {"name":"Đậu đen","group":"dau-hat","gi":30,"carbs":20,"serving":150,"alt":""},
+  {"name":"Đậu xanh","group":"dau-hat","gi":31,"carbs":19,"serving":150,"alt":""},
+  {"name":"Đậu đỏ","group":"dau-hat","gi":28,"carbs":22,"serving":150,"alt":""},
+  {"name":"Đậu nành (nấu)","group":"dau-hat","gi":16,"carbs":10,"serving":150,"alt":""},
+  {"name":"Đậu phộng","group":"dau-hat","gi":14,"carbs":16,"serving":50,"alt":""},
+  {"name":"Hạt điều","group":"dau-hat","gi":22,"carbs":30,"serving":50,"alt":""},
+  {"name":"Hạnh nhân","group":"dau-hat","gi":15,"carbs":22,"serving":50,"alt":""},
+  {"name":"Hạt chia","group":"dau-hat","gi":1,"carbs":42,"serving":30,"alt":""},
+  {"name":"Đậu hủ","group":"dau-hat","gi":15,"carbs":2,"serving":150,"alt":""},
+  {"name":"Sữa tươi","group":"sua","gi":31,"carbs":5,"serving":250,"alt":""},
+  {"name":"Sữa đặc","group":"sua","gi":61,"carbs":55,"serving":30,"alt":"Sữa tươi"},
+  {"name":"Sữa đậu nành","group":"sua","gi":34,"carbs":6,"serving":250,"alt":""},
+  {"name":"Sữa chua","group":"sua","gi":36,"carbs":12,"serving":200,"alt":""},
+  {"name":"Sữa hạnh nhân","group":"sua","gi":25,"carbs":1,"serving":250,"alt":""},
+  {"name":"Phô mai","group":"sua","gi":0,"carbs":1,"serving":30,"alt":""},
+  {"name":"Nước ngọt (Coca)","group":"do-uong","gi":63,"carbs":39,"serving":330,"alt":"Trà xanh"},
+  {"name":"Nước cam ép","group":"do-uong","gi":50,"carbs":10,"serving":250,"alt":"Cam nguyên quả"},
+  {"name":"Trà xanh","group":"do-uong","gi":0,"carbs":0,"serving":250,"alt":""},
+  {"name":"Cà phê đen","group":"do-uong","gi":0,"carbs":0,"serving":250,"alt":""},
+  {"name":"Nước mía","group":"do-uong","gi":43,"carbs":13,"serving":250,"alt":"Trà xanh"},
+  {"name":"Bia","group":"do-uong","gi":66,"carbs":5,"serving":330,"alt":"Trà xanh"},
+  {"name":"Trà sữa","group":"do-uong","gi":53,"carbs":34,"serving":400,"alt":"Trà xanh"},
+  {"name":"Nước dừa","group":"do-uong","gi":55,"carbs":4,"serving":250,"alt":""},
+  {"name":"Sinh tố bơ","group":"do-uong","gi":25,"carbs":15,"serving":300,"alt":""},
+  {"name":"Đường trắng","group":"gia-vi","gi":65,"carbs":100,"serving":10,"alt":"Đường dừa"},
+  {"name":"Đường dừa","group":"gia-vi","gi":35,"carbs":100,"serving":10,"alt":""},
+  {"name":"Mật ong","group":"gia-vi","gi":58,"carbs":82,"serving":20,"alt":""},
+  {"name":"Nước mắm","group":"gia-vi","gi":0,"carbs":0,"serving":15,"alt":""},
+  {"name":"Tương ớt","group":"gia-vi","gi":35,"carbs":29,"serving":15,"alt":""},
+  {"name":"Bánh ngọt","group":"banh-keo","gi":67,"carbs":50,"serving":80,"alt":"Hoa quả tươi"},
+  {"name":"Kẹo dẻo","group":"banh-keo","gi":78,"carbs":75,"serving":30,"alt":"Trái cây sấy"},
+  {"name":"Socola đen 70%","group":"banh-keo","gi":23,"carbs":46,"serving":30,"alt":""},
+  {"name":"Bánh quy","group":"banh-keo","gi":69,"carbs":64,"serving":50,"alt":"Socola đen 70%"},
+  {"name":"Kem","group":"banh-keo","gi":51,"carbs":24,"serving":100,"alt":"Sữa chua"},
+  {"name":"Bánh flan","group":"banh-keo","gi":43,"carbs":28,"serving":100,"alt":""},
+  {"name":"Chè đậu xanh","group":"banh-keo","gi":42,"carbs":22,"serving":200,"alt":""},
+  {"name":"Bò","group":"thit-ca","gi":0,"carbs":0,"serving":100,"alt":""},
+  {"name":"Gà","group":"thit-ca","gi":0,"carbs":0,"serving":100,"alt":""},
+  {"name":"Heo","group":"thit-ca","gi":0,"carbs":0,"serving":100,"alt":""},
+  {"name":"Cá hồi","group":"thit-ca","gi":0,"carbs":0,"serving":100,"alt":""},
+  {"name":"Tôm","group":"thit-ca","gi":0,"carbs":0,"serving":100,"alt":""},
+  {"name":"Trứng gà","group":"thit-ca","gi":0,"carbs":1,"serving":50,"alt":""},
+  {"name":"Cá ngừ","group":"thit-ca","gi":0,"carbs":0,"serving":100,"alt":""},
+  {"name":"Mực","group":"thit-ca","gi":0,"carbs":1,"serving":100,"alt":""}
+]
diff --git a/src/views/glycemic-index/index.vue b/src/views/glycemic-index/index.vue
new file mode 100644
index 00000000..a5a9a4f8
--- /dev/null
+++ b/src/views/glycemic-index/index.vue
@@ -0,0 +1,503 @@
+<template>
+  <div
+    class="min-h-screen bg-bg-deep text-text-primary font-body flex flex-col items-center py-8 px-4"
+  >
+    <!-- Header -->
+    <header class="w-full max-w-3xl flex justify-between items-center mb-8 animate-fade-up">
+      <div>
+        <h1
+          class="font-display text-3xl sm:text-4xl font-bold text-text-primary flex items-center gap-3"
+        >
+          <span class="text-accent-sky font-display text-lg tracking-widest">//</span>
+          Chỉ Số Đường Huyết
+        </h1>
+        <p class="text-text-secondary text-sm mt-1">
+          Tra cứu GI/GL thực phẩm Việt Nam — so sánh và gợi ý thay thế
+        </p>
+      </div>
+      <RouterLink
+        to="/"
+        class="inline-flex items-center gap-2 border border-border-default bg-bg-surface px-4 py-2 text-sm text-text-secondary transition hover:border-accent-sky hover:text-text-primary"
+      >
+        &larr; Trang chủ
+      </RouterLink>
+    </header>
+
+    <!-- Loading -->
+    <div v-if="loading" class="text-text-dim text-sm py-20">Đang tải dữ liệu...</div>
+
+    <template v-else>
+      <!-- GI Scale Info -->
+      <div class="w-full max-w-3xl grid grid-cols-3 gap-3 mb-6 animate-fade-up animate-delay-1">
+        <div class="border border-border-default bg-bg-surface p-3 text-center">
+          <div class="text-sm font-display font-semibold" style="color: #22c55e">GI ≤ 55</div>
+          <div class="text-text-dim text-xs mt-1">Thấp — An toàn</div>
+        </div>
+        <div class="border border-border-default bg-bg-surface p-3 text-center">
+          <div class="text-sm font-display font-semibold" style="color: #ffb830">GI 56–69</div>
+          <div class="text-text-dim text-xs mt-1">Trung bình</div>
+        </div>
+        <div class="border border-border-default bg-bg-surface p-3 text-center">
+          <div class="text-sm font-display font-semibold" style="color: #ff6b4a">GI ≥ 70</div>
+          <div class="text-text-dim text-xs mt-1">Cao — Hạn chế</div>
+        </div>
+      </div>
+
+      <!-- Tab Navigation -->
+      <div
+        class="w-full max-w-3xl flex border-b border-border-default mb-6 animate-fade-up animate-delay-2"
+      >
+        <button
+          v-for="tab in tabs"
+          :key="tab.id"
+          class="flex items-center gap-2 px-4 py-3 text-sm font-display tracking-wide transition-colors border-b-2 -mb-px"
+          :class="
+            activeTab === tab.id
+              ? 'border-accent-sky text-accent-sky'
+              : 'border-transparent text-text-dim hover:text-text-secondary'
+          "
+          @click="activeTab = tab.id"
+        >
+          <Icon :icon="tab.icon" class="size-4" />
+          {{ tab.label }}
+        </button>
+      </div>
+
+      <div class="w-full max-w-3xl animate-fade-up animate-delay-3">
+        <!-- Search Tab -->
+        <div v-if="activeTab === 'search'">
+          <!-- Search + Filter -->
+          <div class="border border-border-default bg-bg-surface p-4 mb-4">
+            <div class="flex gap-3 mb-4">
+              <div class="flex-1 relative">
+                <Icon
+                  icon="lucide:search"
+                  class="size-4 absolute left-3 top-1/2 -translate-y-1/2 text-text-dim"
+                />
+                <input
+                  v-model="searchQuery"
+                  type="text"
+                  placeholder="Tìm thực phẩm..."
+                  class="w-full bg-bg-deep border border-border-default pl-10 pr-3 py-2.5 text-text-primary text-sm focus:outline-none focus:border-accent-sky transition-colors placeholder:text-text-dim/50"
+                />
+              </div>
+              <select
+                v-model="filterGI"
+                class="bg-bg-deep border border-border-default px-3 py-2 text-text-primary text-sm focus:outline-none focus:border-accent-sky"
+              >
+                <option value="all">Tất cả GI</option>
+                <option value="low">GI thấp</option>
+                <option value="medium">GI TB</option>
+                <option value="high">GI cao</option>
+              </select>
+            </div>
+
+            <!-- Group Filter -->
+            <div class="flex flex-wrap gap-2">
+              <button
+                class="px-2.5 py-1.5 text-xs font-display border transition-all"
+                :class="
+                  filterGroup === 'all'
+                    ? 'border-accent-sky text-accent-sky bg-bg-elevated'
+                    : 'border-border-default text-text-dim hover:text-text-secondary'
+                "
+                @click="filterGroup = 'all'"
+              >
+                Tất cả
+              </button>
+              <button
+                v-for="g in FOOD_GROUPS"
+                :key="g.key"
+                class="flex items-center gap-1 px-2.5 py-1.5 text-xs font-display border transition-all"
+                :class="
+                  filterGroup === g.key
+                    ? 'border-accent-sky text-accent-sky bg-bg-elevated'
+                    : 'border-border-default text-text-dim hover:text-text-secondary'
+                "
+                @click="filterGroup = g.key"
+              >
+                <Icon :icon="g.icon" class="size-3" />
+                {{ g.label }}
+              </button>
+            </div>
+          </div>
+
+          <!-- Results -->
+          <div class="text-text-dim text-xs font-display tracking-wide mb-3">
+            {{ filteredFoods.length }} kết quả
+          </div>
+
+          <div class="space-y-2">
+            <div
+              v-for="food in filteredFoods"
+              :key="food.name"
+              class="border border-border-default bg-bg-surface p-4 hover:border-accent-sky/30 transition-colors cursor-pointer"
+              @click="toggleCompare(food)"
+            >
+              <div class="flex items-center justify-between mb-2">
+                <div class="flex items-center gap-2">
+                  <span class="font-display text-sm font-semibold">{{ food.name }}</span>
+                  <span class="text-xs text-text-dim">({{ getGroupLabel(food.group) }})</span>
+                </div>
+                <div class="flex items-center gap-3">
+                  <div
+                    class="px-2 py-0.5 text-xs font-display font-bold"
+                    :style="{
+                      color: getGIColor(food.gi),
+                      backgroundColor: getGIColor(food.gi) + '15',
+                    }"
+                  >
+                    GI {{ food.gi }}
+                  </div>
+                  <button
+                    class="text-xs transition-colors"
+                    :class="
+                      isFavorite(food.name)
+                        ? 'text-accent-amber'
+                        : 'text-text-dim hover:text-accent-amber'
+                    "
+                    @click.stop="toggleFavorite(food.name)"
+                  >
+                    <Icon
+                      :icon="isFavorite(food.name) ? 'lucide:star' : 'lucide:star'"
+                      class="size-4"
+                      :class="isFavorite(food.name) ? 'fill-accent-amber' : ''"
+                    />
+                  </button>
+                </div>
+              </div>
+
+              <div class="flex items-center gap-4 text-xs text-text-dim">
+                <span>Carbs: {{ food.carbs }}g / {{ food.serving }}g</span>
+                <span
+                  >GL:
+                  <span :style="{ color: getGLColor(calcGL(food.gi, food.carbs)) }">{{
+                    calcGL(food.gi, food.carbs)
+                  }}</span>
+                  ({{ getGLLabel(calcGL(food.gi, food.carbs)) }})</span
+                >
+                <span v-if="food.alt" class="text-accent-sky"> → Thay bằng: {{ food.alt }} </span>
+              </div>
+
+              <!-- GL Calculator inline -->
+              <div
+                v-if="expandedFood === food.name"
+                class="mt-3 pt-3 border-t border-border-default"
+                @click.stop
+              >
+                <label class="text-text-dim text-xs font-display tracking-wide mb-1.5 block">
+                  TÍNH GL THEO KHẨU PHẦN (gram):
+                </label>
+                <div class="flex items-center gap-3">
+                  <input
+                    v-model.number="customServing"
+                    type="number"
+                    min="1"
+                    class="w-24 bg-bg-deep border border-border-default px-3 py-1.5 text-text-primary text-sm text-center focus:outline-none focus:border-accent-sky"
+                  />
+                  <span class="text-text-secondary text-sm">
+                    GL =
+                    <span
+                      class="font-display font-bold"
+                      :style="{ color: getGLColor(calcCustomGL(food)) }"
+                    >
+                      {{ calcCustomGL(food) }}
+                    </span>
+                    ({{ getGLLabel(calcCustomGL(food)) }})
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Compare Tab -->
+        <div v-if="activeTab === 'compare'">
+          <div
+            v-if="compareList.length < 2"
+            class="border border-border-default bg-bg-surface p-8 text-center"
+          >
+            <Icon icon="lucide:git-compare-arrows" class="size-8 text-text-dim mx-auto mb-3" />
+            <p class="text-text-secondary text-sm mb-2">Chọn 2–3 thực phẩm để so sánh</p>
+            <p class="text-text-dim text-xs">
+              Click vào thực phẩm trong tab Tra cứu để thêm vào so sánh
+            </p>
+          </div>
+
+          <div v-else>
+            <div class="flex gap-2 mb-4 flex-wrap">
+              <span
+                v-for="name in compareList"
+                :key="name"
+                class="flex items-center gap-1.5 px-3 py-1.5 border border-accent-sky/30 bg-accent-sky/5 text-accent-sky text-xs font-display"
+              >
+                {{ name }}
+                <button
+                  class="hover:text-accent-coral transition-colors"
+                  @click="removeCompare(name)"
+                >
+                  <Icon icon="lucide:x" class="size-3" />
+                </button>
+              </span>
+              <button
+                class="text-xs text-text-dim hover:text-accent-coral transition-colors font-display"
+                @click="compareList = []"
+              >
+                Xóa tất cả
+              </button>
+            </div>
+
+            <!-- Comparison Table -->
+            <div class="border border-border-default bg-bg-surface overflow-x-auto">
+              <table class="w-full text-sm">
+                <thead>
+                  <tr class="border-b border-border-default">
+                    <th class="text-left p-3 text-text-dim font-display text-xs tracking-wide">
+                      CHỈ SỐ
+                    </th>
+                    <th
+                      v-for="name in compareList"
+                      :key="name"
+                      class="p-3 text-center font-display text-sm font-semibold text-text-primary"
+                    >
+                      {{ name }}
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr class="border-b border-border-default">
+                    <td class="p-3 text-text-dim text-xs font-display">GI</td>
+                    <td
+                      v-for="name in compareList"
+                      :key="name"
+                      class="p-3 text-center font-display font-bold text-lg"
+                      :style="{ color: getGIColor(getFood(name)?.gi ?? 0) }"
+                    >
+                      {{ getFood(name)?.gi ?? '—' }}
+                    </td>
+                  </tr>
+                  <tr class="border-b border-border-default">
+                    <td class="p-3 text-text-dim text-xs font-display">PHÂN LOẠI</td>
+                    <td
+                      v-for="name in compareList"
+                      :key="name"
+                      class="p-3 text-center text-xs font-display"
+                      :style="{ color: getGIColor(getFood(name)?.gi ?? 0) }"
+                    >
+                      {{ getGILabel(getFood(name)?.gi ?? 0) }}
+                    </td>
+                  </tr>
+                  <tr class="border-b border-border-default">
+                    <td class="p-3 text-text-dim text-xs font-display">CARBS (g)</td>
+                    <td
+                      v-for="name in compareList"
+                      :key="name"
+                      class="p-3 text-center text-text-secondary"
+                    >
+                      {{ getFood(name)?.carbs ?? '—' }}g
+                    </td>
+                  </tr>
+                  <tr class="border-b border-border-default">
+                    <td class="p-3 text-text-dim text-xs font-display">KHẨU PHẦN (g)</td>
+                    <td
+                      v-for="name in compareList"
+                      :key="name"
+                      class="p-3 text-center text-text-secondary"
+                    >
+                      {{ getFood(name)?.serving ?? '—' }}g
+                    </td>
+                  </tr>
+                  <tr class="border-b border-border-default">
+                    <td class="p-3 text-text-dim text-xs font-display">GL</td>
+                    <td
+                      v-for="name in compareList"
+                      :key="name"
+                      class="p-3 text-center font-display font-bold"
+                      :style="{
+                        color: getGLColor(
+                          calcGL(getFood(name)?.gi ?? 0, getFood(name)?.carbs ?? 0),
+                        ),
+                      }"
+                    >
+                      {{ calcGL(getFood(name)?.gi ?? 0, getFood(name)?.carbs ?? 0) }}
+                    </td>
+                  </tr>
+                  <tr>
+                    <td class="p-3 text-text-dim text-xs font-display">THAY THẾ</td>
+                    <td
+                      v-for="name in compareList"
+                      :key="name"
+                      class="p-3 text-center text-accent-sky text-xs"
+                    >
+                      {{ getFood(name)?.alt || '—' }}
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+
+        <!-- Favorites Tab -->
+        <div v-if="activeTab === 'favorites'">
+          <div v-if="favoriteFoods.length > 0" class="space-y-2">
+            <div
+              v-for="food in favoriteFoods"
+              :key="food.name"
+              class="border border-border-default bg-bg-surface p-4 hover:border-accent-amber/30 transition-colors"
+            >
+              <div class="flex items-center justify-between mb-1">
+                <span class="font-display text-sm font-semibold">{{ food.name }}</span>
+                <div class="flex items-center gap-2">
+                  <span
+                    class="px-2 py-0.5 text-xs font-display font-bold"
+                    :style="{
+                      color: getGIColor(food.gi),
+                      backgroundColor: getGIColor(food.gi) + '15',
+                    }"
+                  >
+                    GI {{ food.gi }}
+                  </span>
+                  <button
+                    class="text-accent-amber hover:text-accent-coral transition-colors"
+                    @click="toggleFavorite(food.name)"
+                  >
+                    <Icon icon="lucide:star-off" class="size-4" />
+                  </button>
+                </div>
+              </div>
+              <div class="text-xs text-text-dim">
+                Carbs: {{ food.carbs }}g | GL: {{ calcGL(food.gi, food.carbs) }}
+                <span v-if="food.alt"> | Thay: {{ food.alt }}</span>
+              </div>
+            </div>
+          </div>
+          <div v-else class="border border-border-default bg-bg-surface p-8 text-center">
+            <Icon icon="lucide:star" class="size-8 text-text-dim mx-auto mb-3" />
+            <p class="text-text-secondary text-sm">Chưa có thực phẩm yêu thích</p>
+            <p class="text-text-dim text-xs mt-1">Nhấn ★ trong tab Tra cứu để lưu</p>
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useLocalStorage } from '@vueuse/core'
+import { Icon } from '@iconify/vue'
+import type { FoodItem, FoodGroup } from './types'
+import {
+  FOOD_GROUPS,
+  getGIColor,
+  getGILabel,
+  calcGL,
+  getGLLabel,
+  getGLColor,
+  getGILevel,
+} from './types'
+
+// === Data ===
+const foods = ref<FoodItem[]>([])
+const loading = ref(true)
+
+onMounted(async () => {
+  try {
+    const res = await fetch('/glycemic-index/foods.json')
+    foods.value = await res.json()
+  } catch {
+    foods.value = []
+  }
+  loading.value = false
+})
+
+// === Tabs ===
+const tabs = [
+  { id: 'search' as const, label: 'Tra cứu', icon: 'lucide:search' },
+  { id: 'compare' as const, label: 'So sánh', icon: 'lucide:git-compare-arrows' },
+  { id: 'favorites' as const, label: 'Yêu thích', icon: 'lucide:star' },
+]
+type TabId = 'search' | 'compare' | 'favorites'
+const activeTab = ref<TabId>('search')
+
+// === Search ===
+const searchQuery = ref('')
+const filterGI = ref<'all' | 'low' | 'medium' | 'high'>('all')
+const filterGroup = ref<FoodGroup | 'all'>('all')
+const expandedFood = ref('')
+const customServing = ref(100)
+
+const filteredFoods = computed(() => {
+  let result = foods.value
+
+  if (searchQuery.value) {
+    const q = searchQuery.value.toLowerCase()
+    result = result.filter((f) => f.name.toLowerCase().includes(q))
+  }
+
+  if (filterGI.value !== 'all') {
+    result = result.filter((f) => getGILevel(f.gi) === filterGI.value)
+  }
+
+  if (filterGroup.value !== 'all') {
+    result = result.filter((f) => f.group === filterGroup.value)
+  }
+
+  return result.sort((a, b) => a.gi - b.gi)
+})
+
+function toggleCompare(food: FoodItem) {
+  if (expandedFood.value === food.name) {
+    expandedFood.value = ''
+    return
+  }
+  expandedFood.value = food.name
+  customServing.value = food.serving
+
+  if (compareList.value.includes(food.name)) return
+  if (compareList.value.length >= 3) {
+    compareList.value.shift()
+  }
+  compareList.value.push(food.name)
+}
+
+function calcCustomGL(food: FoodItem): number {
+  const carbsForCustom = (food.carbs / food.serving) * customServing.value
+  return Math.round((food.gi * carbsForCustom) / 100)
+}
+
+function getGroupLabel(group: FoodGroup): string {
+  return FOOD_GROUPS.find((g) => g.key === group)?.label ?? group
+}
+
+// === Compare ===
+const compareList = ref<string[]>([])
+
+function removeCompare(name: string) {
+  compareList.value = compareList.value.filter((n) => n !== name)
+}
+
+function getFood(name: string): FoodItem | undefined {
+  return foods.value.find((f) => f.name === name)
+}
+
+// === Favorites ===
+const favorites = useLocalStorage<string[]>('glycemic-index-favorites', [])
+
+function isFavorite(name: string): boolean {
+  return favorites.value.includes(name)
+}
+
+function toggleFavorite(name: string) {
+  if (isFavorite(name)) {
+    favorites.value = favorites.value.filter((n) => n !== name)
+  } else {
+    favorites.value = [...favorites.value, name]
+  }
+}
+
+const favoriteFoods = computed(() => {
+  return foods.value.filter((f) => favorites.value.includes(f.name))
+})
+</script>
diff --git a/src/views/glycemic-index/meta.ts b/src/views/glycemic-index/meta.ts
new file mode 100644
index 00000000..2464654e
--- /dev/null
+++ b/src/views/glycemic-index/meta.ts
@@ -0,0 +1,12 @@
+import type { PageMeta } from '@/types/page'
+
+const meta: PageMeta = {
+  name: 'Chỉ Số Đường Huyết',
+  description:
+    'Tra cứu chỉ số đường huyết (GI) thực phẩm — so sánh, tính Glycemic Load và gợi ý thay thế lành mạnh',
+  author: 'nmdung.dev',
+  facebook: 'https://www.facebook.com/nmdung.dev',
+  category: 'health',
+}
+
+export default meta
diff --git a/src/views/glycemic-index/types.ts b/src/views/glycemic-index/types.ts
new file mode 100644
index 00000000..d207598b
--- /dev/null
+++ b/src/views/glycemic-index/types.ts
@@ -0,0 +1,73 @@
+export interface FoodItem {
+  name: string
+  group: FoodGroup
+  gi: number
+  carbs: number // per serving
+  serving: number // gram
+  alt: string // alternative food name
+}
+
+export type FoodGroup =
+  | 'tinh-bot'
+  | 'trai-cay'
+  | 'rau-cu'
+  | 'dau-hat'
+  | 'sua'
+  | 'do-uong'
+  | 'gia-vi'
+  | 'banh-keo'
+  | 'thit-ca'
+
+export interface FoodGroupInfo {
+  key: FoodGroup
+  label: string
+  icon: string
+}
+
+export const FOOD_GROUPS: FoodGroupInfo[] = [
+  { key: 'tinh-bot', label: 'Tinh bột', icon: 'lucide:wheat' },
+  { key: 'trai-cay', label: 'Trái cây', icon: 'lucide:apple' },
+  { key: 'rau-cu', label: 'Rau củ', icon: 'lucide:carrot' },
+  { key: 'dau-hat', label: 'Đậu & Hạt', icon: 'lucide:bean' },
+  { key: 'sua', label: 'Sữa', icon: 'lucide:milk' },
+  { key: 'do-uong', label: 'Đồ uống', icon: 'lucide:cup-soda' },
+  { key: 'gia-vi', label: 'Gia vị', icon: 'lucide:flame' },
+  { key: 'banh-keo', label: 'Bánh kẹo', icon: 'lucide:cake-slice' },
+  { key: 'thit-ca', label: 'Thịt & Cá', icon: 'lucide:drumstick' },
+]
+
+export type GILevel = 'low' | 'medium' | 'high'
+
+export function getGILevel(gi: number): GILevel {
+  if (gi <= 55) return 'low'
+  if (gi <= 69) return 'medium'
+  return 'high'
+}
+
+export function getGIColor(gi: number): string {
+  if (gi <= 55) return '#22c55e'
+  if (gi <= 69) return '#FFB830'
+  return '#FF6B4A'
+}
+
+export function getGILabel(gi: number): string {
+  if (gi <= 55) return 'Thấp'
+  if (gi <= 69) return 'Trung bình'
+  return 'Cao'
+}
+
+export function calcGL(gi: number, carbsPerServing: number): number {
+  return Math.round((gi * carbsPerServing) / 100)
+}
+
+export function getGLLabel(gl: number): string {
+  if (gl <= 10) return 'Thấp'
+  if (gl <= 19) return 'Trung bình'
+  return 'Cao'
+}
+
+export function getGLColor(gl: number): string {
+  if (gl <= 10) return '#22c55e'
+  if (gl <= 19) return '#FFB830'
+  return '#FF6B4A'
+}