383 lines
11 KiB
HTML
383 lines
11 KiB
HTML
<!doctype html>
|
|
<html lang="vi">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Thành tựu và Bài viết Bệnh viện</title>
|
|
<style>
|
|
/* ===================================================
|
|
1. RESET CSS & FONT CƠ BẢN
|
|
=================================================== */
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family:
|
|
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
|
"Helvetica Neue", Arial, sans-serif;
|
|
}
|
|
|
|
body {
|
|
background-color: #f8fafc;
|
|
color: #1e293b;
|
|
padding: 40px 20px;
|
|
}
|
|
|
|
.news-container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* ===================================================
|
|
2. FILTER TABS (THANH LỌC DANH MỤC)
|
|
=================================================== */
|
|
.filter-tabs {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.tab-btn {
|
|
padding: 8px 18px;
|
|
border: none;
|
|
background-color: #e2e8f0;
|
|
color: #475569;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.tab-btn:hover {
|
|
background-color: #cbd5e1;
|
|
}
|
|
|
|
.tab-btn.active {
|
|
background-color: #0284c7; /* Màu xanh chủ đạo y tế */
|
|
color: #ffffff;
|
|
}
|
|
|
|
/* ===================================================
|
|
3. CARD GRID (LƯỚI 3 CỘT chuẩn UI)
|
|
=================================================== */
|
|
.news-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 24px;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.news-card {
|
|
background-color: #ffffff;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
|
|
display: flex;
|
|
flex-direction: column;
|
|
transition:
|
|
transform 0.25s ease,
|
|
box-shadow 0.25s ease;
|
|
cursor: pointer;
|
|
border: 1px solid #f1f5f9;
|
|
}
|
|
|
|
.news-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* THUMBNAIL & BADGE NĂM */
|
|
.card-thumb {
|
|
position: relative;
|
|
width: 100%;
|
|
aspect-ratio: 16 / 9; /* Cố định tỉ lệ hình ảnh */
|
|
overflow: hidden;
|
|
background-color: #e2e8f0;
|
|
}
|
|
|
|
.card-thumb img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.year-badge {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
background-color: #0284c7;
|
|
color: #ffffff;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
padding: 4px 10px;
|
|
border-radius: 4px;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
/* NỘI DUNG CARD */
|
|
.card-body {
|
|
padding: 16px 18px 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
color: #0284c7; /* Chữ xanh y tế */
|
|
line-height: 1.45;
|
|
|
|
/* Cắt bớt văn bản thành 3 dòng kèm dấu ... */
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ===================================================
|
|
4. PHÂN TRANG (PAGINATION)
|
|
=================================================== */
|
|
.pagination {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
list-style: none;
|
|
gap: 8px;
|
|
}
|
|
|
|
.page-link {
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 50%;
|
|
border: 1px solid #e2e8f0;
|
|
background-color: #ffffff;
|
|
color: #64748b;
|
|
text-decoration: none;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.page-link:hover {
|
|
border-color: #0284c7;
|
|
color: #0284c7;
|
|
}
|
|
|
|
.page-link.active {
|
|
background-color: #0284c7;
|
|
color: #ffffff;
|
|
border-color: #0284c7;
|
|
}
|
|
|
|
.page-dots {
|
|
padding: 0 4px;
|
|
color: #94a3b8;
|
|
}
|
|
|
|
/* ===================================================
|
|
5. RESPONSIVE
|
|
=================================================== */
|
|
@media (max-width: 992px) {
|
|
.news-grid {
|
|
grid-template-columns: repeat(2, 1fr); /* Tablet chia 2 cột */
|
|
}
|
|
}
|
|
|
|
@media (max-width: 576px) {
|
|
.news-grid {
|
|
grid-template-columns: 1fr; /* Mobile hiển thị 1 cột */
|
|
}
|
|
.filter-tabs {
|
|
justify-content: flex-start;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="news-container">
|
|
<!-- 1. TAB LỌC NỘI DUNG -->
|
|
<div class="filter-tabs">
|
|
<button class="tab-btn active">Tất cả</button>
|
|
<button class="tab-btn">Điều trị</button>
|
|
<button class="tab-btn">Đào tạo - Nghiên cứu khoa học</button>
|
|
<button class="tab-btn">Quản trị Bệnh viện</button>
|
|
</div>
|
|
|
|
<!-- 2. DANH SÁCH BÀI VIẾT dạng LƯỚI GRID -->
|
|
<div class="news-grid">
|
|
<!-- Card 1 -->
|
|
<article class="news-card">
|
|
<div class="card-thumb">
|
|
<img
|
|
src="https://picsum.photos/400/250?random=1"
|
|
alt="Bài viết 1"
|
|
/>
|
|
<span class="year-badge">2026</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<h3 class="card-title">
|
|
Bệnh viện Đại học Y Dược TP. Hồ Chí Minh ghi dấu ấn tại giải
|
|
thưởng "Đại sứ truyền thông...
|
|
</h3>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Card 2 -->
|
|
<article class="news-card">
|
|
<div class="card-thumb">
|
|
<img
|
|
src="https://picsum.photos/400/250?random=2"
|
|
alt="Bài viết 2"
|
|
/>
|
|
<span class="year-badge">2026</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<h3 class="card-title">
|
|
Tác phẩm "Tuyển tập những bệnh án lâm sàng đặc sắc" đạt giải B
|
|
giải thưởng sách quốc gia...
|
|
</h3>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Card 3 -->
|
|
<article class="news-card">
|
|
<div class="card-thumb">
|
|
<img
|
|
src="https://picsum.photos/400/250?random=3"
|
|
alt="Bài viết 3"
|
|
/>
|
|
<span class="year-badge">2026</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<h3 class="card-title">
|
|
Trái tim từ bắc vào nam hồi sinh sự sống cho bệnh nhi ngày đầu
|
|
xuân mới
|
|
</h3>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Card 4 -->
|
|
<article class="news-card">
|
|
<div class="card-thumb">
|
|
<img
|
|
src="https://picsum.photos/400/250?random=4"
|
|
alt="Bài viết 4"
|
|
/>
|
|
<span class="year-badge">2025</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<h3 class="card-title">
|
|
Ca ghép tim xuyên đêm tại Bệnh viện Đại học Y Dược TP. Hồ Chí
|
|
Minh: Cuộc chạy đua sinh tử...
|
|
</h3>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Card 5 -->
|
|
<article class="news-card">
|
|
<div class="card-thumb">
|
|
<img
|
|
src="https://picsum.photos/400/250?random=5"
|
|
alt="Bài viết 5"
|
|
/>
|
|
<span class="year-badge">2025</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<h3 class="card-title">
|
|
Đại học Y Dược TP. Hồ Chí Minh công nhận 02 nhóm nghiên cứu tiềm
|
|
năng mạnh đầu tiên
|
|
</h3>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Card 6 -->
|
|
<article class="news-card">
|
|
<div class="card-thumb">
|
|
<img
|
|
src="https://picsum.photos/400/250?random=6"
|
|
alt="Bài viết 6"
|
|
/>
|
|
<span class="year-badge">2025</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<h3 class="card-title">
|
|
Bệnh viện Đại học Y Dược TP. Hồ Chí Minh - Điển hình tiên tiến
|
|
Ngành Y tế tại Đại hội Thi đ...
|
|
</h3>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Card 7 -->
|
|
<article class="news-card">
|
|
<div class="card-thumb">
|
|
<img
|
|
src="https://picsum.photos/400/250?random=7"
|
|
alt="Bài viết 7"
|
|
/>
|
|
<span class="year-badge">2025</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<h3 class="card-title">
|
|
Bệnh viện Đại học Y Dược TP. Hồ Chí Minh tổ chức lễ kỷ niệm 100 ca
|
|
TAVI thành công trao...
|
|
</h3>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Card 8 -->
|
|
<article class="news-card">
|
|
<div class="card-thumb">
|
|
<img
|
|
src="https://picsum.photos/400/250?random=8"
|
|
alt="Bài viết 8"
|
|
/>
|
|
<span class="year-badge">2025</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<h3 class="card-title">
|
|
Bệnh viện Đại học Y Dược TP. Hồ Chí Minh đạt giải "Vệ sinh tay
|
|
xuất sắc năm 2025"
|
|
</h3>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Card 9 -->
|
|
<article class="news-card">
|
|
<div class="card-thumb">
|
|
<img
|
|
src="https://picsum.photos/400/250?random=9"
|
|
alt="Bài viết 9"
|
|
/>
|
|
<span class="year-badge">2025</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<h3 class="card-title">
|
|
Tiến bộ trong y học bào thai: Can thiệp thành công cứu sống thai
|
|
nhi mắc khối u nhau thai...
|
|
</h3>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
|
|
<!-- 3. THANH PHÂN TRANG -->
|
|
<ul class="pagination">
|
|
<li><a href="#" class="page-link">«</a></li>
|
|
<li><a href="#" class="page-link">‹</a></li>
|
|
<li><a href="#" class="page-link active">1</a></li>
|
|
<li><a href="#" class="page-link">2</a></li>
|
|
<li><a href="#" class="page-link">3</a></li>
|
|
<li><span class="page-dots">...</span></li>
|
|
<li><a href="#" class="page-link">6</a></li>
|
|
<li><a href="#" class="page-link">›</a></li>
|
|
<li><a href="#" class="page-link">»</a></li>
|
|
</ul>
|
|
</div>
|
|
</body>
|
|
</html>
|