<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Sự Cô Đơn</title>
<meta name="description" content="Một trang HTML tối giản để miêu tả cảm giác cô đơn." />
<style>
:root{
--bg:#0b0f14;
--fg:#e7edf7;
--muted:#9aa7b6;
--accent:#7aa2ff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0;
color:var(--fg);
font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
background:
radial-gradient(1000px 600px at 20% 10%, rgba(122,162,255,.06), transparent 60%),
radial-gradient(900px 500px at 80% 90%, rgba(122,162,255,.04), transparent 60%),
linear-gradient(180deg, #0b0f14, #0a0d12 60%, #0b0f14);
display:flex;
align-items:center;
justify-content:center;
}
main{
max-width:720px;
width:min(92vw, 720px);
padding:40px 28px;
border-radius:20px;
background:rgba(255,255,255,0.02);
box-shadow:0 10px 40px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.05);
position:relative;
overflow:hidden;
backdrop-filter:saturate(110%) blur(6px);
}
header h1{
margin:0 0 8px;
font-size:clamp(24px, 5vw, 38px);
letter-spacing:.4px;
}
header p{
color:var(--muted);
margin:0 0 22px;
}
.divider{
height:1px;
background:linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
margin:18px 0 24px;
}
blockquote{
margin:0;
padding-left:16px;
border-left:2px solid rgba(122,162,255,.35);
color:#d8e1ee;
font-size:1.05rem;
}
blockquote p{margin:0 0 10px}
.whisper{
color:var(--muted);
font-size:.95rem;
margin-top:16px;
}
.line{opacity:0; transform:translateY(8px); animation:fadeUp .9s ease forwards}
.line:nth-child(1){animation-delay:.1s}
.line:nth-child(2){animation-delay:.4s}
.line:nth-child(3){animation-delay:.7s}
.line:nth-child(4){animation-delay:1.0s}
.line:nth-child(5){animation-delay:1.3s}

@keyframes fadeUp{
from{opacity:0; transform:translateY(8px)}
to{opacity:1; transform:translateY(0)}
}
.pulse-dot{
position:absolute; right:18px; top:18px; width:8px; height:8px; border-radius:50%;
background:var(--accent); filter:blur(.3px); box-shadow:0 0 0 rgba(122,162,255,.6);
animation:pulse 2.8s ease-in-out infinite;
}
@keyframes pulse{
0%{box-shadow:0 0 0 0 rgba(122,162,255,.45)}
70%{box-shadow:0 0 0 14px rgba(122,162,255,0)}
100%{box-shadow:0 0 0 0 rgba(122,162,255,0)}
}
footer{
margin-top:26px;
color:var(--muted);
font-size:.9rem;
display:flex; align-items:center; gap:10px;
}
.dash{flex:1; height:1px; background:linear-gradient(90deg, rgba(255,255,255,.08), transparent)}
code{background:rgba(255,255,255,.05); padding:2px 6px; border-radius:6px; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.9em}
</style>
</head>
<body>
<main role="main" aria-label="Trang miêu tả sự cô đơn">
<div class="pulse-dot" aria-hidden="true"></div>
<header>
<h1>Sự cô đơn</h1>
<p class="whisper">Một khoảng lặng đủ dài để nghe tim tự nói nhỏ.</p>
</header>

<blockquote>
<p class="line">Đêm đặt tay lên vai, nhẹ như sương.</p>
<p class="line">Phòng vẫn nguyên vẹn, chỉ thiếu một người đã quen.</p>
<p class="line">Tin nhắn không gửi đi; con trỏ chuột nhấp nháy như thở dài.</p>
<p class="line">Bàn ghế không biết nói, mà vẫn hiểu mình mệt.</p>
<p class="line">Trong lồng ngực, biển lặng—nhưng sóng vẫn thì thầm.</p>
</blockquote>

<p class="whisper">Nếu có ai hỏi, hãy bảo rằng: tôi chỉ đang lạc giữa những điều mình chưa kịp gọi tên.</p>

<footer>
<span aria-hidden="true">—</span>
<div class="dash" aria-hidden="true"></div>
<span>HTML tối giản • không dùng thư viện ngoài • chỉ một tệp</span>
</footer>

</main>
</body>
</html>