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

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));
+
+});