/* Median UI post typography — class names from Blogger (nhat-xd.blogspot.com/p/post.html) */

.postBody,.post{font-size:var(--post-fontSize);line-height:1.8}
.postBody h2,.postBody h3,.postBody h4,.post h2,.post h3,.post h4{margin:1.7em 0 16px;line-height:1.4}
.postBody h2:target,.postBody h3:target,.postBody h4:target{padding-top:70px;margin-top:0}
.postBody p{margin:1.4em 0}
.postBody img{border-radius:2px}

/* Caption image */
.tr-caption-container{width:auto;max-width:100%;margin:1.4em auto;border:0}
.tr-caption-container td,.tr-caption-container tr:nth-child(2n+1) td{border:0!important;background:transparent!important;padding:0!important}
.tr-caption-container img{display:block;margin:0 auto}
.tr-caption{display:block;font-size:12px;opacity:.8;line-height:1.5;padding:8px 4px 0}

/* Lightbox */
.lightBox{position:relative;margin:1.4em 0;cursor:zoom-in}
.lightBox img{display:block;width:100%;height:auto}
.lightBox details{position:absolute;inset:0;z-index:2}
.lightBox details summary{list-style:none;height:100%;cursor:zoom-in}
.lightBox details summary::-webkit-details-marker{display:none}
.lightBox details[open]{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.86);display:flex;align-items:center;justify-content:center;padding:24px}
.lightBox details[open] summary{position:absolute;inset:0}
.lightBox details[open] + img{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:81;max-width:92vw;max-height:90vh;width:auto;height:auto;cursor:zoom-out}

/* Image grids / scroll / hide */
.psImg{display:flex;flex-wrap:wrap;margin:1.6em -6px}
.psImg > div{padding:6px}
.psImg img{display:block;width:100%;height:100%;object-fit:cover;border-radius:2px}
.grImg > div{width:50%}
.scImg > div{width:33.333%}
.hdImg > div{width:50%}
.hdImg .shImg{width:100%;display:none}
.hdImg .btImg{position:relative}
.hdImg .btImg label{position:absolute;inset:6px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.5);color:#fff;border-radius:2px;cursor:pointer;backdrop-filter:blur(4px);font-size:13px}
.inImg:checked ~ .hdImg .shImg{display:flex;flex-wrap:wrap}
.inImg:checked ~ .hdImg .btImg label{display:none}
.separator{margin:1.4em 0;text-align:center}
.separator img{display:block;margin:0 auto;max-width:100%}
img.lazy:not(.is-loaded){min-height:80px;background:var(--transparent-bg)}

@media (max-width:640px){
	.scImg.scrlH{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;width:calc(100% + 32px);margin-left:-16px;padding:0 16px}
	.scImg.scrlH > div{flex:0 0 80%;scroll-snap-align:center}
	.hdImg > div:not(.shImg):not(.btImg){width:100%}
}

/* Manual related */
.pRelate{position:relative;margin:2.2em 0;padding:1.4em 0 .4em;border-top:1px solid var(--content-border);border-bottom:1px solid var(--content-border);font-size:14px}
.pRelate > b,.pRelate > strong{position:absolute;top:-13px;left:16px;padding:2px 12px;border:1px solid var(--content-border);border-radius:14px;background:var(--content-bg);font-size:13px;font-weight:400}
.pRelate ul{margin:10px 0 0;padding-left:22px}
.darkMode .pRelate > b,.darkMode .pRelate > strong{background:var(--dark-bg)}

/* Separators */
.postBody hr,.post hr{border:0;border-top:1px solid var(--content-border);margin:2.2em auto;max-width:160px}
.postBody hr.dot,.post hr.dot{border:0;max-width:none;height:auto;background:none;text-align:center}
.postBody hr.dot:before,.post hr.dot:before{content:"···";letter-spacing:.55em;font-size:1.6rem;opacity:.55}
.postBody hr.line,.post hr.line{max-width:100%;border-top:1px dashed var(--content-border)}

/* Typography */
.pIndent,.textIndent{text-indent:2.2rem}
.dropCap{float:left;margin:2px 10px 0 0;font-size:55px;line-height:45px;font-family:var(--font-head);font-weight:700;color:var(--head-color)}
.pRef{font-size:13px;line-height:1.55;opacity:.8;padding-left:14px;border-left:2px solid var(--content-border);margin:1.6em 0}

/* Note */
.note{position:relative;padding:18px 22px 18px 50px;background:#e1f5fe;color:#01579b;font-size:.9rem;line-height:1.65;border-radius:2px;margin:1.4em 0}
.note:before{content:"";position:absolute;left:18px;top:20px;width:20px;height:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2301579b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5M12 16h.01'/%3E%3C/svg%3E") center/20px no-repeat}
.note.wr,.noteAlert{background:#ffdfdf;color:#5a2a2a}
.note.wr:before,.noteAlert:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a2a2a' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E")}
.darkMode .note{background:#1b2a44;color:#9ecbff}
.darkMode .note.wr{background:#3a1715;color:#f0b4b0}

/* Guide / pros / cons */
ol.noList,ul.noList{list-style:none;padding:0;margin:1.2em 0}
ol.step.noList > li,ol.pros.noList > li,ol.cons.noList > li{position:relative;padding:8px 0 8px 36px;border-bottom:1px dashed var(--content-border)}
ol.step.noList > li:before,ol.pros.noList > li:before,ol.cons.noList > li:before{position:absolute;left:0;top:10px;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
ol.step.noList{counter-reset:step}
ol.step.noList > li:before{counter-increment:step;content:counter(step);background:var(--link-bg);color:#fff}
ol.pros.noList > li:before{content:"";background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e8e3e' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/18px no-repeat #e8f6ee}
ol.cons.noList > li:before{content:"";background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d93025' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E") center/16px no-repeat #fdecea}

/* Tables */
.table{display:block;overflow-x:auto;margin:1.4em 0}
.table table{min-width:70%;margin:0 auto;border-collapse:separate;border-spacing:0;font-size:14px}
.table.w100 table{width:100%;min-width:100%}
.table.w90 table{width:90%}
.table.noWrap td,.table.noWrap th{white-space:nowrap}
.table th,.table td{padding:14px 18px;border:1px solid rgba(0,0,0,.1);text-align:left}
.table th:first-child,.table td:first-child{border-left-width:1px}
.table.noLine th,.table.noLine td{border-left:0;border-right:0}
.table.withBg tr:nth-child(even) td{background:var(--transparent-bg)}
.table.hoverBg tbody tr:hover td{background:var(--transparent-bg)}
.darkMode .table th,.darkMode .table td{border-color:#333}

/* Tabs */
.hidden,.tbIn,.prei,.inImg{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}
.tbHd{display:flex;border-bottom:1px solid var(--content-border);margin:1.4em 0 0;font-size:13px}
.tbHd label{padding:8px 14px;border:1px solid var(--content-border);border-bottom:0;border-radius:4px 4px 0 0;margin-right:6px;cursor:pointer;position:relative}
.tbHd label:before{content:attr(data-text)}
.tbHd label:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--body-bg);opacity:0}
.tbCn{padding:16px 0 8px}
.tbCn > [class^="tbText-"]{display:none}
#fTabs-1:checked ~ .tbHd label[for="fTabs-1"]:after,
#fTabs-2:checked ~ .tbHd label[for="fTabs-2"]:after,
#fTabs-3:checked ~ .tbHd label[for="fTabs-3"]:after,
#fTabs-4:checked ~ .tbHd label[for="fTabs-4"]:after{opacity:1}
#fTabs-1:checked ~ .tbCn .tbText-1,
#fTabs-2:checked ~ .tbCn .tbText-2,
#fTabs-3:checked ~ .tbCn .tbText-3,
#fTabs-4:checked ~ .tbCn .tbText-4{display:block}
.scrlH{overflow-x:auto}

/* TOC + spoiler (details.sp) */
details.sp{border-top:1px solid var(--content-border);border-bottom:1px solid var(--content-border);padding:12px 4px;margin:1.6em 0}
details.sp > summary{font-weight:700;cursor:pointer;list-style:none;display:flex;align-items:center}
details.sp > summary::-webkit-details-marker{display:none}
details.sp.toc > summary:after{content:"Ẩn";margin-left:auto;font-weight:400;font-size:12px;opacity:.7}
details.sp.toc:not([open]) > summary:after{content:"Hiện"}
.toC ol{list-style:none;padding:8px 0 0;margin:0;counter-reset:toc}
.toC li{display:flex;flex-wrap:wrap;line-height:1.75}
.toC li > a:before{content:counters(toc,".") ". ";counter-increment:toc;margin-right:6px}
.toC li ol{width:100%;padding-left:22px;margin:4px 0 8px}
.toC a{color:inherit}

/* Accordion */
.showH{margin:1.4em 0}
details.ac{border:1px solid var(--content-border);border-radius:6px;margin:8px 0;overflow:hidden}
details.ac > summary{padding:12px 14px;cursor:pointer;font-weight:600;list-style:none}
details.ac > summary::-webkit-details-marker{display:none}
details.ac.alt:nth-child(even){background:var(--transparent-bg)}
.aC{padding:0 14px 14px}

/* Code */
.pre{position:relative;margin:1.5em 0}
.pre > pre, .postBody pre{font-family:var(--font-code);font-size:.8rem;line-height:1.6;background:var(--highlight-bg);color:var(--highlight-color);padding:20px;border-radius:2px;overflow:auto;margin:0}
.pre:before{content:"</>";position:absolute;right:8px;top:6px;font-size:10px;color:var(--highlight-comment);z-index:1}
.pre.html:before{content:".html"}
.pre.css:before{content:".css"}
.pre.js:before{content:".js"}
.pre.custom:before{content:attr(data-text)}
.pre span{color:var(--highlight-green)}
.pre i{color:var(--highlight-blue);font-style:normal}
.pre i.comment,.pre i.tag{color:var(--highlight-comment)}
.pre i.tag{color:var(--highlight-orange)}
.postBody code:not(pre code){font-family:var(--font-code);font-size:85%;padding:2px 4px;background:rgba(0,0,0,.05)}
.darkMode .pre > pre,.darkMode .postBody pre{background:var(--dark-bgSec);color:var(--dark-textAlt)}

/* Multi-tab code */
.pre.tb .preH{margin:0;border:1px solid var(--content-border);border-bottom:0;background:var(--transparent-bg)}
.pre.tb [class^="preC-"]{display:none}
#preT-1:checked ~ .preC-1,#preT-2:checked ~ .preC-2,#preT-3:checked ~ .preC-3{display:block}
#preT-1:checked ~ .preH label[for="preT-1"],
#preT-2:checked ~ .preH label[for="preT-2"],
#preT-3:checked ~ .preH label[for="preT-3"]{background:var(--content-bg);font-weight:600}

/* Links */
a.new:after{content:"New!";color:var(--link-color);font-size:85%;margin-left:6px;font-weight:400}
a.free:after{content:"Free!";color:var(--link-color);font-size:85%;margin-left:6px;font-weight:400}
a.extL,.extLink{display:inline-flex;align-items:center}
a.extL:after,.extLink:after{content:"";width:14px;height:14px;margin-left:5px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23989b9f' stroke-width='1.6'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") center/14px no-repeat}

/* Download card */
.dlBox{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--content-border);border-radius:10px;margin:1.4em 0;background:var(--transparent-bg)}
.dlBox .fT{flex:0 0 44px;width:44px;height:44px;border-radius:8px;background:var(--link-bg) center/cover no-repeat;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;text-transform:uppercase}
.dlBox .fT:not([style*="background-image"]):before{content:attr(data-text)}
.dlBox .fN{flex:1;min-width:0}
.dlBox .fN > span{display:block;font-weight:600}
.dlBox .fS{font-size:12px;opacity:.7;font-weight:400}
.dlBox .button{flex-shrink:0}

/* Buttons */
a.button,.postBody .button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 16px;border-radius:2px;background:var(--link-bg);color:#fff!important;border:1px solid var(--link-bg);line-height:1.3;margin:.2em 0}
a.button svg,.postBody .button svg{width:18px;height:18px;stroke:#fff;fill:none}
a.button.ln{background:transparent;color:var(--link-color)!important;border-color:var(--link-color)}
a.button.ln svg{stroke:var(--link-color)}
a.button.sc{background:transparent;border-color:transparent;color:var(--link-color)!important;padding-left:0;padding-right:0}
.btnF{display:flex;flex-wrap:wrap;gap:10px;margin:1.2em 0}

/* YouTube */
.videoYt{position:relative;padding-top:56.25%;margin:1.4em 0;background:var(--transparent-bg);border-radius:4px;overflow:hidden}
.videoYt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Blockquote */
.postBody blockquote{margin:1.4em 0;padding:22px 22px 22px 50px;border-left:1px solid var(--content-border);opacity:.9;position:relative}
.postBody blockquote:before{content:"“";position:absolute;left:8px;top:8px;font-size:42px;line-height:1;opacity:.35}

/* Compat: older auto-TOC */
.postToc{border-top:1px solid var(--content-border);border-bottom:1px solid var(--content-border);padding:10px 4px;margin:0 0 22px}