/* templates/blocks/block-8/style.css — v2.7.4-image-preload-decode
 * SYNC: render.php + render-part.php + block.js v2.7.4-image-preload-decode
 * FIX: strtolower JS error, add Display Inline/Block for Custom Fields, Line-clamp 2 dòng
 */

.pf-b6 {
  width: var(--pf-container-w, 100%);
  margin: var(--pf-m, 0 auto var(--pf-bottom-space, 60px) auto);
  padding: var(--pf-pad, 0);

  border-style: var(--pf-b-style, solid);
  border-width: var(--pf-b-width, 0);
  border-color: var(--pf-b-color, transparent);
  border-radius: var(--pf-b-radius, 12px);
  box-shadow: var(--pf-shadow, none);
  background-color: var(--pf-bg, transparent);

  position: relative;
  box-sizing: border-box;
}
.pf-b6 * { box-sizing: border-box; }

.pf-b6.is-loading .pf-b6-grid {
  opacity: .6;
  pointer-events: none;
  transition: opacity .3s;
}

.pf-b6-grid[data-thumb-pinterest="1"] .pf-thumb::before {
  content: none !important;
  display: none !important;
  padding-top: 0 !important;
}
.pf-b6-grid[data-thumb-pinterest="1"] .pf-thumb img {
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  object-fit: var(--pf-thumb-fit, cover) !important;
  object-position: center var(--pf-thumb-valign, 50%) !important;
  border-radius: inherit !important;
}
.pf-b6-grid[data-thumb-pinterest="1"] .pf-thumb {
  height: auto !important;
  min-height: 0 !important;
}

.pf-b6-head {
  display: flex;
  flex-direction: column;
  align-items: var(--pf-head-align, flex-start);
  position: relative;
  padding: var(--pf-head-pad, 0);
  margin: var(--pf-head-m, 0 0 16px 0);
  background: var(--pf-head-bg, transparent);
  color: var(--pf-head-color, inherit);
}
.pf-b6-head .pf-title-wrap {
  display: flex;
  align-items: center;
  justify-content: var(--pf-head-justify, flex-start);
  width: 100%;
}
.pf-b6-head .pf-title {
  margin: 0;
  line-height: 1.25;
  font-size: var(--pf-head-fs, 1.5rem) !important;
  font-weight: var(--pf-head-fw, 700) !important;
  font-style: var(--pf-head-fstyle, normal) !important;
  text-transform: var(--pf-head-tt, none) !important;
  text-align: var(--pf-head-text-align, left) !important;
  width: 100%;
}
.pf-b6-head .pf-title a { color: inherit; text-decoration: none; }

.pf-b6-head[data-line="1"][data-line-pos="bottom"]::after,
.pf-b6-head[data-line="1"][data-line-pos="top"]::before {
  content: "";
  display: block;
  position: relative;
  height: var(--pf-head-line-thickness, 3px);
  width: var(--pf-head-line-len, 40%);
  background: var(--pf-head-line-color, currentColor);
  border-radius: 2px;
  align-self: var(--pf-head-align, flex-start);
}
.pf-b6-head[data-line="1"][data-line-pos="bottom"]::after { margin-top: var(--pf-head-line-offset, 6px); }
.pf-b6-head[data-line="1"][data-line-pos="top"]::before { margin-bottom: var(--pf-head-line-offset, 6px); }

.pf-b6-head[data-line-pos="left"] .pf-title-wrap,
.pf-b6-head[data-line-pos="right"] .pf-title-wrap { gap: var(--pf-head-line-offset, 8px); }

.pf-b6-head[data-line="1"][data-line-pos="left"] .pf-title-wrap::before,
.pf-b6-head[data-line="1"][data-line-pos="right"] .pf-title-wrap::after {
  content: "";
  display: block;
  flex-shrink: 0;
  height: var(--pf-head-line-thickness, 3px);
  width: var(--pf-head-line-len, 40px);
  background: var(--pf-head-line-color, currentColor);
  border-radius: 2px;
}
.pf-b6-head[data-line="1"][data-line-pos="right"] .pf-title-wrap .pf-title { order: -1; }
.pf-b6-head[data-line="1"][data-line-pos="mid"] .pf-title { position: relative; display: inline-block; }
.pf-b6-head[data-line="1"][data-line-pos="mid"] .pf-title::after {
  content: "";
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: var(--pf-head-line-thickness, 3px);
  background: var(--pf-head-line-color, currentColor);
  transform: translateY(-50%);
  pointer-events: none;
}

.pf-b6-header-filter-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-bottom: 16px;
}
.pf-b6-header-filter-wrap.is-inline .pf-b6-head { margin-bottom: 0; flex-grow: 1; }
.pf-b6-header-filter-wrap.is-inline .pf-filter { margin-bottom: 0; justify-content: var(--pf-head-filter-align, flex-start); }

.pf-b6 .pf-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  justify-content: var(--pf-head-filter-align, flex-start);
}
.pf-b6 .pf-filter .pf-dropdown {
  min-width: 180px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
}
.pf-b6 .pf-filter .pf-pill,
.pf-b6 .pf-filter .pf-tab {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #fff;
  cursor: pointer;
  user-select: none;
}
.pf-b6 .pf-filter .pf-tab { border-radius: 10px; }
.pf-b6 .pf-filter .is-active {
  background: #111827;
  color: #fff;
  border-color: #111827;
}

.pf-b6-stage { position: relative; width: 100%; }
.pf-b6-grid {
  position: relative;
  min-height: 50px;
  height: auto;
  transition: height .3s ease;
}

.pf-b6 .pf-pcard {
  position: absolute;
  top: 0; left: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--pf-item-bg, #fff);
  padding: var(--pf-item-pad, 12px);
  border-radius: var(--pf-item-br, 10px);
  border: var(--pf-item-bw, 0) var(--pf-item-bs, solid) var(--pf-item-bc, transparent);
  box-shadow: var(--pf-item-shadow, none);
  transition: transform var(--b8-anim, 260ms) ease, opacity var(--b8-anim, 260ms) ease;
}

.pf-b6 .pf-thumb {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--pf-thumb-radius, 12px);
  text-decoration: none;
}
.pf-b6-grid[data-thumb-pinterest="0"] .pf-thumb::before {
  content: "";
  display: block;
  padding-top: var(--pf-thumb-ratio, 75%);
}
.pf-b6-grid[data-thumb-pinterest="0"] .pf-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: var(--pf-thumb-fit, cover);
  object-position: center var(--pf-thumb-valign, 50%);
}

.pf-b6 .pf-body { display: block; }
.pf-b6 .pf-body-inner {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pf-b6 .pf-pcard .pf-title,
.pf-b6 .pf-pcard .pf-title a {
  color: var(--pf-title-color, inherit);
  background: var(--pf-title-bg, transparent);
}
.pf-b6 .pf-pcard .pf-title {
  margin: var(--pf-title-space, 10px 0 6px 0);
  padding: var(--pf-title-pad, 0px);
  border-radius: var(--pf-title-br, 0px);
  border-width: var(--pf-title-bw, 0px);
  border-style: var(--pf-title-bs, solid);
  border-color: var(--pf-title-bc, transparent);
  font-size: var(--pf-title-fs, 18px);
  font-weight: var(--pf-title-fw, 700);
  line-height: var(--pf-title-lh, 1.35);
  text-transform: var(--pf-title-tt, none);
  text-align: var(--pf-title-align, left);
  
  min-height: var(--pf-title-min-h, calc(var(--pf-title-fs, 18px) * var(--pf-title-lh, 1.35) * var(--pf-title-lines, 2)));
  display: flex;
  align-items: var(--pf-title-valign, center);
  justify-content: flex-start;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pf-b6 .pf-pcard .pf-title a { text-decoration: none; display:-webkit-box; -webkit-line-clamp: var(--pf-title-lines, 2); -webkit-box-orient: vertical; overflow:hidden; width:100%; }

.pf-b6 .pf-meta {
  padding: var(--pf-meta-box-pad, 0);
  margin: var(--pf-meta-box-m, 0 0 8px 0);
  gap: var(--pf-meta-gap, 12px);
  color: var(--pf-meta-color, inherit);
  font-size: var(--pf-meta-fs, 13px);
  font-weight: var(--pf-meta-fw, 400);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: var(--pf-meta-justify, flex-start);
}
.pf-b8 .pf-meta svg,
.pf-b8 .pf-meta .pf-meta-icon{
  display:inline-block;
  vertical-align:-0.125em;
  width:1em;
  height:1em;
  margin-right:.4em;
  color:currentColor;
  flex:0 0 auto;
}

/* Custom Fields */
.pf-b6 .pf-cf-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-self: var(--pf-cf-align-self, flex-start);
  justify-content: var(--pf-cf-justify, flex-start);
  font-size: var(--pf-cf-fs, 13px);
  color: var(--pf-cf-color, #6b7280);
  font-weight: var(--pf-cf-fw, 500);
  font-style: var(--pf-cf-fstyle, normal);
  background: var(--pf-cf-bg, transparent);
  padding: var(--pf-cf-pad, 0);
  margin: var(--pf-cf-m, 0 0 8px 0);
  border-width: var(--pf-cf-bw, 0);
  border-style: var(--pf-cf-bs, solid);
  border-color: var(--pf-cf-bc, transparent);
  border-radius: var(--pf-cf-br, 0px);
  line-height: 1.4;
}
.pf-b6 .pf-cf-sep {
  color: #d1d5db;
  font-weight: 400;
  user-select: none;
  margin: 0 4px;
}

.pf-b6 .pf-excerpt {
  box-sizing: border-box;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: var(--pf-excerpt-align, left);
  column-count: var(--pf-excerpt-cols, 1);
  column-gap: var(--pf-excerpt-gap, 0);
  color: var(--pf-excerpt-color, inherit);
  background: var(--pf-excerpt-bg, transparent);
  padding: var(--pf-excerpt-pad, 0);
  margin: var(--pf-excerpt-m, var(--pf-excerpt-space, 0));
  border-width: var(--pf-excerpt-bw, 0);
  border-style: var(--pf-excerpt-bs, solid);
  border-color: var(--pf-excerpt-bc, transparent);
  border-radius: var(--pf-excerpt-br, 0);
}

.pf-b6 .pf-readmore-wrap {
  display: flex;
  justify-content: var(--pf-btn-align, flex-start);
}
.pf-b6 .pf-readmore {
  display: inline-block;
  text-decoration: none;
  transition: opacity .2s;
  font-size: var(--pf-readmore-fs, 14px);
  font-weight: var(--pf-readmore-fw, 500);
  padding: var(--pf-readmore-pad, 6px 14px);
  margin: var(--pf-readmore-m, 12px 0 0 0);
  background: var(--pf-readmore-bg, #111827);
  color: var(--pf-readmore-color, #fff);
  border: var(--pf-readmore-bw, 0) var(--pf-readmore-bs, solid) var(--pf-readmore-bc, transparent);
  border-radius: var(--pf-readmore-br, 8px);
}
.pf-b6 .pf-readmore:hover { opacity: .85; }

.pf-b6 .pf-badge {
  display: var(--pf-cat-display, inline-block);
  margin: var(--pf-cat-spacing, 0 6px 6px 0);
  padding: var(--pf-cat-padding, 4px 10px);
  font-size: var(--pf-cat-fs, 13px);
  font-weight: var(--pf-cat-fw, 600);
  line-height: var(--pf-cat-lh, 1);
  font-style: var(--pf-cat-style, normal);
  text-transform: var(--pf-cat-tt, none);
  border-radius: var(--pf-cat-br, 6px);
  border-width: var(--pf-cat-bw, 0);
  border-style: var(--pf-cat-bs, solid);
  border-color: var(--pf-cat-bc, transparent);
  background: var(--pf-badge-bg, #000);
  color: var(--pf-badge-text, #fff);
  text-decoration: none;
  transition: opacity .2s;
}
.pf-b6 a.pf-badge:hover { opacity: .9; }

.pf-b6 .pf-thumb > .pf-badge {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 2;
}
.pf-b6-grid[data-catpos="over"][data-catalign="right"] .pf-thumb > .pf-badge { left: auto; right: 12px; }
.pf-b6-grid[data-catpos="over"][data-catalign="center"] .pf-thumb > .pf-badge { left: 50%; transform: translateX(-50%); }

.pf-b6 .pf-cat-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: var(--pf-cat-align-justify, flex-start);
}

.pf-b6 mark.pf-search-hl{ padding:.08em .18em; border-radius:.22em; background-color: #ffe082; color: #333; }

.pf-b6 .pf-pgrid-pagi {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: var(--pf-pagi-m, 20px 0 0 0);
  flex-wrap: wrap;
}
.pf-b6 .pf-pgrid-pagi button {
  display: inline-flex;
  height: 36px;
  align-items: center;
  justify-content: center;
  padding: var(--pf-pagi-pad, 0 12px);
  border-radius: var(--pf-pagi-br, 10px);
  border-width: var(--pf-pagi-bw, 1px);
  border-style: var(--pf-pagi-bs, solid);
  font-size: var(--pf-pagi-fs, 14px);
  font-weight: var(--pf-pagi-fw, 500);
  font-style: var(--pf-pagi-fstyle, normal);
  text-transform: var(--pf-pagi-tt, none);
  border-color: var(--pf-pagi-bc, #e5e7eb);
  background: var(--pf-pagi-bg, #fff);
  color: var(--pf-pagi-color, inherit);
  cursor: pointer;
  transition: opacity .2s, background-color .2s, color .2s, border-color .2s;
}
.pf-b6 .pf-pgrid-pagi button:not(:disabled):hover { opacity: .8; }
.pf-b6 .pf-pgrid-pagi button.is-active {
  background: var(--pf-pagi-bg-active, #111827);
  color: var(--pf-pagi-color-active, #fff);
  border-color: var(--pf-pagi-bc-active, #111827);
}
.pf-b6 .pf-pgrid-pagi button:disabled { opacity: .5; cursor: not-allowed; }
.pf-b6 .pf-pgrid-pagi .pf-page-indicator { padding: 0 8px; color: var(--pf-pagi-color, #6b7280); }

.pf-b6 .pf-pgrid-load {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: var(--pf-pagi-m, 20px 0 0 0);
}
.pf-b6 .pf-pgrid-load button {
  padding: var(--pf-lm-pad, 10px 16px);
  border-radius: var(--pf-lm-br, 10px);
  border-width: var(--pf-lm-bw, 1px);
  border-style: var(--pf-lm-bs, solid);
  font-size: var(--pf-lm-fs, 14px);
  font-weight: var(--pf-lm-fw, 600);
  font-style: var(--pf-lm-fstyle, normal);
  text-transform: var(--pf-lm-tt, none);
  border-color: var(--pf-loadmore-bc, #e5e7eb);
  background: var(--pf-loadmore-bg, #fff);
  color: var(--pf-loadmore-color, inherit);
  cursor: pointer;
  transition: opacity .2s;
}
.pf-b6 .pf-pgrid-load.is-button-mode button { display: inline-flex; }
.pf-b6 .pf-pgrid-load:not(.is-button-mode) button { display: none; }
.pf-b6 .pf-pgrid-load button:hover { opacity: .8; }
.pf-b6 .pf-pgrid-load button:disabled { opacity: .5; cursor: not-allowed; }

.pf-b6-grid[data-thumb="0"] .pf-thumb { display: none !important; }
.pf-b6-grid[data-title="0"] .pf-title { display: none !important; }
.pf-b6-grid[data-cat="0"] .pf-badge, .pf-b6-grid[data-cat="0"] .pf-cat-row { display: none !important; }
.pf-b6-grid[data-meta="0"] .pf-meta { display: none !important; }
.pf-b6-grid[data-cf="0"] .pf-cf-list { display: none !important; }
.pf-b6-grid[data-author="0"] .pf-meta .pf-author, .pf-b6-grid[data-author="0"] .pf-meta [data-meta="author"] { display: none !important; }
.pf-b6-grid[data-date="0"] .pf-meta time, .pf-b6-grid[data-date="0"] .pf-meta [data-meta="date"] { display: none !important; }
.pf-b6-grid[data-excerpt="0"] .pf-excerpt { display: none !important; }
.pf-b6-grid[data-readmore="0"] .pf-readmore-wrap, .pf-b6-grid[data-readmore="0"] .pf-readmore { display: none !important; }

@media (max-width: 767.98px) {
  .pf-b6 .pf-filter {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 5px;
  }
}

.pf-b8{
  width: var(--pf-container-w, 100%);
  margin: var(--pf-m, 0 auto var(--pf-bottom-space, 60px) auto);
  padding: var(--pf-pad, 0);
  border-width: var(--pf-b-width, 0);
  border-style: var(--pf-b-style, solid);
  border-color: var(--pf-b-color, transparent);
  border-radius: var(--pf-b-radius, 12px);
  background: var(--pf-bg, transparent);
  box-shadow: var(--pf-shadow, none);
  position: relative;
  box-sizing: border-box;
}
.pf-b8 * { box-sizing: border-box; }
.pf-b8.is-loading .pf-b8-grid{ opacity:.6; pointer-events:none; transition: opacity .3s; }

.pf-b8-header-filter-wrap{ display:flex; justify-content:space-between; align-items:center; gap:15px; margin-bottom:16px; }
.pf-b8-header-filter-wrap.is-inline .pf-b8-head{ margin-bottom:0; flex-grow:1; }
.pf-b8-header-filter-wrap.is-inline .pf-filter{ margin-bottom:0; justify-content: var(--pf-head-filter-align, flex-start); }

.pf-b8-head{ display:flex; flex-direction:column; align-items: var(--pf-head-align, flex-start); position: relative; padding: var(--pf-head-pad, 0); margin: var(--pf-head-m, 0 0 16px 0); background: var(--pf-head-bg, transparent); color: var(--pf-head-color, inherit); }
.pf-b8-head .pf-title-wrap{ display:flex; align-items:center; justify-content: var(--pf-head-justify, flex-start); width:100%; }
.pf-b8-head .pf-title{ margin:0; line-height:1.25; font-size: var(--pf-head-fs, 1.5rem) !important; font-weight: var(--pf-head-fw, 700) !important; font-style: var(--pf-head-fstyle, normal) !important; text-transform: var(--pf-head-tt, none) !important; text-align: var(--pf-head-text-align, left) !important; width:100%; }
.pf-b8-head .pf-title a{ color:inherit; text-decoration:none; }

.pf-b8-head[data-line="1"][data-line-pos="bottom"]::after,
.pf-b8-head[data-line="1"][data-line-pos="top"]::before{ content:""; display:block; position:relative; height: var(--pf-head-line-thickness, 3px); width: var(--pf-head-line-len, 40%); background: var(--pf-head-line-color, currentColor); border-radius:2px; align-self: var(--pf-head-align, flex-start); }
.pf-b8-head[data-line="1"][data-line-pos="bottom"]::after{ margin-top: var(--pf-head-line-offset, 6px); }
.pf-b8-head[data-line="1"][data-line-pos="top"]::before{ margin-bottom: var(--pf-head-line-offset, 6px); }

.pf-b8-head[data-line-pos="left"] .pf-title-wrap,
.pf-b8-head[data-line-pos="right"] .pf-title-wrap{ gap: var(--pf-head-line-offset, 8px); }
.pf-b8-head[data-line="1"][data-line-pos="left"] .pf-title-wrap::before,
.pf-b8-head[data-line="1"][data-line-pos="right"] .pf-title-wrap::after{ content:""; display:block; flex-shrink:0; height: var(--pf-head-line-thickness, 3px); width: var(--pf-head-line-len, 40px); background: var(--pf-head-line-color, currentColor); border-radius:2px; }
.pf-b8-head[data-line="1"][data-line-pos="right"] .pf-title-wrap .pf-title{ order:-1; }

.pf-b8-head[data-line="1"][data-line-pos="mid"] .pf-title{ position:relative; display:inline-block; }
.pf-b8-head[data-line="1"][data-line-pos="mid"] .pf-title::after{ content:""; position:absolute; top:50%; left:0; right:0; height: var(--pf-head-line-thickness, 3px); background: var(--pf-head-line-color, currentColor); transform: translateY(-50%); pointer-events:none; }

.pf-b8 .pf-filter{ display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap; justify-content: var(--pf-head-filter-align, flex-start); }
.pf-b8 .pf-filter .pf-dropdown{ min-width:180px; padding:8px 10px; border-radius:10px; border:1px solid #e5e7eb; }
.pf-b8 .pf-filter .pf-pill,
.pf-b8 .pf-filter .pf-tab{ padding:8px 12px; border-radius:999px; border:1px solid #e5e7eb; background:#fff; cursor:pointer; user-select:none; }
.pf-b8 .pf-filter .pf-tab{ border-radius:10px; }
.pf-b8 .pf-filter .is-active{ background:#111827; color:#fff; border-color:#111827; }

.pf-b8-grid[data-thumb-pinterest="1"] .pf-thumb::before{ content:none !important; display:none !important; padding-top:0 !important; }
.pf-b8-grid[data-thumb-pinterest="1"] .pf-thumb img{ position:static !important; inset:auto !important; display:block !important; width:100% !important; height:auto !important; max-width:100% !important; max-height:none !important; object-fit: var(--pf-thumb-fit, cover) !important; object-position: center var(--pf-thumb-valign, 50%) !important; border-radius: inherit !important; }
.pf-b8-grid[data-thumb-pinterest="1"] .pf-thumb{ height:auto !important; min-height:0 !important; }

.pf-b8-stage{ position:relative; width:100%; }
.pf-b8-grid{ position:relative; min-height:50px; height:auto; transition: height .3s ease; }

.pf-b8 .pf-pcard{
  position:absolute;
  top:0;
  left:0;
  display:flex;
  flex-direction:column;
  gap:10px;
  background: var(--pf-item-bg, transparent);
  padding: var(--pf-item-pad, 12px);
  border-radius: var(--pf-item-br, 10px);
  border: var(--pf-item-bw, 0) var(--pf-item-bs, solid) var(--pf-item-bc, transparent);
  box-shadow: var(--pf-item-shadow, none);
  transition: transform var(--b8-anim, 260ms) ease, opacity var(--b8-anim, 260ms) ease;
}

.pf-b8 .pf-thumb{ position:relative; display:block; overflow:hidden; border-radius: var(--pf-thumb-radius, 12px); text-decoration:none; }
.pf-b8-grid[data-thumb-pinterest="0"] .pf-thumb::before{ content:""; display:block; padding-top: var(--pf-thumb-ratio, 75%); }
.pf-b8-grid[data-thumb-pinterest="0"] .pf-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit: var(--pf-thumb-fit, cover); object-position: center var(--pf-thumb-valign, 50%); }

.pf-b8 .pf-body{ display:block; }
.pf-b8 .pf-body-inner{ display:flex; flex-direction:column; gap:6px; }

.pf-b8 .pf-pcard .pf-title,
.pf-b8 .pf-pcard .pf-title a {
  color: var(--pf-title-color, inherit);
  background: var(--pf-title-bg, transparent);
}
.pf-b8 .pf-pcard .pf-title {
  margin: var(--pf-title-space, 10px 0 6px 0);
  padding: var(--pf-title-pad, 0px);
  border-radius: var(--pf-title-br, 0px);
  border-width: var(--pf-title-bw, 0px);
  border-style: var(--pf-title-bs, solid);
  border-color: var(--pf-title-bc, transparent);
  font-size: var(--pf-title-fs, 18px);
  font-weight: var(--pf-title-fw, 700);
  line-height: var(--pf-title-lh, 1.35);
  text-transform: var(--pf-title-tt, none);
  text-align: var(--pf-title-align, left);

  min-height: var(--pf-title-min-h, calc(var(--pf-title-fs, 18px) * var(--pf-title-lh, 1.35) * var(--pf-title-lines, 2)));
  display: flex;
  align-items: var(--pf-title-valign, center);
  justify-content: flex-start;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pf-b8 .pf-pcard .pf-title a { text-decoration: none; display:-webkit-box; -webkit-line-clamp: var(--pf-title-lines, 2); -webkit-box-orient: vertical; overflow:hidden; width:100%; }

.pf-b8 .pf-meta{ padding: var(--pf-meta-box-pad, 0); margin: var(--pf-meta-box-m, 0 0 8px 0); gap: var(--pf-meta-gap, 12px); color: var(--pf-meta-color, inherit); font-size: var(--pf-meta-fs, 13px); font-weight: var(--pf-meta-fw, 400); display:flex; flex-wrap:wrap; align-items:center; justify-content: var(--pf-meta-justify, flex-start); }

.pf-b8 .pf-cf-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-self: var(--pf-cf-align-self, flex-start);
  justify-content: var(--pf-cf-justify, flex-start);
  font-size: var(--pf-cf-fs, 13px);
  color: var(--pf-cf-color, #6b7280);
  font-weight: var(--pf-cf-fw, 500);
  font-style: var(--pf-cf-fstyle, normal);
  background: var(--pf-cf-bg, transparent);
  padding: var(--pf-cf-pad, 0);
  margin: var(--pf-cf-m, 0 0 8px 0);
  border-width: var(--pf-cf-bw, 0);
  border-style: var(--pf-cf-bs, solid);
  border-color: var(--pf-cf-bc, transparent);
  border-radius: var(--pf-cf-br, 0px);
  line-height: 1.4;
}
.pf-b8 .pf-cf-sep {
  color: #d1d5db;
  font-weight: 400;
  user-select: none;
  margin: 0 4px;
}

.pf-b8 .pf-excerpt{ box-sizing:border-box; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; text-align: var(--pf-excerpt-align, left); column-count: var(--pf-excerpt-cols, 1); column-gap: var(--pf-excerpt-gap, 0); color: var(--pf-excerpt-color, inherit); background: var(--pf-excerpt-bg, transparent); padding: var(--pf-excerpt-pad, 0); margin: var(--pf-excerpt-m, var(--pf-excerpt-space, 0)); border-width: var(--pf-excerpt-bw, 0); border-style: var(--pf-excerpt-bs, solid); border-color: var(--pf-excerpt-bc, transparent); border-radius: var(--pf-excerpt-br, 0); }

.pf-b8 .pf-readmore-wrap{ display:flex; justify-content: var(--pf-btn-align, flex-start); }
.pf-b8 .pf-readmore{ display:inline-block; text-decoration:none; transition: opacity .2s; font-size: var(--pf-readmore-fs, 14px); font-weight: var(--pf-readmore-fw, 500); padding: var(--pf-readmore-pad, 6px 14px); margin: var(--pf-readmore-m, 12px 0 0 0); background: var(--pf-readmore-bg, #111827); color: var(--pf-readmore-color, #fff); border: var(--pf-readmore-bw, 0) var(--pf-readmore-bs, solid) var(--pf-readmore-bc, transparent); border-radius: var(--pf-readmore-br, 8px); }
.pf-b8 .pf-readmore:hover{ opacity:.85; }

.pf-b8 .pf-badge{ display: var(--pf-cat-display, inline-block); margin: var(--pf-cat-spacing, 0 6px 6px 0); padding: var(--pf-cat-padding, 4px 10px); font-size: var(--pf-cat-fs, 13px); font-weight: var(--pf-cat-fw, 600); line-height: var(--pf-cat-lh, 1); font-style: var(--pf-cat-style, normal); text-transform: var(--pf-cat-tt, none); border-radius: var(--pf-cat-br, 6px); border-width: var(--pf-cat-bw, 0); border-style: var(--pf-cat-bs, solid); border-color: var(--pf-cat-bc, transparent); background: var(--pf-badge-bg, #000); color: var(--pf-badge-text, #fff); text-decoration:none; transition: opacity .2s; }
.pf-b8 a.pf-badge:hover{ opacity:.9; }

.pf-b8 .pf-thumb > .pf-badge{ position:absolute; top:12px; left:12px; z-index:2; }
.pf-b8-grid[data-catpos="over"][data-catalign="right"] .pf-thumb > .pf-badge{ left:auto; right:12px; }
.pf-b8-grid[data-catpos="over"][data-catalign="center"] .pf-thumb > .pf-badge{ left:50%; transform: translateX(-50%); }

.pf-b8 .pf-cat-row{ display:flex; flex-wrap:wrap; justify-content: var(--pf-cat-align-justify, flex-start); }

.pf-b8 mark.pf-search-hl{ padding:.08em .18em; border-radius:.22em; background-color: #ffe082; color: #333; }

.pf-b8 .pf-pgrid-pagi{ display:flex; align-items:center; justify-content:center; gap:8px; margin: var(--pf-pagi-m, 20px 0 0 0); flex-wrap:wrap; }
.pf-b8 .pf-pgrid-pagi button{ display:inline-flex; height:36px; align-items:center; justify-content:center; padding: var(--pf-pagi-pad, 0 12px); border-radius: var(--pf-pagi-br, 10px); border-width: var(--pf-pagi-bw, 1px); border-style: var(--pf-pagi-bs, solid); font-size: var(--pf-pagi-fs, 14px); font-weight: var(--pf-pagi-fw, 500); font-style: var(--pf-pagi-fstyle, normal); text-transform: var(--pf-pagi-tt, none); border-color: var(--pf-pagi-bc, #e5e7eb); background: var(--pf-pagi-bg, #fff); color: var(--pf-pagi-color, inherit); cursor:pointer; transition: opacity .2s, background-color .2s, color .2s, border-color .2s; }
.pf-b8 .pf-pgrid-pagi button:not(:disabled):hover{ opacity:.8; }
.pf-b8 .pf-pgrid-pagi button.is-active{ background: var(--pf-pagi-bg-active, #111827); color: var(--pf-pagi-color-active, #fff); border-color: var(--pf-pagi-bc-active, #111827); }
.pf-b8 .pf-pgrid-pagi button:disabled{ opacity:.5; cursor:not-allowed; }
.pf-b8 .pf-pgrid-pagi .pf-page-indicator{ padding:0 8px; color: var(--pf-pagi-color, #6b7280); }

.pf-b8 .pf-pgrid-load{ display:flex; align-items:center; justify-content:center; margin: var(--pf-pagi-m, 20px 0 0 0); }
.pf-b8 .pf-pgrid-load button{ padding: var(--pf-lm-pad, 10px 16px); border-radius: var(--pf-lm-br, 10px); border-width: var(--pf-lm-bw, 1px); border-style: var(--pf-lm-bs, solid); font-size: var(--pf-lm-fs, 14px); font-weight: var(--pf-lm-fw, 600); font-style: var(--pf-lm-fstyle, normal); text-transform: var(--pf-lm-tt, none); border-color: var(--pf-loadmore-bc, #e5e7eb); background: var(--pf-loadmore-bg, #fff); color: var(--pf-loadmore-color, inherit); cursor:pointer; transition: opacity .2s; }
.pf-b8 .pf-pgrid-load.is-button-mode button{ display:inline-flex; }
.pf-b8 .pf-pgrid-load:not(.is-button-mode) button{ display:none; }
.pf-b8 .pf-pgrid-load button:hover{ opacity:.8; }
.pf-b8 .pf-pgrid-load button:disabled{ opacity:.5; cursor:not-allowed; }

.pf-b8-grid[data-thumb="0"] .pf-thumb{ display:none !important; }
.pf-b8-grid[data-title="0"] .pf-title{ display:none !important; }
.pf-b8-grid[data-cat="0"] .pf-badge, .pf-b8-grid[data-cat="0"] .pf-cat-row{ display:none !important; }
.pf-b8-grid[data-meta="0"] .pf-meta{ display:none !important; }
.pf-b8-grid[data-cf="0"] .pf-cf-list{ display:none !important; }
.pf-b8-grid[data-author="0"] .pf-meta .pf-author, .pf-b8-grid[data-author="0"] .pf-meta [data-meta="author"]{ display:none !important; }
.pf-b8-grid[data-date="0"] .pf-meta time, .pf-b8-grid[data-date="0"] .pf-meta [data-meta="date"]{ display:none !important; }
.pf-b8-grid[data-excerpt="0"] .pf-excerpt{ display:none !important; }
.pf-b8-grid[data-readmore="0"] .pf-readmore-wrap, .pf-b8-grid[data-readmore="0"] .pf-readmore{ display:none !important; }

@media (max-width: 767.98px){
  .pf-b8 .pf-filter{
    justify-content:flex-start;
    overflow-x:auto;
    padding-bottom:5px;
  }
}

.pf-b8 .pf-cf-list, .pf-b6 .pf-cf-list{display:var(--pf-cf-display, inline-flex);flex-wrap:wrap;align-items:center;justify-content:var(--pf-cf-align, flex-start);gap:6px;background:var(--pf-cf-bg, transparent);font-size:var(--pf-cf-fs,13px);font-weight:var(--pf-cf-fw,500);font-style:var(--pf-cf-fstyle,normal);color:var(--pf-cf-color,inherit);padding:var(--pf-cf-pad,0);margin:var(--pf-cf-m,0 0 8px 0);border-radius:var(--pf-cf-br,0);border-width:var(--pf-cf-bw,0);border-style:var(--pf-cf-bs,solid);border-color:var(--pf-cf-bc,transparent);}
.pf-b8 .pf-cf-list[style*="text-align:center"], .pf-b6 .pf-cf-list[style*="text-align:center"]{justify-content:center;}
.pf-b8 .pf-cf-list[style*="text-align:right"], .pf-b6 .pf-cf-list[style*="text-align:right"]{justify-content:flex-end;}

.pf-b8 .pf-pgrid-pagi .pf-pagi-ellipsis,
.pf-b6 .pf-pgrid-pagi .pf-pagi-ellipsis{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:36px;
  height:36px;
  padding:0 6px;
  color:var(--pf-pagi-color, #6b7280);
  font-size:var(--pf-pagi-fs, 14px);
  font-weight:var(--pf-pagi-fw, 500);
  user-select:none;
  pointer-events:none;
}

/* DOWNLOAD BADGE */
.pf-b6 .pf-access-badge,
.pf-b8 .pf-access-badge{
  display: var(--pf-cat-display, inline-block);
}
.pf-b6 .pf-access-badge.is-free,
.pf-b8 .pf-access-badge.is-free,
.pf-b6 .pf-access-badge.pf-badge--free,
.pf-b8 .pf-access-badge.pf-badge--free{
  background: var(--pf-access-free-bg, #0f766e);
  color: var(--pf-access-free-color, #fff);
  border-color: transparent;
}
.pf-b6 .pf-access-badge.is-vip,
.pf-b8 .pf-access-badge.is-vip,
.pf-b6 .pf-access-badge.pf-badge--vip,
.pf-b8 .pf-access-badge.pf-badge--vip{
  background: var(--pf-access-vip-bg, var(--pf-badge-bg, #efd28b));
  color: var(--pf-access-vip-color, var(--pf-badge-text, #111));
  border-color: transparent;
}
.pf-b6 .pf-access-badge.is-price,
.pf-b8 .pf-access-badge.is-price,
.pf-b6 .pf-access-badge.pf-badge--price,
.pf-b8 .pf-access-badge.pf-badge--price{
  background: var(--pf-access-price-bg, #b91c1c);
  color: var(--pf-access-price-color, #fff);
  border-color: transparent;
}


/* v2.6.2 — Equal height card mode for straight rows in Masonry */
.pf-b8.is-equal-height .pf-pcard,
.pf-b6.is-equal-height .pf-pcard{
  min-height: var(--pf-item-min-h, 390px);
}

.pf-b8.is-equal-height .pf-body,
.pf-b6.is-equal-height .pf-body{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.pf-b8.is-equal-height .pf-body-inner,
.pf-b6.is-equal-height .pf-body-inner{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.pf-b8.is-equal-height .pf-pcard .pf-title,
.pf-b6.is-equal-height .pf-pcard .pf-title{
  min-height: var(--pf-title-min-h, calc(var(--pf-title-fs, 18px) * var(--pf-title-lh, 1.35) * var(--pf-title-lines, 2)));
  display:flex;
}

.pf-b8.is-equal-height .pf-excerpt,
.pf-b6.is-equal-height .pf-excerpt{
  -webkit-line-clamp: var(--pf-excerpt-lines, 3);
  min-height: var(--pf-excerpt-min-h, 72px);
}

.pf-b8.is-equal-height:not(.no-readmore-stick) .pf-readmore-wrap,
.pf-b6.is-equal-height:not(.no-readmore-stick) .pf-readmore-wrap{
  margin-top: auto;
}

/* block-8 gap zero fix: JS layout now respects gap=0. */


/* v2.6.4 — FIX masonry image-only bottom gap
   Khi ẩn toàn bộ title/meta/category/excerpt/readmore/custom fields, .pf-body rỗng vẫn là flex item,
   làm .pf-pcard còn gap 10px phía dưới thumb. Ẩn body + bỏ inner gap để thumb sát nhau đúng Gap = 0. */
.pf-b6-grid[data-title="0"][data-cat="0"][data-meta="0"][data-author="0"][data-date="0"][data-excerpt="0"][data-readmore="0"][data-cf="0"] .pf-pcard,
.pf-b8-grid[data-title="0"][data-cat="0"][data-meta="0"][data-author="0"][data-date="0"][data-excerpt="0"][data-readmore="0"][data-cf="0"] .pf-pcard {
  gap: 0 !important;
}

.pf-b6-grid[data-title="0"][data-cat="0"][data-meta="0"][data-author="0"][data-date="0"][data-excerpt="0"][data-readmore="0"][data-cf="0"] .pf-body,
.pf-b8-grid[data-title="0"][data-cat="0"][data-meta="0"][data-author="0"][data-date="0"][data-excerpt="0"][data-readmore="0"][data-cf="0"] .pf-body {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.pf-b6-grid[data-title="0"][data-cat="0"][data-meta="0"][data-author="0"][data-date="0"][data-excerpt="0"][data-readmore="0"][data-cf="0"] .pf-body-inner,
.pf-b8-grid[data-title="0"][data-cat="0"][data-meta="0"][data-author="0"][data-date="0"][data-excerpt="0"][data-readmore="0"][data-cf="0"] .pf-body-inner {
  display: none !important;
}


/* v2.6.6-hover-luxury — luxury hover effects, additive only */
.pf-b6.pf-b8-hover .pf-pcard {
  overflow: hidden;
  will-change: transform;
  transition:
    transform var(--pf-hover-speed, var(--b8-anim, 260ms)) ease,
    box-shadow var(--pf-hover-speed, var(--b8-anim, 260ms)) ease,
    filter var(--pf-hover-speed, var(--b8-anim, 260ms)) ease,
    opacity var(--pf-hover-speed, var(--b8-anim, 260ms)) ease;
}

.pf-b6.pf-b8-hover .pf-thumb {
  overflow: hidden;
  isolation: isolate;
}

.pf-b6.pf-b8-hover .pf-thumb img {
  transition:
    transform var(--pf-hover-speed, var(--b8-anim, 260ms)) ease,
    filter var(--pf-hover-speed, var(--b8-anim, 260ms)) ease,
    opacity var(--pf-hover-speed, var(--b8-anim, 260ms)) ease;
  will-change: transform;
}

.pf-b6.pf-b8-hover .pf-pcard::before,
.pf-b6.pf-b8-hover .pf-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: var(--pf-hover-overlay, rgba(255,255,255,.14));
  opacity: 0;
  transition: opacity var(--pf-hover-speed, var(--b8-anim, 260ms)) ease;
}

.pf-b6.pf-b8-hover .pf-pcard::before { border-radius: inherit; }
.pf-b6.pf-b8-hover .pf-thumb::after { border-radius: var(--pf-thumb-radius, 12px); }

.pf-b6.pf-b8-hover .pf-pcard::after,
.pf-b6.pf-b8-hover .pf-thumb::before {
  content: "";
  position: absolute;
  top: -45%;
  left: -85%;
  z-index: 5;
  width: 55%;
  height: 190%;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.10) 30%, rgba(255,255,255,.52) 50%, rgba(255,255,255,.10) 70%, transparent 100%);
  transform: skewX(-22deg);
  opacity: 0;
}

.pf-b6.pf-b8-hover-target--thumb .pf-pcard::before,
.pf-b6.pf-b8-hover-target--thumb .pf-pcard::after { content: none; }

.pf-b6.pf-b8-hover-target--card .pf-thumb::before,
.pf-b6.pf-b8-hover-target--card .pf-thumb::after { content: none; }

.pf-b6.pf-b8-hover .pf-pcard:hover {
  box-shadow: var(--pf-hover-shadow, var(--pf-item-shadow, none));
}

.pf-b6.pf-b8-hover--lift .pf-pcard:hover,
.pf-b6.pf-b8-hover--lux-shine .pf-pcard:hover,
.pf-b6.pf-b8-hover--float .pf-pcard:hover {
  transform: translateY(calc(var(--pf-hover-lift, 6px) * -1)) rotate(var(--pf-hover-rotate, 0deg));
}

.pf-b6.pf-b8-hover--float .pf-pcard:hover { filter: saturate(1.04); }

.pf-b6.pf-b8-hover--zoom .pf-pcard:hover .pf-thumb img,
.pf-b6.pf-b8-hover--lux-shine .pf-pcard:hover .pf-thumb img,
.pf-b6.pf-b8-hover--shine-zoom .pf-pcard:hover .pf-thumb img {
  transform: scale(var(--pf-hover-scale, 1.04));
}

.pf-b6.pf-b8-hover--overlay.pf-b8-hover-target--card .pf-pcard:hover::before,
.pf-b6.pf-b8-hover--lux-shine.pf-b8-hover-target--card .pf-pcard:hover::before {
  opacity: var(--pf-hover-opacity, .55);
}

.pf-b6.pf-b8-hover--overlay.pf-b8-hover-target--thumb .pf-pcard:hover .pf-thumb::after,
.pf-b6.pf-b8-hover--lux-shine.pf-b8-hover-target--thumb .pf-pcard:hover .pf-thumb::after {
  opacity: var(--pf-hover-opacity, .55);
}

.pf-b6.pf-b8-hover--grayscale .pf-thumb img { filter: grayscale(1); }
.pf-b6.pf-b8-hover--grayscale .pf-pcard:hover .pf-thumb img { filter: grayscale(0); }

.pf-b6.pf-b8-hover--blur .pf-pcard:hover .pf-thumb img {
  filter: blur(2px) brightness(.92);
}

.pf-b6.pf-b8-hover--shine.pf-b8-hover-target--card .pf-pcard:hover::after,
.pf-b6.pf-b8-hover--lux-shine.pf-b8-hover-target--card .pf-pcard:hover::after,
.pf-b6.pf-b8-hover--shine-zoom.pf-b8-hover-target--card .pf-pcard:hover::after,
.pf-b6.pf-b8-hover--shine.pf-b8-hover-target--thumb .pf-pcard:hover .pf-thumb::before,
.pf-b6.pf-b8-hover--lux-shine.pf-b8-hover-target--thumb .pf-pcard:hover .pf-thumb::before,
.pf-b6.pf-b8-hover--shine-zoom.pf-b8-hover-target--thumb .pf-pcard:hover .pf-thumb::before {
  animation: pf-b8-shine var(--pf-hover-speed, 520ms) ease forwards;
  opacity: 1;
}

.pf-b6.pf-b8-hover--lux-shine .pf-pcard:hover {
  box-shadow:
    var(--pf-hover-shadow, 0 18px 45px rgba(0,0,0,.22)),
    0 0 0 1px var(--pf-hover-glow, rgba(255,255,255,.08));
}

@keyframes pf-b8-shine {
  0% { left: -85%; opacity: 0; }
  15% { opacity: 1; }
  100% { left: 130%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pf-b6.pf-b8-hover .pf-pcard,
  .pf-b6.pf-b8-hover .pf-thumb img {
    transition: none !important;
  }
  .pf-b6.pf-b8-hover .pf-pcard::after,
  .pf-b6.pf-b8-hover .pf-thumb::before {
    animation: none !important;
  }
}


/* === FIX THUMB NON-PINTEREST FRONTEND: static image + aspect-ratio, no absolute collapse === */
.pf-b6-grid[data-thumb-pinterest="0"] .pf-thumb,
.pf-b8-grid[data-thumb-pinterest="0"] .pf-thumb{
  position: relative !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: var(--pf-thumb-ar, 4/3) !important;
  height: auto !important;
  overflow: hidden !important;
  border-radius: var(--pf-thumb-radius, 12px) !important;
  line-height: 0 !important;
}
.pf-b6-grid[data-thumb-pinterest="0"] .pf-thumb::before,
.pf-b8-grid[data-thumb-pinterest="0"] .pf-thumb::before{
  content: none !important;
  display: none !important;
  padding-top: 0 !important;
}
.pf-b6-grid[data-thumb-pinterest="0"] .pf-thumb img,
.pf-b8-grid[data-thumb-pinterest="0"] .pf-thumb img{
  position: initial !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: none !important;
  object-fit: var(--pf-thumb-fit, cover) !important;
  object-position: center var(--pf-thumb-valign, 50%) !important;
  border-radius: inherit !important;
}

/* Title vertical alignment helpers */
.pf-b8 .pf-pcard .pf-title,
.pf-b6 .pf-pcard .pf-title{ align-items: var(--pf-title-valign, center); }
.pf-b8 .pf-pcard .pf-title a,
.pf-b6 .pf-pcard .pf-title a{ color: inherit; }

/* =====================================================================
 * Block 8 v2.7.0 — Responsive Typography & Style
 * Tablet: <= 991px | Mobile: <= 767px
 * Empty responsive values inherit Desktop values.
 * JS also stamps data-b8-breakpoint so Builder/container previews stay exact.
 * ===================================================================== */

/* Desktop/default active aliases */
.pf-b6,
.pf-b8{
  --pf-container-w-r: var(--pf-container-w, 100%);
  --pf-pad-r: var(--pf-pad, 0);
  --pf-bottom-space-r: var(--pf-bottom-space, 60px);

  --pf-head-align-r: var(--pf-head-align, flex-start);
  --pf-head-justify-r: var(--pf-head-justify, flex-start);
  --pf-head-text-align-r: var(--pf-head-text-align, left);
  --pf-head-fs-r: var(--pf-head-fs, 1.5rem);
  --pf-head-fw-r: var(--pf-head-fw, 700);
  --pf-head-fstyle-r: var(--pf-head-fstyle, normal);
  --pf-head-tt-r: var(--pf-head-tt, none);
  --pf-head-lh-r: var(--pf-head-lh, 1.25);
  --pf-head-ls-r: var(--pf-head-ls, normal);
  --pf-head-pad-r: var(--pf-head-pad, 0);
  --pf-head-m-r: var(--pf-head-m, 0 0 16px 0);

  --pf-item-pad-r: var(--pf-item-pad, 12px);
  --pf-item-br-r: var(--pf-item-br, 10px);
  --pf-thumb-radius-r: var(--pf-thumb-radius, 12px);

  --pf-title-fs-r: var(--pf-title-fs, 18px);
  --pf-title-fw-r: var(--pf-title-fw, 700);
  --pf-title-fstyle-r: var(--pf-title-fstyle, normal);
  --pf-title-tt-r: var(--pf-title-tt, none);
  --pf-title-lh-r: var(--pf-title-lh, 1.35);
  --pf-title-ls-r: var(--pf-title-ls, normal);
  --pf-title-align-r: var(--pf-title-align, left);
  --pf-title-space-r: var(--pf-title-space, 10px 0 6px 0);
  --pf-title-pad-r: var(--pf-title-pad, 0px);
  --pf-title-lines-r: var(--pf-title-lines, 2);

  --pf-meta-fs-r: var(--pf-meta-fs, 13px);
  --pf-meta-fw-r: var(--pf-meta-fw, 400);
  --pf-meta-fstyle-r: var(--pf-meta-fstyle, normal);
  --pf-meta-tt-r: var(--pf-meta-tt, none);
  --pf-meta-lh-r: var(--pf-meta-lh, normal);
  --pf-meta-ls-r: var(--pf-meta-ls, normal);
  --pf-meta-gap-r: var(--pf-meta-gap, 12px);
  --pf-meta-justify-r: var(--pf-meta-justify, flex-start);

  --pf-cat-fs-r: var(--pf-cat-fs, 13px);
  --pf-cat-fw-r: var(--pf-cat-fw, 600);
  --pf-cat-tt-r: var(--pf-cat-tt, none);
  --pf-cat-style-r: var(--pf-cat-style, normal);
  --pf-cat-lh-r: var(--pf-cat-lh, 1);
  --pf-cat-ls-r: var(--pf-cat-ls, normal);
  --pf-cat-padding-r: var(--pf-cat-padding, 4px 10px);
  --pf-cat-spacing-r: var(--pf-cat-spacing, 0 6px 6px 0);

  --pf-cf-fs-r: var(--pf-cf-fs, 13px);
  --pf-cf-fw-r: var(--pf-cf-fw, 500);
  --pf-cf-fstyle-r: var(--pf-cf-fstyle, normal);
  --pf-cf-tt-r: var(--pf-cf-tt, none);
  --pf-cf-lh-r: var(--pf-cf-lh, 1.4);
  --pf-cf-ls-r: var(--pf-cf-ls, normal);
  --pf-cf-align-self-r: var(--pf-cf-align-self, flex-start);
  --pf-cf-justify-r: var(--pf-cf-justify, flex-start);

  --pf-excerpt-fs-r: var(--pf-excerpt-fs, inherit);
  --pf-excerpt-fw-r: var(--pf-excerpt-fw, inherit);
  --pf-excerpt-fstyle-r: var(--pf-excerpt-fstyle, normal);
  --pf-excerpt-tt-r: var(--pf-excerpt-tt, none);
  --pf-excerpt-lh-r: var(--pf-excerpt-lh, normal);
  --pf-excerpt-ls-r: var(--pf-excerpt-ls, normal);
  --pf-excerpt-align-r: var(--pf-excerpt-align, left);
  --pf-excerpt-pad-r: var(--pf-excerpt-pad, 0);
  --pf-excerpt-m-r: var(--pf-excerpt-m, var(--pf-excerpt-space, 0));
  --pf-excerpt-lines-r: var(--pf-excerpt-lines, 3);

  --pf-readmore-fs-r: var(--pf-readmore-fs, 14px);
  --pf-readmore-fw-r: var(--pf-readmore-fw, 500);
  --pf-readmore-fstyle-r: var(--pf-readmore-fstyle, normal);
  --pf-readmore-tt-r: var(--pf-readmore-tt, none);
  --pf-readmore-lh-r: var(--pf-readmore-lh, normal);
  --pf-readmore-ls-r: var(--pf-readmore-ls, normal);
  --pf-readmore-pad-r: var(--pf-readmore-pad, 6px 14px);
  --pf-readmore-m-r: var(--pf-readmore-m, 12px 0 0 0);
  --pf-btn-align-r: var(--pf-btn-align, flex-start);

  width: var(--pf-container-w-r);
  padding: var(--pf-pad-r);
  margin: var(--pf-m, 0 auto var(--pf-bottom-space-r) auto);
}

.pf-b6-head,
.pf-b8-head{
  align-items: var(--pf-head-align-r) !important;
  padding: var(--pf-head-pad-r);
  margin: var(--pf-head-m-r);
}
.pf-b6-head .pf-title-wrap,
.pf-b8-head .pf-title-wrap{
  justify-content: var(--pf-head-justify-r) !important;
}
.pf-b6-head .pf-title,
.pf-b8-head .pf-title{
  font-size: var(--pf-head-fs-r) !important;
  font-weight: var(--pf-head-fw-r) !important;
  font-style: var(--pf-head-fstyle-r) !important;
  text-transform: var(--pf-head-tt-r) !important;
  line-height: var(--pf-head-lh-r) !important;
  letter-spacing: var(--pf-head-ls-r) !important;
  text-align: var(--pf-head-text-align-r) !important;
}
.pf-b6-head[data-line="1"][data-line-pos="bottom"]::after,
.pf-b6-head[data-line="1"][data-line-pos="top"]::before,
.pf-b8-head[data-line="1"][data-line-pos="bottom"]::after,
.pf-b8-head[data-line="1"][data-line-pos="top"]::before{
  align-self: var(--pf-head-align-r);
}

.pf-b6 .pf-pcard,
.pf-b8 .pf-pcard{
  padding: var(--pf-item-pad-r);
  border-radius: var(--pf-item-br-r);
}
.pf-b6 .pf-thumb,
.pf-b8 .pf-thumb{
  border-radius: var(--pf-thumb-radius-r);
}

.pf-b6 .pf-pcard .pf-title,
.pf-b8 .pf-pcard .pf-title{
  margin: var(--pf-title-space-r);
  padding: var(--pf-title-pad-r);
  font-size: var(--pf-title-fs-r);
  font-weight: var(--pf-title-fw-r);
  font-style: var(--pf-title-fstyle-r);
  text-transform: var(--pf-title-tt-r);
  line-height: var(--pf-title-lh-r);
  letter-spacing: var(--pf-title-ls-r);
  text-align: var(--pf-title-align-r);
  min-height: var(--pf-title-min-h, calc(var(--pf-title-fs-r) * var(--pf-title-lh-r) * var(--pf-title-lines-r)));
}
.pf-b6 .pf-pcard .pf-title a,
.pf-b8 .pf-pcard .pf-title a{
  -webkit-line-clamp: var(--pf-title-lines-r);
}

.pf-b6 .pf-meta,
.pf-b8 .pf-meta{
  font-size: var(--pf-meta-fs-r);
  font-weight: var(--pf-meta-fw-r);
  font-style: var(--pf-meta-fstyle-r);
  text-transform: var(--pf-meta-tt-r);
  line-height: var(--pf-meta-lh-r);
  letter-spacing: var(--pf-meta-ls-r);
  gap: var(--pf-meta-gap-r);
  justify-content: var(--pf-meta-justify-r) !important;
}

.pf-b6 .pf-badge,
.pf-b8 .pf-badge{
  margin: var(--pf-cat-spacing-r);
  padding: var(--pf-cat-padding-r);
  font-size: var(--pf-cat-fs-r);
  font-weight: var(--pf-cat-fw-r);
  font-style: var(--pf-cat-style-r);
  text-transform: var(--pf-cat-tt-r);
  line-height: var(--pf-cat-lh-r);
  letter-spacing: var(--pf-cat-ls-r);
}

.pf-b6 .pf-cf-list,
.pf-b8 .pf-cf-list{
  align-self: var(--pf-cf-align-self-r) !important;
  justify-content: var(--pf-cf-justify-r) !important;
  font-size: var(--pf-cf-fs-r);
  font-weight: var(--pf-cf-fw-r);
  font-style: var(--pf-cf-fstyle-r);
  text-transform: var(--pf-cf-tt-r);
  line-height: var(--pf-cf-lh-r);
  letter-spacing: var(--pf-cf-ls-r);
}

.pf-b6 .pf-excerpt,
.pf-b8 .pf-excerpt{
  font-size: var(--pf-excerpt-fs-r);
  font-weight: var(--pf-excerpt-fw-r);
  font-style: var(--pf-excerpt-fstyle-r);
  text-transform: var(--pf-excerpt-tt-r);
  line-height: var(--pf-excerpt-lh-r);
  letter-spacing: var(--pf-excerpt-ls-r);
  text-align: var(--pf-excerpt-align-r);
  padding: var(--pf-excerpt-pad-r);
  margin: var(--pf-excerpt-m-r);
}
.pf-b6.is-equal-height .pf-excerpt,
.pf-b8.is-equal-height .pf-excerpt{
  -webkit-line-clamp: var(--pf-excerpt-lines-r);
}

.pf-b6 .pf-readmore-wrap,
.pf-b8 .pf-readmore-wrap{
  justify-content: var(--pf-btn-align-r);
}
.pf-b6 .pf-readmore,
.pf-b8 .pf-readmore{
  font-size: var(--pf-readmore-fs-r);
  font-weight: var(--pf-readmore-fw-r);
  font-style: var(--pf-readmore-fstyle-r);
  text-transform: var(--pf-readmore-tt-r);
  line-height: var(--pf-readmore-lh-r);
  letter-spacing: var(--pf-readmore-ls-r);
  padding: var(--pf-readmore-pad-r);
  margin: var(--pf-readmore-m-r);
}

/* Tablet variable map. */
@media (max-width: 991.98px){
  .pf-b6,
  .pf-b8{
    --pf-container-w-r: var(--pf-container-w-tb, var(--pf-container-w, 100%));
    --pf-pad-r: var(--pf-pad-tb, var(--pf-pad, 0));
    --pf-bottom-space-r: var(--pf-bottom-space-tb, var(--pf-bottom-space, 60px));
    --pf-head-align-r: var(--pf-head-align-tb, var(--pf-head-align, flex-start));
    --pf-head-justify-r: var(--pf-head-justify-tb, var(--pf-head-justify, flex-start));
    --pf-head-text-align-r: var(--pf-head-text-align-tb, var(--pf-head-text-align, left));
    --pf-head-fs-r: var(--pf-head-fs-tb, var(--pf-head-fs, 1.5rem));
    --pf-head-fw-r: var(--pf-head-fw-tb, var(--pf-head-fw, 700));
    --pf-head-fstyle-r: var(--pf-head-fstyle-tb, var(--pf-head-fstyle, normal));
    --pf-head-tt-r: var(--pf-head-tt-tb, var(--pf-head-tt, none));
    --pf-head-lh-r: var(--pf-head-lh-tb, var(--pf-head-lh, 1.25));
    --pf-head-ls-r: var(--pf-head-ls-tb, var(--pf-head-ls, normal));
    --pf-head-pad-r: var(--pf-head-pad-tb, var(--pf-head-pad, 0));
    --pf-head-m-r: var(--pf-head-m-tb, var(--pf-head-m, 0 0 16px 0));
    --pf-item-pad-r: var(--pf-item-pad-tb, var(--pf-item-pad, 12px));
    --pf-item-br-r: var(--pf-item-br-tb, var(--pf-item-br, 10px));
    --pf-thumb-radius-r: var(--pf-thumb-radius-tb, var(--pf-thumb-radius, 12px));
    --pf-title-fs-r: var(--pf-title-fs-tb, var(--pf-title-fs, 18px));
    --pf-title-fw-r: var(--pf-title-fw-tb, var(--pf-title-fw, 700));
    --pf-title-fstyle-r: var(--pf-title-fstyle-tb, var(--pf-title-fstyle, normal));
    --pf-title-tt-r: var(--pf-title-tt-tb, var(--pf-title-tt, none));
    --pf-title-lh-r: var(--pf-title-lh-tb, var(--pf-title-lh, 1.35));
    --pf-title-ls-r: var(--pf-title-ls-tb, var(--pf-title-ls, normal));
    --pf-title-align-r: var(--pf-title-align-tb, var(--pf-title-align, left));
    --pf-title-space-r: var(--pf-title-space-tb, var(--pf-title-space, 10px 0 6px 0));
    --pf-title-pad-r: var(--pf-title-pad-tb, var(--pf-title-pad, 0px));
    --pf-title-lines-r: var(--pf-title-lines-tb, var(--pf-title-lines, 2));
    --pf-meta-fs-r: var(--pf-meta-fs-tb, var(--pf-meta-fs, 13px));
    --pf-meta-fw-r: var(--pf-meta-fw-tb, var(--pf-meta-fw, 400));
    --pf-meta-fstyle-r: var(--pf-meta-fstyle-tb, var(--pf-meta-fstyle, normal));
    --pf-meta-tt-r: var(--pf-meta-tt-tb, var(--pf-meta-tt, none));
    --pf-meta-lh-r: var(--pf-meta-lh-tb, var(--pf-meta-lh, normal));
    --pf-meta-ls-r: var(--pf-meta-ls-tb, var(--pf-meta-ls, normal));
    --pf-meta-gap-r: var(--pf-meta-gap-tb, var(--pf-meta-gap, 12px));
    --pf-meta-justify-r: var(--pf-meta-justify-tb, var(--pf-meta-justify, flex-start));
    --pf-cat-fs-r: var(--pf-cat-fs-tb, var(--pf-cat-fs, 13px));
    --pf-cat-fw-r: var(--pf-cat-fw-tb, var(--pf-cat-fw, 600));
    --pf-cat-tt-r: var(--pf-cat-tt-tb, var(--pf-cat-tt, none));
    --pf-cat-style-r: var(--pf-cat-style-tb, var(--pf-cat-style, normal));
    --pf-cat-lh-r: var(--pf-cat-lh-tb, var(--pf-cat-lh, 1));
    --pf-cat-ls-r: var(--pf-cat-ls-tb, var(--pf-cat-ls, normal));
    --pf-cat-padding-r: var(--pf-cat-padding-tb, var(--pf-cat-padding, 4px 10px));
    --pf-cat-spacing-r: var(--pf-cat-spacing-tb, var(--pf-cat-spacing, 0 6px 6px 0));
    --pf-cf-fs-r: var(--pf-cf-fs-tb, var(--pf-cf-fs, 13px));
    --pf-cf-fw-r: var(--pf-cf-fw-tb, var(--pf-cf-fw, 500));
    --pf-cf-fstyle-r: var(--pf-cf-fstyle-tb, var(--pf-cf-fstyle, normal));
    --pf-cf-tt-r: var(--pf-cf-tt-tb, var(--pf-cf-tt, none));
    --pf-cf-lh-r: var(--pf-cf-lh-tb, var(--pf-cf-lh, 1.4));
    --pf-cf-ls-r: var(--pf-cf-ls-tb, var(--pf-cf-ls, normal));
    --pf-cf-align-self-r: var(--pf-cf-align-self-tb, var(--pf-cf-align-self, flex-start));
    --pf-cf-justify-r: var(--pf-cf-justify-tb, var(--pf-cf-justify, flex-start));
    --pf-excerpt-fs-r: var(--pf-excerpt-fs-tb, var(--pf-excerpt-fs, inherit));
    --pf-excerpt-fw-r: var(--pf-excerpt-fw-tb, var(--pf-excerpt-fw, inherit));
    --pf-excerpt-fstyle-r: var(--pf-excerpt-fstyle-tb, var(--pf-excerpt-fstyle, normal));
    --pf-excerpt-tt-r: var(--pf-excerpt-tt-tb, var(--pf-excerpt-tt, none));
    --pf-excerpt-lh-r: var(--pf-excerpt-lh-tb, var(--pf-excerpt-lh, normal));
    --pf-excerpt-ls-r: var(--pf-excerpt-ls-tb, var(--pf-excerpt-ls, normal));
    --pf-excerpt-align-r: var(--pf-excerpt-align-tb, var(--pf-excerpt-align, left));
    --pf-excerpt-pad-r: var(--pf-excerpt-pad-tb, var(--pf-excerpt-pad, 0));
    --pf-excerpt-m-r: var(--pf-excerpt-m-tb, var(--pf-excerpt-m, var(--pf-excerpt-space, 0)));
    --pf-excerpt-lines-r: var(--pf-excerpt-lines-tb, var(--pf-excerpt-lines, 3));
    --pf-readmore-fs-r: var(--pf-readmore-fs-tb, var(--pf-readmore-fs, 14px));
    --pf-readmore-fw-r: var(--pf-readmore-fw-tb, var(--pf-readmore-fw, 500));
    --pf-readmore-fstyle-r: var(--pf-readmore-fstyle-tb, var(--pf-readmore-fstyle, normal));
    --pf-readmore-tt-r: var(--pf-readmore-tt-tb, var(--pf-readmore-tt, none));
    --pf-readmore-lh-r: var(--pf-readmore-lh-tb, var(--pf-readmore-lh, normal));
    --pf-readmore-ls-r: var(--pf-readmore-ls-tb, var(--pf-readmore-ls, normal));
    --pf-readmore-pad-r: var(--pf-readmore-pad-tb, var(--pf-readmore-pad, 6px 14px));
    --pf-readmore-m-r: var(--pf-readmore-m-tb, var(--pf-readmore-m, 12px 0 0 0));
    --pf-btn-align-r: var(--pf-btn-align-tb, var(--pf-btn-align, flex-start));
  }
}

/* Mobile explicitly falls back to Desktop (not Tablet) when empty. */
@media (max-width: 767.98px){
  .pf-b6,
  .pf-b8{
    --pf-container-w-r: var(--pf-container-w-mb, var(--pf-container-w, 100%));
    --pf-pad-r: var(--pf-pad-mb, var(--pf-pad, 0));
    --pf-bottom-space-r: var(--pf-bottom-space-mb, var(--pf-bottom-space, 60px));
    --pf-head-align-r: var(--pf-head-align-mb, var(--pf-head-align, flex-start));
    --pf-head-justify-r: var(--pf-head-justify-mb, var(--pf-head-justify, flex-start));
    --pf-head-text-align-r: var(--pf-head-text-align-mb, var(--pf-head-text-align, left));
    --pf-head-fs-r: var(--pf-head-fs-mb, var(--pf-head-fs, 1.5rem));
    --pf-head-fw-r: var(--pf-head-fw-mb, var(--pf-head-fw, 700));
    --pf-head-fstyle-r: var(--pf-head-fstyle-mb, var(--pf-head-fstyle, normal));
    --pf-head-tt-r: var(--pf-head-tt-mb, var(--pf-head-tt, none));
    --pf-head-lh-r: var(--pf-head-lh-mb, var(--pf-head-lh, 1.25));
    --pf-head-ls-r: var(--pf-head-ls-mb, var(--pf-head-ls, normal));
    --pf-head-pad-r: var(--pf-head-pad-mb, var(--pf-head-pad, 0));
    --pf-head-m-r: var(--pf-head-m-mb, var(--pf-head-m, 0 0 16px 0));
    --pf-item-pad-r: var(--pf-item-pad-mb, var(--pf-item-pad, 12px));
    --pf-item-br-r: var(--pf-item-br-mb, var(--pf-item-br, 10px));
    --pf-thumb-radius-r: var(--pf-thumb-radius-mb, var(--pf-thumb-radius, 12px));
    --pf-title-fs-r: var(--pf-title-fs-mb, var(--pf-title-fs, 18px));
    --pf-title-fw-r: var(--pf-title-fw-mb, var(--pf-title-fw, 700));
    --pf-title-fstyle-r: var(--pf-title-fstyle-mb, var(--pf-title-fstyle, normal));
    --pf-title-tt-r: var(--pf-title-tt-mb, var(--pf-title-tt, none));
    --pf-title-lh-r: var(--pf-title-lh-mb, var(--pf-title-lh, 1.35));
    --pf-title-ls-r: var(--pf-title-ls-mb, var(--pf-title-ls, normal));
    --pf-title-align-r: var(--pf-title-align-mb, var(--pf-title-align, left));
    --pf-title-space-r: var(--pf-title-space-mb, var(--pf-title-space, 10px 0 6px 0));
    --pf-title-pad-r: var(--pf-title-pad-mb, var(--pf-title-pad, 0px));
    --pf-title-lines-r: var(--pf-title-lines-mb, var(--pf-title-lines, 2));
    --pf-meta-fs-r: var(--pf-meta-fs-mb, var(--pf-meta-fs, 13px));
    --pf-meta-fw-r: var(--pf-meta-fw-mb, var(--pf-meta-fw, 400));
    --pf-meta-fstyle-r: var(--pf-meta-fstyle-mb, var(--pf-meta-fstyle, normal));
    --pf-meta-tt-r: var(--pf-meta-tt-mb, var(--pf-meta-tt, none));
    --pf-meta-lh-r: var(--pf-meta-lh-mb, var(--pf-meta-lh, normal));
    --pf-meta-ls-r: var(--pf-meta-ls-mb, var(--pf-meta-ls, normal));
    --pf-meta-gap-r: var(--pf-meta-gap-mb, var(--pf-meta-gap, 12px));
    --pf-meta-justify-r: var(--pf-meta-justify-mb, var(--pf-meta-justify, flex-start));
    --pf-cat-fs-r: var(--pf-cat-fs-mb, var(--pf-cat-fs, 13px));
    --pf-cat-fw-r: var(--pf-cat-fw-mb, var(--pf-cat-fw, 600));
    --pf-cat-tt-r: var(--pf-cat-tt-mb, var(--pf-cat-tt, none));
    --pf-cat-style-r: var(--pf-cat-style-mb, var(--pf-cat-style, normal));
    --pf-cat-lh-r: var(--pf-cat-lh-mb, var(--pf-cat-lh, 1));
    --pf-cat-ls-r: var(--pf-cat-ls-mb, var(--pf-cat-ls, normal));
    --pf-cat-padding-r: var(--pf-cat-padding-mb, var(--pf-cat-padding, 4px 10px));
    --pf-cat-spacing-r: var(--pf-cat-spacing-mb, var(--pf-cat-spacing, 0 6px 6px 0));
    --pf-cf-fs-r: var(--pf-cf-fs-mb, var(--pf-cf-fs, 13px));
    --pf-cf-fw-r: var(--pf-cf-fw-mb, var(--pf-cf-fw, 500));
    --pf-cf-fstyle-r: var(--pf-cf-fstyle-mb, var(--pf-cf-fstyle, normal));
    --pf-cf-tt-r: var(--pf-cf-tt-mb, var(--pf-cf-tt, none));
    --pf-cf-lh-r: var(--pf-cf-lh-mb, var(--pf-cf-lh, 1.4));
    --pf-cf-ls-r: var(--pf-cf-ls-mb, var(--pf-cf-ls, normal));
    --pf-cf-align-self-r: var(--pf-cf-align-self-mb, var(--pf-cf-align-self, flex-start));
    --pf-cf-justify-r: var(--pf-cf-justify-mb, var(--pf-cf-justify, flex-start));
    --pf-excerpt-fs-r: var(--pf-excerpt-fs-mb, var(--pf-excerpt-fs, inherit));
    --pf-excerpt-fw-r: var(--pf-excerpt-fw-mb, var(--pf-excerpt-fw, inherit));
    --pf-excerpt-fstyle-r: var(--pf-excerpt-fstyle-mb, var(--pf-excerpt-fstyle, normal));
    --pf-excerpt-tt-r: var(--pf-excerpt-tt-mb, var(--pf-excerpt-tt, none));
    --pf-excerpt-lh-r: var(--pf-excerpt-lh-mb, var(--pf-excerpt-lh, normal));
    --pf-excerpt-ls-r: var(--pf-excerpt-ls-mb, var(--pf-excerpt-ls, normal));
    --pf-excerpt-align-r: var(--pf-excerpt-align-mb, var(--pf-excerpt-align, left));
    --pf-excerpt-pad-r: var(--pf-excerpt-pad-mb, var(--pf-excerpt-pad, 0));
    --pf-excerpt-m-r: var(--pf-excerpt-m-mb, var(--pf-excerpt-m, var(--pf-excerpt-space, 0)));
    --pf-excerpt-lines-r: var(--pf-excerpt-lines-mb, var(--pf-excerpt-lines, 3));
    --pf-readmore-fs-r: var(--pf-readmore-fs-mb, var(--pf-readmore-fs, 14px));
    --pf-readmore-fw-r: var(--pf-readmore-fw-mb, var(--pf-readmore-fw, 500));
    --pf-readmore-fstyle-r: var(--pf-readmore-fstyle-mb, var(--pf-readmore-fstyle, normal));
    --pf-readmore-tt-r: var(--pf-readmore-tt-mb, var(--pf-readmore-tt, none));
    --pf-readmore-lh-r: var(--pf-readmore-lh-mb, var(--pf-readmore-lh, normal));
    --pf-readmore-ls-r: var(--pf-readmore-ls-mb, var(--pf-readmore-ls, normal));
    --pf-readmore-pad-r: var(--pf-readmore-pad-mb, var(--pf-readmore-pad, 6px 14px));
    --pf-readmore-m-r: var(--pf-readmore-m-mb, var(--pf-readmore-m, 12px 0 0 0));
    --pf-btn-align-r: var(--pf-btn-align-mb, var(--pf-btn-align, flex-start));
  }
}

/* Container-width aware preview/runtime: JS sets this attribute after measuring Block8. */
.pf-b6[data-b8-breakpoint="desktop"],
.pf-b8[data-b8-breakpoint="desktop"]{
  --pf-container-w-r: var(--pf-container-w, 100%); --pf-pad-r: var(--pf-pad, 0); --pf-bottom-space-r: var(--pf-bottom-space, 60px);
  --pf-head-align-r: var(--pf-head-align, flex-start); --pf-head-justify-r: var(--pf-head-justify, flex-start); --pf-head-text-align-r: var(--pf-head-text-align, left); --pf-head-fs-r: var(--pf-head-fs, 1.5rem); --pf-head-fw-r: var(--pf-head-fw, 700); --pf-head-fstyle-r: var(--pf-head-fstyle, normal); --pf-head-tt-r: var(--pf-head-tt, none); --pf-head-lh-r: var(--pf-head-lh, 1.25); --pf-head-ls-r: var(--pf-head-ls, normal); --pf-head-pad-r: var(--pf-head-pad, 0); --pf-head-m-r: var(--pf-head-m, 0 0 16px 0);
  --pf-item-pad-r: var(--pf-item-pad, 12px); --pf-item-br-r: var(--pf-item-br, 10px); --pf-thumb-radius-r: var(--pf-thumb-radius, 12px);
  --pf-title-fs-r: var(--pf-title-fs, 18px); --pf-title-fw-r: var(--pf-title-fw, 700); --pf-title-fstyle-r: var(--pf-title-fstyle, normal); --pf-title-tt-r: var(--pf-title-tt, none); --pf-title-lh-r: var(--pf-title-lh, 1.35); --pf-title-ls-r: var(--pf-title-ls, normal); --pf-title-align-r: var(--pf-title-align, left); --pf-title-space-r: var(--pf-title-space, 10px 0 6px 0); --pf-title-pad-r: var(--pf-title-pad, 0px); --pf-title-lines-r: var(--pf-title-lines, 2);
  --pf-meta-fs-r: var(--pf-meta-fs, 13px); --pf-meta-fw-r: var(--pf-meta-fw, 400); --pf-meta-fstyle-r: var(--pf-meta-fstyle, normal); --pf-meta-tt-r: var(--pf-meta-tt, none); --pf-meta-lh-r: var(--pf-meta-lh, normal); --pf-meta-ls-r: var(--pf-meta-ls, normal); --pf-meta-gap-r: var(--pf-meta-gap, 12px); --pf-meta-justify-r: var(--pf-meta-justify, flex-start);
  --pf-cat-fs-r: var(--pf-cat-fs, 13px); --pf-cat-fw-r: var(--pf-cat-fw, 600); --pf-cat-tt-r: var(--pf-cat-tt, none); --pf-cat-style-r: var(--pf-cat-style, normal); --pf-cat-lh-r: var(--pf-cat-lh, 1); --pf-cat-ls-r: var(--pf-cat-ls, normal); --pf-cat-padding-r: var(--pf-cat-padding, 4px 10px); --pf-cat-spacing-r: var(--pf-cat-spacing, 0 6px 6px 0);
  --pf-cf-fs-r: var(--pf-cf-fs, 13px); --pf-cf-fw-r: var(--pf-cf-fw, 500); --pf-cf-fstyle-r: var(--pf-cf-fstyle, normal); --pf-cf-tt-r: var(--pf-cf-tt, none); --pf-cf-lh-r: var(--pf-cf-lh, 1.4); --pf-cf-ls-r: var(--pf-cf-ls, normal); --pf-cf-align-self-r: var(--pf-cf-align-self, flex-start); --pf-cf-justify-r: var(--pf-cf-justify, flex-start);
  --pf-excerpt-fs-r: var(--pf-excerpt-fs, inherit); --pf-excerpt-fw-r: var(--pf-excerpt-fw, inherit); --pf-excerpt-fstyle-r: var(--pf-excerpt-fstyle, normal); --pf-excerpt-tt-r: var(--pf-excerpt-tt, none); --pf-excerpt-lh-r: var(--pf-excerpt-lh, normal); --pf-excerpt-ls-r: var(--pf-excerpt-ls, normal); --pf-excerpt-align-r: var(--pf-excerpt-align, left); --pf-excerpt-pad-r: var(--pf-excerpt-pad, 0); --pf-excerpt-m-r: var(--pf-excerpt-m, var(--pf-excerpt-space, 0)); --pf-excerpt-lines-r: var(--pf-excerpt-lines, 3);
  --pf-readmore-fs-r: var(--pf-readmore-fs, 14px); --pf-readmore-fw-r: var(--pf-readmore-fw, 500); --pf-readmore-fstyle-r: var(--pf-readmore-fstyle, normal); --pf-readmore-tt-r: var(--pf-readmore-tt, none); --pf-readmore-lh-r: var(--pf-readmore-lh, normal); --pf-readmore-ls-r: var(--pf-readmore-ls, normal); --pf-readmore-pad-r: var(--pf-readmore-pad, 6px 14px); --pf-readmore-m-r: var(--pf-readmore-m, 12px 0 0 0); --pf-btn-align-r: var(--pf-btn-align, flex-start);
}

.pf-b6[data-b8-breakpoint="tablet"],
.pf-b8[data-b8-breakpoint="tablet"]{
  --pf-container-w-r: var(--pf-container-w-tb, var(--pf-container-w, 100%)); --pf-pad-r: var(--pf-pad-tb, var(--pf-pad, 0)); --pf-bottom-space-r: var(--pf-bottom-space-tb, var(--pf-bottom-space, 60px));
  --pf-head-align-r: var(--pf-head-align-tb, var(--pf-head-align, flex-start)); --pf-head-justify-r: var(--pf-head-justify-tb, var(--pf-head-justify, flex-start)); --pf-head-text-align-r: var(--pf-head-text-align-tb, var(--pf-head-text-align, left)); --pf-head-fs-r: var(--pf-head-fs-tb, var(--pf-head-fs, 1.5rem)); --pf-head-fw-r: var(--pf-head-fw-tb, var(--pf-head-fw, 700)); --pf-head-fstyle-r: var(--pf-head-fstyle-tb, var(--pf-head-fstyle, normal)); --pf-head-tt-r: var(--pf-head-tt-tb, var(--pf-head-tt, none)); --pf-head-lh-r: var(--pf-head-lh-tb, var(--pf-head-lh, 1.25)); --pf-head-ls-r: var(--pf-head-ls-tb, var(--pf-head-ls, normal)); --pf-head-pad-r: var(--pf-head-pad-tb, var(--pf-head-pad, 0)); --pf-head-m-r: var(--pf-head-m-tb, var(--pf-head-m, 0 0 16px 0));
  --pf-item-pad-r: var(--pf-item-pad-tb, var(--pf-item-pad, 12px)); --pf-item-br-r: var(--pf-item-br-tb, var(--pf-item-br, 10px)); --pf-thumb-radius-r: var(--pf-thumb-radius-tb, var(--pf-thumb-radius, 12px));
  --pf-title-fs-r: var(--pf-title-fs-tb, var(--pf-title-fs, 18px)); --pf-title-fw-r: var(--pf-title-fw-tb, var(--pf-title-fw, 700)); --pf-title-fstyle-r: var(--pf-title-fstyle-tb, var(--pf-title-fstyle, normal)); --pf-title-tt-r: var(--pf-title-tt-tb, var(--pf-title-tt, none)); --pf-title-lh-r: var(--pf-title-lh-tb, var(--pf-title-lh, 1.35)); --pf-title-ls-r: var(--pf-title-ls-tb, var(--pf-title-ls, normal)); --pf-title-align-r: var(--pf-title-align-tb, var(--pf-title-align, left)); --pf-title-space-r: var(--pf-title-space-tb, var(--pf-title-space, 10px 0 6px 0)); --pf-title-pad-r: var(--pf-title-pad-tb, var(--pf-title-pad, 0px)); --pf-title-lines-r: var(--pf-title-lines-tb, var(--pf-title-lines, 2));
  --pf-meta-fs-r: var(--pf-meta-fs-tb, var(--pf-meta-fs, 13px)); --pf-meta-fw-r: var(--pf-meta-fw-tb, var(--pf-meta-fw, 400)); --pf-meta-fstyle-r: var(--pf-meta-fstyle-tb, var(--pf-meta-fstyle, normal)); --pf-meta-tt-r: var(--pf-meta-tt-tb, var(--pf-meta-tt, none)); --pf-meta-lh-r: var(--pf-meta-lh-tb, var(--pf-meta-lh, normal)); --pf-meta-ls-r: var(--pf-meta-ls-tb, var(--pf-meta-ls, normal)); --pf-meta-gap-r: var(--pf-meta-gap-tb, var(--pf-meta-gap, 12px)); --pf-meta-justify-r: var(--pf-meta-justify-tb, var(--pf-meta-justify, flex-start));
  --pf-cat-fs-r: var(--pf-cat-fs-tb, var(--pf-cat-fs, 13px)); --pf-cat-fw-r: var(--pf-cat-fw-tb, var(--pf-cat-fw, 600)); --pf-cat-tt-r: var(--pf-cat-tt-tb, var(--pf-cat-tt, none)); --pf-cat-style-r: var(--pf-cat-style-tb, var(--pf-cat-style, normal)); --pf-cat-lh-r: var(--pf-cat-lh-tb, var(--pf-cat-lh, 1)); --pf-cat-ls-r: var(--pf-cat-ls-tb, var(--pf-cat-ls, normal)); --pf-cat-padding-r: var(--pf-cat-padding-tb, var(--pf-cat-padding, 4px 10px)); --pf-cat-spacing-r: var(--pf-cat-spacing-tb, var(--pf-cat-spacing, 0 6px 6px 0));
  --pf-cf-fs-r: var(--pf-cf-fs-tb, var(--pf-cf-fs, 13px)); --pf-cf-fw-r: var(--pf-cf-fw-tb, var(--pf-cf-fw, 500)); --pf-cf-fstyle-r: var(--pf-cf-fstyle-tb, var(--pf-cf-fstyle, normal)); --pf-cf-tt-r: var(--pf-cf-tt-tb, var(--pf-cf-tt, none)); --pf-cf-lh-r: var(--pf-cf-lh-tb, var(--pf-cf-lh, 1.4)); --pf-cf-ls-r: var(--pf-cf-ls-tb, var(--pf-cf-ls, normal)); --pf-cf-align-self-r: var(--pf-cf-align-self-tb, var(--pf-cf-align-self, flex-start)); --pf-cf-justify-r: var(--pf-cf-justify-tb, var(--pf-cf-justify, flex-start));
  --pf-excerpt-fs-r: var(--pf-excerpt-fs-tb, var(--pf-excerpt-fs, inherit)); --pf-excerpt-fw-r: var(--pf-excerpt-fw-tb, var(--pf-excerpt-fw, inherit)); --pf-excerpt-fstyle-r: var(--pf-excerpt-fstyle-tb, var(--pf-excerpt-fstyle, normal)); --pf-excerpt-tt-r: var(--pf-excerpt-tt-tb, var(--pf-excerpt-tt, none)); --pf-excerpt-lh-r: var(--pf-excerpt-lh-tb, var(--pf-excerpt-lh, normal)); --pf-excerpt-ls-r: var(--pf-excerpt-ls-tb, var(--pf-excerpt-ls, normal)); --pf-excerpt-align-r: var(--pf-excerpt-align-tb, var(--pf-excerpt-align, left)); --pf-excerpt-pad-r: var(--pf-excerpt-pad-tb, var(--pf-excerpt-pad, 0)); --pf-excerpt-m-r: var(--pf-excerpt-m-tb, var(--pf-excerpt-m, var(--pf-excerpt-space, 0))); --pf-excerpt-lines-r: var(--pf-excerpt-lines-tb, var(--pf-excerpt-lines, 3));
  --pf-readmore-fs-r: var(--pf-readmore-fs-tb, var(--pf-readmore-fs, 14px)); --pf-readmore-fw-r: var(--pf-readmore-fw-tb, var(--pf-readmore-fw, 500)); --pf-readmore-fstyle-r: var(--pf-readmore-fstyle-tb, var(--pf-readmore-fstyle, normal)); --pf-readmore-tt-r: var(--pf-readmore-tt-tb, var(--pf-readmore-tt, none)); --pf-readmore-lh-r: var(--pf-readmore-lh-tb, var(--pf-readmore-lh, normal)); --pf-readmore-ls-r: var(--pf-readmore-ls-tb, var(--pf-readmore-ls, normal)); --pf-readmore-pad-r: var(--pf-readmore-pad-tb, var(--pf-readmore-pad, 6px 14px)); --pf-readmore-m-r: var(--pf-readmore-m-tb, var(--pf-readmore-m, 12px 0 0 0)); --pf-btn-align-r: var(--pf-btn-align-tb, var(--pf-btn-align, flex-start));
}

.pf-b6[data-b8-breakpoint="mobile"],
.pf-b8[data-b8-breakpoint="mobile"]{
  --pf-container-w-r: var(--pf-container-w-mb, var(--pf-container-w, 100%)); --pf-pad-r: var(--pf-pad-mb, var(--pf-pad, 0)); --pf-bottom-space-r: var(--pf-bottom-space-mb, var(--pf-bottom-space, 60px));
  --pf-head-align-r: var(--pf-head-align-mb, var(--pf-head-align, flex-start)); --pf-head-justify-r: var(--pf-head-justify-mb, var(--pf-head-justify, flex-start)); --pf-head-text-align-r: var(--pf-head-text-align-mb, var(--pf-head-text-align, left)); --pf-head-fs-r: var(--pf-head-fs-mb, var(--pf-head-fs, 1.5rem)); --pf-head-fw-r: var(--pf-head-fw-mb, var(--pf-head-fw, 700)); --pf-head-fstyle-r: var(--pf-head-fstyle-mb, var(--pf-head-fstyle, normal)); --pf-head-tt-r: var(--pf-head-tt-mb, var(--pf-head-tt, none)); --pf-head-lh-r: var(--pf-head-lh-mb, var(--pf-head-lh, 1.25)); --pf-head-ls-r: var(--pf-head-ls-mb, var(--pf-head-ls, normal)); --pf-head-pad-r: var(--pf-head-pad-mb, var(--pf-head-pad, 0)); --pf-head-m-r: var(--pf-head-m-mb, var(--pf-head-m, 0 0 16px 0));
  --pf-item-pad-r: var(--pf-item-pad-mb, var(--pf-item-pad, 12px)); --pf-item-br-r: var(--pf-item-br-mb, var(--pf-item-br, 10px)); --pf-thumb-radius-r: var(--pf-thumb-radius-mb, var(--pf-thumb-radius, 12px));
  --pf-title-fs-r: var(--pf-title-fs-mb, var(--pf-title-fs, 18px)); --pf-title-fw-r: var(--pf-title-fw-mb, var(--pf-title-fw, 700)); --pf-title-fstyle-r: var(--pf-title-fstyle-mb, var(--pf-title-fstyle, normal)); --pf-title-tt-r: var(--pf-title-tt-mb, var(--pf-title-tt, none)); --pf-title-lh-r: var(--pf-title-lh-mb, var(--pf-title-lh, 1.35)); --pf-title-ls-r: var(--pf-title-ls-mb, var(--pf-title-ls, normal)); --pf-title-align-r: var(--pf-title-align-mb, var(--pf-title-align, left)); --pf-title-space-r: var(--pf-title-space-mb, var(--pf-title-space, 10px 0 6px 0)); --pf-title-pad-r: var(--pf-title-pad-mb, var(--pf-title-pad, 0px)); --pf-title-lines-r: var(--pf-title-lines-mb, var(--pf-title-lines, 2));
  --pf-meta-fs-r: var(--pf-meta-fs-mb, var(--pf-meta-fs, 13px)); --pf-meta-fw-r: var(--pf-meta-fw-mb, var(--pf-meta-fw, 400)); --pf-meta-fstyle-r: var(--pf-meta-fstyle-mb, var(--pf-meta-fstyle, normal)); --pf-meta-tt-r: var(--pf-meta-tt-mb, var(--pf-meta-tt, none)); --pf-meta-lh-r: var(--pf-meta-lh-mb, var(--pf-meta-lh, normal)); --pf-meta-ls-r: var(--pf-meta-ls-mb, var(--pf-meta-ls, normal)); --pf-meta-gap-r: var(--pf-meta-gap-mb, var(--pf-meta-gap, 12px)); --pf-meta-justify-r: var(--pf-meta-justify-mb, var(--pf-meta-justify, flex-start));
  --pf-cat-fs-r: var(--pf-cat-fs-mb, var(--pf-cat-fs, 13px)); --pf-cat-fw-r: var(--pf-cat-fw-mb, var(--pf-cat-fw, 600)); --pf-cat-tt-r: var(--pf-cat-tt-mb, var(--pf-cat-tt, none)); --pf-cat-style-r: var(--pf-cat-style-mb, var(--pf-cat-style, normal)); --pf-cat-lh-r: var(--pf-cat-lh-mb, var(--pf-cat-lh, 1)); --pf-cat-ls-r: var(--pf-cat-ls-mb, var(--pf-cat-ls, normal)); --pf-cat-padding-r: var(--pf-cat-padding-mb, var(--pf-cat-padding, 4px 10px)); --pf-cat-spacing-r: var(--pf-cat-spacing-mb, var(--pf-cat-spacing, 0 6px 6px 0));
  --pf-cf-fs-r: var(--pf-cf-fs-mb, var(--pf-cf-fs, 13px)); --pf-cf-fw-r: var(--pf-cf-fw-mb, var(--pf-cf-fw, 500)); --pf-cf-fstyle-r: var(--pf-cf-fstyle-mb, var(--pf-cf-fstyle, normal)); --pf-cf-tt-r: var(--pf-cf-tt-mb, var(--pf-cf-tt, none)); --pf-cf-lh-r: var(--pf-cf-lh-mb, var(--pf-cf-lh, 1.4)); --pf-cf-ls-r: var(--pf-cf-ls-mb, var(--pf-cf-ls, normal)); --pf-cf-align-self-r: var(--pf-cf-align-self-mb, var(--pf-cf-align-self, flex-start)); --pf-cf-justify-r: var(--pf-cf-justify-mb, var(--pf-cf-justify, flex-start));
  --pf-excerpt-fs-r: var(--pf-excerpt-fs-mb, var(--pf-excerpt-fs, inherit)); --pf-excerpt-fw-r: var(--pf-excerpt-fw-mb, var(--pf-excerpt-fw, inherit)); --pf-excerpt-fstyle-r: var(--pf-excerpt-fstyle-mb, var(--pf-excerpt-fstyle, normal)); --pf-excerpt-tt-r: var(--pf-excerpt-tt-mb, var(--pf-excerpt-tt, none)); --pf-excerpt-lh-r: var(--pf-excerpt-lh-mb, var(--pf-excerpt-lh, normal)); --pf-excerpt-ls-r: var(--pf-excerpt-ls-mb, var(--pf-excerpt-ls, normal)); --pf-excerpt-align-r: var(--pf-excerpt-align-mb, var(--pf-excerpt-align, left)); --pf-excerpt-pad-r: var(--pf-excerpt-pad-mb, var(--pf-excerpt-pad, 0)); --pf-excerpt-m-r: var(--pf-excerpt-m-mb, var(--pf-excerpt-m, var(--pf-excerpt-space, 0))); --pf-excerpt-lines-r: var(--pf-excerpt-lines-mb, var(--pf-excerpt-lines, 3));
  --pf-readmore-fs-r: var(--pf-readmore-fs-mb, var(--pf-readmore-fs, 14px)); --pf-readmore-fw-r: var(--pf-readmore-fw-mb, var(--pf-readmore-fw, 500)); --pf-readmore-fstyle-r: var(--pf-readmore-fstyle-mb, var(--pf-readmore-fstyle, normal)); --pf-readmore-tt-r: var(--pf-readmore-tt-mb, var(--pf-readmore-tt, none)); --pf-readmore-lh-r: var(--pf-readmore-lh-mb, var(--pf-readmore-lh, normal)); --pf-readmore-ls-r: var(--pf-readmore-ls-mb, var(--pf-readmore-ls, normal)); --pf-readmore-pad-r: var(--pf-readmore-pad-mb, var(--pf-readmore-pad, 6px 14px)); --pf-readmore-m-r: var(--pf-readmore-m-mb, var(--pf-readmore-m, 12px 0 0 0)); --pf-btn-align-r: var(--pf-btn-align-mb, var(--pf-btn-align, flex-start));
}

/* =========================================================
   Block 8 v2.7.2 — Custom Fields Position + Full Responsive Style
   Desktop values are the source of truth; Tablet/Mobile override only when set.
   ========================================================= */
.pf-b6,
.pf-b8{
  --pf-cf-display-r: var(--pf-cf-display, inline-flex);
  --pf-cf-width-r: var(--pf-cf-width, auto);
  --pf-cf-pad-r: var(--pf-cf-pad, 0);
  --pf-cf-m-r: var(--pf-cf-m, 0 0 8px 0);
  --pf-cf-br-r: var(--pf-cf-br, 0px);
  --pf-cf-bw-r: var(--pf-cf-bw, 0px);
  --pf-cf-bs-r: var(--pf-cf-bs, solid);
  --pf-cf-color-r: var(--pf-cf-color, inherit);
  --pf-cf-bg-r: var(--pf-cf-bg, transparent);
  --pf-cf-bc-r: var(--pf-cf-bc, transparent);
}

.pf-b6 .pf-cf-list,
.pf-b8 .pf-cf-list{
  box-sizing:border-box;
  display:var(--pf-cf-display-r, var(--pf-cf-display, inline-flex));
  width:var(--pf-cf-width-r, var(--pf-cf-width, auto));
  max-width:100%;
  flex-wrap:wrap;
  align-items:center;
  align-self:var(--pf-cf-align-self-r, var(--pf-cf-align-self, flex-start)) !important;
  justify-content:var(--pf-cf-justify-r, var(--pf-cf-justify, flex-start)) !important;
  gap:6px;
  font-size:var(--pf-cf-fs-r, var(--pf-cf-fs, 13px));
  font-weight:var(--pf-cf-fw-r, var(--pf-cf-fw, 500));
  font-style:var(--pf-cf-fstyle-r, var(--pf-cf-fstyle, normal));
  text-transform:var(--pf-cf-tt-r, var(--pf-cf-tt, none));
  line-height:var(--pf-cf-lh-r, var(--pf-cf-lh, 1.4));
  letter-spacing:var(--pf-cf-ls-r, var(--pf-cf-ls, normal));
  color:var(--pf-cf-color-r, var(--pf-cf-color, inherit));
  background:var(--pf-cf-bg-r, var(--pf-cf-bg, transparent));
  padding:var(--pf-cf-pad-r, var(--pf-cf-pad, 0));
  margin:var(--pf-cf-m-r, var(--pf-cf-m, 0 0 8px 0));
  border-radius:var(--pf-cf-br-r, var(--pf-cf-br, 0px));
  border-width:var(--pf-cf-bw-r, var(--pf-cf-bw, 0px));
  border-style:var(--pf-cf-bs-r, var(--pf-cf-bs, solid));
  border-color:var(--pf-cf-bc-r, var(--pf-cf-bc, transparent));
}

/* Over Thumbnail: anchor at bottom to avoid collision with Download Badge at top. */
.pf-b6 .pf-thumb > .pf-cf-list.is-over-thumb,
.pf-b8 .pf-thumb > .pf-cf-list.is-over-thumb{
  position:absolute;
  z-index:4;
  top:auto;
  bottom:12px;
  left:12px;
  right:auto;
  width:var(--pf-cf-width-r, var(--pf-cf-width, auto));
  max-width:calc(100% - 24px);
}
.pf-b6 .pf-thumb > .pf-cf-list.is-over-thumb.is-align-center,
.pf-b8 .pf-thumb > .pf-cf-list.is-over-thumb.is-align-center{
  left:50%;
  right:auto;
  transform:translateX(-50%);
}
.pf-b6 .pf-thumb > .pf-cf-list.is-over-thumb.is-align-right,
.pf-b8 .pf-thumb > .pf-cf-list.is-over-thumb.is-align-right{
  left:auto;
  right:12px;
  transform:none;
}
.pf-b6 .pf-thumb > .pf-cf-list.is-over-thumb.is-align-left,
.pf-b8 .pf-thumb > .pf-cf-list.is-over-thumb.is-align-left{
  left:12px;
  right:auto;
  transform:none;
}

@media (max-width: 991.98px){
  .pf-b6,
  .pf-b8{
    --pf-cf-display-r: var(--pf-cf-display-tb, var(--pf-cf-display, inline-flex));
    --pf-cf-width-r: var(--pf-cf-width-tb, var(--pf-cf-width, auto));
    --pf-cf-pad-r: var(--pf-cf-pad-tb, var(--pf-cf-pad, 0));
    --pf-cf-m-r: var(--pf-cf-m-tb, var(--pf-cf-m, 0 0 8px 0));
    --pf-cf-br-r: var(--pf-cf-br-tb, var(--pf-cf-br, 0px));
    --pf-cf-bw-r: var(--pf-cf-bw-tb, var(--pf-cf-bw, 0px));
    --pf-cf-bs-r: var(--pf-cf-bs-tb, var(--pf-cf-bs, solid));
    --pf-cf-color-r: var(--pf-cf-color-tb, var(--pf-cf-color, inherit));
    --pf-cf-bg-r: var(--pf-cf-bg-tb, var(--pf-cf-bg, transparent));
    --pf-cf-bc-r: var(--pf-cf-bc-tb, var(--pf-cf-bc, transparent));
  }
}

@media (max-width: 767.98px){
  .pf-b6,
  .pf-b8{
    --pf-cf-display-r: var(--pf-cf-display-mb, var(--pf-cf-display, inline-flex));
    --pf-cf-width-r: var(--pf-cf-width-mb, var(--pf-cf-width, auto));
    --pf-cf-pad-r: var(--pf-cf-pad-mb, var(--pf-cf-pad, 0));
    --pf-cf-m-r: var(--pf-cf-m-mb, var(--pf-cf-m, 0 0 8px 0));
    --pf-cf-br-r: var(--pf-cf-br-mb, var(--pf-cf-br, 0px));
    --pf-cf-bw-r: var(--pf-cf-bw-mb, var(--pf-cf-bw, 0px));
    --pf-cf-bs-r: var(--pf-cf-bs-mb, var(--pf-cf-bs, solid));
    --pf-cf-color-r: var(--pf-cf-color-mb, var(--pf-cf-color, inherit));
    --pf-cf-bg-r: var(--pf-cf-bg-mb, var(--pf-cf-bg, transparent));
    --pf-cf-bc-r: var(--pf-cf-bc-mb, var(--pf-cf-bc, transparent));
  }
}

/* Builder/container breakpoint parity. */
.pf-b6[data-b8-breakpoint="tablet"],
.pf-b8[data-b8-breakpoint="tablet"]{
  --pf-cf-display-r: var(--pf-cf-display-tb, var(--pf-cf-display, inline-flex));
  --pf-cf-width-r: var(--pf-cf-width-tb, var(--pf-cf-width, auto));
  --pf-cf-pad-r: var(--pf-cf-pad-tb, var(--pf-cf-pad, 0));
  --pf-cf-m-r: var(--pf-cf-m-tb, var(--pf-cf-m, 0 0 8px 0));
  --pf-cf-br-r: var(--pf-cf-br-tb, var(--pf-cf-br, 0px));
  --pf-cf-bw-r: var(--pf-cf-bw-tb, var(--pf-cf-bw, 0px));
  --pf-cf-bs-r: var(--pf-cf-bs-tb, var(--pf-cf-bs, solid));
  --pf-cf-color-r: var(--pf-cf-color-tb, var(--pf-cf-color, inherit));
  --pf-cf-bg-r: var(--pf-cf-bg-tb, var(--pf-cf-bg, transparent));
  --pf-cf-bc-r: var(--pf-cf-bc-tb, var(--pf-cf-bc, transparent));
}
.pf-b6[data-b8-breakpoint="mobile"],
.pf-b8[data-b8-breakpoint="mobile"]{
  --pf-cf-display-r: var(--pf-cf-display-mb, var(--pf-cf-display, inline-flex));
  --pf-cf-width-r: var(--pf-cf-width-mb, var(--pf-cf-width, auto));
  --pf-cf-pad-r: var(--pf-cf-pad-mb, var(--pf-cf-pad, 0));
  --pf-cf-m-r: var(--pf-cf-m-mb, var(--pf-cf-m, 0 0 8px 0));
  --pf-cf-br-r: var(--pf-cf-br-mb, var(--pf-cf-br, 0px));
  --pf-cf-bw-r: var(--pf-cf-bw-mb, var(--pf-cf-bw, 0px));
  --pf-cf-bs-r: var(--pf-cf-bs-mb, var(--pf-cf-bs, solid));
  --pf-cf-color-r: var(--pf-cf-color-mb, var(--pf-cf-color, inherit));
  --pf-cf-bg-r: var(--pf-cf-bg-mb, var(--pf-cf-bg, transparent));
  --pf-cf-bc-r: var(--pf-cf-bc-mb, var(--pf-cf-bc, transparent));
}


/* =========================================================
   Block 8 v2.7.2 — Custom Fields Thumbnail Anchor + Offset
   Horizontal: Left / Center / Right
   Vertical: Top / Middle / Bottom
   Offset X/Y are responsive and keep the previous 12px defaults (12px / 12px).
   ========================================================= */
.pf-b6,
.pf-b8{
  --pf-cf-offset-x-r:var(--pf-cf-offset-x,12px);
  --pf-cf-offset-y-r:var(--pf-cf-offset-y,12px);
}

/* Only overlay placement uses the X/Y anchor system. Margin is reset here so
   a body-flow margin cannot unexpectedly shift an absolutely positioned field. */
.pf-b6 .pf-thumb > .pf-cf-list.is-over-thumb,
.pf-b8 .pf-thumb > .pf-cf-list.is-over-thumb{
  position:absolute;
  z-index:4;
  top:auto;
  right:auto;
  bottom:auto;
  left:auto;
  margin:0;
  max-width:calc(100% - 8px);
  --pf-cf-overlay-tx:0%;
  --pf-cf-overlay-ty:0%;
  transform:translate(var(--pf-cf-overlay-tx),var(--pf-cf-overlay-ty));
}

/* Horizontal anchor. For Left/Right, X means distance from the selected edge.
   For Center, X is a signed shift from the exact center. */
.pf-b6 .pf-thumb > .pf-cf-list.is-over-thumb.is-align-left,
.pf-b8 .pf-thumb > .pf-cf-list.is-over-thumb.is-align-left{
  left:var(--pf-cf-offset-x-r,12px);
  right:auto;
  --pf-cf-overlay-tx:0%;
}
.pf-b6 .pf-thumb > .pf-cf-list.is-over-thumb.is-align-center,
.pf-b8 .pf-thumb > .pf-cf-list.is-over-thumb.is-align-center{
  left:calc(50% + var(--pf-cf-offset-x-r,0px));
  right:auto;
  --pf-cf-overlay-tx:-50%;
}
.pf-b6 .pf-thumb > .pf-cf-list.is-over-thumb.is-align-right,
.pf-b8 .pf-thumb > .pf-cf-list.is-over-thumb.is-align-right{
  left:auto;
  right:var(--pf-cf-offset-x-r,12px);
  --pf-cf-overlay-tx:0%;
}

/* Vertical anchor. Top/Bottom use Y as edge distance. Middle uses Y as a
   signed shift from the exact vertical center. */
.pf-b6 .pf-thumb > .pf-cf-list.is-over-thumb.is-v-top,
.pf-b8 .pf-thumb > .pf-cf-list.is-over-thumb.is-v-top{
  top:var(--pf-cf-offset-y-r,12px);
  bottom:auto;
  --pf-cf-overlay-ty:0%;
}
.pf-b6 .pf-thumb > .pf-cf-list.is-over-thumb.is-v-middle,
.pf-b8 .pf-thumb > .pf-cf-list.is-over-thumb.is-v-middle{
  top:calc(50% + var(--pf-cf-offset-y-r,0px));
  bottom:auto;
  --pf-cf-overlay-ty:-50%;
}
.pf-b6 .pf-thumb > .pf-cf-list.is-over-thumb.is-v-bottom,
.pf-b8 .pf-thumb > .pf-cf-list.is-over-thumb.is-v-bottom{
  top:auto;
  bottom:var(--pf-cf-offset-y-r,12px);
  --pf-cf-overlay-ty:0%;
}

@media (max-width:991.98px){
  .pf-b6,
  .pf-b8{
    --pf-cf-offset-x-r:var(--pf-cf-offset-x-tb,var(--pf-cf-offset-x,12px));
    --pf-cf-offset-y-r:var(--pf-cf-offset-y-tb,var(--pf-cf-offset-y,12px));
  }
}
@media (max-width:767.98px){
  .pf-b6,
  .pf-b8{
    --pf-cf-offset-x-r:var(--pf-cf-offset-x-mb,var(--pf-cf-offset-x,12px));
    --pf-cf-offset-y-r:var(--pf-cf-offset-y-mb,var(--pf-cf-offset-y,12px));
  }
}

/* Builder/container preview parity with the existing responsive variable system. */
.pf-b6[data-b8-breakpoint="tablet"],
.pf-b8[data-b8-breakpoint="tablet"]{
  --pf-cf-offset-x-r:var(--pf-cf-offset-x-tb,var(--pf-cf-offset-x,12px));
  --pf-cf-offset-y-r:var(--pf-cf-offset-y-tb,var(--pf-cf-offset-y,12px));
}
.pf-b6[data-b8-breakpoint="mobile"],
.pf-b8[data-b8-breakpoint="mobile"]{
  --pf-cf-offset-x-r:var(--pf-cf-offset-x-mb,var(--pf-cf-offset-x,12px));
  --pf-cf-offset-y-r:var(--pf-cf-offset-y-mb,var(--pf-cf-offset-y,12px));
}


/* =========================================================
   Block 8 v2.7.3 — Custom Fields Over Thumbnail Body Collapse
   Khi CF là nội dung body duy nhất nhưng được đặt đè lên thumbnail, CF đã
   rời khỏi .pf-body. Collapse body + card gap để không còn dải trắng giả.
   Class được JS đồng bộ theo breakpoint nên Tablet/Mobile vẫn có thể đổi
   CF về Before/After/After Meta và body sẽ tự hiện lại.
   ========================================================= */
.pf-b6 .pf-pcard.is-cf-overlay-bodyless,
.pf-b8 .pf-pcard.is-cf-overlay-bodyless{
  gap:0 !important;
}

.pf-b6 .pf-pcard.is-cf-overlay-bodyless > .pf-body,
.pf-b8 .pf-pcard.is-cf-overlay-bodyless > .pf-body{
  display:none !important;
  height:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
}

.pf-b6 .pf-pcard.is-cf-overlay-bodyless > .pf-body .pf-body-inner,
.pf-b8 .pf-pcard.is-cf-overlay-bodyless > .pf-body .pf-body-inner{
  display:none !important;
  height:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
}

/* No-JS / first-paint guard on desktop: exact configuration shown in Builder
   (only Thumbnail + Custom Fields, CF position = over). JS will take over and
   add/remove is-cf-overlay-bodyless after responsive placement is resolved. */
@media (min-width:992px){
  .pf-b6-grid[data-thumb="1"][data-title="0"][data-meta="0"][data-excerpt="0"][data-readmore="0"][data-cf="1"][data-cfpos="over"] .pf-pcard,
  .pf-b8-grid[data-thumb="1"][data-title="0"][data-meta="0"][data-excerpt="0"][data-readmore="0"][data-cf="1"][data-cfpos="over"] .pf-pcard{
    gap:0;
  }
  .pf-b6-grid[data-thumb="1"][data-title="0"][data-meta="0"][data-excerpt="0"][data-readmore="0"][data-cf="1"][data-cfpos="over"] .pf-pcard > .pf-body,
  .pf-b8-grid[data-thumb="1"][data-title="0"][data-meta="0"][data-excerpt="0"][data-readmore="0"][data-cf="1"][data-cfpos="over"] .pf-pcard > .pf-body{
    display:none;
    height:0;
    min-height:0;
    margin:0;
    padding:0;
  }
}