diff --git a/src/components/AppSidebar.vue b/src/components/AppSidebar.vue
index b87d7cd..3286d20 100644
--- a/src/components/AppSidebar.vue
+++ b/src/components/AppSidebar.vue
@@ -49,6 +49,7 @@ const menuSections = [
       },
       { label: "Phiếu nhập kho", to: "/stock-in", icon: "mdi-tray-arrow-down" },
       { label: "Phiếu xuất kho", to: "/stock-out", icon: "mdi-tray-arrow-up" },
+      { label: "Kiểm kê kho", to: "/inventory-counts", icon: "mdi-clipboard-check-outline" },
     ],
   },
   {
@@ -69,12 +70,12 @@ const menuSections = [
   {
     title: "Hệ thống",
     items: [
+      { label: "Cảnh báo tồn kho", to: "/alerts", icon: "mdi-alert-outline" },
       {
-        label: "Import Excel",
+        label: "Nhập liệu Excel",
         to: "/import-excel",
         icon: "mdi-file-excel-outline",
       },
-      { label: "Cảnh báo tồn kho", to: "/alerts", icon: "mdi-alert-outline" },
       {
         label: "Nhân viên",
         to: "/employees",
diff --git a/src/components/InventoryCountCreateModal.vue b/src/components/InventoryCountCreateModal.vue
new file mode 100644
index 0000000..4397485
--- /dev/null
+++ b/src/components/InventoryCountCreateModal.vue
@@ -0,0 +1,246 @@
+<template>
+  <!-- Backdrop (Mờ nền) -->
+  <div 
+    v-if="isOpen" 
+    class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900/50 backdrop-blur-sm transition-opacity"
+  >
+    <!-- Modal Panel -->
+    <div 
+      class="bg-white rounded-xl shadow-xl w-full max-w-lg overflow-hidden transform transition-all"
+    >
+      <!-- Header -->
+      <div class="px-6 py-4 border-b border-gray-100 flex justify-between items-center">
+        <h3 class="text-lg font-semibold text-gray-800">Tạo đợt kiểm kê mới</h3>
+        <button 
+          @click="closeModal" 
+          class="text-gray-400 hover:text-gray-600 transition-colors p-1.5 rounded-full hover:bg-gray-100"
+          :disabled="isSubmitting"
+        >
+          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+
+      <div class="p-6">
+        <form @submit.prevent="handleSubmit">
+          
+          <!-- Kho (Warehouse) - Bắt buộc -->
+          <div class="mb-5">
+            <label class="block text-sm font-medium text-gray-700 mb-1.5">
+              Kho kiểm kê <span class="text-red-500">*</span>
+            </label>
+            <select 
+              v-model="formData.warehouseId"
+              class="w-full border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors bg-white"
+              :class="errors.warehouseId ? 'border-red-500 focus:border-red-500 focus:ring-red-500/20' : 'border-gray-300 focus:border-blue-500'"
+              @change="errors.warehouseId = false"
+            >
+              <option value="" disabled>-- Chọn kho --</option>
+              <option v-for="wh in warehouses" :key="wh.id" :value="wh.id">
+                {{ wh.name }}
+              </option>
+            </select>
+            <!-- Thông báo lỗi validate -->
+            <p v-if="errors.warehouseId" class="text-red-500 text-xs mt-1.5 flex items-center gap-1">
+              <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+              Vui lòng chọn kho để kiểm kê.
+            </p>
+          </div>
+
+          <!-- Phạm vi kiểm kê (Scope) -->
+          <div class="mb-5">
+            <label class="block text-sm font-medium text-gray-700 mb-2">Phạm vi kiểm kê</label>
+            <div class="flex gap-6">
+              <label class="flex items-center cursor-pointer group">
+                <input 
+                  type="radio" 
+                  v-model="formData.scope" 
+                  value="ALL" 
+                  class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500"
+                >
+                <span class="ml-2 text-sm text-gray-700 group-hover:text-blue-600 transition-colors">Kiểm kê toàn bộ</span>
+              </label>
+              <label class="flex items-center cursor-pointer group">
+                <input 
+                  type="radio" 
+                  v-model="formData.scope" 
+                  value="PARTIAL" 
+                  class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500"
+                >
+                <span class="ml-2 text-sm text-gray-700 group-hover:text-blue-600 transition-colors">Theo sản phẩm cụ thể</span>
+              </label>
+            </div>
+          </div>
+
+          <!-- Danh sách sản phẩm (Chỉ hiện nếu chọn PARTIAL) -->
+          <div v-if="formData.scope === 'PARTIAL'" class="mb-5 bg-gray-50/80 p-4 rounded-lg border border-gray-200">
+            <label class="block text-sm font-medium text-gray-700 mb-3">
+              Chọn sản phẩm <span class="text-red-500">*</span>
+            </label>
+            <!-- Wrapper có thanh cuộn nếu danh sách dài -->
+            <div class="max-h-48 overflow-y-auto pr-2 custom-scrollbar">
+              <div 
+                v-for="product in products" 
+                :key="product.id"
+                class="flex items-center py-2 border-b border-gray-100 last:border-0 hover:bg-white transition-colors px-2 rounded"
+              >
+                <input 
+                  type="checkbox" 
+                  :id="`product-${product.id}`"
+                  :value="product.id"
+                  v-model="formData.productIds"
+                  class="w-4 h-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500 cursor-pointer"
+                  @change="errors.productIds = false"
+                >
+                <label :for="`product-${product.id}`" class="ml-3 text-sm text-gray-700 cursor-pointer flex-1 flex justify-between items-center">
+                  <div class="flex flex-col">
+                    <span class="font-medium">{{ product.sku }}</span>
+                    <span class="text-gray-500 text-xs">{{ product.name }}</span>
+                  </div>
+                  <span class="text-gray-500 text-xs bg-gray-100 px-2 py-1 rounded">Tồn: {{ product.stock }}</span>
+                </label>
+              </div>
+            </div>
+            <!-- Thông báo lỗi validate -->
+            <p v-if="errors.productIds" class="text-red-500 text-xs mt-2 flex items-center gap-1">
+               <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+              Vui lòng chọn ít nhất một sản phẩm.
+            </p>
+          </div>
+
+          <!-- Ghi chú -->
+          <div class="mb-2">
+            <label class="block text-sm font-medium text-gray-700 mb-1.5">Ghi chú (Tùy chọn)</label>
+            <textarea 
+              v-model="formData.note"
+              rows="2"
+              class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none"
+              placeholder="Nhập lý do kiểm kê..."
+            ></textarea>
+          </div>
+
+        </form>
+      </div>
+
+      <!-- Footer Actions -->
+      <div class="px-6 py-4 border-t border-gray-100 bg-gray-50 flex justify-end gap-3 rounded-b-xl">
+        <button 
+          type="button"
+          @click="closeModal"
+          class="px-5 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 transition-colors focus:outline-none focus:ring-2 focus:ring-gray-200"
+          :disabled="isSubmitting"
+        >
+          Hủy bỏ
+        </button>
+        
+        <!-- Nút Submit có Loading -->
+        <button 
+          @click="handleSubmit"
+          class="px-5 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 flex items-center justify-center min-w-[130px]"
+          :disabled="isSubmitting"
+        >
+          <svg v-if="isSubmitting" class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" fill="none" viewBox="0 0 24 24">
+            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+          </svg>
+          <span v-if="!isSubmitting">Xác nhận tạo</span>
+          <span v-else>Đang xử lý...</span>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { getWarehouses } from '../services/warehouseService'
+import { getProducts } from '../services/productService'
+
+const props = defineProps({
+  isOpen: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['close', 'submit'])
+
+const warehouses = ref([])
+const products = ref([])
+const isLoading = ref(false)
+const isSubmitting = ref(false)
+
+const formData = reactive({
+  warehouseId: '',
+  scope: 'ALL',
+  productIds: [],
+  note: ''
+})
+
+const errors = reactive({
+  warehouseId: false,
+  productIds: false
+})
+
+const fetchInitialData = async () => {
+  isLoading.value = true
+  try {
+    const warehouseData = await getWarehouses({ status: 'HOAT_DONG' })
+    warehouses.value = warehouseData.content || warehouseData.data || warehouseData
+
+    const productData = await getProducts()
+    products.value = productData.content || productData.data || productData
+  } catch (error) {
+    console.error('Lỗi tải dữ liệu kho/sản phẩm:', error)
+  } finally {
+    isLoading.value = false
+  }
+}
+
+onMounted(() => {
+  fetchInitialData()
+})
+
+const closeModal = () => {
+  if (isSubmitting.value) return
+  formData.warehouseId = ''
+  formData.scope = 'ALL'
+  formData.productIds = []
+  formData.note = ''
+  errors.warehouseId = false
+  errors.productIds = false
+  emit('close')
+}
+
+const handleSubmit = async () => {
+  errors.warehouseId = !formData.warehouseId
+  errors.productIds = formData.scope === 'PARTIAL' && formData.productIds.length === 0
+
+  if (errors.warehouseId || errors.productIds) return
+
+  isSubmitting.value = true
+  try {
+    emit('submit', { ...formData })
+  } finally {
+    isSubmitting.value = false
+  }
+}
+</script>
+
+<style scoped>
+/* CSS Custom Scrollbar cho danh sách sản phẩm (chỉ hiển thị trên trình duyệt Webkit) */
+.custom-scrollbar::-webkit-scrollbar {
+  width: 5px;
+}
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: transparent; 
+}
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background: #cbd5e1; 
+  border-radius: 4px;
+}
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: #94a3b8; 
+}
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index b466e62..8bdfa83 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -15,6 +15,7 @@ import ApprovalsView from '../views/ApprovalsView.vue'
 import PendingExportApprovalsView from '../views/PendingExportApprovalsView.vue'
 import ImportExcelView from '../views/ImportExcelView.vue'
 import AlertsView from '../views/AlertsView.vue'
+import InventoryCountList from '../views/InventoryCountList.vue'
 import UsersView from '../views/UsersView.vue'
 import EmployeeListView from '../views/employees/EmployeeListView.vue'
 import CategoryListView from '../views/categories/CategoryListView.vue'
@@ -29,6 +30,8 @@ const routes = [
   { path: '/warehouses', component: WarehousesView, meta: { title: 'Kho hàng' } },
   { path: '/inventory', component: InventoryView, meta: { title: 'Tồn kho' } },
   { path: '/inventory-transactions', component: InventoryTransactionsView, meta: { title: 'Lịch sử giao dịch' } },
+  { path: '/inventory-counts', component: InventoryCountList, meta: { title: 'Kiểm kê kho' } },
+  { path: '/inventory/:id', name: 'InventoryDetail', component: () => import('../views/InventoryCountDetailView.vue') },
   { path: '/stock-in', component: StockDocumentsView, props: { type: 'in' }, meta: { title: 'Phiếu nhập kho' } },
   { path: '/stock-in/create', component: StockDocumentCreateView, props: { type: 'in' }, meta: { title: 'Tạo phiếu nhập kho' } },
   { path: '/stock-in/:id/edit', component: StockDocumentCreateView, props: route => ({ id: route.params.id, type: 'in', mode: 'edit' }), meta: { title: 'Chỉnh sửa phiếu nhập kho' } },
@@ -44,7 +47,6 @@ const routes = [
   { path: '/alerts', component: AlertsView, meta: { title: 'Cảnh báo tồn kho' } },
   { path: '/employees', component: EmployeeListView, meta: { title: 'Nhân viên' } },
   { path: '/users', component: UsersView, meta: { title: 'Nhân viên & phân quyền' } },
-
 ]
 
 const router = createRouter({
diff --git a/src/services/excelImportService.js b/src/services/excelImportService.js
index 89efc87..ea77cf6 100644
--- a/src/services/excelImportService.js
+++ b/src/services/excelImportService.js
@@ -47,7 +47,7 @@ export async function createImportSession(file, loaiImport, warehouseId) {
     formData.append('file', file)
     formData.append('loaiImport', loaiImport)
     if (warehouseId) {
-      formData.append('khoId', warehouseId)
+      formData.append('khoId', warehouseId) 
     }
 
     const { data } = await excelImportClient.post('/api/excel-imports', formData, {
diff --git a/src/views/ImportExcelView.vue b/src/views/ImportExcelView.vue
index 61a2030..b0761a4 100644
--- a/src/views/ImportExcelView.vue
+++ b/src/views/ImportExcelView.vue
@@ -1,8 +1,167 @@
+<template>
+  <div class="container mx-auto px-4 py-6 max-w-6xl">
+    <PageHeader title="Import dữ liệu Excel" description="Nhập dữ liệu danh sách sản phẩm hoặc sản phẩm kèm tồn kho đầu kỳ bằng file mẫu chuẩn." />
+
+    <!-- Message Alert Area -->
+    <div class="mt-4 mb-6">
+      <div v-if="globalError" class="p-4 text-red-800 rounded-lg bg-red-50 border border-red-200 flex items-start gap-3 shadow-sm animate-fade-in">
+        <svg class="w-6 h-6 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+        <div><span class="font-bold">Lỗi: </span><span>{{ globalError }}</span></div>
+      </div>
+      <div v-if="globalSuccess" class="p-4 text-green-800 rounded-lg bg-green-50 border border-green-200 flex items-start gap-3 shadow-sm animate-fade-in">
+        <svg class="w-6 h-6 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+        <div><span class="font-bold">Thành công: </span><span>{{ globalSuccess }}</span></div>
+      </div>
+    </div>
+
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+      
+      <!-- PHẦN 1: TẢI MẪU & CẤU HÌNH -->
+      <div class="md:col-span-1 space-y-6">
+        <div class="bg-white p-5 rounded-xl shadow-sm border border-gray-200">
+          <h3 class="text-lg font-bold text-gray-800 mb-2">1. Tải file mẫu</h3>
+          <p class="text-sm text-gray-500 mb-4">Sử dụng đúng template chuẩn (bản sạch) để dữ liệu được xử lý mượt mà nhất.</p>
+          <button 
+            class="w-full py-2.5 bg-white border border-gray-300 text-gray-700 font-semibold rounded-lg hover:bg-gray-50 transition-colors flex justify-center items-center gap-2 disabled:opacity-50 shadow-sm"
+            :disabled="isDownloading"
+            @click="handleDownloadTemplate"
+          >
+            <svg v-if="isDownloading" class="animate-spin h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
+            <svg v-else class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
+            Tải Template
+          </button>
+        </div>
+
+        <!-- Tùy chọn Import đã được di chuyển sang phía trên khu vực Upload -->
+      </div>
+
+      <!-- PHẦN 2: UPLOAD & KẾT QUẢ -->
+      <div class="md:col-span-2">
+        <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-200 h-full flex flex-col">
+          <h3 class="text-lg font-bold text-gray-800 mb-2">2. Upload & Xác nhận</h3>
+          <p class="text-sm text-gray-500 mb-6">Hệ thống tự động chạy Validation ngay sau khi file được tải lên.</p>
+
+          <!-- Dropdown Loại dữ liệu Import -->
+          <div v-if="!validationResult" class="mb-4">
+            <label class="block text-sm font-bold text-gray-700 mb-1">
+              Loại dữ liệu Import <span class="text-red-500">*</span>
+            </label>
+            <select v-model="importType" class="w-full border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm py-2.5 px-3 border bg-white" :disabled="isProcessing" :class="{'border-red-300': globalError && !importType}">
+              <option value="" disabled>-- Vui lòng chọn loại dữ liệu trước khi tải file --</option>
+              <option value="PRODUCT_ONLY">Sản phẩm</option>
+              <option value="PRODUCT_WITH_OPENING_STOCK">Tồn đầu kỳ</option>
+            </select>
+            
+            <div v-if="importType === 'PRODUCT_WITH_OPENING_STOCK'" class="mt-4">
+              <label class="block text-sm font-medium text-gray-700 mb-1">Kho nhận tồn đầu kỳ (tùy chọn)</label>
+              <select v-model="selectedWarehouseId" class="w-full border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm py-2.5 px-3 border bg-white" :disabled="isProcessing">
+                <option value="">-- Để trống nếu file đã có mã kho --</option>
+                <option v-for="w in warehouses" :key="w.id" :value="w.id">{{ w.tenKho }}</option>
+              </select>
+            </div>
+          </div>
+
+          <!-- Upload Area (Chỉ hiện khi chưa có kết quả thành công/lỗi nặng) -->
+          <div 
+            v-if="!validationResult"
+            class="border-2 border-dashed rounded-xl p-10 text-center transition-colors mb-6"
+            :class="isDragging ? 'border-blue-500 bg-blue-50' : 'border-gray-300 hover:bg-gray-50'"
+            @dragover.prevent="isDragging = true"
+            @dragleave.prevent="isDragging = false"
+            @drop.prevent="handleDrop"
+          >
+            <div v-if="isProcessing" class="flex flex-col items-center justify-center">
+              <div class="animate-spin rounded-full h-10 w-10 border-b-2 border-blue-600 mb-4"></div>
+              <p class="text-blue-700 font-semibold text-lg">{{ processingStatusText }}</p>
+            </div>
+            <div v-else>
+              <svg class="mx-auto h-12 w-12 text-gray-400 mb-4" stroke="currentColor" fill="none" viewBox="0 0 48 48">
+                <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+              </svg>
+              <div class="text-base text-gray-600">
+                <label for="file-upload" class="relative cursor-pointer bg-white rounded-md font-semibold text-blue-600 hover:text-blue-500 focus-within:outline-none">
+                  <span>Chọn file Excel (.xlsx)</span>
+                  <input id="file-upload" ref="fileInput" type="file" accept=".xlsx" class="sr-only" @change="onFileChange">
+                </label>
+                <p class="pl-1 inline">hoặc kéo thả vào đây</p>
+              </div>
+            </div>
+          </div>
+
+          <!-- NẾU FILE HỢP LỆ (Thành công -> Chốt) -->
+          <div v-if="validationResult?.valid" class="bg-green-50 rounded-xl p-6 border border-green-200 mt-auto shadow-inner">
+            <div class="flex items-center gap-4 mb-6">
+              <div class="bg-green-100 p-3 rounded-full"><svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg></div>
+              <div>
+                <h4 class="text-green-800 font-bold text-lg">Dữ liệu hoàn toàn hợp lệ!</h4>
+                <p class="text-green-700">Sẵn sàng nhập <span class="font-bold text-lg">{{ validationResult.soDongHopLe }}</span> dòng dữ liệu vào hệ thống.</p>
+              </div>
+            </div>
+            <button 
+              @click="handleFinalImport"
+              class="w-full py-3.5 bg-green-600 text-white font-bold text-lg rounded-lg hover:bg-green-700 transition-colors shadow-md flex justify-center items-center gap-2"
+              :disabled="isApplying"
+            >
+              <svg v-if="isApplying" class="animate-spin h-5 w-5" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
+              Xác nhận Import Dữ Liệu
+            </button>
+            <div class="mt-4 text-center">
+              <button @click="resetFlow" class="text-sm text-gray-500 hover:text-gray-700 underline">Hủy bỏ / Chọn file khác</button>
+            </div>
+          </div>
+
+          <!-- NẾU FILE CÓ LỖI -->
+          <div v-if="validationResult && !validationResult.valid" class="flex flex-col h-full">
+            <div class="bg-red-50 border border-red-200 rounded-t-lg p-4 flex justify-between items-center">
+              <span class="font-bold text-red-800 flex items-center gap-2 text-base">
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
+                Phát hiện {{ validationResult.soDongLoi }} dòng lỗi
+              </span>
+              <button @click="resetFlow" class="px-4 py-1.5 text-sm font-semibold text-gray-700 bg-white border border-gray-300 rounded hover:bg-gray-50 shadow-sm">Thử lại file khác</button>
+            </div>
+            
+            <div class="overflow-x-auto border-x border-b border-red-200 rounded-b-lg">
+              <table class="min-w-full divide-y divide-gray-200">
+                <thead class="bg-red-100/50">
+                  <tr>
+                    <th class="px-4 py-3 text-left text-xs font-bold text-gray-700 uppercase">Dòng</th>
+                    <th class="px-4 py-3 text-left text-xs font-bold text-gray-700 uppercase">Cột lỗi</th>
+                    <th class="px-4 py-3 text-left text-xs font-bold text-gray-700 uppercase">Chi tiết</th>
+                  </tr>
+                </thead>
+                <tbody class="bg-white divide-y divide-gray-200">
+                  <tr v-for="err in errorsResponse?.content" :key="err.id" class="text-sm">
+                    <td class="px-4 py-3 font-semibold text-gray-900">#{{ err.rowNumber }}</td>
+                    <td class="px-4 py-3 text-red-600 font-bold bg-red-50/30">{{ err.columnName }}</td>
+                    <td class="px-4 py-3 text-gray-700">
+                      <span class="block mb-1">{{ err.message }}</span>
+                      <span class="text-xs text-gray-500 block">Dữ liệu gốc: <code class="bg-gray-100 px-1 py-0.5 rounded">{{ err.originalValue || '(trống)' }}</code></span>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+              
+              <!-- Phân trang lỗi -->
+              <div class="bg-gray-50 px-4 py-3 flex justify-between items-center border-t border-gray-200" v-if="errorsResponse">
+                <span class="text-xs text-gray-500 font-medium">Trang {{ errorsResponse.page + 1 }}/{{ errorsResponse.totalPages }}</span>
+                <div class="flex gap-2">
+                  <button class="px-3 py-1.5 text-xs font-semibold border rounded bg-white hover:bg-gray-100 disabled:opacity-50" :disabled="errorsResponse.page === 0" @click="fetchErrors(errorsResponse.page - 1)">Trang trước</button>
+                  <button class="px-3 py-1.5 text-xs font-semibold border rounded bg-white hover:bg-gray-100 disabled:opacity-50" :disabled="errorsResponse.page >= errorsResponse.totalPages - 1" @click="fetchErrors(errorsResponse.page + 1)">Trang sau</button>
+                </div>
+              </div>
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
 <script setup>
-import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import PageHeader from '../components/PageHeader.vue'
-import ConfirmDialog from '../components/ConfirmDialog.vue'
 import { getWarehouses } from '../services/warehouseService'
 import {
   downloadTemplate,
@@ -15,698 +174,156 @@ import {
 
 const router = useRouter()
 
-// Basic config & warehouse states
-const importType = ref('PRODUCT_ONLY') // PRODUCT_ONLY or PRODUCT_WITH_OPENING_STOCK
+// -- States --
+const importType = ref('')
 const warehouses = ref([])
 const selectedWarehouseId = ref('')
-const isLoadingWarehouses = ref(false)
-const warehouseError = ref('')
 
-// File picker states
+const isDragging = ref(false)
 const fileInput = ref(null)
 const selectedFile = ref(null)
-const fileError = ref('')
 
-// Step statuses & session workflow states
-const isDownloadingTemplate = ref(false)
-const isCreatingSession = ref(false)
-const isValidating = ref(false)
-const isConfirming = ref(false)
+const isDownloading = ref(false)
+const isProcessing = ref(false)
 const isApplying = ref(false)
+const processingStatusText = ref('')
 
-// Session detail states
-const importId = ref(null)
-const sessionSummary = ref(null)
-const validationResult = ref(null)
-const confirmResult = ref(null)
-const applyResult = ref(null)
-
-// Error table states (Step 4)
-const errorsResponse = ref(null)
-const errorPage = ref(0)
-const errorSize = ref(20)
-const isLoadingErrors = ref(false)
-
-// Warning / Success messages
 const globalError = ref('')
-const globalWarning = ref('')
 const globalSuccess = ref('')
-const showApplyConfirm = ref(false)
-
-// Step status computation
-const step1Status = computed(() => 'completed')
-
-const step2Status = computed(() => {
-  return selectedFile.value ? 'completed' : 'active'
-})
-
-const step3Status = computed(() => {
-  if (applyResult.value || confirmResult.value || validationResult.value || importId.value) return 'completed'
-  return selectedFile.value ? 'active' : 'locked'
-})
-
-const step4Status = computed(() => {
-  if (applyResult.value || confirmResult.value || (validationResult.value && validationResult.value.valid)) return 'completed'
-  if (validationResult.value && !validationResult.value.valid) return 'failed'
-  return (importId.value && selectedFile.value) ? 'active' : 'locked'
-})
 
-const step5Status = computed(() => {
-  if (applyResult.value || confirmResult.value) return 'completed'
-  return (validationResult.value && validationResult.value.valid && selectedFile.value) ? 'active' : 'locked'
-})
-
-const step6Status = computed(() => {
-  if (applyResult.value) return 'completed'
-  return (confirmResult.value && selectedFile.value) ? 'active' : 'locked'
-})
+const importId = ref(null)
+const validationResult = ref(null)
+const errorsResponse = ref(null)
 
-// Fetch warehouse options
-async function fetchWarehouseList() {
-  isLoadingWarehouses.value = true
-  warehouseError.value = ''
+// -- Lifecycle --
+onMounted(async () => {
   try {
     const list = await getWarehouses({ status: 'HOAT_DONG' })
     warehouses.value = list || []
-    warehouseError.value = ''
   } catch (error) {
-    warehouseError.value = error.message || 'Không thể tải danh sách kho hàng. Vui lòng thử lại.'
-  } finally {
-    isLoadingWarehouses.value = false
-  }
-}
-
-onMounted(() => {
-  fetchWarehouseList()
-})
-
-// File handlers
-function onFileChange(event) {
-  const files = event.target.files
-  fileError.value = ''
-  globalError.value = ''
-  globalSuccess.value = ''
-
-  if (!files || files.length === 0) {
-    selectedFile.value = null
-    event.target.value = ''
-    return
-  }
-
-  const file = files[0]
-  if (!file.name.toLowerCase().endsWith('.xlsx')) {
-    fileError.value = 'Chỉ chấp nhận file định dạng .xlsx'
-    selectedFile.value = null
-    event.target.value = ''
-    return
-  }
-
-  selectedFile.value = file
-}
-
-function formatFileSize(bytes) {
-  if (bytes === 0) return '0 Bytes'
-  const k = 1024
-  const sizes = ['Bytes', 'KB', 'MB']
-  const i = Math.floor(Math.log(bytes) / Math.log(k))
-  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
-}
-
-// Watchers for resetting flow on configuration/file change
-watch(selectedFile, (newVal, oldVal) => {
-  if (!newVal && fileInput.value) {
-    fileInput.value.value = ''
-  }
-  if (importId.value && newVal !== oldVal) {
-    resetWorkflowState('File đã thay đổi, vui lòng validate lại từ đầu.')
-  }
-})
-
-watch([importType, selectedWarehouseId], () => {
-  if (importId.value) {
-    resetWorkflowState('Cấu hình import đã thay đổi, vui lòng khởi tạo phiên và validate lại từ đầu.')
+    globalError.value = 'Không tải được danh sách kho.'
   }
 })
 
-function resetWorkflowState(warningMessage) {
+// -- Utils --
+function resetFlow() {
+  selectedFile.value = null
+  if (fileInput.value) fileInput.value.value = ''
   importId.value = null
-  sessionSummary.value = null
   validationResult.value = null
   errorsResponse.value = null
-  errorPage.value = 0
-  confirmResult.value = null
-  applyResult.value = null
-  globalWarning.value = warningMessage
-  globalSuccess.value = ''
   globalError.value = ''
+  globalSuccess.value = ''
 }
 
-// Step 1: Download template
+// -- Handlers --
 async function handleDownloadTemplate() {
-  isDownloadingTemplate.value = true
+  isDownloading.value = true
   globalError.value = ''
-  globalSuccess.value = ''
   try {
     const { data, filename } = await downloadTemplate()
     const blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
     const url = window.URL.createObjectURL(blob)
     const link = document.createElement('a')
     link.href = url
-    link.setAttribute('download', filename || 'SME_StockSense_Import_Template_v1.xlsx')
+    // Cập nhật tên template sạch như yêu cầu T238
+    link.setAttribute('download', filename || 'Template_SME_StockSense_Clean.xlsx')
     document.body.appendChild(link)
     link.click()
     link.remove()
     window.URL.revokeObjectURL(url)
-    globalSuccess.value = 'Tải file mẫu Excel thành công.'
-  } catch (error) {
-    globalError.value = error.message || 'Không thể tải file mẫu.'
-    if (error.status === 401) router.replace('/login')
+  } catch (err) {
+    globalError.value = 'Tải file mẫu thất bại. Vui lòng thử lại.'
   } finally {
-    isDownloadingTemplate.value = false
+    isDownloading.value = false
   }
 }
 
-// Step 3: Create import session
-async function handleCreateSession() {
-  if (!selectedFile.value) {
-    globalError.value = 'Vui lòng chọn file Excel trước.'
-    return
-  }
-
-  isCreatingSession.value = true
-  globalError.value = ''
-  globalSuccess.value = ''
-  globalWarning.value = ''
-
-  try {
-    const data = await createImportSession(
-      selectedFile.value,
-      importType.value,
-      selectedWarehouseId.value || null
-    )
-    importId.value = data.id
-    sessionSummary.value = data
-    globalSuccess.value = `Khởi tạo phiên import thành công (ID: ${data.id}). Hãy thực hiện Validate ở bước tiếp theo.`
-  } catch (error) {
-    globalError.value = error.message || 'Không thể khởi tạo phiên import.'
-    if (error.status === 401) router.replace('/login')
-  } finally {
-    isCreatingSession.value = false
-  }
+function handleDrop(e) {
+  isDragging.value = false
+  const files = e.dataTransfer.files
+  if (files.length > 0) processSelectedFile(files[0])
 }
 
-// Step 4: Validate and fetch errors
-async function handleValidateSession() {
-  if (!importId.value || !selectedFile.value) return
+function onFileChange(e) {
+  const files = e.target.files
+  if (files.length > 0) processSelectedFile(files[0])
+}
 
-  isValidating.value = true
-  globalError.value = ''
-  globalSuccess.value = ''
-  globalWarning.value = ''
-  errorsResponse.value = null
-  errorPage.value = 0
+// KẾT HỢP LUỒNG VALIDATE NGAY LÚC UPLOAD
+async function processSelectedFile(file) {
+  resetFlow()
+  if (!importType.value) {
+    globalError.value = 'Vui lòng chọn "Loại dữ liệu Import" trước khi tải file lên.'
+    return
+  }
+  if (!file.name.toLowerCase().endsWith('.xlsx')) {
+    globalError.value = 'Hệ thống chỉ chấp nhận định dạng Excel (.xlsx)'
+    return
+  }
+  selectedFile.value = file
+  isProcessing.value = true
 
   try {
-    const response = await validateImportSession(
-      importId.value,
-      selectedFile.value,
-      importType.value,
-      selectedWarehouseId.value || null
-    )
-    validationResult.value = response
-
-    if (response.soDongLoi > 0 || !response.valid) {
-      globalError.value = `Dữ liệu file Excel có ${response.soDongLoi} dòng lỗi. Vui lòng xem bảng lỗi bên dưới.`
+    // 1. Khởi tạo phiên ngầm
+    processingStatusText.value = 'Đang đẩy file lên máy chủ...'
+    const sessionInfo = await createImportSession(file, importType.value, selectedWarehouseId.value || null)
+    importId.value = sessionInfo.id
+
+    // 2. Tự động gọi Validate ngầm
+    processingStatusText.value = 'Đang kiểm tra và xác thực dữ liệu...'
+    const validation = await validateImportSession(importId.value, file, importType.value, selectedWarehouseId.value || null)
+    validationResult.value = validation
+
+    // 3. Phân nhánh kết quả
+    if (validation.soDongLoi > 0 || !validation.valid) {
       await fetchErrors(0)
-    } else {
-      globalSuccess.value = 'Tất cả dòng dữ liệu hợp lệ! Sẵn sàng xác nhận để import.'
     }
-  } catch (error) {
-    globalError.value = error.message || 'Không thể kiểm tra dữ liệu file Excel.'
-    if (error.status === 401) router.replace('/login')
+  } catch (err) {
+    globalError.value = err.message || 'Lỗi xử lý file Excel. Vui lòng kiểm tra lại.'
+    if (err.status === 401) router.replace('/login')
   } finally {
-    isValidating.value = false
+    isProcessing.value = false
   }
 }
 
-// Fetch paginated errors
 async function fetchErrors(page = 0) {
-  if (!importId.value || !selectedFile.value) return
-  isLoadingErrors.value = true
+  if (!importId.value) return
   try {
-    const data = await getSessionErrors(importId.value, page, errorSize.value)
+    const data = await getSessionErrors(importId.value, page, 20)
     errorsResponse.value = data
-    errorPage.value = page
-  } catch (error) {
-    globalError.value = error.message || 'Không thể tải danh sách lỗi validation.'
-    if (error.status === 401) router.replace('/login')
-  } finally {
-    isLoadingErrors.value = false
+  } catch (err) {
+    globalError.value = 'Không tải được chi tiết lỗi.'
   }
 }
 
-// Step 5: Confirm import
-async function handleConfirmSession() {
+// KẾT HỢP LUỒNG CONFIRM & APPLY VÀO 1 NÚT XÁC NHẬN
+async function handleFinalImport() {
   if (!importId.value || !selectedFile.value) return
-
-  isConfirming.value = true
-  globalError.value = ''
-  globalSuccess.value = ''
-
-  try {
-    const response = await confirmImportSession(importId.value)
-    confirmResult.value = response
-    globalSuccess.value = 'Xác nhận phiên import thành công. Bạn có thể tiến hành Apply dữ liệu.'
-  } catch (error) {
-    globalError.value = error.message || 'Không thể xác nhận phiên import.'
-    if (error.status === 401) router.replace('/login')
-  } finally {
-    isConfirming.value = false
-  }
-}
-
-// Step 6: Apply import
-async function handleApplySession() {
-  showApplyConfirm.value = false
-  if (!importId.value || !selectedFile.value) return
-
   isApplying.value = true
   globalError.value = ''
-  globalSuccess.value = ''
-
   try {
-    const response = await applyImportSession(importId.value, selectedFile.value)
-    applyResult.value = response
-    globalSuccess.value = 'Import dữ liệu Excel vào hệ thống thành công!'
-  } catch (error) {
-    globalError.value = error.message || 'Không thể áp dụng dữ liệu import.'
-    if (error.status === 401) router.replace('/login')
+    // Gọi Confirm
+    await confirmImportSession(importId.value)
+    // Gọi Apply ngay sau đó
+    await applyImportSession(importId.value, selectedFile.value)
+    
+    globalSuccess.value = 'Tích hợp dữ liệu vào hệ thống THÀNH CÔNG!'
+    validationResult.value = null // Ẩn nút xác nhận
+    selectedFile.value = null
+  } catch (err) {
+    globalError.value = err.message || 'Lỗi khi đồng bộ dữ liệu vào Database.'
   } finally {
     isApplying.value = false
   }
 }
-
-// Reset everything to start fresh
-function handleResetAll() {
-  selectedFile.value = null
-  selectedWarehouseId.value = ''
-  if (fileInput.value) fileInput.value.value = ''
-  resetWorkflowState('')
-}
-
-function formatDate(dateStr) {
-  if (!dateStr) return ''
-  try {
-    return new Date(dateStr).toLocaleString('vi-VN')
-  } catch (e) {
-    return dateStr
-  }
-}
 </script>
 
-<template>
-  <div class="page-shell">
-    <PageHeader title="Import dữ liệu Excel" description="Nhập dữ liệu danh sách sản phẩm hoặc sản phẩm kèm tồn kho đầu kỳ bằng file mẫu Excel." />
-
-    <!-- Message Alert Area -->
-    <div class="mt-4">
-      <div v-if="globalError" class="p-4 mb-4 text-red-800 rounded-lg bg-red-50 border border-red-200 flex items-start gap-2 shadow-sm animate-fade-in">
-        <i class="mdi mdi-alert-circle-outline text-lg mt-0.5"></i>
-        <div>
-          <span class="font-bold">Lỗi: </span>
-          <span>{{ globalError }}</span>
-        </div>
-      </div>
-
-      <div v-if="globalWarning" class="p-4 mb-4 text-yellow-800 rounded-lg bg-yellow-50 border border-yellow-200 flex items-start gap-2 shadow-sm animate-fade-in">
-        <i class="mdi mdi-alert-outline text-lg mt-0.5"></i>
-        <div>
-          <span class="font-bold">Cảnh báo: </span>
-          <span>{{ globalWarning }}</span>
-        </div>
-      </div>
-
-      <div v-if="globalSuccess" class="p-4 mb-4 text-green-800 rounded-lg bg-green-50 border border-green-200 flex items-start gap-2 shadow-sm animate-fade-in">
-        <i class="mdi mdi-check-circle-outline text-lg mt-0.5"></i>
-        <div>
-          <span class="font-bold">Thành công: </span>
-          <span>{{ globalSuccess }}</span>
-        </div>
-      </div>
-    </div>
-
-    <!-- Stepper Workflow -->
-    <div class="mt-6 flex flex-col gap-6">
-
-      <!-- Step 1: Download Template -->
-      <div class="card card-pad step-card" :class="[step1Status]">
-        <div class="flex items-start gap-4">
-          <div class="step-number" :class="[step1Status]">
-            <i class="mdi mdi-check"></i>
-          </div>
-          <div class="flex-1">
-            <h3 class="section-title text-slate-800 flex items-center gap-2">
-              Bước 1 — Tải File Mẫu Excel
-            </h3>
-            <p class="muted mt-1">Dùng file mẫu chuẩn để nhập sản phẩm hoặc sản phẩm kèm tồn kho đầu kỳ.</p>
-            <div class="mt-3">
-              <button class="btn btn-primary" :disabled="isDownloadingTemplate" @click="handleDownloadTemplate">
-                <i v-if="isDownloadingTemplate" class="mdi mdi-loading mdi-spin"></i>
-                <i v-else class="mdi mdi-download"></i>
-                Tải file mẫu Excel
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Step 2: Setup Import -->
-      <div class="card card-pad step-card" :class="[step2Status]">
-        <div class="flex items-start gap-4">
-          <div class="step-number" :class="[step2Status]">
-            <i v-if="step2Status === 'completed'" class="mdi mdi-check"></i>
-            <span v-else>2</span>
-          </div>
-          <div class="flex-1">
-            <h3 class="section-title text-slate-800">Bước 2 — Cấu hình & Chọn File</h3>
-            <p class="muted mt-1 mb-4">Lựa chọn loại dữ liệu import, kho hàng (nếu kèm tồn kho) và tải file lên.</p>
-
-            <div class="grid grid-2 md:grid-cols-2 gap-4">
-              <!-- Select Import Type -->
-              <div class="field">
-                <label>Loại import *</label>
-                <select v-model="importType" class="select" :disabled="isCreatingSession || isValidating || isConfirming || isApplying || applyResult">
-                  <option value="PRODUCT_ONLY">Chỉ sản phẩm (PRODUCT_ONLY)</option>
-                  <option value="PRODUCT_WITH_OPENING_STOCK">Sản phẩm + tồn đầu kỳ (PRODUCT_WITH_OPENING_STOCK)</option>
-                </select>
-              </div>
-
-              <!-- Select Warehouse if Required -->
-              <div v-if="importType === 'PRODUCT_WITH_OPENING_STOCK'" class="field">
-                <label>Kho nhận hàng đầu kỳ</label>
-                <select v-model="selectedWarehouseId" class="select" :disabled="isLoadingWarehouses || isCreatingSession || isValidating || isConfirming || isApplying || applyResult">
-                  <option value="">-- Chọn kho hàng nhận tồn đầu kỳ --</option>
-                  <option v-for="w in warehouses" :key="w.id" :value="w.id">{{ w.tenKho }} ({{ w.maKho }})</option>
-                </select>
-                <small class="text-slate-400 mt-1 block">Có thể để trống nếu file tồn đầu kỳ đã có mã kho theo từng dòng.</small>
-                <small v-if="isLoadingWarehouses" class="text-slate-400">Đang tải danh sách kho hàng...</small>
-                <small v-if="warehouseError" class="text-red-600 font-semibold mt-1 block">{{ warehouseError }}</small>
-              </div>
-            </div>
-
-            <!-- File Upload -->
-            <div class="field mt-4">
-              <label>Chọn file dữ liệu Excel (.xlsx) *</label>
-              <div class="flex flex-wrap items-center gap-3">
-                <button class="btn btn-secondary" type="button" :disabled="isCreatingSession || isValidating || isConfirming || isApplying || applyResult" @click="fileInput.click()">
-                  <i class="mdi mdi-file-excel-outline"></i>
-                  Chọn file từ máy tính
-                </button>
-                <input ref="fileInput" type="file" accept=".xlsx" class="hidden" @change="onFileChange" />
-
-                <div v-if="selectedFile" class="flex items-center gap-2 p-2 bg-slate-100 rounded-md border border-slate-200">
-                  <i class="mdi mdi-file-check-outline text-green-600 text-lg"></i>
-                  <span class="text-sm font-semibold text-slate-700">{{ selectedFile.name }} ({{ formatFileSize(selectedFile.size) }})</span>
-                </div>
-                <span v-else class="text-sm text-slate-400">Chưa có file nào được chọn</span>
-              </div>
-              <small v-if="fileError" class="text-red-600 font-semibold mt-1 block">{{ fileError }}</small>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Step 3: Create Session -->
-      <div class="card card-pad step-card" :class="[step3Status]">
-        <div class="flex items-start gap-4">
-          <div class="step-number" :class="[step3Status]">
-            <i v-if="step3Status === 'completed'" class="mdi mdi-check"></i>
-            <span v-else>3</span>
-          </div>
-          <div class="flex-1">
-            <h3 class="section-title text-slate-800">Bước 3 — Tạo Phiên Import</h3>
-            <p class="muted mt-1">Đăng ký file và loại import với hệ thống để khởi tạo mã phiên.</p>
-
-            <!-- Session details if created -->
-            <div v-if="sessionSummary" class="mt-3 p-3 bg-blue-50 border border-blue-200 rounded-md text-sm">
-              <div class="font-bold text-blue-900 mb-1">Chi tiết phiên import khởi tạo:</div>
-              <div class="grid grid-2 gap-x-4 gap-y-1">
-                <div>Mã phiên import (ID): <span class="font-semibold">{{ sessionSummary.id }}</span></div>
-                <div>Tên file gốc: <span class="font-semibold">{{ sessionSummary.tenFile }}</span></div>
-                <div>Loại import: <span class="font-semibold">{{ sessionSummary.loaiImport }}</span></div>
-                <div>Trạng thái:
-                  <span class="font-bold px-2 py-0.5 rounded-full text-xs" :class="sessionSummary.trangThai === 'CHO_XU_LY' ? 'bg-yellow-100 text-yellow-800' : 'bg-slate-100 text-slate-800'">
-                    {{ sessionSummary.trangThai }}
-                  </span>
-                </div>
-              </div>
-            </div>
-
-            <div class="mt-3">
-              <button class="btn btn-primary" :disabled="step3Status !== 'active' || isCreatingSession || !selectedFile" @click="handleCreateSession">
-                <i v-if="isCreatingSession" class="mdi mdi-loading mdi-spin"></i>
-                Khởi tạo phiên import
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Step 4: Validate and Persist Errors -->
-      <div class="card card-pad step-card" :class="[step4Status]">
-        <div class="flex items-start gap-4">
-          <div class="step-number" :class="[step4Status]">
-            <i v-if="step4Status === 'completed'" class="mdi mdi-check"></i>
-            <i v-else-if="step4Status === 'failed'" class="mdi mdi-close-circle-outline"></i>
-            <span v-else>4</span>
-          </div>
-          <div class="flex-1">
-            <h3 class="section-title text-slate-800">Bước 4 — Kiểm Tra Dữ Liệu (Validate)</h3>
-            <p class="muted mt-1">Hệ thống sẽ kiểm tra định dạng dữ liệu, sự tồn tại của mã sản phẩm, danh mục và kho hàng.</p>
-
-            <!-- Validation Summary -->
-            <div v-if="validationResult" class="mt-3 p-3 rounded-md text-sm border" :class="validationResult.valid ? 'bg-green-50 border-green-200' : 'bg-red-50 border-red-200'">
-              <div class="font-bold mb-1" :class="validationResult.valid ? 'text-green-900' : 'text-red-900'">Kết quả kiểm tra dữ liệu:</div>
-              <div class="grid grid-4 gap-2">
-                <div>Tổng số dòng: <span class="font-bold">{{ validationResult.tongSoDong }}</span></div>
-                <div>Số dòng hợp lệ: <span class="font-bold text-green-700">{{ validationResult.soDongHopLe }}</span></div>
-                <div>Số dòng lỗi: <span class="font-bold text-red-700">{{ validationResult.soDongLoi }}</span></div>
-                <div>Kết luận:
-                  <span class="font-bold" :class="validationResult.valid ? 'text-green-700' : 'text-red-700'">
-                    {{ validationResult.valid ? 'HỢP LỆ' : 'KHÔNG HỢP LỆ' }}
-                  </span>
-                </div>
-              </div>
-            </div>
-
-            <!-- Action button -->
-            <div class="mt-3">
-              <button class="btn btn-primary" :disabled="step4Status === 'locked' || isValidating || !selectedFile || !importId" @click="handleValidateSession">
-                <i v-if="isValidating" class="mdi mdi-loading mdi-spin"></i>
-                Kiểm tra dữ liệu Excel
-              </button>
-            </div>
-
-            <!-- Error Report Table -->
-            <div v-if="errorsResponse && errorsResponse.content && errorsResponse.content.length > 0" class="mt-4 border border-red-100 rounded-lg overflow-hidden">
-              <div class="bg-red-900 text-white p-3 font-semibold flex items-center gap-2">
-                <i class="mdi mdi-alert-box-outline"></i>
-                Bảng chi tiết các lỗi dữ liệu trong file Excel (Trang {{ errorsResponse.page + 1 }}/{{ errorsResponse.totalPages }})
-              </div>
-
-              <div class="table-wrap">
-                <table class="data-table">
-                  <thead>
-                    <tr>
-                      <th style="width: 80px;">Dòng</th>
-                      <th style="width: 150px;">Cột dữ liệu</th>
-                      <th style="width: 180px;">Giá trị trong file</th>
-                      <th>Chi tiết lỗi</th>
-                      <th>Gợi ý khắc phục</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <tr v-for="err in errorsResponse.content" :key="err.id">
-                      <td class="font-bold text-slate-900">{{ err.rowNumber }}</td>
-                      <td class="text-red-700 font-semibold">{{ err.columnName }}</td>
-                      <td>
-                        <code class="px-1.5 py-0.5 bg-slate-100 border rounded text-xs text-slate-800">{{ err.originalValue === null || err.originalValue === '' ? '(trống)' : err.originalValue }}</code>
-                      </td>
-                      <td class="text-red-600 font-semibold">{{ err.message }}</td>
-                      <td class="text-green-700 font-semibold">{{ err.suggestion || '-' }}</td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-
-              <!-- Pagination controls -->
-              <div class="p-3 bg-slate-50 border-t border-slate-200 flex items-center justify-between">
-                <span class="text-sm text-slate-600">Tìm thấy <span class="font-bold">{{ errorsResponse.totalElements }}</span> lỗi dữ liệu</span>
-                <div class="flex items-center gap-2">
-                  <button class="btn btn-sm" :disabled="errorsResponse.page === 0 || isLoadingErrors" @click="fetchErrors(errorsResponse.page - 1)">
-                    <i class="mdi mdi-chevron-left"></i> Trước
-                  </button>
-                  <span class="text-sm font-semibold">Trang {{ errorsResponse.page + 1 }} / {{ errorsResponse.totalPages }}</span>
-                  <button class="btn btn-sm" :disabled="errorsResponse.page >= errorsResponse.totalPages - 1 || isLoadingErrors" @click="fetchErrors(errorsResponse.page + 1)">
-                    Sau <i class="mdi mdi-chevron-right"></i>
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Step 5: Confirm -->
-      <div class="card card-pad step-card" :class="[step5Status]">
-        <div class="flex items-start gap-4">
-          <div class="step-number" :class="[step5Status]">
-            <i v-if="step5Status === 'completed'" class="mdi mdi-check"></i>
-            <span v-else>5</span>
-          </div>
-          <div class="flex-1">
-            <h3 class="section-title text-slate-800">Bước 5 — Xác Nhận</h3>
-            <p class="muted mt-1">Xác nhận phiên import đã đầy đủ dữ liệu hợp lệ và sẵn sàng tích hợp vào cơ sở dữ liệu.</p>
-
-            <div v-if="confirmResult" class="mt-3 p-3 bg-green-50 border border-green-200 rounded-md text-sm text-green-900">
-              <i class="mdi mdi-check-circle text-green-600 mr-1"></i>
-              Phiên import đã được chuyển sang trạng thái: <span class="font-bold">{{ confirmResult.status }}</span> (Đã Xác Nhận).
-            </div>
-
-            <div class="mt-3">
-              <button class="btn btn-primary" :disabled="step5Status !== 'active' || isConfirming || !selectedFile || !importId" @click="handleConfirmSession">
-                <i v-if="isConfirming" class="mdi mdi-loading mdi-spin"></i>
-                Xác nhận phiên import
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Step 6: Apply -->
-      <div class="card card-pad step-card" :class="[step6Status]">
-        <div class="flex items-start gap-4">
-          <div class="step-number" :class="[step6Status]">
-            <i v-if="step6Status === 'completed'" class="mdi mdi-check"></i>
-            <span v-else>6</span>
-          </div>
-          <div class="flex-1">
-            <h3 class="section-title text-slate-800">Bước 6 — Áp Dụng Dữ Liệu</h3>
-            <p class="muted mt-1">Thực thi lưu chính thức các sản phẩm mới và cập nhật số lượng tồn kho đầu kỳ tương ứng.</p>
-
-            <div v-if="applyResult" class="mt-3 p-4 bg-slate-100 border border-slate-300 rounded-lg text-slate-800">
-              <h4 class="font-bold text-slate-900 mb-2">Kết quả thực thi import thành công:</h4>
-              <ul class="list-disc pl-5 space-y-1 text-sm">
-                <li>Mã import: <span class="font-semibold">{{ applyResult.importId }}</span></li>
-                <li>Trạng thái: <span class="font-bold text-green-700">{{ applyResult.status }}</span></li>
-                <li>Thời gian hoàn thành: <span class="font-semibold">{{ formatDate(applyResult.completedAt) }}</span></li>
-                <li>Tổng số sản phẩm/khoản mục xử lý: <span class="font-semibold">{{ applyResult.totalRows }}</span></li>
-                <li>Số dòng áp dụng thành công: <span class="font-bold text-green-700">{{ applyResult.validRows }}</span></li>
-                <li>Thông điệp: <span class="font-semibold">{{ applyResult.message }}</span></li>
-              </ul>
-            </div>
-
-            <div class="mt-4 flex gap-3">
-              <button class="btn btn-success" :disabled="step6Status !== 'active' || isApplying || !selectedFile || !importId" @click="showApplyConfirm = true">
-                <i v-if="isApplying" class="mdi mdi-loading mdi-spin"></i>
-                Áp dụng import dữ liệu
-              </button>
-
-              <button class="btn" type="button" @click="handleResetAll">
-                Làm mới từ đầu
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-
-    </div>
-
-    <!-- Confirm Apply Dialog -->
-    <ConfirmDialog
-      :open="showApplyConfirm"
-      title="Cảnh báo cập nhật dữ liệu"
-      message="Thao tác này sẽ cập nhật dữ liệu sản phẩm/tồn kho chính thức vào hệ thống và ghi nhận các giao dịch nhập tồn kho đầu kỳ. Bạn có chắc chắn muốn thực hiện?"
-      confirm-text="Đồng ý import"
-      :loading="isApplying"
-      @cancel="showApplyConfirm = false"
-      @confirm="handleApplySession"
-    />
-  </div>
-</template>
-
 <style scoped>
-.step-card {
-  border-left: 4px solid transparent;
-  transition: all 0.2s ease-in-out;
-}
-
-.step-card.completed {
-  border-left-color: var(--success);
-  background-color: #f0fdf4;
-}
-
-.step-card.active {
-  border-left-color: var(--primary);
-  background-color: #ffffff;
-  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08);
-}
-
-.step-card.failed {
-  border-left-color: var(--danger);
-  background-color: #fef2f2;
-}
-
-.step-card.locked {
-  border-left-color: var(--border);
-  opacity: 0.55;
-  background-color: var(--surface-soft);
-}
-
-.step-number {
-  width: 32px;
-  height: 32px;
-  border-radius: 999px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 800;
-  font-size: 14px;
-  flex-shrink: 0;
-}
-
-.step-number.completed {
-  background-color: var(--success);
-  color: #ffffff;
-}
-
-.step-number.active {
-  background-color: var(--primary);
-  color: #ffffff;
-}
-
-.step-number.failed {
-  background-color: var(--danger);
-  color: #ffffff;
-}
-
-.step-number.locked {
-  background-color: var(--border-strong);
-  color: var(--muted);
-}
-
-.mdi-spin {
-  animation: spin 0.8s linear infinite;
-}
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
+/* Tailwind CSS đã bao hàm tất cả, không cần thêm style thủ công */
 .animate-fade-in {
-  animation: fadeIn 0.2s ease-out both;
+  animation: fadeIn 0.3s ease-out both;
 }
-
 @keyframes fadeIn {
   from { opacity: 0; transform: translateY(-4px); }
   to { opacity: 1; transform: translateY(0); }
diff --git a/src/views/InventoryCountDetailView.vue b/src/views/InventoryCountDetailView.vue
new file mode 100644
index 0000000..4a4d314
--- /dev/null
+++ b/src/views/InventoryCountDetailView.vue
@@ -0,0 +1,217 @@
+<template>
+  <div class="container mx-auto px-4 py-6 max-w-7xl">
+    <!-- Header & Action Buttons -->
+    <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4">
+      <div>
+        <h1 class="text-2xl font-bold text-gray-800">
+          Chi tiết kiểm kê: <span class="text-blue-600">{{ inventoryCount?.code || '...' }}</span>
+        </h1>
+        <p class="text-gray-500 mt-1 font-medium">
+          Kho: {{ inventoryCount?.warehouseName }} | Ngày tạo: {{ inventoryCount?.createdAt }}
+        </p>
+      </div>
+
+      <!-- Actions (Chỉ hiện khi chưa chốt/hủy và đã load xong) -->
+      <div class="flex gap-3" v-if="!isLoading && !isLocked">
+        <button 
+          @click="cancelCount" 
+          class="px-4 py-2 bg-white border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center"
+          :disabled="isCancelling || isFinalizing"
+        >
+          <svg v-if="isCancelling" class="animate-spin -ml-1 mr-2 h-4 w-4 text-gray-700" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
+          Hủy đợt kiểm kê
+        </button>
+        <button 
+          @click="finalizeCount" 
+          class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-medium shadow-sm transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center"
+          :disabled="isCancelling || isFinalizing"
+        >
+          <svg v-if="isFinalizing" class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
+          Chốt kiểm kê (Finalize)
+        </button>
+      </div>
+      
+      <!-- Status Badge when locked -->
+      <div v-else-if="!isLoading && isLocked" class="px-4 py-2 rounded-lg font-bold shadow-sm" 
+           :class="inventoryCount?.status === 'COMPLETED' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'">
+        {{ inventoryCount?.status === 'COMPLETED' ? 'Đã Chốt (Đã cập nhật tồn kho)' : 'Đã Hủy' }}
+      </div>
+    </div>
+
+    <!-- UI: Xử lý lỗi API (T236) -->
+    <div v-if="error" class="bg-red-50 border-l-4 border-red-500 p-4 mb-6 rounded-md shadow-sm">
+      <div class="flex">
+        <div class="flex-shrink-0">
+          <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
+            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
+          </svg>
+        </div>
+        <div class="ml-3">
+          <p class="text-sm text-red-700 font-medium">{{ error }}</p>
+        </div>
+      </div>
+    </div>
+
+    <!-- UI: Loading Skeleton (T236) -->
+    <div v-if="isLoading" class="flex justify-center items-center py-24">
+      <div class="animate-spin rounded-full h-10 w-10 border-b-2 border-blue-600"></div>
+    </div>
+
+    <!-- Bảng Danh Sách Sản Phẩm (T232) -->
+    <div v-else class="bg-white shadow-sm border border-gray-200 rounded-xl overflow-hidden">
+      
+      <!-- UI: Empty State (T236) -->
+      <div v-if="items.length === 0" class="py-20 text-center">
+        <svg class="mx-auto h-12 w-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
+        </svg>
+        <h3 class="mt-4 text-sm font-semibold text-gray-900">Không có sản phẩm nào</h3>
+        <p class="mt-1 text-sm text-gray-500">Danh sách kiểm kê hiện đang trống. Hãy thêm sản phẩm vào hệ thống.</p>
+      </div>
+
+      <!-- UI: Inline Editing Table (T234) -->
+      <div v-else class="overflow-x-auto">
+        <table class="min-w-full divide-y divide-gray-200">
+          <thead class="bg-gray-50">
+            <tr>
+              <th class="px-6 py-4 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Mã SP</th>
+              <th class="px-6 py-4 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Tên sản phẩm</th>
+              <th class="px-6 py-4 text-right text-xs font-semibold text-gray-500 uppercase tracking-wider">Tồn hệ thống</th>
+              <!-- Cột nhập liệu có màu nhấn để user chú ý -->
+              <th class="px-6 py-4 text-right text-xs font-bold text-blue-600 uppercase tracking-wider w-56">Tồn thực tế</th>
+              <th class="px-6 py-4 text-right text-xs font-semibold text-gray-500 uppercase tracking-wider">Chênh lệch</th>
+            </tr>
+          </thead>
+          <tbody class="bg-white divide-y divide-gray-200">
+            <tr v-for="item in items" :key="item.id" class="hover:bg-blue-50/50 transition-colors">
+              <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ item.productCode }}</td>
+              <td class="px-6 py-4 text-sm text-gray-700">{{ item.productName }}</td>
+              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 text-right">{{ item.systemQuantity }}</td>
+              
+              <!-- Inline Edit Input -->
+              <td class="px-6 py-4 whitespace-nowrap text-right">
+                <input 
+                  type="number" 
+                  v-model.number="item.actualQuantity" 
+                  min="0"
+                  :disabled="isLocked"
+                  class="w-full text-right border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm py-2 px-3 border transition-colors disabled:bg-gray-100 disabled:text-gray-500 disabled:border-transparent"
+                  :class="{'border-red-400 focus:ring-red-500 focus:border-red-500 bg-red-50': item.actualQuantity < 0}"
+                />
+              </td>
+              
+              <!-- Tính chênh lệch Auto -->
+              <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-bold">
+                <span :class="{
+                  'text-green-600': getDifference(item) > 0,
+                  'text-red-600': getDifference(item) < 0,
+                  'text-gray-400': getDifference(item) === 0 || isNaN(getDifference(item))
+                }">
+                  {{ getDifference(item) > 0 ? '+' : '' }}{{ getDifference(item) }}
+                </span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+const inventoryId = route.params.id || 'fake-id'
+
+// --- State Management ---
+const isLoading = ref(true)
+const error = ref('')
+const isFinalizing = ref(false)
+const isCancelling = ref(false)
+
+const inventoryCount = ref(null)
+const items = ref([])
+
+// Khóa UI nếu đã chốt hoặc đang call API (T235)
+const isLocked = computed(() => {
+  return inventoryCount.value?.status === 'COMPLETED' || 
+         inventoryCount.value?.status === 'CANCELLED' || 
+         isFinalizing.value || 
+         isCancelling.value
+})
+
+// --- Logic Tính Chênh Lệch ---
+const getDifference = (item) => {
+  if (item.actualQuantity === null || item.actualQuantity === '') return 0
+  return item.actualQuantity - item.systemQuantity
+}
+
+// --- API Mocks ---
+const fetchDetail = async () => {
+  isLoading.value = true
+  error.value = ''
+  try {
+    // Giả lập call API 600ms
+    await new Promise(resolve => setTimeout(resolve, 600))
+    
+    // Dữ liệu Mock
+    inventoryCount.value = {
+      id: inventoryId,
+      code: 'KK-202310-001',
+      warehouseName: 'Kho Trung Tâm',
+      status: 'IN_PROGRESS',
+      createdAt: '10/10/2023 08:30'
+    }
+    
+    items.value = [
+      { id: 1, productCode: 'SP001', productName: 'iPhone 15 Pro Max', systemQuantity: 50, actualQuantity: 50 },
+      { id: 2, productCode: 'SP002', productName: 'MacBook Air M2', systemQuantity: 15, actualQuantity: 12 },
+      { id: 3, productCode: 'SP003', productName: 'AirPods Pro 2', systemQuantity: 100, actualQuantity: 105 },
+      { id: 4, productCode: 'SP004', productName: 'iPad Pro 11 inch', systemQuantity: 0, actualQuantity: 2 },
+    ]
+  } catch (err) {
+    error.value = 'Lỗi kết nối. Không thể tải chi tiết đợt kiểm kê.'
+  } finally {
+    isLoading.value = false
+  }
+}
+
+// --- Action Handlers (T235) ---
+const finalizeCount = async () => {
+  if (!confirm('CHÚ Ý: Bạn có chắc chắn muốn chốt kiểm kê? \nSố lượng thực tế sẽ ghi đè lên tồn kho hệ thống và KHÔNG THỂ hoàn tác.')) return
+  
+  isFinalizing.value = true
+  try {
+    // Giả lập lưu API
+    await new Promise(resolve => setTimeout(resolve, 800))
+    
+    inventoryCount.value.status = 'COMPLETED'
+    // Sau khi chốt thành công, computed isLocked sẽ tự động true -> Disable toàn bộ ô input
+  } catch (err) {
+    error.value = 'Chốt kiểm kê thất bại. Vui lòng thử lại.'
+  } finally {
+    isFinalizing.value = false
+  }
+}
+
+const cancelCount = async () => {
+  if (!confirm('Bạn có chắc chắn muốn HỦY đợt kiểm kê này?')) return
+  
+  isCancelling.value = true
+  try {
+    await new Promise(resolve => setTimeout(resolve, 500))
+    inventoryCount.value.status = 'CANCELLED'
+  } catch (err) {
+    error.value = 'Hủy kiểm kê thất bại.'
+  } finally {
+    isCancelling.value = false
+  }
+}
+
+// --- Initialization ---
+onMounted(() => {
+  fetchDetail()
+})
+</script>
diff --git a/src/views/InventoryCountList.vue b/src/views/InventoryCountList.vue
new file mode 100644
index 0000000..4a62777
--- /dev/null
+++ b/src/views/InventoryCountList.vue
@@ -0,0 +1,300 @@
+<template>
+  <div class="p-6 bg-gray-50 min-h-screen">
+    <!-- Main Card -->
+    <div class="max-w-7xl mx-auto bg-white rounded-xl shadow-sm border border-gray-100 p-6">
+      
+      <!-- 1. Header Area -->
+      <div class="mb-6 flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4">
+        <div>
+          <h1 class="text-2xl font-bold text-gray-800">Đợt kiểm kê kho</h1>
+          <p class="text-sm text-gray-500 mt-1">Quản lý danh sách các đợt kiểm kê hàng hóa</p>
+        </div>
+        <!-- ĐÃ SỬA: Thêm sự kiện @click để mở Modal -->
+        <button 
+          @click="isCreateModalOpen = true"
+          class="bg-blue-600 hover:bg-blue-700 text-white px-5 py-2 rounded-lg font-medium transition-colors shadow-sm flex items-center gap-2"
+        >
+          <span>+</span> Tạo đợt kiểm kê
+        </button>
+      </div>
+
+      <!-- 2. Filter Section -->
+      <div class="flex flex-wrap items-end gap-4 mb-6 p-4 bg-gray-50 rounded-lg border border-gray-200">
+        <!-- Lọc theo Kho (Warehouse) -->
+        <div class="flex flex-col flex-1 min-w-[200px] max-w-xs">
+          <label class="text-sm font-medium text-gray-700 mb-1.5">Kho (Warehouse)</label>
+          <select 
+            v-model="filters.warehouse"
+            class="border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white"
+          >
+            <option value="">-- Tất cả kho --</option>
+            <option v-for="wh in availableWarehouses" :key="wh" :value="wh">
+              {{ wh }}
+            </option>
+          </select>
+        </div>
+
+        <!-- Lọc theo Trạng thái (Status) -->
+        <div class="flex flex-col flex-1 min-w-[200px] max-w-xs">
+          <label class="text-sm font-medium text-gray-700 mb-1.5">Trạng thái (Status)</label>
+          <select 
+            v-model="filters.status"
+            class="border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white"
+          >
+            <option value="">-- Tất cả trạng thái --</option>
+            <option v-for="status in availableStatuses" :key="status.value" :value="status.value">
+              {{ status.label }}
+            </option>
+          </select>
+        </div>
+
+        <!-- Nút Clear Filter -->
+        <div class="flex items-end">
+          <button 
+            @click="clearFilters"
+            class="px-4 py-2 text-sm font-medium rounded-lg transition-colors border"
+            :class="hasActiveFilters 
+              ? 'text-gray-700 bg-white border-gray-300 hover:bg-gray-100 shadow-sm' 
+              : 'text-gray-400 bg-gray-50 border-gray-200 cursor-not-allowed'"
+            :disabled="!hasActiveFilters"
+          >
+            Làm mới (Clear)
+          </button>
+        </div>
+      </div>
+
+      <!-- 3. Data Table -->
+      <div class="overflow-x-auto rounded-lg border border-gray-200">
+        <table class="min-w-full divide-y divide-gray-200 text-sm">
+          <thead class="bg-gray-50">
+            <tr>
+              <th scope="col" class="px-6 py-3 text-left font-medium text-gray-500 uppercase tracking-wider">Mã đợt</th>
+              <th scope="col" class="px-6 py-3 text-left font-medium text-gray-500 uppercase tracking-wider">Kho</th>
+              <th scope="col" class="px-6 py-3 text-left font-medium text-gray-500 uppercase tracking-wider">Trạng thái</th>
+              <th scope="col" class="px-6 py-3 text-left font-medium text-gray-500 uppercase tracking-wider">Ngày tạo</th>
+              <th scope="col" class="px-6 py-3 text-left font-medium text-gray-500 uppercase tracking-wider">Người tạo</th>
+              <th scope="col" class="px-6 py-3 text-center font-medium text-gray-500 uppercase tracking-wider">Thao tác</th>
+            </tr>
+          </thead>
+          
+          <tbody class="bg-white divide-y divide-gray-200">
+            <!-- Render dữ liệu -->
+            <tr v-for="item in filteredData" :key="item.id" class="hover:bg-blue-50/50 transition-colors">
+              <td class="px-6 py-4 whitespace-nowrap font-semibold text-blue-600 cursor-pointer hover:underline">
+                {{ item.code }}
+              </td>
+              <td class="px-6 py-4 whitespace-nowrap text-gray-700 font-medium">
+                {{ item.warehouse }}
+              </td>
+              <td class="px-6 py-4 whitespace-nowrap">
+                <span :class="['px-2.5 py-1 inline-flex text-xs font-semibold rounded-full border', getStatusBadgeClass(item.status)]">
+                  {{ formatStatus(item.status) }}
+                </span>
+              </td>
+              <td class="px-6 py-4 whitespace-nowrap text-gray-500">
+                {{ formatDate(item.createdDate) }}
+              </td>
+              <td class="px-6 py-4 whitespace-nowrap text-gray-500">
+                {{ item.createdBy }}
+              </td>
+              <td class="px-6 py-4 whitespace-nowrap text-center font-medium">
+                <router-link :to="`/inventory/${item.id}`" class="text-blue-600 hover:text-blue-900 transition-colors">Chi tiết</router-link>
+              </td>
+            </tr>
+
+            <!-- Empty State (Khi filter không ra kết quả) -->
+            <tr v-if="filteredData.length === 0">
+              <td colspan="6" class="px-6 py-12 text-center text-gray-500 bg-gray-50/50">
+                <div class="flex flex-col items-center justify-center">
+                  <svg class="w-12 h-12 text-gray-300 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
+                  </svg>
+                  <p>Không tìm thấy đợt kiểm kê nào phù hợp với bộ lọc.</p>
+                  <button @click="clearFilters" class="mt-2 text-blue-600 hover:underline">Xóa bộ lọc</button>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <!-- Pagination Placeholder -->
+      <div class="mt-4 flex items-center justify-between text-sm text-gray-500">
+        <p>Hiển thị <b>{{ filteredData.length }}</b> kết quả</p>
+        <div class="flex gap-1">
+          <button class="px-3 py-1 border rounded hover:bg-gray-50 disabled:opacity-50" disabled>Trước</button>
+          <button class="px-3 py-1 border rounded bg-blue-50 text-blue-600 border-blue-200">1</button>
+          <button class="px-3 py-1 border rounded hover:bg-gray-50 disabled:opacity-50" disabled>Sau</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- ĐÃ THÊM: Nhúng component Modal vào đây -->
+    <InventoryCountCreateModal 
+      :isOpen="isCreateModalOpen"
+      @close="isCreateModalOpen = false"
+      @submit="handleCreateSubmit"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, computed } from 'vue'
+// ĐÃ THÊM: Import component Modal
+import InventoryCountCreateModal from '../components/InventoryCountCreateModal.vue'
+
+// ==========================================
+// THÊM MỚI: QUẢN LÝ MODAL TẠO KIỂM KÊ
+// ==========================================
+const isCreateModalOpen = ref(false)
+
+const handleCreateSubmit = (newCountPayload) => {
+  // Đẩy dữ liệu mới vào đầu mảng mockData để hiển thị ngay trên UI
+  mockData.value.unshift({
+    id: newCountPayload.id,
+    code: newCountPayload.code,
+    warehouse: newCountPayload.warehouseName,
+    status: newCountPayload.status,
+    createdDate: newCountPayload.createdDate,
+    createdBy: newCountPayload.createdBy
+  })
+  
+  // Đóng Modal
+  isCreateModalOpen.value = false 
+  
+  // Thông báo giả lập
+  alert(`Đã tạo thành công đợt kiểm kê: ${newCountPayload.code}`)
+}
+
+
+// ==========================================
+// 1. MOCK DATA (Dữ liệu giả lập)
+// ==========================================
+const mockData = ref([
+  {
+    id: 1,
+    code: 'KK-202310-001',
+    warehouse: 'Kho Tổng Hà Nội',
+    status: 'DRAFT',
+    createdDate: '2023-10-25T08:30:00Z',
+    createdBy: 'Nguyễn Văn A'
+  },
+  {
+    id: 2,
+    code: 'KK-202310-002',
+    warehouse: 'Kho Chi nhánh HCM',
+    status: 'IN_PROGRESS',
+    createdDate: '2023-10-24T14:15:00Z',
+    createdBy: 'Trần Thị B'
+  },
+  {
+    id: 3,
+    code: 'KK-202310-003',
+    warehouse: 'Kho Tổng Hà Nội',
+    status: 'COMPLETED',
+    createdDate: '2023-10-20T09:00:00Z',
+    createdBy: 'Lê Văn C'
+  },
+  {
+    id: 4,
+    code: 'KK-202310-004',
+    warehouse: 'Kho Lạnh Đà Nẵng',
+    status: 'CANCELLED',
+    createdDate: '2023-10-26T10:45:00Z',
+    createdBy: 'Nguyễn Văn A'
+  },
+  {
+    id: 5,
+    code: 'KK-202310-005',
+    warehouse: 'Kho Chi nhánh HCM',
+    status: 'COMPLETED',
+    createdDate: '2023-10-15T16:20:00Z',
+    createdBy: 'Phạm Văn D'
+  }
+])
+
+// ==========================================
+// 2. STATE & CẤU HÌNH BỘ LỌC (FILTER)
+// ==========================================
+// Tự động trích xuất danh sách kho duy nhất (Unique) từ mockData
+const availableWarehouses = computed(() => {
+  return [...new Set(mockData.value.map(item => item.warehouse))]
+})
+
+// Cấu hình các trạng thái (Có thể thay đổi text Tiếng Việt tại đây)
+const availableStatuses = [
+  { value: 'DRAFT', label: 'Bản nháp' },
+  { value: 'IN_PROGRESS', label: 'Đang kiểm kê' },
+  { value: 'COMPLETED', label: 'Đã hoàn thành' },
+  { value: 'CANCELLED', label: 'Đã hủy' }
+]
+
+// Object chứa các giá trị filter người dùng đang chọn
+const filters = reactive({
+  warehouse: '',
+  status: ''
+})
+
+// Kiểm tra xem user có đang filter gì không để style/disable nút "Clear"
+const hasActiveFilters = computed(() => filters.warehouse !== '' || filters.status !== '')
+
+// Hàm xóa toàn bộ điều kiện lọc
+const clearFilters = () => {
+  filters.warehouse = ''
+  filters.status = ''
+}
+
+// ==========================================
+// 3. LOGIC LỌC DỮ LIỆU
+// ==========================================
+// filteredData sẽ tự động tính toán lại mỗi khi `mockData` hoặc `filters` thay đổi
+const filteredData = computed(() => {
+  return mockData.value.filter(item => {
+    // Nếu filter 'warehouse' rỗng (chọn tất cả) -> luôn true, ngược lại so sánh bằng
+    const matchWarehouse = filters.warehouse ? item.warehouse === filters.warehouse : true
+    
+    // Tương tự với 'status'
+    const matchStatus = filters.status ? item.status === filters.status : true
+    
+    return matchWarehouse && matchStatus
+  })
+})
+
+// ==========================================
+// 4. UTILITY / HELPER FUNCTIONS
+// ==========================================
+// Chuyển đổi định dạng ngày tháng sang dạng VN
+const formatDate = (isoString) => {
+  if (!isoString) return ''
+  const date = new Date(isoString)
+  return new Intl.DateTimeFormat('vi-VN', {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit'
+  }).format(date)
+}
+
+// Lấy nhãn tiếng Việt cho status
+const formatStatus = (statusValue) => {
+  const statusObj = availableStatuses.find(s => s.value === statusValue)
+  return statusObj ? statusObj.label : statusValue
+}
+
+// Trả về class Tailwind để tô màu cho Badge dựa trên Status
+const getStatusBadgeClass = (status) => {
+  switch (status) {
+    case 'DRAFT':
+      return 'bg-gray-50 text-gray-700 border-gray-200'
+    case 'IN_PROGRESS':
+      return 'bg-blue-50 text-blue-700 border-blue-200'
+    case 'COMPLETED':
+      return 'bg-emerald-50 text-emerald-700 border-emerald-200'
+    case 'CANCELLED':
+      return 'bg-red-50 text-red-700 border-red-200'
+    default:
+      return 'bg-gray-50 text-gray-700 border-gray-200'
+  }
+}
+</script>
\ No newline at end of file