hoàn thành trang index, loại bỏ dupral

sisvietnamvn_current/index_html_components_gap_analysis.md

@@ -0,0 +1,50 @@
+# Phân tích mức độ đáp ứng giao diện của index.html
+
+Dựa trên nội dung của file `sisvietnam_components_analysis.md` và việc quét, kiểm tra trực tiếp mã nguồn của file `index.html` hiện tại, dưới đây là bảng so sánh và phân tích về mức độ đáp ứng (tính đầy đủ) các thành phần giao diện.
+
+Dưới đây là các thành phần **đã có/đáp ứng đủ** và các thành phần **đang thiếu/cần bổ sung** vào `index.html` để có thể tái hiện đầy đủ trang chủ của S.I.S Việt Nam:
+
+## 1. Các thành phần đã có và đủ số lượng (Đạt yêu cầu cơ bản)
+Các thành phần khung (Wrapper) và liên kết cơ bản của trang UMass Amherst hiện tại có số lượng dư sức chứa cấu trúc của SIS Vietnam:
+- **Cấu trúc HTML cơ bản:** `<header>`, `<footer>`, `<section>` đều đã có đủ số lượng tối thiểu. Thẻ `<div>` có 331 thẻ (so với 190 yêu cầu).
+- **Điều hướng & Liên kết:** Có tới 122 thẻ `<a>` (yêu cầu 66), 55 thẻ có class `menu` (yêu cầu 32). Hệ thống danh sách `<ul>`, `<li>` cũng vượt số lượng yêu cầu (40 thẻ `<li>` so với 36).
+- **Tiêu đề:** Khá đầy đủ với 8 thẻ `<h2>` và 17 thẻ `<h3>` (yêu cầu 3 và 7).
+- **Khung chứa (Container):** 55 class `.container` (vượt mức 18 yêu cầu).
+- **Nhúng (iframe):** Có 5 thẻ `<iframe>` (đã dư 1 thẻ bản đồ theo yêu cầu).
+
+## 2. Các thành phần đang THIẾU và cần bổ sung (Chưa đầy đủ)
+Đây là các thành phần quan trọng tạo nên nét đặc trưng của trang web bệnh viện SIS Vietnam nhưng file `index.html` hiện tại chưa có, hoặc dùng class khác không tương thích:
+
+1. **Hệ thống Lưới (Grid System - row, col):**
+   - **Thực trạng:** `index.html` hiện tại chỉ có 3 class `.row` và 4 class `.col`.
+   - **Yêu cầu SIS:** Cần tới 15 `.row` và 47 `.col`.
+   - **Đánh giá:** Trang UMass Amherst dùng cấu trúc layout khác (vd: `lc--layout-container`, `lr--layout-region`) chứ không dùng Bootstrap Grid chuẩn. Cần phải đan xen thêm hệ thống `row/col` để chia nhỏ giao diện thành nhiều cột như trang SIS.
+
+2. **Trình chiếu (Slider & Carousel):**
+   - **Thực trạng:** Không tìm thấy class `.slider` hay `.carousel` nào.
+   - **Yêu cầu SIS:** 13 class `.slider` và 5 class `.carousel` (thường dùng cho banner chính, slide đội ngũ bác sĩ, cảm nhận khách hàng...).
+   - **Đánh giá:** **Cực kỳ quan trọng.** Cần nhúng thư viện như Owl Carousel, SwiperJS hoặc Slick Slider vào `index.html` và xây dựng cấu trúc HTML cho slider.
+
+3. **Biểu mẫu liên hệ/Đặt lịch (Form):**
+   - **Thực trạng:** Không có thẻ `<form>` nào trong thân trang (chỉ có 1 form tìm kiếm ở header).
+   - **Yêu cầu SIS:** Cần 3 thẻ `<form>` (Dành cho việc đặt lịch khám, form liên hệ tư vấn, form đăng ký nhận tin).
+   - **Đánh giá:** Cần bổ sung các khối HTML form này vào nội dung chính (`<main>`).
+
+4. **Nút bấm tiêu chuẩn (Buttons - `.btn`):**
+   - **Thực trạng:** Không có class `.btn`.
+   - **Yêu cầu SIS:** 10 class `.btn`.
+   - **Đánh giá:** Hiện tại trang đang dùng class nút bấm của theme UMass (như `.button-primary`). Bạn có thể giữ nguyên, nhưng nếu bê y nguyên CSS từ file SIS qua thì cần đổi lại/thêm class `.btn`.
+
+5. **Banner Quảng cáo/Thông báo (`.banner`):**
+   - **Thực trạng:** 0 class.
+   - **Yêu cầu SIS:** Cần 2 class `.banner`.
+
+6. **Hình ảnh (`<img>`):**
+   - **Thực trạng:** Mới chỉ có khoảng 18 hình ảnh.
+   - **Yêu cầu SIS:** 46 hình ảnh (Bao gồm logo, banner, ảnh bác sĩ, cơ sở vật chất, bài viết tin tức...). Cần chèn thêm rất nhiều khối hình ảnh.
+
+## Tổng kết và Khuyến nghị
+File `index.html` hiện tại chủ yếu là "vỏ bọc" mượn từ UMass Amherst. Để nó biến thành trang của S.I.S Việt Nam đầy đủ, cần:
+1. Nhúng thêm **Thư viện Slider** (như Swiper/Owl Carousel).
+2. Xây dựng lại **Hệ thống Grid (row/col)** ở phần `<main>` cho phù hợp với 47 cột dữ liệu.
+3. Chèn các **Form đặt lịch khám** và tăng cường các thẻ **Hình ảnh/Banner**.

sisvietnamvn_current/sisvietnam_components_analysis.md

@@ -0,0 +1,38 @@
+# Phân tích Cấu trúc Giao diện: sisvietnam.vn
+
+Báo cáo chi tiết số lượng và loại thành phần giao diện (UI Components) đang được sử dụng trên trang web Bệnh viện Đa khoa Quốc tế S.I.S Cần Thơ (`https://sisvietnam.vn/`).
+
+## 1. Bố cục khung (Layout Structure)
+Trang web sử dụng hệ thống chia cột dạng Grid (khả năng cao là Bootstrap) để dàn trang.
+
+* **`<header>` (Đầu trang):** 1 thẻ
+* **`.header` (Lớp giao diện đầu trang):** 2 class
+* **`<footer>` (Chân trang):** 1 thẻ
+* **`.footer` (Lớp giao diện chân trang):** 21 class (Footer được chia làm rất nhiều cột nhỏ)
+* **`<section>` (Phân khu):** 1 thẻ
+* **`.container` (Vỏ bọc nội dung):** 18 class
+* **`.row` (Hàng):** 15 class
+* **`.col` (Cột):** 47 class
+
+## 2. Các thành phần tương tác (UI Components)
+* **`.slider` & `.carousel` (Trình chiếu ảnh trượt):** 13 class `.slider` và 5 class `.carousel` (Sử dụng thư viện Owl Carousel).
+* **`<img>` (Hình ảnh):** 46 thẻ
+* **`.banner` (Biểu ngữ quảng cáo):** 2 class
+* **`.menu` (Thanh điều hướng):** 32 class
+* **`<a>` (Đường liên kết):** 66 thẻ
+* **`<ul>` / `<li>` (Danh sách):** 7 danh sách (`<ul>`) với 36 mục (`<li>`)
+* **`.btn` (Nút bấm):** 10 class
+* **`<form>` (Biểu mẫu):** 3 thẻ (Sử dụng plugin Contact Form 7)
+* **`.widget` (Khối tiện ích):** 3 class
+* **`<iframe>` (Bản đồ / Nhúng ngoại vi):** 1 thẻ
+
+## 3. Phân tích kỹ thuật (Technical Tags)
+* **`<div>` (Thẻ khối cơ bản):** 190 thẻ
+* **`<h2>` & `<h3>` (Thẻ tiêu đề):** 3 thẻ `<h2>` và 7 thẻ `<h3>`
+* **`<script>` (Mã Javascript):** 58 thẻ (Google Analytics, Tag Manager, Facebook Pixel...)
+* **`<style>` (CSS Nội tuyến):** 10 thẻ
+
+> [!TIP]
+> **Đánh giá Kiến trúc:**
+> Trang web được xây dựng bằng **WordPress**, sử dụng hệ thống **Grid** để cấu trúc bố cục tĩnh, kết hợp với các **Carousel/Slider** để làm sinh động giao diện. Phần thu thập dữ liệu khách hàng được xử lý qua các **Form**. 
+> Nếu bạn dùng các công cụ như Pinegrow hoặc Webflow, kiến trúc này có thể dễ dàng sao chép bằng cách sử dụng cấu trúc `Container -> Row -> Column`.