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