/* GIAHUY 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 h1,.postBody h2,.postBody h3,.postBody h4,.postBody h5,.postBody h6,
.post h1,.post h2:not(.postTitle),.post h3:not(.postTitle),.post h4,.post h5,.post h6,
.postBody .wp-block-heading,.entry-content h1,.entry-content h2,.entry-content h3,.entry-content h4,.entry-content h5,.entry-content h6{
	margin:1.7em 0 16px;line-height:1.4;font-weight:400;font-family:var(--font-body)
}
.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 — no frame; caption sits below with side inset */
.postBody table.tr-caption-container,
.entry-content table.tr-caption-container,
.tr-caption-container{width:100%;max-width:100%;margin:1.6em 0;border:0!important;background:transparent;border-collapse:separate;border-spacing: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;width:100%;height:auto;margin:0;border-radius:0}
.tr-caption-container td.tr-caption,.tr-caption{display:block;font-size:14px;font-weight:500;opacity:1;color:var(--body-color);line-height:1.65;padding:18px 16px 0!important}

/* 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){width:100%}
	.hdImg .btImg{width:100%}
	.hdImg .btImg > div{width:100%}
	.hdImg > div:not(.shImg) img{width:100%;height:auto}
}

/* 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:400;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 — GIAHUY UI 1.7: * standard / ! warning. Same light cards in dark mode. */
.note,.noteAlert{position:relative;display:block;padding:18px 20px 18px 40px;border-radius:12px;font-size:14px;line-height:1.55;overflow:hidden;margin:1.4em 0;border:0}
.note{color:#272eb5;background:#e8f0fe}
.note:after{content:"*";position:absolute;top:12px;left:14px;min-width:15px;text-align:center;font-size:1.5rem;line-height:1;color:inherit}
.note.wr,.noteAlert{color:#e51661;background:#fce8e8}
.note.wr:after,.noteAlert:after{content:"!";position:absolute;top:12px;left:14px;min-width:15px;text-align:center;font-size:1.5rem;line-height:1;color:inherit}
html.darkMode .note,.darkMode .note{color:#272eb5;background:#e8f0fe}
html.darkMode .note.wr,.darkMode .note.wr,html.darkMode .noteAlert,.darkMode .noteAlert{color:#e51661;background:#fce8e8}
.note > :first-child,.noteAlert > :first-child{margin-top:0}
.note > :last-child,.noteAlert > :last-child{margin-bottom:0}

/* 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:400}
ol.step.noList{counter-reset:step}
ol.step.noList > li{padding:10px 12px 10px 44px;border:1px solid transparent;border-bottom:1px dashed var(--content-border);border-radius:7px;cursor:pointer}
ol.step.noList > li:before{left:12px;top:12px;counter-increment:step;content:counter(step);background:transparent;color:var(--link-color);border:1px solid var(--link-color)}
ol.step.noList > li.is-active{border:1px solid var(--content-border);border-bottom-color:var(--content-border)}
ol.step.noList > li.is-active:before{background:var(--link-bg);color:#fff;border-color:var(--link-bg)}
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 — every line is 1px, same as the outer edge */
.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;border:1px solid var(--content-border)}
.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:0;border-right:1px solid var(--content-border);border-bottom:1px solid var(--content-border);text-align:left}
.table th:last-child,.table td:last-child{border-right:0}
.table thead th,.table thead td{border-bottom:1px solid var(--content-border)}
.table tbody tr:last-child th,.table tbody tr:last-child td,.table tfoot tr:last-child th,.table tfoot tr:last-child td{border-bottom:0}
.table.noLine th,.table.noLine td{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 table,.darkMode .table th,.darkMode .table td{border-color:#2f3136}

/* Tabs */
.hidden,.tbIn,.prei,.inImg{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}
.tbHd{display:flex;align-items:flex-end;gap:28px;border-bottom:1px solid var(--content-border);margin:1.4em 0 0;font-size:15px;background:transparent}
.tbHd label{padding:10px 2px 12px;border:0;border-radius:0;margin:0;cursor:pointer;position:relative;color:var(--body-altColor);background:none;white-space:nowrap;font-weight:400;line-height:1.3}
.tbHd label:before{content:attr(data-text)}
.tbHd label:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--link-color);opacity:0;border-radius:1px}
.tbHd:not(.preH) label:hover{color:var(--head-color)}
.tbCn{padding:22px 0 8px}
.tbCn > [class^="tbText-"]{display:none}
.tbCn > [class^="tbText-"] p:first-child{margin-top:0}
#fTabs-1:checked ~ .tbHd label[for="fTabs-1"],
#fTabs-2:checked ~ .tbHd label[for="fTabs-2"],
#fTabs-3:checked ~ .tbHd label[for="fTabs-3"],
#fTabs-4:checked ~ .tbHd label[for="fTabs-4"]{color:var(--link-color)}
#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}
.pre.tb .preH.tbHd{gap:28px;margin:0;padding:0 52px 0 20px;border-bottom:1px solid var(--content-border)}
.pre.tb .preH.tbHd label{padding:16px 2px 14px;color:#9aa0a6;background:none;border-radius:0;font-size:14px}

/* TOC + spoiler (details.sp) */
details.sp{border-top:1px solid var(--link-color);border-bottom:1px solid var(--link-color);padding:14px 2px;margin:1.6em 0}
details.sp > summary{font-weight:400;cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;color:var(--head-color)}
details.sp > summary::-webkit-details-marker,details.sp > summary::marker{display:none;content:""}
details.sp > summary:after{content:"";flex:0 0 18px;width:18px;height:18px;margin-left:auto;background-color:var(--link-color);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/16px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/16px no-repeat;transition:transform .15s ease}
details.sp[open] > summary:after{transform:rotate(180deg)}
.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 — horizontal rules + plus, no side borders or row fill */
.showH{margin:1.4em 0}
details.ac{border:0;border-top:1px solid var(--content-border);border-radius:0;margin:0;overflow:visible;background:transparent}
details.ac:last-child{border-bottom:1px solid var(--content-border)}
details.ac.alt,details.ac.alt:nth-child(even),details.ac.alt:nth-child(odd){background:transparent}
details.ac > summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 2px;cursor:pointer;font-weight:400;color:var(--head-color);list-style:none;background:transparent}
details.ac > summary::-webkit-details-marker,details.ac > summary::marker{display:none;content:""}
details.ac > summary:after{content:"";flex:0 0 18px;width:18px;height:18px;margin-left:auto;background-color:var(--head-color);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/16px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/16px no-repeat}
details.ac[open] > summary:after{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") center/16px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") center/16px no-repeat}
.aC{padding:0 2px 16px}

/* Code — GIAHUY UI frame + HLJS Parse */
.pre{position:relative;margin:1.7em 0;color:var(--synC);background-color:var(--synBg);border:var(--synBd-line) solid var(--synBd-color);border-radius:var(--synBd-radius);direction:ltr;overflow:hidden}
.pre:not(.tb):before{content:"</>";display:flex;justify-content:flex-end;position:absolute;top:0;left:0;right:0;padding-inline:10px;color:var(--synGray);background-color:inherit;font-size:11px;line-height:30px;z-index:1;pointer-events:none}
.pre:not(.tb).html:before{content:".html"}
.pre:not(.tb).css:before{content:".css"}
.pre:not(.tb).js:before,.pre:not(.tb).javascript:before{content:".js"}
.pre:not(.tb).json:before{content:".json"}
.pre:not(.tb).custom:before{content:attr(data-text)}
.pre > pre,.postBody pre,.wp-block-code,.wp-block-preformatted{display:block;font:13px/1.6 var(--font-code);color:var(--synC);background-color:var(--synBg);padding:20px;border:var(--synBd-line) solid var(--synBd-color);border-radius:var(--synBd-radius);overflow:auto;margin:1.7em 0;-moz-tab-size:2;tab-size:2;direction:ltr;white-space:pre}
.pre > pre{border:0;background:transparent;border-radius:0;margin:0;padding:30px 20px 20px;color:inherit}
.pre i,.postBody pre i,.wp-block-code i,.wp-block-preformatted i{color:var(--synBlue);font-style:normal}
.pre i.comment,.postBody pre i.comment,.wp-block-code i.comment,
.hljs-comment,.hljs-quote,.hljs-code,.hljs-meta{color:var(--synGray)}
.pre i.tag,.postBody pre i.tag,.wp-block-code i.tag,
.hljs-name,.hljs-title,.hljs-title.function_,.hljs-bullet,.hljs-variable,.hljs-template-variable,
.hljs-selector-id,.hljs-selector-class,.hljs-selector-tag,.hljs-selector-pseudo,.hljs-literal,
.hljs-keyword,.hljs-property,.hljs-attribute,.hljs-section,.hljs-tag .hljs-name{color:var(--synOrange)}
.pre span:not([class^="hljs"]):not([class*=" hljs"]),
.postBody pre span:not([class]),.wp-block-code span:not([class]),
.hljs-attr,.hljs-params{color:var(--synGreen)}
.pre i:not([class]),.postBody pre i:not([class]),
.hljs-string,.hljs-symbol,.hljs-type,.hljs-built_in,.hljs-builtin-name{color:var(--synGreen);font-style:normal}
.pre b,.postBody pre b,.wp-block-code b,
.hljs-number,.hljs-symbol{color:var(--synRed);font-weight:400}
.hljs-regexp,.hljs-link{color:var(--synGold)}
.hljs-deletion{background-color:var(--warnBg);color:var(--warnC)}
.hljs-addition{background-color:var(--noteBg);color:var(--noteC)}
.pre mark,.postBody pre mark,.wp-block-code mark{background:#ffe54d;color:inherit;padding:0 .12em;border-radius:2px}

/* Manual tokens from the GIAHUY UI docs. class='geen' is the published typo for green. */
.pre i.red,.postBody pre i.red,.wp-block-code i.red,.wp-block-preformatted i.red{color:var(--synOrange);background:transparent}
.pre i.blue,.postBody pre i.blue,.wp-block-code i.blue,.wp-block-preformatted i.blue{color:var(--synBlue);background:transparent}
.pre i.green,.pre i.geen,.postBody pre i.green,.postBody pre i.geen,
.wp-block-code i.green,.wp-block-code i.geen,.wp-block-preformatted i.green,.wp-block-preformatted i.geen{color:#54790d;background:transparent}
.pre i.gray,.postBody pre i.gray,.wp-block-code i.gray,.wp-block-preformatted i.gray{color:var(--synGray);background:transparent}
.pre i.block,.postBody pre i.block,.wp-block-code i.block,.wp-block-preformatted i.block{color:#fff;background-color:var(--synBlue)}

/* Inline code chip — #ebeced in light, white pill in dark */
.postBody code,.entry-content code,.pre code{display:inline;padding:5px;border-radius:2px;font:14px var(--font-code);background:#ebeced;color:#2f3337}
.postBody pre code.hljs,.pre code.hljs,.wp-block-code code.hljs{display:inherit;padding:0;border-radius:0;background:transparent;color:inherit;font:inherit}
html.darkMode .postBody code,html.darkMode .entry-content code,html.darkMode .pre code,
.darkMode .postBody code,.darkMode .entry-content code,.darkMode .pre code{background:#fff;color:#2f3337}
html.darkMode .postBody pre code.hljs,html.darkMode .pre code.hljs,html.darkMode .wp-block-code code.hljs,
.darkMode .postBody pre code.hljs,.darkMode .pre code.hljs,.darkMode .wp-block-code code.hljs{background:transparent;color:inherit}
.hljs{background:transparent;color:inherit;padding:0}

/* Multi-tab code — HTML / CSS / JSON card (GIAHUY UI) */
.pre.tb{overflow:hidden;border:1px solid var(--content-border);border-radius:7px;background:var(--content-bg)}
.pre.tb:before{display:none}
.pre.tb .preH{position:relative;display:flex;align-items:flex-end;margin:0;border:0;border-bottom:1px solid var(--content-border);background:var(--content-bg);border-radius:0}
.pre.tb .preH:after{content:"</>";position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:13px;line-height:1;color:#9aa0a6;font-family:var(--font-code);pointer-events:none}
.pre.tb [class^="preC-"],.pre.tb [class*=" preC-"]{display:none}
.pre.tb [class^="preC-"].is-on,.pre.tb [class*=" preC-"].is-on{display:block}
.pre.tb:has(#preT-1:checked) .preC-1,
.pre.tb:has(#preT-2:checked) .preC-2,
.pre.tb:has(#preT-3:checked) .preC-3,
.pre.tb:has(#preT-4:checked) .preC-4,
.pre.tb:has(#preT-5:checked) .preC-5,
.pre.tb:has(#preT-6:checked) .preC-6,
#preT-1:checked ~ .preC-1,#preT-2:checked ~ .preC-2,#preT-3:checked ~ .preC-3,
#preT-4:checked ~ .preC-4,#preT-5:checked ~ .preC-5,#preT-6:checked ~ .preC-6{display:block}
.pre.tb:has(#preT-1:checked) .preH.tbHd label[for="preT-1"],
.pre.tb:has(#preT-2:checked) .preH.tbHd label[for="preT-2"],
.pre.tb:has(#preT-3:checked) .preH.tbHd label[for="preT-3"],
.pre.tb:has(#preT-4:checked) .preH.tbHd label[for="preT-4"],
.pre.tb:has(#preT-5:checked) .preH.tbHd label[for="preT-5"],
.pre.tb:has(#preT-6:checked) .preH.tbHd label[for="preT-6"],
#preT-1:checked ~ .preH.tbHd label[for="preT-1"],
#preT-2:checked ~ .preH.tbHd label[for="preT-2"],
#preT-3:checked ~ .preH.tbHd label[for="preT-3"],
#preT-4:checked ~ .preH.tbHd label[for="preT-4"],
#preT-5:checked ~ .preH.tbHd label[for="preT-5"],
#preT-6:checked ~ .preH.tbHd label[for="preT-6"],
.pre.tb .preH.tbHd label.is-on{color:#3b3dff;background:none}
.pre.tb:has(#preT-1:checked) .preH label[for="preT-1"]:after,
.pre.tb:has(#preT-2:checked) .preH label[for="preT-2"]:after,
.pre.tb:has(#preT-3:checked) .preH label[for="preT-3"]:after,
.pre.tb:has(#preT-4:checked) .preH label[for="preT-4"]:after,
.pre.tb:has(#preT-5:checked) .preH label[for="preT-5"]:after,
.pre.tb:has(#preT-6:checked) .preH label[for="preT-6"]:after,
#preT-1:checked ~ .preH label[for="preT-1"]:after,
#preT-2:checked ~ .preH label[for="preT-2"]:after,
#preT-3:checked ~ .preH label[for="preT-3"]:after,
#preT-4:checked ~ .preH label[for="preT-4"]:after,
#preT-5:checked ~ .preH label[for="preT-5"]:after,
#preT-6:checked ~ .preH label[for="preT-6"]:after,
.pre.tb .preH label.is-on:after{opacity:1;background:#3b3dff}
.pre.tb.js-tabs [class^="preC-"],.pre.tb.js-tabs [class*=" preC-"]{display:none}
.pre.tb.js-tabs [class^="preC-"].is-on,.pre.tb.js-tabs [class*=" preC-"].is-on{display:block}
.pre.tb [class^="preC-"] pre,.pre.tb [class*=" preC-"] pre,.pre.tb pre{border:0;margin:0;background:transparent;border-radius:0;padding:22px 24px 26px}
.darkMode .pre.tb,.darkMode .pre.tb .preH{background:var(--synBg);border-color:var(--synBd-color)}

/* 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 — official demo: 42px gray type + 45px square download */
.dlBox{display:flex;align-items:center;max-width:500px;margin-block:1.6em;padding:.8em;border:1px solid var(--content-border);border-radius:12px;background:var(--content-bg);font:14px var(--font-body)}
.dlBox .fT{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:42px;height:42px;border-radius:10px;background-color:rgb(152 155 159 / 20%);background-position:center;background-size:cover;background-repeat:no-repeat;color:#6b7280;font-size:13px;font-weight:400;text-transform:lowercase}
.dlBox .fT:not([style*="background-image"]):before{content:attr(data-text);opacity:.8}
.dlBox .fT[style*="background-image"]{color:transparent}
.dlBox .fT[style*="background-image"]:before{display:none}
.dlBox .fN{flex-grow:1;min-width:0;width:calc(100% - 200px);padding:0 15px}
.dlBox .fN > span{display:block;font-size:15px;font-weight:400;color:var(--head-color);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dlBox .fS{line-height:1.5;font-size:13px;opacity:.8;font-weight:400}
.dlBox a.button,.postBody .dlBox .button{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:45px;min-width:45px;height:45px;padding:0;margin:0;border:0;border-radius:4px;background:var(--link-bg);color:#fff!important;overflow:hidden}
.dlBox a.button::after,.dlBox a::after{content:none!important;display:none!important}
.dlBox a.button svg,.postBody .dlBox .button svg{width:18px;height:18px;stroke:#fff;fill:none}
.darkMode .dlBox .fT{background-color:rgb(152 155 159 / 22%);color:#989b9f}

/* 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}

/* Product post — pPric / pInfo / pMart */
.pPad{padding:20px 0}
.pPric{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.pPric:before{content:attr(data-text);order:0;display:block;font-size:14px;color:var(--body-altColor);margin-bottom:2px}
.pPric i{font-style:normal;display:block}
.pPric .price{order:1;font-size:2rem;line-height:1.15;font-weight:400;color:var(--link-color)}
.pPric .strike{order:2;font-size:15px;line-height:1.4;text-decoration:line-through;color:var(--body-altColor)}
.pInfo{display:flex;flex-wrap:wrap;gap:18px 28px}
.pInfo .L,.pInfo .R{flex:1 1 220px;min-width:0}
.pInfo.o{display:block}
.pInfo small{display:block;font-size:13px;line-height:1.4;color:var(--body-altColor);margin-bottom:4px}
.pInfo span{display:block;font-size:15px;line-height:1.55;color:var(--head-color)}
.pMart{margin:8px 0 8px}
.pMart small{display:block;margin:0 0 14px;font-size:14px;line-height:1.55;color:var(--body-color)}
.pMart a{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;margin:0 10px 0 0;border-radius:50%;background:#fff;border:1px solid var(--content-border);vertical-align:middle}
.pMart a:hover{opacity:1;border-color:var(--link-color)}
.pMart img{width:22px;height:22px;object-fit:contain;display:block}
html.darkMode .pMart a,.darkMode .pMart a{background:#2a2e36;border-color:#35393f}
.item-product .separator{display:block;margin:0 0 8px;padding:0;text-align:left}
.item-product .separator img{border-radius:16px;width:100%;height:auto;max-height:none;object-fit:cover}
.item-product .tbHd{margin-top:28px}

/* 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}

/* Home / sidebar / slider titles: regular, after WP global-styles */
html body :is(h1,h2,h3,h4,h5,h6,.indexTitle,.widget-title,.widget .title,.wp-block-heading,.postTitle,.itemTitle,.slideTitle){
	font-weight:400;font-family:var(--font-body)
}
html body :is(.postTitle,.itemTitle,.slideTitle,.indexTitle,.widget-title) :is(a,span){
	font-weight:400;font-family:var(--font-body)
}