front end xong giai đoạn 1 phần mainpage

build.js

@@ -0,0 +1,68 @@
+const fs = require('fs');
+const path = require('path');
+
+const srcDir = __dirname;
+const distDir = path.join(__dirname, 'dist');
+const imagesDir = path.join(distDir, 'images');
+
+// Create dist directories
+if (!fs.existsSync(distDir)) fs.mkdirSync(distDir);
+if (!fs.existsSync(imagesDir)) fs.mkdirSync(imagesDir);
+
+// Helper to copy directory recursively
+function copyDir(src, dest) {
+    if (!fs.existsSync(src)) return;
+    if (!fs.existsSync(dest)) fs.mkdirSync(dest);
+    const entries = fs.readdirSync(src, { withFileTypes: true });
+    for (let entry of entries) {
+        const srcPath = path.join(src, entry.name);
+        const destPath = path.join(dest, entry.name);
+        if (entry.isDirectory()) {
+            copyDir(srcPath, destPath);
+        } else {
+            fs.copyFileSync(srcPath, destPath);
+        }
+    }
+}
+
+// Copy css and js
+copyDir(path.join(srcDir, 'css'), path.join(distDir, 'css'));
+if (fs.existsSync(path.join(srcDir, 'js'))) {
+    copyDir(path.join(srcDir, 'js'), path.join(distDir, 'js'));
+}
+
+// Read index.html
+let html = fs.readFileSync(path.join(srcDir, 'index.html'), 'utf8');
+
+// Regex to find images in the bài viết folder
+const imgRegex = /src="bài viết\/Trang chủ - Bệnh Viện Đa Khoa Quốc Tế S\.I\.S Cần Thơ_files\/([^"]+)"/g;
+let match;
+const imageMap = {};
+
+while ((match = imgRegex.exec(html)) !== null) {
+    const originalName = match[1];
+    // Sanitize filename
+    const ext = path.extname(originalName);
+    const safeName = originalName.replace(/[^a-zA-Z0-9.-]/g, '_').toLowerCase();
+    imageMap[originalName] = safeName;
+}
+
+// Copy images and replace in HTML
+for (const [originalName, safeName] of Object.entries(imageMap)) {
+    const sourcePath = path.join(srcDir, 'bài viết', 'Trang chủ - Bệnh Viện Đa Khoa Quốc Tế S.I.S Cần Thơ_files', originalName);
+    const destPath = path.join(imagesDir, safeName);
+    
+    if (fs.existsSync(sourcePath)) {
+        fs.copyFileSync(sourcePath, destPath);
+        // Replace in HTML
+        const searchStr = `src="bài viết/Trang chủ - Bệnh Viện Đa Khoa Quốc Tế S.I.S Cần Thơ_files/${originalName}"`;
+        const replaceStr = `src="images/${safeName}"`;
+        html = html.split(searchStr).join(replaceStr);
+    } else {
+        console.warn(`File not found: ${sourcePath}`);
+    }
+}
+
+// Write new index.html to dist
+fs.writeFileSync(path.join(distDir, 'index.html'), html);
+console.log('Static build successful. Files are in /dist folder.');

css/style.css

@@ -37,14 +37,37 @@ img {
 }
 
 /* Colors */
-.text-red { color: #881c1c; }
+.text-red {
-.text-black { color: #000; }
+  color: #881c1c;
-.text-grey { color: #666; }
+}
-.text-light { color: #fff; }
+
-.bg-red { background: #881c1c; }
+.text-black {
-.bg-black { background: #111; }
+  color: #000;
-.bg-grey { background: #f4f4f4; }
+}
-.bg-light-grey { background: #e5e5e5; }
+
+.text-grey {
+  color: #666;
+}
+
+.text-light {
+  color: #fff;
+}
+
+.bg-red {
+  background: #881c1c;
+}
+
+.bg-black {
+  background: #111;
+}
+
+.bg-grey {
+  background: #f4f4f4;
+}
+
+.bg-light-grey {
+  background: #e5e5e5;
+}
 
 /* Buttons */
 .btn {
@@ -56,22 +79,27 @@ img {
   transition: all 0.2s;
   cursor: pointer;
 }
+
 .btn-red {
   background: #881c1c;
   color: #fff;
 }
+
 .btn-red:hover {
   background: #6b1515;
 }
+
 .btn-red-outline {
   border: 2px solid #881c1c;
   color: #881c1c;
   background: transparent;
 }
+
 .btn-red-outline:hover {
   background: #881c1c;
   color: #fff;
 }
+
 .btn-red-fill {
   background: #881c1c;
   color: #fff;
@@ -89,44 +117,54 @@ img {
 /* ================= HEADER ================= */
 .header {
   position: absolute;
-  top: 0; left: 0; width: 100%;
+  top: 0;
+  left: 0;
+  width: 100%;
   z-index: 100;
   padding: 30px 0;
 }
+
 .header-inner {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
 }
+
 .logo {
   color: #fff;
   line-height: 1.2;
 }
+
 .logo-light {
   font-size: 16px;
   font-weight: 400;
 }
+
 .logo-bold {
   font-size: 24px;
   font-weight: 800;
 }
+
 .nav-right {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
 }
+
 .top-nav {
   display: flex;
   align-items: center;
   gap: 20px;
   margin-bottom: 10px;
 }
+
 .top-nav a {
   color: #fff;
   font-size: 12px;
   font-weight: 600;
   text-transform: uppercase;
 }
+
 .search-btn {
   background: #881c1c;
   color: #fff;
@@ -138,10 +176,12 @@ img {
   justify-content: center;
   cursor: pointer;
 }
+
 .main-nav {
   display: flex;
   gap: 24px;
 }
+
 .main-nav a {
   color: #fff;
   font-size: 13px;
@@ -149,8 +189,13 @@ img {
   text-transform: uppercase;
 }
 
-.mobile-only { display: none; }
+.mobile-only {
-.desktop-only { display: flex; }
+  display: none;
+}
+
+.desktop-only {
+  display: flex;
+}
 
 /* ================= HERO ================= */
 .hero {
@@ -159,29 +204,38 @@ img {
   min-height: 600px;
   background: #000;
 }
+
 .hero-bg {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
+
 .hero-overlay {
   position: absolute;
-  top: 0; left: 0; width: 100%; height: 100%;
+  top: 0;
-  background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, transparent 30%, transparent 60%, rgba(0,0,0,0.8) 100%);
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, transparent 30%, transparent 60%, rgba(0, 0, 0, 0.8) 100%);
 }
+
 .hero-content {
   position: absolute;
   bottom: 60px;
-  left: 0; right: 0;
+  left: 0;
+  right: 0;
   color: #fff;
   padding-left: 20px;
 }
+
 .hero-title {
   font-size: 56px;
   font-weight: 800;
   line-height: 1;
   margin-bottom: 15px;
 }
+
 .hero-desc {
   font-size: 16px;
   font-weight: 400;
@@ -193,25 +247,30 @@ img {
   padding: 60px 0;
   background: #fff;
 }
+
 .step-into-inner {
   align-items: center;
   justify-content: flex-start;
   gap: 80px;
 }
+
 .step-into-title {
   font-size: 32px;
   font-weight: 800;
   line-height: 1.1;
 }
+
 .step-into-links {
   display: flex;
   gap: 80px;
 }
+
 .link-col {
   display: flex;
   flex-direction: column;
   gap: 15px;
 }
+
 .link-col a {
   font-weight: 700;
   font-size: 14px;
@@ -223,6 +282,7 @@ img {
   border-bottom: 1px solid #eee;
   padding-bottom: 10px;
 }
+
 .link-col a .arrow {
   color: #881c1c;
   font-size: 10px;
@@ -233,13 +293,16 @@ img {
   background: #111;
   color: #fff;
 }
+
 .whats-life-inner {
   align-items: stretch;
 }
+
 .whats-life-text {
   flex: 1;
   padding: 80px 60px 80px 0;
 }
+
 .tabs {
   display: flex;
   gap: 20px;
@@ -247,41 +310,50 @@ img {
   border-bottom: 1px solid #333;
   padding-bottom: 10px;
 }
+
 .tab {
   font-size: 14px;
   font-weight: 600;
   color: #888;
 }
+
 .tab.active {
   color: #fff;
   border-bottom: 2px solid #fff;
   padding-bottom: 11px;
   margin-bottom: -12px;
 }
+
 .whats-life-text .subtitle {
   font-size: 24px;
   font-weight: 700;
   margin-bottom: 15px;
 }
+
 .whats-life-text .desc {
   font-size: 15px;
   color: #ccc;
   margin-bottom: 30px;
 }
+
 .whats-life-media {
   flex: 1;
   position: relative;
 }
+
 .whats-life-media img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
+
 .play-icon {
   position: absolute;
-  top: 50%; left: 50%;
+  top: 50%;
+  left: 50%;
   transform: translate(-50%, -50%);
-  width: 60px; height: 60px;
+  width: 60px;
+  height: 60px;
   background: #881c1c;
   color: #fff;
   border: none;
@@ -291,24 +363,28 @@ img {
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  padding-left: 5px; /* center play triangle */
+  padding-left: 5px;
+  /* center play triangle */
 }
 
 /* ================= STATS ================= */
 .stats {
   padding: 60px 0;
-  background: #fff;
+  background: #E9E9E9;
   text-align: center;
 }
+
 .stats-inner {
   justify-content: center;
   gap: 100px;
 }
+
 .stat-number {
   font-size: 48px;
   font-weight: 800;
   margin-bottom: 10px;
 }
+
 .stat-text {
   font-size: 13px;
   font-weight: 600;
@@ -320,32 +396,42 @@ img {
   padding: 80px 0;
   background: #fff;
 }
+
 .excellence-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 40px;
 }
+
 .exc-col-left .desc {
   font-size: 15px;
   margin-bottom: 30px;
 }
-.mt-large { margin-top: 60px; }
+
+.mt-large {
+  margin-top: 60px;
+}
 
 .story-card {
   position: relative;
   overflow: hidden;
 }
+
 .story-card img {
   width: 100%;
   display: block;
 }
+
 .story-card.has-bg .story-content {
   position: absolute;
-  bottom: 0; left: 0; width: 100%;
+  bottom: 0;
-  background: linear-gradient(transparent, rgba(0,0,0,0.8));
+  left: 0;
+  width: 100%;
+  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
   padding: 40px 30px 20px;
   color: #fff;
 }
+
 .tag {
   display: block;
   font-size: 11px;
@@ -353,19 +439,23 @@ img {
   text-transform: uppercase;
   margin-bottom: 8px;
 }
+
 .story-content h3 {
   font-size: 22px;
   font-weight: 700;
   margin-bottom: 10px;
   line-height: 1.2;
 }
+
 .story-content p {
   font-size: 13px;
   opacity: 0.9;
 }
+
 .story-card.large h3 {
   font-size: 28px;
 }
+
 .sub-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -373,12 +463,44 @@ img {
   gap: 0;
   height: 300px;
 }
-.box-black { background: #000; padding: 30px; color: #fff; display: flex; flex-direction: column; justify-content: center; }
+
-.box-red { background: #881c1c; padding: 30px; color: #fff; display: flex; flex-direction: column; justify-content: center; }
+.box-black {
-.box-grey { background: #444; padding: 30px; color: #fff; display: flex; flex-direction: column; justify-content: center; }
+  background: #000;
-.play-box { background: #f4f4f4; display: flex; align-items: center; justify-content: center; }
+  padding: 30px;
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.box-red {
+  background: #881c1c;
+  padding: 30px;
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.box-grey {
+  background: #444;
+  padding: 30px;
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.play-box {
+  background: #f4f4f4;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .play-icon-large {
-  width: 80px; height: 80px;
+  width: 80px;
+  height: 80px;
   background: #881c1c;
   color: #fff;
   border-radius: 50%;
@@ -390,28 +512,43 @@ img {
 
 /* ================= BLAZE YOUR OWN TRAIL ================= */
 .blaze-trail {
+  color: #fff;
   padding: 80px 0;
-  background: #fff;
+  background: #151515;
 }
-.max-w-800 { max-width: 800px; margin-bottom: 40px; font-size: 15px; }
+
+.blaze-trail .card-body p {
+  color: #fff;
+}
+
+.max-w-800 {
+  max-width: 800px;
+  margin-bottom: 40px;
+  font-size: 15px;
+}
+
 .card-grid-3 {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 30px;
 }
+
 .card-img img {
   width: 100%;
   aspect-ratio: 3/2;
   object-fit: cover;
 }
+
 .card-body {
   padding: 20px 0;
 }
+
 .card-body h3 {
   font-size: 20px;
   font-weight: 700;
   margin-bottom: 10px;
 }
+
 .card-body p {
   font-size: 14px;
   color: #555;
@@ -422,28 +559,38 @@ img {
   padding: 60px 0;
   background: #fff;
 }
-.text-center { text-align: center; }
+
+.text-center {
+  text-align: center;
+}
+
 .apply-buttons {
   display: flex;
   justify-content: center;
   gap: 20px;
 }
-.apply-buttons .btn { width: 180px; }
+
+.apply-buttons .btn {
+  width: 180px;
+}
 
 /* ================= I'M LOOKING FOR ================= */
 .looking-for {
   padding: 80px 0;
   background: #e5e5e5;
 }
+
 .looking-grid {
   display: flex;
   gap: 60px;
 }
+
 .looking-grid .col {
   flex: 1;
   display: flex;
   flex-direction: column;
 }
+
 .looking-grid .col a {
   display: flex;
   justify-content: space-between;
@@ -454,54 +601,70 @@ img {
   font-size: 14px;
   color: #000;
 }
-.looking-grid .col a .arrow { font-size: 10px; color: #881c1c; }
+
+.looking-grid .col a .arrow {
+  font-size: 10px;
+  color: #881c1c;
+}
 
 /* ================= NEWS & EVENTS ================= */
 .news-events {
   padding: 80px 0;
   background: #fff;
 }
+
 .news-layout {
   display: grid;
   grid-template-columns: 60% 35%;
   gap: 5%;
 }
+
 .news-main img {
   width: 100%;
   aspect-ratio: 16/9;
   object-fit: cover;
 }
-.mt-small { margin-top: 20px; }
+
+.mt-small {
+  margin-top: 20px;
+}
+
 .news-main-title {
   font-size: 28px;
   font-weight: 800;
   margin: 10px 0;
   line-height: 1.2;
 }
+
 .news-main-desc {
   font-size: 15px;
   color: #444;
 }
+
 .news-sidebar {
   display: flex;
   flex-direction: column;
   gap: 30px;
 }
+
 .news-small {
   display: flex;
   gap: 15px;
 }
+
 .news-small img {
   width: 140px;
   height: 100px;
   object-fit: cover;
 }
+
 .news-info h4 {
   font-size: 15px;
   font-weight: 700;
   margin: 5px 0;
   line-height: 1.3;
 }
+
 .news-info p {
   font-size: 12px;
   color: #666;
@@ -513,17 +676,31 @@ img {
   gap: 20px;
   margin-top: 60px;
 }
+
 .event-card img {
   width: 100%;
   aspect-ratio: 3/2;
   object-fit: cover;
 }
+
 .event-info {
   padding: 15px 0;
 }
-.event-info .date { font-weight: 800; font-size: 12px; }
+
-.event-info h4 { font-size: 16px; font-weight: 700; margin: 5px 0; }
+.event-info .date {
-.event-info .type { font-size: 13px; }
+  font-weight: 800;
+  font-size: 12px;
+}
+
+.event-info h4 {
+  font-size: 16px;
+  font-weight: 700;
+  margin: 5px 0;
+}
+
+.event-info .type {
+  font-size: 13px;
+}
 
 /* ================= FOOTER ================= */
 .footer {
@@ -531,22 +708,27 @@ img {
   color: #fff;
   padding: 60px 0 30px;
 }
+
 .footer-top {
   display: flex;
   justify-content: space-between;
   margin-bottom: 40px;
 }
+
 .footer-brand {
   flex: 1;
 }
+
 .footer-logo {
   display: flex;
   align-items: center;
   gap: 15px;
   margin-bottom: 20px;
 }
+
 .m-box {
-  width: 50px; height: 50px;
+  width: 50px;
+  height: 50px;
   background: #881c1c;
   color: #fff;
   font-size: 24px;
@@ -555,17 +737,21 @@ img {
   align-items: center;
   justify-content: center;
 }
+
 .footer-logo .logo-text {
   font-size: 14px;
   line-height: 1.2;
 }
+
 .social-icons {
   display: flex;
   gap: 15px;
 }
+
 .social-icons a {
   color: #fff;
-  width: 20px; height: 20px;
+  width: 20px;
+  height: 20px;
 }
 
 .footer-links-grid {
@@ -574,18 +760,21 @@ img {
   justify-content: flex-end;
   gap: 80px;
 }
+
 .footer-col h4 {
   font-size: 12px;
   font-weight: 700;
   color: #888;
   margin-bottom: 15px;
 }
+
 .footer-col a {
   display: block;
   font-size: 13px;
   color: #ccc;
   margin-bottom: 10px;
 }
+
 .footer-bottom {
   display: flex;
   justify-content: space-between;
@@ -594,102 +783,213 @@ img {
   font-size: 12px;
   color: #888;
 }
+
 .bottom-links {
   display: flex;
   gap: 20px;
 }
-.bottom-links a { color: #888; }
+
+.bottom-links a {
+  color: #888;
+}
 
 /* ================= RESPONSIVE TABLET (768px) ================= */
 @media (max-width: 1024px) {
-  .desktop-only { display: none; }
+  .desktop-only {
-  .mobile-only { display: flex; }
+    display: none;
-  
+  }
+
+  .mobile-only {
+    display: flex;
+  }
+
   .header {
     background: #111;
     padding: 15px 0;
   }
+
   .mobile-actions {
     display: flex;
     align-items: center;
   }
+
   .search-btn-mobile {
     background: #881c1c;
     color: #fff;
     border: none;
-    width: 40px; height: 40px;
+    width: 40px;
+    height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
   }
+
   .hamburger-btn {
     background: transparent;
     color: #fff;
     border: none;
-    width: 40px; height: 40px;
+    width: 40px;
+    height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
   }
-  
+
   .hero {
     height: auto;
     padding: 150px 0 80px;
   }
-  .hero-title { font-size: 40px; }
+
-  
+  .hero-title {
+    font-size: 40px;
+  }
+
   .step-into-inner {
     flex-direction: column;
     align-items: flex-start;
     gap: 30px;
   }
-  .step-into-links { width: 100%; justify-content: space-between; gap: 20px; }
+
-  .link-col { width: 48%; }
+  .step-into-links {
-  .link-col a { width: 100%; }
+    width: 100%;
-  
+    justify-content: space-between;
-  .whats-life-inner { flex-direction: column; }
+    gap: 20px;
-  .whats-life-text { padding: 40px 0; }
+  }
-  .whats-life-media { height: 400px; width: 100%; }
+
-  
+  .link-col {
-  .stats-inner { gap: 30px; }
+    width: 48%;
-  
+  }
-  .excellence-grid { grid-template-columns: 1fr; }
+
-  .sub-grid { height: auto; grid-template-columns: 1fr 1fr; }
+  .link-col a {
-  
+    width: 100%;
-  .card-grid-3 { grid-template-columns: 1fr; }
+  }
-  .card-img img { aspect-ratio: 16/9; }
+
-  
+  .whats-life-inner {
-  .apply-buttons { flex-wrap: wrap; }
+    flex-direction: column;
-  
+  }
-  .news-layout { grid-template-columns: 1fr; gap: 40px; }
+
-  .events-grid { grid-template-columns: 1fr 1fr; }
+  .whats-life-text {
-  
+    padding: 40px 0;
-  .footer-top { flex-direction: column; gap: 40px; }
+  }
-  .footer-links-grid { justify-content: space-between; gap: 20px; }
+
+  .whats-life-media {
+    height: 400px;
+    width: 100%;
+  }
+
+  .stats-inner {
+    gap: 30px;
+  }
+
+  .excellence-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .sub-grid {
+    height: auto;
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .card-grid-3 {
+    grid-template-columns: 1fr;
+  }
+
+  .card-img img {
+    aspect-ratio: 16/9;
+  }
+
+  .apply-buttons {
+    flex-wrap: wrap;
+  }
+
+  .news-layout {
+    grid-template-columns: 1fr;
+    gap: 40px;
+  }
+
+  .events-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .footer-top {
+    flex-direction: column;
+    gap: 40px;
+  }
+
+  .footer-links-grid {
+    justify-content: space-between;
+    gap: 20px;
+  }
 }
 
 /* ================= RESPONSIVE MOBILE (390px) ================= */
 @media (max-width: 767px) {
-  .hero-title { font-size: 32px; }
+  .hero-title {
-  .hero-desc { font-size: 14px; }
+    font-size: 32px;
-  
+  }
-  .step-into-links { flex-direction: column; }
+
-  .link-col { width: 100%; }
+  .hero-desc {
-  
+    font-size: 14px;
-  .stats-inner { flex-direction: column; gap: 40px; }
+  }
-  
+
-  .sub-grid { grid-template-columns: 1fr; }
+  .step-into-links {
-  
+    flex-direction: column;
-  .apply-buttons { flex-direction: column; align-items: center; }
+  }
-  .apply-buttons .btn { width: 100%; max-width: 300px; }
+
-  
+  .link-col {
-  .looking-grid { flex-direction: column; gap: 0; }
+    width: 100%;
-  
+  }
-  .events-grid { grid-template-columns: 1fr; }
+
-  .news-small { flex-direction: column; }
+  .stats-inner {
-  .news-small img { width: 100%; height: auto; aspect-ratio: 16/9; }
+    flex-direction: column;
-  
+    gap: 40px;
-  .footer-links-grid { flex-direction: column; }
+  }
-  .footer-bottom { flex-direction: column; gap: 20px; align-items: flex-start; }
+
-  .bottom-links { flex-direction: column; gap: 10px; }
+  .sub-grid {
-}
+    grid-template-columns: 1fr;
+  }
+
+  .apply-buttons {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .apply-buttons .btn {
+    width: 100%;
+    max-width: 300px;
+  }
+
+  .looking-grid {
+    flex-direction: column;
+    gap: 0;
+  }
+
+  .events-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .news-small {
+    flex-direction: column;
+  }
+
+  .news-small img {
+    width: 100%;
+    height: auto;
+    aspect-ratio: 16/9;
+  }
+
+  .footer-links-grid {
+    flex-direction: column;
+  }
+
+  .footer-bottom {
+    flex-direction: column;
+    gap: 20px;
+    align-items: flex-start;
+  }
+
+  .bottom-links {
+    flex-direction: column;
+    gap: 10px;
+  }
+}

dist/css/style.css

@@ -0,0 +1,995 @@
+/* ============================================
+   UMass Amherst - Pixel-Perfect CSS
+   ============================================ */
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Open Sans', Arial, sans-serif;
+  color: #333;
+  line-height: 1.5;
+  background: #fff;
+  overflow-x: hidden;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+img {
+  max-width: 100%;
+  display: block;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+.flex-container {
+  display: flex;
+}
+
+/* Colors */
+.text-red {
+  color: #881c1c;
+}
+
+.text-black {
+  color: #000;
+}
+
+.text-grey {
+  color: #666;
+}
+
+.text-light {
+  color: #fff;
+}
+
+.bg-red {
+  background: #881c1c;
+}
+
+.bg-black {
+  background: #111;
+}
+
+.bg-grey {
+  background: #f4f4f4;
+}
+
+.bg-light-grey {
+  background: #e5e5e5;
+}
+
+/* Buttons */
+.btn {
+  display: inline-block;
+  padding: 12px 24px;
+  font-weight: 700;
+  font-size: 13px;
+  text-transform: uppercase;
+  transition: all 0.2s;
+  cursor: pointer;
+}
+
+.btn-red {
+  background: #881c1c;
+  color: #fff;
+}
+
+.btn-red:hover {
+  background: #6b1515;
+}
+
+.btn-red-outline {
+  border: 2px solid #881c1c;
+  color: #881c1c;
+  background: transparent;
+}
+
+.btn-red-outline:hover {
+  background: #881c1c;
+  color: #fff;
+}
+
+.btn-red-fill {
+  background: #881c1c;
+  color: #fff;
+  border-radius: 4px;
+}
+
+.section-title {
+  font-size: 36px;
+  font-weight: 800;
+  text-transform: uppercase;
+  margin-bottom: 20px;
+  line-height: 1.1;
+}
+
+/* ================= HEADER ================= */
+.header {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 100;
+  padding: 30px 0;
+}
+
+.header-inner {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+.logo {
+  color: #fff;
+  line-height: 1.2;
+}
+
+.logo-light {
+  font-size: 16px;
+  font-weight: 400;
+}
+
+.logo-bold {
+  font-size: 24px;
+  font-weight: 800;
+}
+
+.nav-right {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+.top-nav {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  margin-bottom: 10px;
+}
+
+.top-nav a {
+  color: #fff;
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.search-btn {
+  background: #881c1c;
+  color: #fff;
+  border: none;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.main-nav {
+  display: flex;
+  gap: 24px;
+}
+
+.main-nav a {
+  color: #fff;
+  font-size: 13px;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.mobile-only {
+  display: none;
+}
+
+.desktop-only {
+  display: flex;
+}
+
+/* ================= HERO ================= */
+.hero {
+  position: relative;
+  height: 80vh;
+  min-height: 600px;
+  background: #000;
+}
+
+.hero-bg {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.hero-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, transparent 30%, transparent 60%, rgba(0, 0, 0, 0.8) 100%);
+}
+
+.hero-content {
+  position: absolute;
+  bottom: 60px;
+  left: 0;
+  right: 0;
+  color: #fff;
+  padding-left: 20px;
+}
+
+.hero-title {
+  font-size: 56px;
+  font-weight: 800;
+  line-height: 1;
+  margin-bottom: 15px;
+}
+
+.hero-desc {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5;
+}
+
+/* ================= STEP INTO YOUR FUTURE ================= */
+.step-into {
+  padding: 60px 0;
+  background: #fff;
+}
+
+.step-into-inner {
+  align-items: center;
+  justify-content: flex-start;
+  gap: 80px;
+}
+
+.step-into-title {
+  font-size: 32px;
+  font-weight: 800;
+  line-height: 1.1;
+}
+
+.step-into-links {
+  display: flex;
+  gap: 80px;
+}
+
+.link-col {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.link-col a {
+  font-weight: 700;
+  font-size: 14px;
+  text-transform: uppercase;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 200px;
+  border-bottom: 1px solid #eee;
+  padding-bottom: 10px;
+}
+
+.link-col a .arrow {
+  color: #881c1c;
+  font-size: 10px;
+}
+
+/* ================= WHAT'S LIFE LIKE ================= */
+.whats-life {
+  background: #111;
+  color: #fff;
+}
+
+.whats-life-inner {
+  align-items: stretch;
+}
+
+.whats-life-text {
+  flex: 1;
+  padding: 80px 60px 80px 0;
+}
+
+.tabs {
+  display: flex;
+  gap: 20px;
+  margin-bottom: 30px;
+  border-bottom: 1px solid #333;
+  padding-bottom: 10px;
+}
+
+.tab {
+  font-size: 14px;
+  font-weight: 600;
+  color: #888;
+}
+
+.tab.active {
+  color: #fff;
+  border-bottom: 2px solid #fff;
+  padding-bottom: 11px;
+  margin-bottom: -12px;
+}
+
+.whats-life-text .subtitle {
+  font-size: 24px;
+  font-weight: 700;
+  margin-bottom: 15px;
+}
+
+.whats-life-text .desc {
+  font-size: 15px;
+  color: #ccc;
+  margin-bottom: 30px;
+}
+
+.whats-life-media {
+  flex: 1;
+  position: relative;
+}
+
+.whats-life-media img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.play-icon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 60px;
+  height: 60px;
+  background: #881c1c;
+  color: #fff;
+  border: none;
+  border-radius: 50%;
+  font-size: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding-left: 5px;
+  /* center play triangle */
+}
+
+/* ================= STATS ================= */
+.stats {
+  padding: 60px 0;
+  background: #E9E9E9;
+  text-align: center;
+}
+
+.stats-inner {
+  justify-content: center;
+  gap: 100px;
+}
+
+.stat-number {
+  font-size: 48px;
+  font-weight: 800;
+  margin-bottom: 10px;
+}
+
+.stat-text {
+  font-size: 13px;
+  font-weight: 600;
+  color: #555;
+}
+
+/* ================= EXCELLENCE IN ACTION ================= */
+.excellence {
+  padding: 80px 0;
+  background: #fff;
+}
+
+.excellence-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 40px;
+}
+
+.exc-col-left .desc {
+  font-size: 15px;
+  margin-bottom: 30px;
+}
+
+.mt-large {
+  margin-top: 60px;
+}
+
+.story-card {
+  position: relative;
+  overflow: hidden;
+}
+
+.story-card img {
+  width: 100%;
+  display: block;
+}
+
+.story-card.has-bg .story-content {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
+  padding: 40px 30px 20px;
+  color: #fff;
+}
+
+.tag {
+  display: block;
+  font-size: 11px;
+  font-weight: 800;
+  text-transform: uppercase;
+  margin-bottom: 8px;
+}
+
+.story-content h3 {
+  font-size: 22px;
+  font-weight: 700;
+  margin-bottom: 10px;
+  line-height: 1.2;
+}
+
+.story-content p {
+  font-size: 13px;
+  opacity: 0.9;
+}
+
+.story-card.large h3 {
+  font-size: 28px;
+}
+
+.sub-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+  gap: 0;
+  height: 300px;
+}
+
+.box-black {
+  background: #000;
+  padding: 30px;
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.box-red {
+  background: #881c1c;
+  padding: 30px;
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.box-grey {
+  background: #444;
+  padding: 30px;
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.play-box {
+  background: #f4f4f4;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.play-icon-large {
+  width: 80px;
+  height: 80px;
+  background: #881c1c;
+  color: #fff;
+  border-radius: 50%;
+  border: none;
+  font-size: 24px;
+  cursor: pointer;
+  padding-left: 6px;
+}
+
+/* ================= BLAZE YOUR OWN TRAIL ================= */
+.blaze-trail {
+  color: #fff;
+  padding: 80px 0;
+  background: #151515;
+}
+
+.blaze-trail .card-body p {
+  color: #fff;
+}
+
+.max-w-800 {
+  max-width: 800px;
+  margin-bottom: 40px;
+  font-size: 15px;
+}
+
+.card-grid-3 {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 30px;
+}
+
+.card-img img {
+  width: 100%;
+  aspect-ratio: 3/2;
+  object-fit: cover;
+}
+
+.card-body {
+  padding: 20px 0;
+}
+
+.card-body h3 {
+  font-size: 20px;
+  font-weight: 700;
+  margin-bottom: 10px;
+}
+
+.card-body p {
+  font-size: 14px;
+  color: #555;
+}
+
+/* ================= APPLY TODAY ================= */
+.apply-today {
+  padding: 60px 0;
+  background: #fff;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.apply-buttons {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+}
+
+.apply-buttons .btn {
+  width: 180px;
+}
+
+/* ================= I'M LOOKING FOR ================= */
+.looking-for {
+  padding: 80px 0;
+  background: #e5e5e5;
+}
+
+.looking-grid {
+  display: flex;
+  gap: 60px;
+}
+
+.looking-grid .col {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.looking-grid .col a {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 15px 0;
+  border-bottom: 1px solid #ccc;
+  font-weight: 700;
+  font-size: 14px;
+  color: #000;
+}
+
+.looking-grid .col a .arrow {
+  font-size: 10px;
+  color: #881c1c;
+}
+
+/* ================= NEWS & EVENTS ================= */
+.news-events {
+  padding: 80px 0;
+  background: #fff;
+}
+
+.news-layout {
+  display: grid;
+  grid-template-columns: 60% 35%;
+  gap: 5%;
+}
+
+.news-main img {
+  width: 100%;
+  aspect-ratio: 16/9;
+  object-fit: cover;
+}
+
+.mt-small {
+  margin-top: 20px;
+}
+
+.news-main-title {
+  font-size: 28px;
+  font-weight: 800;
+  margin: 10px 0;
+  line-height: 1.2;
+}
+
+.news-main-desc {
+  font-size: 15px;
+  color: #444;
+}
+
+.news-sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+}
+
+.news-small {
+  display: flex;
+  gap: 15px;
+}
+
+.news-small img {
+  width: 140px;
+  height: 100px;
+  object-fit: cover;
+}
+
+.news-info h4 {
+  font-size: 15px;
+  font-weight: 700;
+  margin: 5px 0;
+  line-height: 1.3;
+}
+
+.news-info p {
+  font-size: 12px;
+  color: #666;
+}
+
+.events-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 20px;
+  margin-top: 60px;
+}
+
+.event-card img {
+  width: 100%;
+  aspect-ratio: 3/2;
+  object-fit: cover;
+}
+
+.event-info {
+  padding: 15px 0;
+}
+
+.event-info .date {
+  font-weight: 800;
+  font-size: 12px;
+}
+
+.event-info h4 {
+  font-size: 16px;
+  font-weight: 700;
+  margin: 5px 0;
+}
+
+.event-info .type {
+  font-size: 13px;
+}
+
+/* ================= FOOTER ================= */
+.footer {
+  background: #111;
+  color: #fff;
+  padding: 60px 0 30px;
+}
+
+.footer-top {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 40px;
+}
+
+.footer-brand {
+  flex: 1;
+}
+
+.footer-logo {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  margin-bottom: 20px;
+}
+
+.m-box {
+  width: 50px;
+  height: 50px;
+  background: #881c1c;
+  color: #fff;
+  font-size: 24px;
+  font-weight: 800;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.footer-logo .logo-text {
+  font-size: 14px;
+  line-height: 1.2;
+}
+
+.social-icons {
+  display: flex;
+  gap: 15px;
+}
+
+.social-icons a {
+  color: #fff;
+  width: 20px;
+  height: 20px;
+}
+
+.footer-links-grid {
+  flex: 2;
+  display: flex;
+  justify-content: flex-end;
+  gap: 80px;
+}
+
+.footer-col h4 {
+  font-size: 12px;
+  font-weight: 700;
+  color: #888;
+  margin-bottom: 15px;
+}
+
+.footer-col a {
+  display: block;
+  font-size: 13px;
+  color: #ccc;
+  margin-bottom: 10px;
+}
+
+.footer-bottom {
+  display: flex;
+  justify-content: space-between;
+  border-top: 1px solid #333;
+  padding-top: 20px;
+  font-size: 12px;
+  color: #888;
+}
+
+.bottom-links {
+  display: flex;
+  gap: 20px;
+}
+
+.bottom-links a {
+  color: #888;
+}
+
+/* ================= RESPONSIVE TABLET (768px) ================= */
+@media (max-width: 1024px) {
+  .desktop-only {
+    display: none;
+  }
+
+  .mobile-only {
+    display: flex;
+  }
+
+  .header {
+    background: #111;
+    padding: 15px 0;
+  }
+
+  .mobile-actions {
+    display: flex;
+    align-items: center;
+  }
+
+  .search-btn-mobile {
+    background: #881c1c;
+    color: #fff;
+    border: none;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .hamburger-btn {
+    background: transparent;
+    color: #fff;
+    border: none;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .hero {
+    height: auto;
+    padding: 150px 0 80px;
+  }
+
+  .hero-title {
+    font-size: 40px;
+  }
+
+  .step-into-inner {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 30px;
+  }
+
+  .step-into-links {
+    width: 100%;
+    justify-content: space-between;
+    gap: 20px;
+  }
+
+  .link-col {
+    width: 48%;
+  }
+
+  .link-col a {
+    width: 100%;
+  }
+
+  .whats-life-inner {
+    flex-direction: column;
+  }
+
+  .whats-life-text {
+    padding: 40px 0;
+  }
+
+  .whats-life-media {
+    height: 400px;
+    width: 100%;
+  }
+
+  .stats-inner {
+    gap: 30px;
+  }
+
+  .excellence-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .sub-grid {
+    height: auto;
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .card-grid-3 {
+    grid-template-columns: 1fr;
+  }
+
+  .card-img img {
+    aspect-ratio: 16/9;
+  }
+
+  .apply-buttons {
+    flex-wrap: wrap;
+  }
+
+  .news-layout {
+    grid-template-columns: 1fr;
+    gap: 40px;
+  }
+
+  .events-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .footer-top {
+    flex-direction: column;
+    gap: 40px;
+  }
+
+  .footer-links-grid {
+    justify-content: space-between;
+    gap: 20px;
+  }
+}
+
+/* ================= RESPONSIVE MOBILE (390px) ================= */
+@media (max-width: 767px) {
+  .hero-title {
+    font-size: 32px;
+  }
+
+  .hero-desc {
+    font-size: 14px;
+  }
+
+  .step-into-links {
+    flex-direction: column;
+  }
+
+  .link-col {
+    width: 100%;
+  }
+
+  .stats-inner {
+    flex-direction: column;
+    gap: 40px;
+  }
+
+  .sub-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .apply-buttons {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .apply-buttons .btn {
+    width: 100%;
+    max-width: 300px;
+  }
+
+  .looking-grid {
+    flex-direction: column;
+    gap: 0;
+  }
+
+  .events-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .news-small {
+    flex-direction: column;
+  }
+
+  .news-small img {
+    width: 100%;
+    height: auto;
+    aspect-ratio: 16/9;
+  }
+
+  .footer-links-grid {
+    flex-direction: column;
+  }
+
+  .footer-bottom {
+    flex-direction: column;
+    gap: 20px;
+    align-items: flex-start;
+  }
+
+  .bottom-links {
+    flex-direction: column;
+    gap: 10px;
+  }
+}

dist/index.html

@@ -0,0 +1,434 @@
+<!DOCTYPE html>
+<html lang="vi">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Trang chủ - Bệnh Viện Đa Khoa Quốc Tế S.I.S Cần Thơ</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;0,800;1,400&display=swap"
+    rel="stylesheet">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
+    integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
+    crossorigin="anonymous" referrerpolicy="no-referrer" />
+  <link rel="stylesheet" href="css/style.css">
+  <style>
+    .hero-bg {
+      object-position: center top;
+    }
+
+    .logo img {
+      height: 60px;
+      width: auto;
+    }
+  </style>
+</head>
+
+<body>
+
+  <!-- HEADER -->
+  <header class="header">
+    <div class="header-inner container">
+      <a href="#" class="logo">
+        <img src="images/sis-logo.png" alt="S.I.S Cần Thơ Logo">
+      </a>
+
+      <div class="nav-right desktop-only">
+        <div class="top-nav">
+          <a href="#">THÔNG TIN CHO...</a>
+          <a href="#">BỆNH NHÂN</a>
+          <a href="#">NGƯỜI NHÀ</a>
+          <a href="#">TUYỂN DỤNG</a>
+          <a href="#">LIÊN HỆ</a>
+          <button class="search-btn" aria-label="Search">
+            <svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="3" fill="none">
+              <circle cx="11" cy="11" r="8"></circle>
+              <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+            </svg>
+          </button>
+        </div>
+        <div class="main-nav">
+          <a href="#">VỀ CHÚNG TÔI</a>
+          <a href="#">CHUYÊN KHOA</a>
+          <a href="#">BÁC SĨ</a>
+          <a href="#">DỊCH VỤ</a>
+          <a href="#">TIN TỨC & SỰ KIỆN</a>
+          <a href="#">ĐẶT LỊCH KHÁM</a>
+        </div>
+      </div>
+
+      <div class="mobile-actions mobile-only">
+        <button class="search-btn-mobile">
+          <svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none">
+            <circle cx="11" cy="11" r="8"></circle>
+            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+          </svg>
+        </button>
+        <button class="hamburger-btn">
+          <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none">
+            <line x1="3" y1="12" x2="21" y2="12"></line>
+            <line x1="3" y1="6" x2="21" y2="6"></line>
+            <line x1="3" y1="18" x2="21" y2="18"></line>
+          </svg>
+        </button>
+      </div>
+    </div>
+  </header>
+
+  <!-- HERO -->
+  <section class="hero">
+    <img src="images/banner-web-02-scaled.jpg" alt="S.I.S Cần Thơ Banner" class="hero-bg">
+    <div class="hero-overlay"></div>
+    <div class="hero-content container">
+      <h1 class="hero-title">CỨU TINH CHO<br>BỆNH NHÂN ĐỘT QUỴ</h1>
+      <p class="hero-desc">Bệnh viện Đa khoa Quốc tế S.I.S Cần Thơ ra đời với sứ mệnh<br>chăm sóc sức khỏe toàn diện với
+        hai chuyên khoa mũi nhọn là đột quỵ và tim mạch.</p>
+    </div>
+  </section>
+
+  <!-- STEP INTO YOUR FUTURE -->
+  <section class="step-into">
+    <div class="container flex-container step-into-inner">
+      <h2 class="step-into-title">ĐẶT LỊCH<br><span class="text-red">KHÁM BỆNH</span></h2>
+      <div class="step-into-links">
+        <div class="link-col">
+          <a href="#">KHÁM LẦN ĐẦU <span class="arrow">▶</span></a>
+          <a href="#">TÁI KHÁM <span class="arrow">▶</span></a>
+        </div>
+        <div class="link-col">
+          <a href="#">TƯ VẤN TRỰC TUYẾN <span class="arrow">▶</span></a>
+          <a href="#">HƯỚNG DẪN ĐẶT LỊCH <span class="arrow">▶</span></a>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- WHAT'S LIFE LIKE -->
+  <section class="whats-life">
+    <div class="container flex-container whats-life-inner">
+      <div class="whats-life-text">
+        <h2 class="section-title">VỀ BỆNH VIỆN<br>S.I.S CẦN THƠ</h2>
+        <div class="tabs">
+          <a href="#" class="tab active">Tổng quan</a>
+          <a href="#" class="tab">Cơ sở vật chất</a>
+          <a href="#" class="tab">Đội ngũ bác sĩ</a>
+          <a href="#" class="tab">Thành tựu</a>
+        </div>
+        <h3 class="subtitle">Ứng dụng công nghệ tiên tiến</h3>
+        <p class="desc">Với mục tiêu chăm sóc sức khỏe cho người dân TP. Cần Thơ và các tỉnh miền Tây, bệnh viện ứng
+          dụng công nghệ tiên tiến trên thế giới trong điều trị, cấp cứu và can thiệp đột quỵ, tim mạch kỹ thuật cao.
+        </p>
+        <a href="#" class="btn btn-red">TÌM HIỂU VỀ BỆNH VIỆN</a>
+      </div>
+      <div class="whats-life-media">
+        <img src="images/w2-01-scaled.jpg" alt="Bệnh viện S.I.S Cần Thơ">
+        <button class="play-icon" aria-label="Play video">▶</button>
+      </div>
+    </div>
+  </section>
+
+  <!-- STATS -->
+  <section class="stats">
+    <div class="container flex-container stats-inner">
+      <div class="stat-item">
+        <h2 class="stat-number text-red">1800 1115</h2>
+        <p class="stat-text">Tổng đài hỗ trợ và tư vấn<br>Hoạt động từ 6h00 đến 21h00</p>
+      </div>
+      <div class="stat-item">
+        <h2 class="stat-number text-red">24/7</h2>
+        <p class="stat-text">Trực Cấp Cứu & Nội Viện</p>
+      </div>
+      <div class="stat-item">
+        <h2 class="stat-number text-red">Top 1</h2>
+        <p class="stat-text">Khu vực ĐBSCL về Can thiệp Đột quỵ & Tim mạch</p>
+      </div>
+    </div>
+  </section>
+
+  <!-- EXCELLENCE IN ACTION -->
+  <section class="excellence">
+    <div class="container">
+      <div class="excellence-grid">
+        <div class="exc-col-left">
+          <h2 class="section-title text-black">TIN TỨC NỔI BẬT</h2>
+          <p class="desc text-black">Bệnh viện S.I.S Cần Thơ liên tục cập nhật các hoạt động chuyên môn, thành tựu y
+            khoa và những chương trình vì cộng đồng nhằm nâng cao nhận thức bảo vệ sức khỏe cho người dân.</p>
+          <a href="#" class="btn btn-red">XEM TẤT CẢ BÀI VIẾT</a>
+
+          <div class="story-card has-bg mt-large">
+            <img src="images/hien-mau-nhan-dao-s.i.s-can-tho.jpg" alt="Hiến máu nhân đạo">
+            <div class="story-content">
+              <span class="tag">HOẠT ĐỘNG CỘNG ĐỒNG</span>
+              <h3>Bệnh viện S.I.S Cần Thơ: Nơi hiểu rõ giá trị của từng đơn vị máu</h3>
+              <p>Tiếp nhận nhiều ca bệnh nguy kịch mỗi ngày, tập thể nhân viên bệnh viện càng thấu hiểu giá trị của từng
+                đơn vị máu.</p>
+            </div>
+          </div>
+        </div>
+
+        <div class="exc-col-right">
+          <div class="story-card has-bg large">
+            <img
+              src="images/22.5-8-nam-chiu-dung-con-dau-nhu-rach-da-nguoi-dan-ong-hoi-sinh-sau-ca-mo-giai-ep-vi-mach-scaled.jpg"
+              alt="Ca mổ thành công">
+            <div class="story-content">
+              <span class="tag">CA LÂM SÀNG</span>
+              <h3>8 năm chịu đựng cơn đau như “rạch da”, người đàn ông hồi sinh</h3>
+              <p>Thoát khỏi cơn đau hành hạ sau phẫu thuật giải ép vi mạch tại Bệnh viện Đa khoa Quốc tế S.I.S.</p>
+            </div>
+          </div>
+
+          <div class="sub-grid">
+            <div class="story-card box-black">
+              <span class="tag text-grey">KỸ THUẬT MỚI</span>
+              <h3>Lần đầu can thiệp đặt stent tự tiêu tại ĐBSCL</h3>
+            </div>
+            <div class="story-card box-red">
+              <span class="tag text-light">TUYỂN DỤNG</span>
+              <h3>SIS Việt Nam tuyển dụng Quý II năm 2026</h3>
+            </div>
+            <div class="story-card box-grey">
+              <span class="tag text-light">HƯỚNG DẪN</span>
+              <h3>Quy trình khám chữa bệnh tại S.I.S Cần Thơ</h3>
+            </div>
+            <div class="play-box">
+              <button class="play-icon-large">▶</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- BLAZE YOUR OWN TRAIL -->
+  <section class="blaze-trail">
+    <div class="container">
+      <h2 class="section-title">DỊCH VỤ CHĂM SÓC SỨC KHỎE</h2>
+      <p class="desc max-w-800">Mang đến những giải pháp chăm sóc y tế chuyên sâu, an toàn và hiệu quả nhất.
+        Bệnh viện được trang bị máy móc hiện đại và đội ngũ chuyên gia giàu kinh nghiệm luôn sẵn sàng phục vụ.</p>
+
+      <div class="card-grid-3">
+        <div class="card">
+          <div class="card-img" style="text-align: center; margin: 30px 0 10px;"><i
+              class="fa-solid fa-truck-medical text-red" style="font-size: 60px; color: #e74c3c;"></i></div>
+          <div class="card-body">
+            <h3>Cấp Cứu Đột Quỵ 24/7</h3>
+            <p>Hệ thống cấp cứu tiêu chuẩn quốc tế, tận dụng tối đa "thời gian vàng" để cứu sống bệnh nhân đột quỵ.</p>
+          </div>
+        </div>
+        <div class="card">
+          <div class="card-img" style="text-align: center; margin: 30px 0 10px;"><i
+              class="fa-solid fa-heart-pulse text-red" style="font-size: 60px; color: #e74c3c;"></i></div>
+          <div class="card-body">
+            <h3>Can Thiệp Tim Mạch</h3>
+            <p>Ứng dụng công nghệ can thiệp nội mạch DSA tiên tiến, xử lý các ca bệnh tim mạch khó và phức tạp.</p>
+          </div>
+        </div>
+        <div class="card">
+          <div class="card-img" style="text-align: center; margin: 30px 0 10px;"><i
+              class="fa-solid fa-stethoscope text-red" style="font-size: 60px; color: #e74c3c;"></i></div>
+          <div class="card-body">
+            <h3>Tầm Soát Sức Khỏe</h3>
+            <p>Gói khám tầm soát sức khỏe tổng quát và chuyên sâu giúp phát hiện sớm nguy cơ đột quỵ và các bệnh lý
+              khác.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- APPLY TODAY -->
+  <section class="apply-today">
+    <div class="container text-center">
+      <h2 class="section-title text-black">THÔNG TIN LIÊN HỆ</h2>
+      <div class="apply-buttons">
+        <a href="#" class="btn btn-red-outline">GỌI TỔNG ĐÀI 1800 1115</a>
+        <a href="#" class="btn btn-red-outline">ĐẶT LỊCH KHÁM CHUYÊN GIA</a>
+        <a href="#" class="btn btn-red-outline">BẢN ĐỒ ĐƯỜNG ĐI</a>
+        <a href="#" class="btn btn-red-outline">TƯ VẤN QUA EMAIL</a>
+      </div>
+    </div>
+  </section>
+
+  <!-- I'M LOOKING FOR... -->
+  <section class="looking-for">
+    <div class="container">
+      <h2 class="section-title text-black">TÌM KIẾM NHANH...</h2>
+      <div class="looking-grid">
+        <div class="col">
+          <a href="#">TRA CỨU KẾT QUẢ KHÁM BỆNH <span class="arrow">▶</span></a>
+          <a href="#">BẢNG GIÁ DỊCH VỤ <span class="arrow">▶</span></a>
+          <a href="#">HƯỚNG DẪN DÀNH CHO BỆNH NHÂN <span class="arrow">▶</span></a>
+          <a href="#">LỊCH KHÁM CỦA BÁC SĨ <span class="arrow">▶</span></a>
+        </div>
+        <div class="col">
+          <a href="#">CHÍNH SÁCH BẢO HIỂM Y TẾ <span class="arrow">▶</span></a>
+          <a href="#">CÁC GÓI KHÁM TẦM SOÁT <span class="arrow">▶</span></a>
+          <a href="#">HỎI ĐÁP Y KHOA <span class="arrow">▶</span></a>
+          <a href="#">THÔNG TIN CHUYỂN VIỆN <span class="arrow">▶</span></a>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- NEWS & EVENTS -->
+  <section class="news-events">
+    <div class="container">
+      <h2 class="section-title text-black">TIN TỨC BỆNH VIỆN</h2>
+
+      <div class="news-layout">
+        <!-- Left: Featured -->
+        <div class="news-main">
+          <img
+            src="images/lan-dau-tien-can-thiep-dat-stent-tu-tieu-cho-benh-nhan-nhoi-mau-co-tim-tai-dbscl-bia-scaled.jpg"
+            alt="Đặt stent tự tiêu">
+          <span class="tag text-red mt-small">Y KHOA TIÊN TIẾN</span>
+          <h3 class="news-main-title">Lần đầu tiên can thiệp đặt stent tự tiêu cho bệnh nhân nhồi máu cơ tim tại ĐBSCL
+          </h3>
+          <p class="news-main-desc">Anh T.V.H (48 tuổi) nhập viện vì nhồi máu cơ tim cấp đã được các bác sĩ tại Bệnh
+            viện Đa khoa Quốc tế S.I.S Cần Thơ can thiệp thành công bằng kỹ thuật đặt stent tự tiêu thế hệ mới.</p>
+        </div>
+
+        <!-- Right: Small News -->
+        <div class="news-sidebar">
+          <div class="news-small">
+            <img src="images/banner-1.jpg" alt="Đột quỵ">
+            <div class="news-info">
+              <span class="tag text-red">KIẾN THỨC Y KHOA</span>
+              <h4>Hãy quan tâm đến đột quỵ bởi vì đột quỵ có thể xảy ra tại mọi thời điểm</h4>
+              <p>Đột quỵ không loại trừ bất cứ ai, vì vậy việc trang bị kiến thức và phòng ngừa sớm là cách tốt nhất để
+                bảo vệ mạng sống.</p>
+            </div>
+          </div>
+          <div class="news-small">
+            <img src="images/banner-2.jpg" alt="Bệnh viện SIS">
+            <div class="news-info">
+              <span class="tag text-red">TUYỂN DỤNG</span>
+              <h4>[CẦN THƠ] Bản tin tuyển dụng Quý II năm 2026</h4>
+              <p>Bệnh viện liên tục mở rộng năng lực điều trị, đào tạo và chăm sóc sức khỏe, chúng tôi chào đón các tài
+                năng y khoa tham gia đội ngũ.</p>
+            </div>
+          </div>
+          <div class="news-small">
+            <img src="images/banner-3.jpg" alt="Hội thảo">
+            <div class="news-info">
+              <span class="tag text-red">NGHIÊN CỨU & ĐÀO TẠO</span>
+              <h4>Nơi nghiên cứu khoa học và đào tạo chuyên sâu</h4>
+              <p>Ứng dụng phát triển công nghệ mới trong chẩn đoán, điều trị, phòng ngừa đột quỵ, đào tạo chuyên sâu về
+                can thiệp nội mạch DSA.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Event cards -->
+      <div class="events-grid">
+        <div class="event-card">
+          <div style="display: flex; align-items: center; justify-content: center; width: 100px; padding: 20px;"><i
+              class="fa-solid fa-calendar-check text-red" style="font-size: 50px; color: #e74c3c;"></i></div>
+          <div class="event-info">
+            <span class="date text-red">Tháng 6</span>
+            <h4>Hội nghị Tim mạch & Đột quỵ 2026</h4>
+            <span class="type text-grey">Sự kiện chuyên môn</span>
+          </div>
+        </div>
+        <div class="event-card">
+          <div style="display: flex; align-items: center; justify-content: center; width: 100px; padding: 20px;"><i
+              class="fa-solid fa-hand-holding-medical text-red" style="font-size: 50px; color: #e74c3c;"></i></div>
+          <div class="event-info">
+            <span class="date text-red">Sắp diễn ra</span>
+            <h4>Chương trình tầm soát bệnh lý tim mạch</h4>
+            <span class="type text-grey">Hoạt động cộng đồng</span>
+          </div>
+        </div>
+        <div class="event-card">
+          <div style="display: flex; align-items: center; justify-content: center; width: 100px; padding: 20px;"><i
+              class="fa-solid fa-headset text-red" style="font-size: 50px; color: #e74c3c;"></i></div>
+          <div class="event-info">
+            <span class="date text-red">Hàng tuần</span>
+            <h4>Tư vấn sức khỏe trực tuyến cùng chuyên gia</h4>
+            <span class="type text-grey">Livestream</span>
+          </div>
+        </div>
+        <div class="event-card">
+          <div style="display: flex; align-items: center; justify-content: center; width: 100px; padding: 20px;"><i
+              class="fa-solid fa-user-doctor text-red" style="font-size: 50px; color: #e74c3c;"></i></div>
+          <div class="event-info">
+            <span class="date text-red">Liên hệ ngay</span>
+            <h4>Chăm sóc bệnh nhân ngoại trú</h4>
+            <span class="type text-grey">Dịch vụ</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="text-center mt-large">
+        <a href="#" class="btn btn-red-fill">XEM THÊM TIN TỨC</a>
+      </div>
+    </div>
+  </section>
+
+  <!-- FOOTER -->
+  <footer class="footer">
+    <div class="container">
+      <div class="footer-top">
+        <div class="footer-brand">
+          <div class="footer-logo">
+            <img src="images/sis-logo.png" alt="S.I.S Logo" style="height: 60px; filter: brightness(0) invert(1);">
+            <div class="logo-text" style="margin-left: 15px;">Bệnh Viện Đa Khoa<br>Quốc Tế<br>S.I.S Cần Thơ</div>
+          </div>
+          <div class="social-icons">
+            <a href="#" aria-label="Facebook"><svg viewBox="0 0 24 24" fill="currentColor">
+                <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
+              </svg></a>
+            <a href="#" aria-label="YouTube"><svg viewBox="0 0 24 24" fill="currentColor">
+                <path
+                  d="M22.54 6.42a2.78 2.78 0 00-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 00-1.94 2A29 29 0 001 11.75a29 29 0 00.46 5.33 2.78 2.78 0 001.94 2c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 001.94-2 29 29 0 00.46-5.33 29 29 0 00-.46-5.33zM9.75 15.02V8.48L15.5 11.75l-5.75 3.27z">
+                </path>
+              </svg></a>
+            <a href="#" aria-label="Tiktok"><svg viewBox="0 0 24 24" fill="currentColor">
+                <path
+                  d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.12-3.44-3.17-3.64-5.46-.24-2.4.9-4.87 2.87-6.2 1.48-1.04 3.32-1.41 5.09-1.2v4.06c-.66-.02-1.33.11-1.92.42-.99.5-1.66 1.54-1.63 2.65.02.94.49 1.83 1.25 2.37.79.57 1.84.71 2.75.45 1.05-.3 1.84-1.18 2.05-2.25.12-.57.1-1.16.1-1.74V.02h4.08z">
+                </path>
+              </svg></a>
+          </div>
+        </div>
+
+        <div class="footer-links-grid">
+          <div class="footer-col">
+            <h4>LIÊN HỆ CHÚNG TÔI</h4>
+            <a href="#">Địa chỉ: 397 Nguyễn Văn Cừ nối dài, P.An Bình, TP. Cần Thơ</a>
+            <a href="#">Điện thoại: 0292.378.9911</a>
+            <a href="#">Email: cskh@dotquy.vn</a>
+            <a href="#">Hotline: 1800 1115</a>
+          </div>
+          <div class="footer-col">
+            <h4>THỜI GIAN LÀM VIỆC</h4>
+            <a href="#">Thứ 2 - Chủ Nhật: 07h00 - 16h30</a>
+            <a href="#">Cấp Cứu & Nội Viện: 24/7</a>
+            <a href="#">Tư vấn tổng đài: 06h00 - 21h00</a>
+          </div>
+          <div class="footer-col">
+            <h4>LIÊN KẾT</h4>
+            <a href="#">Bảo mật thông tin</a>
+            <a href="#">Thanh toán & khiếu nại</a>
+            <a href="#">Đà Nẵng: cskh.dn@dotquy.vn</a>
+            <a href="#">Quy định đặt lịch</a>
+          </div>
+        </div>
+      </div>
+
+      <div class="footer-bottom">
+        <p>&copy; 2026 Bệnh Viện Đa Khoa Quốc Tế S.I.S Cần Thơ.</p>
+        <div class="bottom-links">
+          <a href="#">Chính sách trang web</a>
+          <a href="#">Bảo mật</a>
+          <a href="#">Điều khoản sử dụng</a>
+        </div>
+      </div>
+    </div>
+  </footer>
+
+</body>
+
+</html>

dist/js/main.js

@@ -0,0 +1,97 @@
+/* ============================================
+   UMass Amherst - Main JavaScript
+   ============================================ */
+
+document.addEventListener('DOMContentLoaded', () => {
+
+  // ---- Mobile Menu ----
+  const menuToggle = document.getElementById('menu-toggle');
+  const menuClose = document.getElementById('menu-close');
+  const mobileMenu = document.getElementById('mobile-menu');
+
+  if (menuToggle) {
+    menuToggle.addEventListener('click', () => {
+      mobileMenu.classList.add('active');
+      document.body.style.overflow = 'hidden';
+    });
+  }
+
+  if (menuClose) {
+    menuClose.addEventListener('click', () => {
+      mobileMenu.classList.remove('active');
+      document.body.style.overflow = '';
+    });
+  }
+
+  document.querySelectorAll('.mobile-menu__link').forEach(link => {
+    link.addEventListener('click', () => {
+      mobileMenu.classList.remove('active');
+      document.body.style.overflow = '';
+    });
+  });
+
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape' && mobileMenu.classList.contains('active')) {
+      mobileMenu.classList.remove('active');
+      document.body.style.overflow = '';
+    }
+  });
+
+  // ---- Hero Slider ----
+  const slides = document.querySelectorAll('.hero__slide');
+  const dots = document.querySelectorAll('.hero__dot');
+  let currentSlide = 0;
+  let slideInterval;
+
+  function goToSlide(index) {
+    slides.forEach(s => s.classList.remove('active'));
+    dots.forEach(d => d.classList.remove('active'));
+    slides[index].classList.add('active');
+    dots[index].classList.add('active');
+    currentSlide = index;
+  }
+
+  function nextSlide() {
+    const next = (currentSlide + 1) % slides.length;
+    goToSlide(next);
+  }
+
+  function startAutoSlide() {
+    slideInterval = setInterval(nextSlide, 5000);
+  }
+
+  function resetAutoSlide() {
+    clearInterval(slideInterval);
+    startAutoSlide();
+  }
+
+  dots.forEach(dot => {
+    dot.addEventListener('click', () => {
+      const index = parseInt(dot.dataset.slide, 10);
+      goToSlide(index);
+      resetAutoSlide();
+    });
+  });
+
+  if (slides.length > 1) {
+    startAutoSlide();
+  }
+
+  // ---- Scroll Animations ----
+  const fadeElements = document.querySelectorAll('.fade-up');
+
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        entry.target.classList.add('visible');
+        observer.unobserve(entry.target);
+      }
+    });
+  }, {
+    threshold: 0.1,
+    rootMargin: '0px 0px -60px 0px'
+  });
+
+  fadeElements.forEach(el => observer.observe(el));
+
+});

index.html

@@ -1,33 +1,40 @@
 <!DOCTYPE html>
 <html lang="vi">
+
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Trang chủ - Bệnh Viện Đa Khoa Quốc Tế S.I.S Cần Thơ</title>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;0,800;1,400&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;0,800;1,400&display=swap"
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    rel="stylesheet">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
+    integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
+    crossorigin="anonymous" referrerpolicy="no-referrer" />
   <link rel="stylesheet" href="css/style.css">
   <style>
     .hero-bg {
-        object-position: center top;
+      object-position: center top;
     }
+
     .logo img {
-        height: 60px;
+      height: 60px;
-        width: auto;
+      width: auto;
     }
   </style>
 </head>
+
 <body>
 
   <!-- HEADER -->
   <header class="header">
     <div class="header-inner container">
       <a href="#" class="logo">
-        <img src="bài viết/Trang chủ - Bệnh Viện Đa Khoa Quốc Tế S.I.S Cần Thơ_files/sis-logo.png" alt="S.I.S Cần Thơ Logo">
+        <img src="bài viết/Trang chủ - Bệnh Viện Đa Khoa Quốc Tế S.I.S Cần Thơ_files/sis-logo.png"
+          alt="S.I.S Cần Thơ Logo">
       </a>
-      
+
       <div class="nav-right desktop-only">
         <div class="top-nav">
           <a href="#">THÔNG TIN CHO...</a>
@@ -36,7 +43,10 @@
           <a href="#">TUYỂN DỤNG</a>
           <a href="#">LIÊN HỆ</a>
           <button class="search-btn" aria-label="Search">
-            <svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="3" fill="none"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+            <svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="3" fill="none">
+              <circle cx="11" cy="11" r="8"></circle>
+              <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+            </svg>
           </button>
         </div>
         <div class="main-nav">
@@ -48,13 +58,20 @@
           <a href="#">ĐẶT LỊCH KHÁM</a>
         </div>
       </div>
-      
+
       <div class="mobile-actions mobile-only">
         <button class="search-btn-mobile">
-          <svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+          <svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none">
+            <circle cx="11" cy="11" r="8"></circle>
+            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+          </svg>
         </button>
         <button class="hamburger-btn">
-          <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
+          <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none">
+            <line x1="3" y1="12" x2="21" y2="12"></line>
+            <line x1="3" y1="6" x2="21" y2="6"></line>
+            <line x1="3" y1="18" x2="21" y2="18"></line>
+          </svg>
         </button>
       </div>
     </div>
@@ -62,11 +79,13 @@
 
   <!-- HERO -->
   <section class="hero">
-    <img src="bài viết/Trang chủ - Bệnh Viện Đa Khoa Quốc Tế S.I.S Cần Thơ_files/BANNER-WEB-02-scaled.jpg" alt="S.I.S Cần Thơ Banner" class="hero-bg">
+    <img src="bài viết/Trang chủ - Bệnh Viện Đa Khoa Quốc Tế S.I.S Cần Thơ_files/BANNER-WEB-02-scaled.jpg"
+      alt="S.I.S Cần Thơ Banner" class="hero-bg">
     <div class="hero-overlay"></div>
     <div class="hero-content container">
       <h1 class="hero-title">CỨU TINH CHO<br>BỆNH NHÂN ĐỘT QUỴ</h1>
-      <p class="hero-desc">Bệnh viện Đa khoa Quốc tế S.I.S Cần Thơ ra đời với sứ mệnh<br>chăm sóc sức khỏe toàn diện với hai chuyên khoa mũi nhọn là đột quỵ và tim mạch.</p>
+      <p class="hero-desc">Bệnh viện Đa khoa Quốc tế S.I.S Cần Thơ ra đời với sứ mệnh<br>chăm sóc sức khỏe toàn diện với
+        hai chuyên khoa mũi nhọn là đột quỵ và tim mạch.</p>
     </div>
   </section>
 
@@ -99,11 +118,14 @@
           <a href="#" class="tab">Thành tựu</a>
         </div>
         <h3 class="subtitle">Ứng dụng công nghệ tiên tiến</h3>
-        <p class="desc">Với mục tiêu chăm sóc sức khỏe cho người dân TP. Cần Thơ và các tỉnh miền Tây, bệnh viện ứng dụng công nghệ tiên tiến trên thế giới trong điều trị, cấp cứu và can thiệp đột quỵ, tim mạch kỹ thuật cao.</p>
+        <p class="desc">Với mục tiêu chăm sóc sức khỏe cho người dân TP. Cần Thơ và các tỉnh miền Tây, bệnh viện ứng
+          dụng công nghệ tiên tiến trên thế giới trong điều trị, cấp cứu và can thiệp đột quỵ, tim mạch kỹ thuật cao.
+        </p>
         <a href="#" class="btn btn-red">TÌM HIỂU VỀ BỆNH VIỆN</a>
       </div>
       <div class="whats-life-media">
-        <img src="bài viết/Trang chủ - Bệnh Viện Đa Khoa Quốc Tế S.I.S Cần Thơ_files/W2-01-scaled.jpg" alt="Bệnh viện S.I.S Cần Thơ">
+        <img src="bài viết/Trang chủ - Bệnh Viện Đa Khoa Quốc Tế S.I.S Cần Thơ_files/W2-01-scaled.jpg"
+          alt="Bệnh viện S.I.S Cần Thơ">
         <button class="play-icon" aria-label="Play video">▶</button>
       </div>
     </div>
@@ -133,29 +155,35 @@
       <div class="excellence-grid">
         <div class="exc-col-left">
           <h2 class="section-title text-black">TIN TỨC NỔI BẬT</h2>
-          <p class="desc text-black">Bệnh viện S.I.S Cần Thơ liên tục cập nhật các hoạt động chuyên môn, thành tựu y khoa và những chương trình vì cộng đồng nhằm nâng cao nhận thức bảo vệ sức khỏe cho người dân.</p>
+          <p class="desc text-black">Bệnh viện S.I.S Cần Thơ liên tục cập nhật các hoạt động chuyên môn, thành tựu y
+            khoa và những chương trình vì cộng đồng nhằm nâng cao nhận thức bảo vệ sức khỏe cho người dân.</p>
           <a href="#" class="btn btn-red">XEM TẤT CẢ BÀI VIẾT</a>
-          
+
           <div class="story-card has-bg mt-large">
-            <img src="bài viết/Trang chủ - Bệnh Viện Đa Khoa Quốc Tế S.I.S Cần Thơ_files/Hien-mau-nhan-dao-S.I.S-Can-Tho.jpg" alt="Hiến máu nhân đạo">
+            <img
+              src="bài viết/Trang chủ - Bệnh Viện Đa Khoa Quốc Tế S.I.S Cần Thơ_files/Hien-mau-nhan-dao-S.I.S-Can-Tho.jpg"
+              alt="Hiến máu nhân đạo">
             <div class="story-content">
               <span class="tag">HOẠT ĐỘNG CỘNG ĐỒNG</span>
               <h3>Bệnh viện S.I.S Cần Thơ: Nơi hiểu rõ giá trị của từng đơn vị máu</h3>
-              <p>Tiếp nhận nhiều ca bệnh nguy kịch mỗi ngày, tập thể nhân viên bệnh viện càng thấu hiểu giá trị của từng đơn vị máu.</p>
+              <p>Tiếp nhận nhiều ca bệnh nguy kịch mỗi ngày, tập thể nhân viên bệnh viện càng thấu hiểu giá trị của từng
+                đơn vị máu.</p>
             </div>
           </div>
         </div>
-        
+
         <div class="exc-col-right">
           <div class="story-card has-bg large">
-            <img src="bài viết/Trang chủ - Bệnh Viện Đa Khoa Quốc Tế S.I.S Cần Thơ_files/22.5-8-nam-chiu-dung-con-dau-nhu-rach-da-nguoi-dan-ong-hoi-sinh-sau-ca-mo-giai-ep-vi-mach-scaled.jpg" alt="Ca mổ thành công">
+            <img
+              src="bài viết/Trang chủ - Bệnh Viện Đa Khoa Quốc Tế S.I.S Cần Thơ_files/22.5-8-nam-chiu-dung-con-dau-nhu-rach-da-nguoi-dan-ong-hoi-sinh-sau-ca-mo-giai-ep-vi-mach-scaled.jpg"
+              alt="Ca mổ thành công">
             <div class="story-content">
               <span class="tag">CA LÂM SÀNG</span>
               <h3>8 năm chịu đựng cơn đau như “rạch da”, người đàn ông hồi sinh</h3>
               <p>Thoát khỏi cơn đau hành hạ sau phẫu thuật giải ép vi mạch tại Bệnh viện Đa khoa Quốc tế S.I.S.</p>
             </div>
           </div>
-          
+
           <div class="sub-grid">
             <div class="story-card box-black">
               <span class="tag text-grey">KỸ THUẬT MỚI</span>
@@ -181,29 +209,34 @@
   <!-- BLAZE YOUR OWN TRAIL -->
   <section class="blaze-trail">
     <div class="container">
-      <h2 class="section-title text-black">DỊCH VỤ CHĂM SÓC SỨC KHỎE</h2>
+      <h2 class="section-title">DỊCH VỤ CHĂM SÓC SỨC KHỎE</h2>
-      <p class="desc text-black max-w-800">Mang đến những giải pháp chăm sóc y tế chuyên sâu, an toàn và hiệu quả nhất. Bệnh viện được trang bị máy móc hiện đại và đội ngũ chuyên gia giàu kinh nghiệm luôn sẵn sàng phục vụ.</p>
+      <p class="desc max-w-800">Mang đến những giải pháp chăm sóc y tế chuyên sâu, an toàn và hiệu quả nhất.
-      
+        Bệnh viện được trang bị máy móc hiện đại và đội ngũ chuyên gia giàu kinh nghiệm luôn sẵn sàng phục vụ.</p>
+
       <div class="card-grid-3">
         <div class="card">
-          <div class="card-img" style="text-align: center; margin: 30px 0 10px;"><i class="fa-solid fa-truck-medical text-red" style="font-size: 60px; color: #e74c3c;"></i></div>
+          <div class="card-img" style="text-align: center; margin: 30px 0 10px;"><i
+              class="fa-solid fa-truck-medical text-red" style="font-size: 60px; color: #e74c3c;"></i></div>
           <div class="card-body">
             <h3>Cấp Cứu Đột Quỵ 24/7</h3>
             <p>Hệ thống cấp cứu tiêu chuẩn quốc tế, tận dụng tối đa "thời gian vàng" để cứu sống bệnh nhân đột quỵ.</p>
           </div>
         </div>
         <div class="card">
-          <div class="card-img" style="text-align: center; margin: 30px 0 10px;"><i class="fa-solid fa-heart-pulse text-red" style="font-size: 60px; color: #e74c3c;"></i></div>
+          <div class="card-img" style="text-align: center; margin: 30px 0 10px;"><i
+              class="fa-solid fa-heart-pulse text-red" style="font-size: 60px; color: #e74c3c;"></i></div>
           <div class="card-body">
             <h3>Can Thiệp Tim Mạch</h3>
             <p>Ứng dụng công nghệ can thiệp nội mạch DSA tiên tiến, xử lý các ca bệnh tim mạch khó và phức tạp.</p>
           </div>
         </div>
         <div class="card">
-          <div class="card-img" style="text-align: center; margin: 30px 0 10px;"><i class="fa-solid fa-stethoscope text-red" style="font-size: 60px; color: #e74c3c;"></i></div>
+          <div class="card-img" style="text-align: center; margin: 30px 0 10px;"><i
+              class="fa-solid fa-stethoscope text-red" style="font-size: 60px; color: #e74c3c;"></i></div>
           <div class="card-body">
             <h3>Tầm Soát Sức Khỏe</h3>
-            <p>Gói khám tầm soát sức khỏe tổng quát và chuyên sâu giúp phát hiện sớm nguy cơ đột quỵ và các bệnh lý khác.</p>
+            <p>Gói khám tầm soát sức khỏe tổng quát và chuyên sâu giúp phát hiện sớm nguy cơ đột quỵ và các bệnh lý
+              khác.</p>
           </div>
         </div>
       </div>
@@ -248,16 +281,20 @@
   <section class="news-events">
     <div class="container">
       <h2 class="section-title text-black">TIN TỨC BỆNH VIỆN</h2>
-      
+
       <div class="news-layout">
         <!-- Left: Featured -->
         <div class="news-main">
-          <img src="bài viết/Trang chủ - Bệnh Viện Đa Khoa Quốc Tế S.I.S Cần Thơ_files/Lan-dau-tien-can-thiep-dat-stent-tu-tieu-cho-benh-nhan-nhoi-mau-co-tim-tai-DBSCL-bia-scaled.jpg" alt="Đặt stent tự tiêu">
+          <img
+            src="bài viết/Trang chủ - Bệnh Viện Đa Khoa Quốc Tế S.I.S Cần Thơ_files/Lan-dau-tien-can-thiep-dat-stent-tu-tieu-cho-benh-nhan-nhoi-mau-co-tim-tai-DBSCL-bia-scaled.jpg"
+            alt="Đặt stent tự tiêu">
           <span class="tag text-red mt-small">Y KHOA TIÊN TIẾN</span>
-          <h3 class="news-main-title">Lần đầu tiên can thiệp đặt stent tự tiêu cho bệnh nhân nhồi máu cơ tim tại ĐBSCL</h3>
+          <h3 class="news-main-title">Lần đầu tiên can thiệp đặt stent tự tiêu cho bệnh nhân nhồi máu cơ tim tại ĐBSCL
-          <p class="news-main-desc">Anh T.V.H (48 tuổi) nhập viện vì nhồi máu cơ tim cấp đã được các bác sĩ tại Bệnh viện Đa khoa Quốc tế S.I.S Cần Thơ can thiệp thành công bằng kỹ thuật đặt stent tự tiêu thế hệ mới.</p>
+          </h3>
+          <p class="news-main-desc">Anh T.V.H (48 tuổi) nhập viện vì nhồi máu cơ tim cấp đã được các bác sĩ tại Bệnh
+            viện Đa khoa Quốc tế S.I.S Cần Thơ can thiệp thành công bằng kỹ thuật đặt stent tự tiêu thế hệ mới.</p>
         </div>
-        
+
         <!-- Right: Small News -->
         <div class="news-sidebar">
           <div class="news-small">
@@ -265,15 +302,18 @@
             <div class="news-info">
               <span class="tag text-red">KIẾN THỨC Y KHOA</span>
               <h4>Hãy quan tâm đến đột quỵ bởi vì đột quỵ có thể xảy ra tại mọi thời điểm</h4>
-              <p>Đột quỵ không loại trừ bất cứ ai, vì vậy việc trang bị kiến thức và phòng ngừa sớm là cách tốt nhất để bảo vệ mạng sống.</p>
+              <p>Đột quỵ không loại trừ bất cứ ai, vì vậy việc trang bị kiến thức và phòng ngừa sớm là cách tốt nhất để
+                bảo vệ mạng sống.</p>
             </div>
           </div>
           <div class="news-small">
-            <img src="bài viết/Trang chủ - Bệnh Viện Đa Khoa Quốc Tế S.I.S Cần Thơ_files/banner-2.jpg" alt="Bệnh viện SIS">
+            <img src="bài viết/Trang chủ - Bệnh Viện Đa Khoa Quốc Tế S.I.S Cần Thơ_files/banner-2.jpg"
+              alt="Bệnh viện SIS">
             <div class="news-info">
               <span class="tag text-red">TUYỂN DỤNG</span>
               <h4>[CẦN THƠ] Bản tin tuyển dụng Quý II năm 2026</h4>
-              <p>Bệnh viện liên tục mở rộng năng lực điều trị, đào tạo và chăm sóc sức khỏe, chúng tôi chào đón các tài năng y khoa tham gia đội ngũ.</p>
+              <p>Bệnh viện liên tục mở rộng năng lực điều trị, đào tạo và chăm sóc sức khỏe, chúng tôi chào đón các tài
+                năng y khoa tham gia đội ngũ.</p>
             </div>
           </div>
           <div class="news-small">
@@ -281,16 +321,18 @@
             <div class="news-info">
               <span class="tag text-red">NGHIÊN CỨU & ĐÀO TẠO</span>
               <h4>Nơi nghiên cứu khoa học và đào tạo chuyên sâu</h4>
-              <p>Ứng dụng phát triển công nghệ mới trong chẩn đoán, điều trị, phòng ngừa đột quỵ, đào tạo chuyên sâu về can thiệp nội mạch DSA.</p>
+              <p>Ứng dụng phát triển công nghệ mới trong chẩn đoán, điều trị, phòng ngừa đột quỵ, đào tạo chuyên sâu về
+                can thiệp nội mạch DSA.</p>
             </div>
           </div>
         </div>
       </div>
-      
+
       <!-- Event cards -->
       <div class="events-grid">
         <div class="event-card">
-          <div style="display: flex; align-items: center; justify-content: center; width: 100px; padding: 20px;"><i class="fa-solid fa-calendar-check text-red" style="font-size: 50px; color: #e74c3c;"></i></div>
+          <div style="display: flex; align-items: center; justify-content: center; width: 100px; padding: 20px;"><i
+              class="fa-solid fa-calendar-check text-red" style="font-size: 50px; color: #e74c3c;"></i></div>
           <div class="event-info">
             <span class="date text-red">Tháng 6</span>
             <h4>Hội nghị Tim mạch & Đột quỵ 2026</h4>
@@ -298,7 +340,8 @@
           </div>
         </div>
         <div class="event-card">
-          <div style="display: flex; align-items: center; justify-content: center; width: 100px; padding: 20px;"><i class="fa-solid fa-hand-holding-medical text-red" style="font-size: 50px; color: #e74c3c;"></i></div>
+          <div style="display: flex; align-items: center; justify-content: center; width: 100px; padding: 20px;"><i
+              class="fa-solid fa-hand-holding-medical text-red" style="font-size: 50px; color: #e74c3c;"></i></div>
           <div class="event-info">
             <span class="date text-red">Sắp diễn ra</span>
             <h4>Chương trình tầm soát bệnh lý tim mạch</h4>
@@ -306,7 +349,8 @@
           </div>
         </div>
         <div class="event-card">
-          <div style="display: flex; align-items: center; justify-content: center; width: 100px; padding: 20px;"><i class="fa-solid fa-headset text-red" style="font-size: 50px; color: #e74c3c;"></i></div>
+          <div style="display: flex; align-items: center; justify-content: center; width: 100px; padding: 20px;"><i
+              class="fa-solid fa-headset text-red" style="font-size: 50px; color: #e74c3c;"></i></div>
           <div class="event-info">
             <span class="date text-red">Hàng tuần</span>
             <h4>Tư vấn sức khỏe trực tuyến cùng chuyên gia</h4>
@@ -314,7 +358,8 @@
           </div>
         </div>
         <div class="event-card">
-          <div style="display: flex; align-items: center; justify-content: center; width: 100px; padding: 20px;"><i class="fa-solid fa-user-doctor text-red" style="font-size: 50px; color: #e74c3c;"></i></div>
+          <div style="display: flex; align-items: center; justify-content: center; width: 100px; padding: 20px;"><i
+              class="fa-solid fa-user-doctor text-red" style="font-size: 50px; color: #e74c3c;"></i></div>
           <div class="event-info">
             <span class="date text-red">Liên hệ ngay</span>
             <h4>Chăm sóc bệnh nhân ngoại trú</h4>
@@ -322,7 +367,7 @@
           </div>
         </div>
       </div>
-      
+
       <div class="text-center mt-large">
         <a href="#" class="btn btn-red-fill">XEM THÊM TIN TỨC</a>
       </div>
@@ -335,16 +380,27 @@
       <div class="footer-top">
         <div class="footer-brand">
           <div class="footer-logo">
-            <img src="bài viết/Trang chủ - Bệnh Viện Đa Khoa Quốc Tế S.I.S Cần Thơ_files/sis-logo.png" alt="S.I.S Logo" style="height: 60px; filter: brightness(0) invert(1);">
+            <img src="bài viết/Trang chủ - Bệnh Viện Đa Khoa Quốc Tế S.I.S Cần Thơ_files/sis-logo.png" alt="S.I.S Logo"
+              style="height: 60px; filter: brightness(0) invert(1);">
             <div class="logo-text" style="margin-left: 15px;">Bệnh Viện Đa Khoa<br>Quốc Tế<br>S.I.S Cần Thơ</div>
           </div>
           <div class="social-icons">
-            <a href="#" aria-label="Facebook"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path></svg></a>
+            <a href="#" aria-label="Facebook"><svg viewBox="0 0 24 24" fill="currentColor">
-            <a href="#" aria-label="YouTube"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M22.54 6.42a2.78 2.78 0 00-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 00-1.94 2A29 29 0 001 11.75a29 29 0 00.46 5.33 2.78 2.78 0 001.94 2c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 001.94-2 29 29 0 00.46-5.33 29 29 0 00-.46-5.33zM9.75 15.02V8.48L15.5 11.75l-5.75 3.27z"></path></svg></a>
+                <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
-            <a href="#" aria-label="Tiktok"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.12-3.44-3.17-3.64-5.46-.24-2.4.9-4.87 2.87-6.2 1.48-1.04 3.32-1.41 5.09-1.2v4.06c-.66-.02-1.33.11-1.92.42-.99.5-1.66 1.54-1.63 2.65.02.94.49 1.83 1.25 2.37.79.57 1.84.71 2.75.45 1.05-.3 1.84-1.18 2.05-2.25.12-.57.1-1.16.1-1.74V.02h4.08z"></path></svg></a>
+              </svg></a>
+            <a href="#" aria-label="YouTube"><svg viewBox="0 0 24 24" fill="currentColor">
+                <path
+                  d="M22.54 6.42a2.78 2.78 0 00-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 00-1.94 2A29 29 0 001 11.75a29 29 0 00.46 5.33 2.78 2.78 0 001.94 2c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 001.94-2 29 29 0 00.46-5.33 29 29 0 00-.46-5.33zM9.75 15.02V8.48L15.5 11.75l-5.75 3.27z">
+                </path>
+              </svg></a>
+            <a href="#" aria-label="Tiktok"><svg viewBox="0 0 24 24" fill="currentColor">
+                <path
+                  d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.12-3.44-3.17-3.64-5.46-.24-2.4.9-4.87 2.87-6.2 1.48-1.04 3.32-1.41 5.09-1.2v4.06c-.66-.02-1.33.11-1.92.42-.99.5-1.66 1.54-1.63 2.65.02.94.49 1.83 1.25 2.37.79.57 1.84.71 2.75.45 1.05-.3 1.84-1.18 2.05-2.25.12-.57.1-1.16.1-1.74V.02h4.08z">
+                </path>
+              </svg></a>
           </div>
         </div>
-        
+
         <div class="footer-links-grid">
           <div class="footer-col">
             <h4>LIÊN HỆ CHÚNG TÔI</h4>
@@ -368,7 +424,7 @@
           </div>
         </div>
       </div>
-      
+
       <div class="footer-bottom">
         <p>&copy; 2026 Bệnh Viện Đa Khoa Quốc Tế S.I.S Cần Thơ.</p>
         <div class="bottom-links">
@@ -381,4 +437,5 @@
   </footer>
 
 </body>
-</html>
+
+</html>