Css post có khung riêng
/* =========================
POST DETAIL
========================= */
.post {
background: #fff;
border-radius: 16px;
padding: 20px;
border: 1px solid rgba(0,0,0,0.05);
box-shadow: 0 10px 30px rgba(0,0,0,0.04);
}
/* TITLE */
.post-title {
font-size: 22px;
font-weight: 600;
line-height: 1.4;
margin-bottom: 10px;
}
/* META */
.post-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
font-size: 13px;
color: #888;
}
.post-meta span::after {
content: "•";
margin: 0 6px;
}
.post-meta span:last-child::after {
content: "";
}
/* DIVIDER */
.post-divider {
height: 1px;
background: #eee;
margin: 16px 0;
}
/* CONTENT */
.post-content {
font-size: 15.5px;
line-height: 1.7;
color: #222;
}
/* TEXT ELEMENTS */
.post-content p {
margin-bottom: 14px;
}
.post-content h2 {
font-size: 18px;
margin: 20px 0 10px;
}
.post-content h3 {
font-size: 16px;
margin: 18px 0 8px;
}
/* IMAGE */
.post-content img {
max-width: 100%;
border-radius: 10px;
margin: 14px 0;
}
/* LINK */
.post-content a {
color: #2563eb;
text-decoration: underline;
}
/* BLOCKQUOTE */
.post-content blockquote {
border-left: 3px solid #2563eb;
padding-left: 12px;
color: #555;
margin: 14px 0;
font-style: italic;
}
/* CODE */
.post-content pre {
background: #111;
color: #eee;
padding: 12px;
border-radius: 8px;
overflow-x: auto;
margin: 14px 0;
}
/* MOBILE */
@media (max-width: 768px) {
.post {
border-radius: 0;
border-left: none;
border-right: none;
}
.post-title {
font-size: 20px;
}
}
/* =========================
POST - ADVANCED
========================= */
.post {
background: #fff;
border-radius: 18px;
padding: 22px;
border: 1px solid rgba(0,0,0,0.05);
box-shadow: 0 15px 40px rgba(0,0,0,0.05);
}
/* TITLE */
.post-title {
font-size: 24px;
font-weight: 600;
line-height: 1.4;
margin-bottom: 10px;
}
/* META */
.post-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
font-size: 13px;
color: #888;
}
.post-meta span::after {
content: "•";
margin: 0 6px;
}
.post-meta span:last-child::after {
content: "";
}
/* PROGRESS BAR */
.reading-progress {
position: sticky;
top: 52px;
height: 3px;
width: 0%;
background: linear-gradient(90deg, #2563eb, #60a5fa);
margin-top: 12px;
border-radius: 2px;
}
/* DIVIDER */
.post-divider {
height: 1px;
background: #eee;
margin: 16px 0;
}
/* CONTENT */
.post-content {
font-size: 16px;
line-height: 1.75;
color: #222;
}
/* PARAGRAPH */
.post-content p {
margin-bottom: 16px;
}
/* HEADINGS */
.post-content h2 {
font-size: 20px;
margin: 24px 0 10px;
}
.post-content h3 {
font-size: 17px;
margin: 20px 0 8px;
}
/* IMAGE */
.post-content img {
max-width: 100%;
border-radius: 12px;
margin: 18px 0;
}
/* BLOCKQUOTE */
.post-content blockquote {
border-left: 4px solid #2563eb;
padding-left: 14px;
color: #555;
margin: 18px 0;
font-style: italic;
}
/* CODE */
.post-content pre {
background: #0f172a;
color: #e5e7eb;
padding: 14px;
border-radius: 10px;
overflow-x: auto;
margin: 18px 0;
}
/* SELECTION (xịn hơn) */
::selection {
background: #2563eb;
color: #fff;
}
/* MOBILE */
@media (max-width: 768px) {
.post {
border-radius: 0;
border-left: none;
border-right: none;
}
.post-title {
font-size: 21px;
}
}