/* Zibll for Blogger - adapter styles (loaded after main.min.css) */

/* Blogger wraps every widget in <div class="section"><div class="widget">.
   Make those wrappers transparent inside Zibll layout blocks so Zibll's CSS sees its own structure. */
.header .section, .header .widget,
.content-layout > .section, .content-layout > .section > .widget,
.footer .section, .footer .widget { display: contents; }
.sidebar .section { display: block; }
.sidebar .widget { margin: 0; }

/* Blogger admin-only controls (quick edit, delete comment) */
.item-control, .blog-admin { display: none; }
html.zib-is-admin .item-control, html.zib-is-admin .blog-admin { display: inline; }

/* Blogger body content normalisation */
.wp-posts-content .separator a { margin: 0 !important; }
.wp-posts-content .separator { text-align: center; }
.wp-posts-content img { max-width: 100%; height: auto; }
.wp-posts-content table.tr-caption-container { margin: 0 auto 1em; }
.wp-posts-content .tr-caption { font-size: .85em; color: var(--muted-2-color); padding-top: 4px; }

/* comment form iframe */
#comment-editor { width: 100%; min-height: 120px; border: 0; background: transparent; }
.zib-respond { margin-bottom: 20px; }

/* contest tag */
.zib-contest-tag { color: var(--theme-color); font-weight: 600; }

/* search modal label list */
.zib-search-labels > div:empty::before { content: '…'; opacity: .5; }

/* Zibll prints list items with no whitespace between them; Blogger loops add newlines,
   which breaks the inline-flex 2-column list of .site-layout-1. Use a flex row instead. */
.posts-row { display: flex; flex-wrap: wrap; align-items: flex-start; }
.posts-row > .ajax-pag, .posts-row > .post_ajax_loader, .posts-row > .ajax-item-header,
.posts-row > :not(posts) { width: calc(100% - 16px); flex: 0 0 auto; }
.site-layout-2 .posts-row > posts:not(.card), .site-layout-3 .posts-row > posts:not(.card) { width: calc(100% - 16px); }
/* main.css gives .posts-row children 8px side margins (5px under 768px): full width minus those margins, so list
   items don't overflow 16px into the sidebar */
@media (max-width: 767px) {
  .posts-row > :not(posts), .site-layout-2 .posts-row > posts:not(.card), .site-layout-3 .posts-row > posts:not(.card) { width: calc(100% - 10px); }
}

/* logo sizes (Zibll sets them through inline height attributes in PHP) */
.navbar-logo img.logo { height: 50px; width: auto; max-width: 200px; }
.mobile-navbar .navbar-logo img.logo { height: 40px; }
@media (max-width: 767px) { .navbar-brand .navbar-logo img.logo { height: 36px; } }

/* hidden settings/data section (visible only in the Layout editor) */
.zib-hidden { display: none !important; }
.zib-preview-bar{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);z-index:99999;background:rgba(30,30,30,.88);color:#fff;font-size:12px;padding:6px 14px;border-radius:20px;white-space:nowrap}
.zib-preview-bar a{color:#ffd36b;margin:0 2px}
/* [zib-download icon=fa-x|auto]: Font Awesome icon in .file-download-icon instead of its ::before download glyph */
.file-download-icon.file-download-fa::before{content:none}
.file-download-icon>i.fa{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1.3em;color:var(--muted-color)}

/* loading spinner inside solid gradient buttons (jb-*) and badges: white, like the button text */
[class*="jb-"] .loading, .but[class*="jb-"] .loading, .badg[class*="jb-"] .loading { --this-color: #fff; }

/* float buttons: pulsing rings of float_btn.more items with "pulse" (40-footer.js floatMoreBtn) */
.float-btn-pulse>.float-pulse{position:absolute;inset:0;border-radius:inherit;background:var(--this-bg,var(--theme-color));opacity:.35;animation:float-pulse 2s infinite;pointer-events:none;z-index:-1}
.float-btn-pulse>.float-pulse+.float-pulse{animation-delay:1s}
@keyframes float-pulse{0%{transform:scale(1);opacity:.4}100%{transform:scale(1.8);opacity:0}}
@media (prefers-reduced-motion:reduce){.float-btn-pulse>.float-pulse{animation:none}}

/* float grids of cards with uneven heights (term lists card…): start every row on a new line */
@media (min-width: 768px) {
  .zib-cols-2 > :nth-child(2n+1), .zib-cols-3 > :nth-child(3n+1), .zib-cols-4 > :nth-child(4n+1), .zib-cols-6 > :nth-child(6n+1) { clear: left; }
}
/* build 1794450802 */

/* Vietnamese labels are 2-3x longer than the Chinese originals: let short card labels wrap instead of being cut */
.icon-card .mt10.text-ellipsis { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; }
/* forum home side tab menu (original --fixed-width: 120px fits 4 Chinese chars) */
@media (min-width: 768px) {
  .fixed-wrap.bbs-home-tab { --fixed-width: 160px; }
  .fixed-wrap-nav .tab-nav-theme > li { white-space: normal; }
}
/* selected option badges inside drop-select menus: white text on the focus colour (a dropdown .active colour rule overrode it) */
.select-drop-box .badg.active, .dropdown-menu .badg.active { color: #fff !important; }
/* nav_folding(): mega submenus (senior-submenu = fixed full-width panel) moved into the "⋯" fold menu get squeezed
   into its 128px column — show them as a side panel next to the fold menu instead */
@media (min-width: 768px) {
  .navbar-top .sub-menu .sub-menu.senior-submenu { position: absolute; top: -10px; left: 100%; right: auto; width: 720px; max-width: 60vw; padding: 15px 0; border-radius: var(--main-radius); }
  .navbar-top .sub-menu .sub-menu.senior-submenu .container { width: auto; max-width: none; }
}
/* term lists card head (same markup as zib-category.php): never cut the post count; the button wraps when narrow */
.term-aggregation .term-meta { flex-wrap: wrap; }
.term-aggregation .term-meta > sapn { flex-shrink: 0; margin-right: 6px; overflow: visible; }
.posts-row > .post_ajax_loader { width: 100%; }
/* card grids (term lists card, icon cards): every card in a row gets the row's height */
@media (min-width: 768px) {
  .row[class*="zib-cols-"] { display: flex; flex-wrap: wrap; }
  .row[class*="zib-cols-"] > [class*="col-"] > div { height: 100%; }
  .row[class*="zib-cols-"] .term-aggregation { height: calc(100% - 10px); }
}
/* term lists card: post count right under the term name (owner request), button below it */
.term-aggregation .term-title { justify-content: flex-start !important; }
.term-aggregation .term-title .term-meta { margin-top: 6px; }
/* user "Thông tin thêm" modal: wider than modal-mini so names and labels do not wrap */
@media (min-width:640px){.modal-dialog.lu-details-modal{width:560px;max-width:calc(100% - 20px)}}
.modal-dialog.lu-details-modal .text-ellipsis{max-width:none}
/* [zib-gallery]: WordPress core block-library gallery grid (style.css of core/gallery, not shipped by Zibll; .seamless-img keeps its own block layout) */
.wp-block-gallery.has-nested-images{display:flex;flex-wrap:wrap;align-items:normal;gap:16px}
.wp-block-gallery.has-nested-images figure.wp-block-image{display:flex;flex-direction:column;justify-content:center;position:relative;margin:0;box-sizing:border-box;width:calc(50% - 8px);flex-grow:1;max-width:100%}
.wp-block-gallery.has-nested-images figure.wp-block-image img{display:block;width:100%;max-width:100%;height:auto;margin:0}
.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image){align-self:inherit}
.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img{height:100%;flex:1 0 0%;object-fit:cover}
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption{position:absolute;bottom:0;left:0;right:0;max-height:100%;overflow:auto;padding:0 8px 8px;color:#fff;font-size:13px;text-align:center;background:linear-gradient(0deg,rgba(0,0,0,.7),rgba(0,0,0,.3) 70%,transparent)}
@media (min-width:600px){.wp-block-gallery.has-nested-images.columns-3 figure.wp-block-image{width:calc(33.33333% - 10.66667px)}.wp-block-gallery.has-nested-images.columns-4 figure.wp-block-image{width:calc(25% - 12px)}.wp-block-gallery.has-nested-images.columns-5 figure.wp-block-image{width:calc(20% - 12.8px)}.wp-block-gallery.has-nested-images.columns-6 figure.wp-block-image{width:calc(16.66667% - 13.33333px)}.wp-block-gallery.has-nested-images.columns-default figure.wp-block-image{width:calc(33.33% - 10.66667px)}.wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:first-child:nth-last-child(2),.wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:first-child:nth-last-child(2)~figure.wp-block-image{width:calc(50% - 8px)}.wp-block-gallery.has-nested-images.columns-1 figure.wp-block-image{width:100%}}
.seamless-img .wp-block-gallery.has-nested-images figure.wp-block-image{width:100%!important}

/* Bootstrap paints readonly fields #eee: in dark mode the light text vanished (recovery code, export boxes) */
.form-control[readonly],.form-control[disabled]{background-color:var(--muted-bg-color);color:var(--main-color)}

/* a card holding an open dropdown sits above the following cards (glass themes give every card its own layer, so a
   menu that overflows the bottom of a card was painted under the next card) */
.zib-widget:has(.dropdown.open),.main-shadow:has(.dropdown.open),.posts-item:has(.dropdown.open),.comment:has(.dropdown.open),.main-bg:has(.dropdown.open){position:relative;z-index:30}
/* forum post footer "…" menu opens upwards, inside the card, so the card keeps its thin bottom */
@media (min-width:768px){.forum-article-footer .dropup .dropdown-menu{top:auto;bottom:100%;margin:0 0 6px}}

/* backdrop-filter (glass themes) turns a box into the containing block of position:fixed descendants: the mobile comment
   sheet (#respond.mobile-fixed) and bottom-sheet menus (.drop-fixed-sm) then stuck inside the card mid-page */
@media (max-width:767px){
  :has(>.mobile-fixed),:has(>.drop-fixed-sm),.main-bg:has(.mobile-fixed),.main-bg:has(.drop-fixed-sm),.zib-widget:has(.mobile-fixed),.zib-widget:has(.drop-fixed-sm),.main-shadow:has(.mobile-fixed),.main-shadow:has(.drop-fixed-sm),.box-body:has(.mobile-fixed),.posts-item:has(.drop-fixed-sm){-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}

/* video avatars (profile avatar = video link): main.css sizes `.virtual-input img` only, a <video> showed at its natural size */
.virtual-input video{width:28px;height:28px;border-radius:120px;margin:0 4px;flex-shrink:0;object-fit:cover}
video.avatar{object-fit:cover}

/* ===== WordPress core blocks written by the Manager's block editor (userscript/src/admin/84-zbe-blocks-wp.js).
   Minimal rules from WordPress' block-library for the classes main.css does not style (main.css already has
   wp-block-image, wp-block-gallery, wp-block-table, wp-block-embed, wp-block-code, figcaption); theme variables so
   dark mode follows. */
.wp-posts-content .has-text-align-left{text-align:left}
.wp-posts-content .has-text-align-center{text-align:center}
.wp-posts-content .has-text-align-right{text-align:right}
.wp-posts-content .has-text-align-justify{text-align:justify}
@media (min-width:600px){.wp-block-gallery.has-nested-images.columns-7 figure.wp-block-image{width:calc(14.28571% - 13.71429px)}.wp-block-gallery.has-nested-images.columns-8 figure.wp-block-image{width:calc(12.5% - 14px)}}
/* columns: side by side, stacked under 600px */
.wp-posts-content .wp-block-columns{display:flex;flex-wrap:nowrap;align-items:normal;gap:20px;margin-bottom:20px;box-sizing:border-box}
.wp-posts-content .wp-block-column{flex-grow:1;flex-basis:0;min-width:0;word-break:break-word;overflow-wrap:break-word}
.wp-posts-content .wp-block-column[style*="flex-basis"]{flex-grow:0}
.wp-posts-content .wp-block-column>:last-child,.wp-posts-content .wp-block-group>:last-child,.wp-posts-content .wp-block-group__inner-container>:last-child,.wp-posts-content .wp-block-media-text__content>:last-child,.wp-posts-content .wp-block-cover__inner-container>:last-child,.wp-posts-content .wp-block-details>:last-child{margin-bottom:0}
@media (max-width:599px){
  .wp-posts-content .wp-block-columns:not(.is-not-stacked-on-mobile){flex-wrap:wrap}
  .wp-posts-content .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column{flex-basis:100%!important}
}
/* group */
.wp-posts-content .wp-block-group{box-sizing:border-box;margin-bottom:20px}
.wp-posts-content .wp-block-group.has-background{padding:20px;border-radius:var(--main-radius)}
/* cover: picture behind, dim layer, text on top */
.wp-posts-content .wp-block-cover,.wp-posts-content .wp-block-cover-image{position:relative;display:flex;align-items:center;justify-content:center;min-height:300px;padding:1em;margin-bottom:20px;overflow:hidden;box-sizing:border-box;border-radius:var(--main-radius);background-position:50%;background-size:cover;color:#fff;text-align:center}
.wp-posts-content .wp-block-cover__image-background,.wp-posts-content .wp-block-cover__video-background{position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:none;box-shadow:none;object-fit:cover}
.wp-posts-content .wp-block-cover__background{position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;background-color:#000;opacity:.5}
.wp-posts-content .wp-block-cover.has-background-dim[style*="background-image"]::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;background-color:#000;opacity:.5}
.wp-posts-content .wp-block-cover__background.has-background-dim-0,.wp-posts-content .wp-block-cover.has-background-dim-0::before{opacity:0}
.wp-posts-content .wp-block-cover__background.has-background-dim-10,.wp-posts-content .wp-block-cover.has-background-dim-10::before{opacity:.1}
.wp-posts-content .wp-block-cover__background.has-background-dim-20,.wp-posts-content .wp-block-cover.has-background-dim-20::before{opacity:.2}
.wp-posts-content .wp-block-cover__background.has-background-dim-30,.wp-posts-content .wp-block-cover.has-background-dim-30::before{opacity:.3}
.wp-posts-content .wp-block-cover__background.has-background-dim-40,.wp-posts-content .wp-block-cover.has-background-dim-40::before{opacity:.4}
.wp-posts-content .wp-block-cover__background.has-background-dim-60,.wp-posts-content .wp-block-cover.has-background-dim-60::before{opacity:.6}
.wp-posts-content .wp-block-cover__background.has-background-dim-70,.wp-posts-content .wp-block-cover.has-background-dim-70::before{opacity:.7}
.wp-posts-content .wp-block-cover__background.has-background-dim-80,.wp-posts-content .wp-block-cover.has-background-dim-80::before{opacity:.8}
.wp-posts-content .wp-block-cover__background.has-background-dim-90,.wp-posts-content .wp-block-cover.has-background-dim-90::before{opacity:.9}
.wp-posts-content .wp-block-cover__background.has-background-dim-100,.wp-posts-content .wp-block-cover.has-background-dim-100::before{opacity:1}
.wp-posts-content .wp-block-cover__inner-container{position:relative;z-index:2;width:100%;color:inherit}
.wp-posts-content .wp-block-cover__inner-container :is(p,h1,h2,h3,h4,h5,h6,li,a,strong,em){color:inherit}
/* media & text: picture beside the text, picture on top on phones */
.wp-posts-content .wp-block-media-text{display:grid;grid-template-columns:50% 1fr;grid-template-rows:auto;align-items:center;margin-bottom:20px;box-sizing:border-box;direction:ltr}
.wp-posts-content .wp-block-media-text.has-media-on-the-right{grid-template-columns:1fr 50%}
.wp-posts-content .wp-block-media-text__media{grid-column:1;grid-row:1;margin:0}
.wp-posts-content .wp-block-media-text__content{grid-column:2;grid-row:1;padding:0 8%;word-break:break-word}
.wp-posts-content .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media{grid-column:2}
.wp-posts-content .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content{grid-column:1}
.wp-posts-content .wp-block-media-text__media img,.wp-posts-content .wp-block-media-text__media video{width:100%;height:auto;vertical-align:middle;border-radius:var(--main-radius)}
@media (max-width:599px){
  .wp-posts-content .wp-block-media-text.is-stacked-on-mobile{grid-template-columns:100%!important}
  .wp-posts-content .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media{grid-column:1;grid-row:1}
  .wp-posts-content .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content{grid-column:1;grid-row:2;padding:15px 0 0}
}
/* pullquote, verse */
.wp-posts-content .wp-block-pullquote{margin:0 0 20px;padding:1.5em 1em;text-align:center;border-top:3px solid var(--theme-color);border-bottom:3px solid var(--theme-color)}
.wp-posts-content .wp-block-pullquote blockquote{margin:0;padding:0;border:0;background:none;font-size:1.25em;line-height:1.6;color:var(--key-color)}
.wp-posts-content .wp-block-pullquote blockquote p{margin-bottom:.5em;font-size:inherit}
.wp-posts-content .wp-block-pullquote cite{display:block;margin-top:.5em;font-size:.7em;font-style:normal;color:var(--muted-2-color)}
.wp-posts-content pre.wp-block-verse{margin:0 0 20px;padding:0;border:0;border-radius:0;background:none;color:inherit;font-family:inherit;font-size:inherit;line-height:inherit;white-space:pre-wrap;word-break:normal;overflow:auto}
/* file */
.wp-posts-content .wp-block-file{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:20px;padding:12px 15px;border-radius:var(--main-radius);background:var(--muted-border-color);border:1px solid var(--main-border-color)}
.wp-posts-content .wp-block-file>a:not(.wp-block-file__button){flex:1;min-width:0;word-break:break-all}
.wp-posts-content .wp-block-file__button{display:inline-block;padding:.3em 1.1em;border-radius:4px;background:var(--theme-color);color:#fff;font-size:.9em;line-height:1.6;transition:.15s}
.wp-posts-content .wp-block-file__button:hover{opacity:.85;color:#fff}
/* audio, video */
.wp-posts-content .wp-block-audio,.wp-posts-content .wp-block-video{margin:0 0 20px}
.wp-posts-content .wp-block-audio audio{display:block;width:100%;min-width:250px}
.wp-posts-content .wp-block-video video{display:block;width:100%;height:auto;border-radius:var(--main-radius);background:#000}
/* buttons: Zibll's .but look in the theme colour */
.wp-posts-content .wp-block-buttons{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:20px}
.wp-posts-content .wp-block-buttons.is-content-justification-center{justify-content:center}
.wp-posts-content .wp-block-buttons.is-content-justification-right{justify-content:flex-end}
.wp-posts-content .wp-block-buttons.is-content-justification-space-between{justify-content:space-between}
.wp-posts-content .wp-block-button{margin:0}
.wp-posts-content .wp-block-button__link{display:inline-block;padding:.4em 1.3em;border:1px solid var(--theme-color);border-radius:4px;background:var(--theme-color);color:#fff;text-align:center;line-height:1.6;word-break:break-word;transition:.15s;box-shadow:0 4px 10px -4px var(--focus-shadow-color)}
.wp-posts-content .wp-block-button__link:hover{opacity:.85;color:#fff}
.wp-posts-content .wp-block-button.is-style-outline>.wp-block-button__link,.wp-posts-content .wp-block-button__link.is-style-outline{background:transparent;color:var(--theme-color);box-shadow:none}
/* separator, spacer */
.wp-posts-content hr.wp-block-separator{width:100px;max-width:100%;height:0;margin:30px auto;border:0;border-top:2px solid var(--muted-4-color);background:none}
.wp-posts-content hr.wp-block-separator.is-style-wide{width:100%}
.wp-posts-content hr.wp-block-separator.is-style-dots{width:auto;border:0;line-height:1;text-align:center;overflow:visible;height:auto}
.wp-posts-content hr.wp-block-separator.is-style-dots::before{content:"\00b7\00b7\00b7";padding-left:1em;color:var(--muted-2-color);font-family:serif;font-size:1.5em;letter-spacing:1em}
.wp-posts-content .wp-block-spacer{clear:both;display:block;margin:0}
/* details: the spoiler (opens / closes without JS) */
.wp-posts-content details.wp-block-details{margin:0 0 20px;padding:10px 15px;border-radius:var(--main-radius);background:var(--muted-border-color);border:1px solid var(--main-border-color)}
.wp-posts-content details.wp-block-details>summary{display:list-item;cursor:pointer;font-weight:600;color:var(--key-color);list-style-position:inside;outline:none}
.wp-posts-content details.wp-block-details[open]>summary{margin-bottom:10px}