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
+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.
+diff --git a/build.js b/build.js new file mode 100644 index 00000000..6ab75f94 --- /dev/null +++ b/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.'); diff --git a/css/style.css b/css/style.css index 7a14c748..7792f876 100644 --- a/css/style.css +++ b/css/style.css @@ -37,14 +37,37 @@ img { } /* 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; } +.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 { @@ -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; } -.desktop-only { display: flex; } +.mobile-only { + 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%; - background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, transparent 30%, transparent 60%, rgba(0,0,0,0.8) 100%); + 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; + 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%; - background: linear-gradient(transparent, rgba(0,0,0,0.8)); + 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; @@ -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-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; } + +.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; + 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 .type { font-size: 13px; } + +.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 { @@ -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; } - .mobile-only { display: flex; } - + .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; + 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%; } - .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; } + + .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; } -} + .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; + } +} \ No newline at end of file diff --git a/dist.zip b/dist.zip new file mode 100644 index 00000000..649e2b0a Binary files /dev/null and b/dist.zip differ diff --git a/dist/css/style.css b/dist/css/style.css new file mode 100644 index 00000000..7792f876 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/dist/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 b/dist/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 new file mode 100644 index 00000000..877f4a8f Binary files /dev/null and b/dist/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 differ diff --git a/dist/images/banner-1.jpg b/dist/images/banner-1.jpg new file mode 100644 index 00000000..5e14cce3 Binary files /dev/null and b/dist/images/banner-1.jpg differ diff --git a/dist/images/banner-2.jpg b/dist/images/banner-2.jpg new file mode 100644 index 00000000..e94a9a68 Binary files /dev/null and b/dist/images/banner-2.jpg differ diff --git a/dist/images/banner-3.jpg b/dist/images/banner-3.jpg new file mode 100644 index 00000000..eb3dd47d Binary files /dev/null and b/dist/images/banner-3.jpg differ diff --git a/dist/images/banner-web-02-scaled.jpg b/dist/images/banner-web-02-scaled.jpg new file mode 100644 index 00000000..959e1475 Binary files /dev/null and b/dist/images/banner-web-02-scaled.jpg differ diff --git a/dist/images/hien-mau-nhan-dao-s.i.s-can-tho.jpg b/dist/images/hien-mau-nhan-dao-s.i.s-can-tho.jpg new file mode 100644 index 00000000..2f7479c3 Binary files /dev/null and b/dist/images/hien-mau-nhan-dao-s.i.s-can-tho.jpg differ diff --git a/dist/images/lan-dau-tien-can-thiep-dat-stent-tu-tieu-cho-benh-nhan-nhoi-mau-co-tim-tai-dbscl-bia-scaled.jpg b/dist/images/lan-dau-tien-can-thiep-dat-stent-tu-tieu-cho-benh-nhan-nhoi-mau-co-tim-tai-dbscl-bia-scaled.jpg new file mode 100644 index 00000000..9d395924 Binary files /dev/null and b/dist/images/lan-dau-tien-can-thiep-dat-stent-tu-tieu-cho-benh-nhan-nhoi-mau-co-tim-tai-dbscl-bia-scaled.jpg differ diff --git a/dist/images/sis-logo.png b/dist/images/sis-logo.png new file mode 100644 index 00000000..ff1c6562 Binary files /dev/null and b/dist/images/sis-logo.png differ diff --git a/dist/images/w2-01-scaled.jpg b/dist/images/w2-01-scaled.jpg new file mode 100644 index 00000000..1dc4a013 Binary files /dev/null and b/dist/images/w2-01-scaled.jpg differ diff --git a/dist/index.html b/dist/index.html new file mode 100644 index 00000000..5cf8b053 --- /dev/null +++ b/dist/index.html @@ -0,0 +1,434 @@ + + + +
+ + +
+
+
+
+
+
+
+ Bệnh viện Đa khoa Quốc tế S.I.S Cần Thơ ra đời với sứ mệnh
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.
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. +
+ TÌM HIỂU VỀ BỆNH VIỆN +
+
+ Tổng đài hỗ trợ và tư vấn
Hoạt động từ 6h00 đến 21h00
Trực Cấp Cứu & Nội Viện
+Khu vực ĐBSCL về Can thiệp Đột quỵ & Tim mạch
+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.
+ XEM TẤT CẢ BÀI VIẾT + +
+ 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.
+
+ 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.
+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ụ.
+ +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ỵ.
+Ứ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.
+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.
+
+ Y KHOA TIÊN TIẾN
+ 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.
+
+
-
+
-
+
+
Bệnh viện Đa khoa Quốc tế S.I.S Cần Thơ ra đời với sứ mệnh
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.
Bệnh viện Đa khoa Quốc tế S.I.S Cần Thơ ra đời với sứ mệnh
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.
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.
+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. +
TÌM HIỂU VỀ BỆNH VIỆN
+
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.
+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.
XEM TẤT CẢ BÀI VIẾT - +
+
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.
+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.
+
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.
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ụ.
- +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ụ.
+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ỵ.
Ứ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.
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.
+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.
+
Y KHOA TIÊN TIẾN
- 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.
+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.