/* templates/blocks/block-2/style.css — v5.2 (Thêm Highlight từ khóa tìm kiếm) */
/* Khớp biến --pf-* từ block.js và layout left/right/top; hiển thị border chuẩn */

.pf-b2{
  width:var(--pf-container-w,100%);
  margin:0 auto var(--pf-bottom-space,60px);
  padding:var(--pf-pad,0);
  background:var(--pf-bg,transparent);
  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);
}
.pf-b2.is-loading .pf-b2-grid{ opacity:.5; pointer-events:none; transition:opacity .25s ease; }

/* ================= HEADER ================= */
.pf-b2-head{
  display:flex;
  flex-direction:column;
  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-b2-head .pf-title-wrap{
  display:flex;
  align-items:center;
  justify-content:var(--pf-head-align,flex-start);
  width:100%;
}
.pf-b2-head .pf-title{
  margin:0;
  line-height:1.25;
  font-size:var(--pf-head-fs,1.5rem);
  font-weight:var(--pf-head-fw,700);
  font-style:var(--pf-head-fstyle,normal);
  text-transform:var(--pf-head-tt,none);
}
.pf-b2-head .pf-title a{color:inherit;text-decoration:none;}

/* Decorative line (top/bottom) */
.pf-b2-head[data-line="1"][data-line-pos="bottom"]::after,
.pf-b2-head[data-line="1"][data-line-pos="top"]::before{
  content:"";
  display:block;
  height:var(--pf-head-line-thickness,3px);
  width:var(--pf-head-line-len,40%);
  background:var(--pf-head-line-color,currentColor);
  border-radius:2px;

  margin-left:var(--pf-head-line-ml,0);
  margin-right:var(--pf-head-line-mr,auto);
}
.pf-b2-head[data-line="1"][data-line-pos="bottom"]::after{margin-top:var(--pf-head-line-offset,6px);}
.pf-b2-head[data-line="1"][data-line-pos="top"]::before{margin-bottom:var(--pf-head-line-offset,6px);}

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

/* ================= FILTER ================= */
.pf-b2 .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-b2 .pf-filter .pf-dropdown{min-width:180px;padding:8px 10px;border-radius:10px;border:1px solid #e5e7eb;}
.pf-b2 .pf-filter .pf-pill,.pf-b2 .pf-filter .pf-tab{padding:8px 12px;border-radius:999px;border:1px solid #e5e7eb;background:#fff;cursor:pointer;user-select:none;}
.pf-b2 .pf-filter .pf-tab{border-radius:10px;}
.pf-b2 .pf-filter .is-active{background:#111827;color:#fff;border-color:#111827;}

/* ================= GRID ================= */
.pf-b2-grid{display:grid;grid-template-columns:repeat(var(--pf-cols,1),1fr);gap:var(--pf-gap,24px);}
@media (max-width:991.98px){.pf-b2-grid{grid-template-columns:repeat(var(--pf-cols-tablet,1),1fr);}}
@media (max-width:767.98px){.pf-b2-grid{grid-template-columns:repeat(var(--pf-cols-mobile,1),1fr);}}

/* Card container — border hiển thị tại đây */
.pf-b2 .pf-pcard{
  background:var(--pf-item-bg,transparent);
  border:var(--pf-item-bw,0) var(--pf-item-bs,solid) var(--pf-item-bc,transparent);
  border-radius:var(--pf-item-br,8px);
  box-shadow:var(--pf-item-shadow,none);
  overflow:hidden;
}

/* Inner layout: left/right/top */
.pf-b2 .pf-pcard .pf-inner{display:flex;gap:15px;align-items:center;padding:var(--pf-item-pad,10px);}
.pf-b2[data-img-pos="left"]  .pf-pcard .pf-inner{flex-direction:row;}
.pf-b2[data-img-pos="right"] .pf-pcard .pf-inner{flex-direction:row-reverse;}
.pf-b2[data-img-pos="top"]   .pf-pcard .pf-inner{flex-direction:column;align-items:stretch;}

/* ================= THUMB ================= */
.pf-b2 .pf-thumb{position:relative;flex:0 0 var(--pf-thumb-w-pct,30%);width:var(--pf-thumb-w-pct,30%);max-width:100%;}
.pf-b2[data-img-pos="top"] .pf-thumb{width:100%;flex:0 0 auto;}
.pf-b2 .pf-thumb::before{content:"";display:block;padding-top:var(--pf-thumb-ratio,56.25%);}
.pf-b2 .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%);border-radius:var(--pf-thumb-radius,6px);}

/* ================= BODY ================= */
.pf-b2 .pf-body{flex:1;min-width:0;}

/* ================= TITLE / META / EXCERPT ================= */
.pf-b2 .pf-pcard .pf-title,.pf-b2 .pf-pcard .pf-title a{
  color:var(--pf-title-color,inherit);
  background:var(--pf-title-bg,transparent);
  text-decoration:none;
}
.pf-b2 .pf-pcard .pf-title{
  margin:var(--pf-title-space,0 0 8px 0);
  line-height:var(--pf-title-lh,1.4);
  font-size:var(--pf-title-fs,18px);
  font-weight:var(--pf-title-fw,700);
  text-transform:var(--pf-title-tt,none);
  text-align:var(--pf-title-align,left);
  padding:var(--pf-title-pad,0);
  border-radius:var(--pf-title-br,0);
  border-width:var(--pf-title-bw,0);
  border-style:var(--pf-title-bs,solid);
  border-color:var(--pf-title-bc,transparent);
}

/* Ẩn mọi icon core/theme chèn để tránh trùng */
.pf-b2 .pf-meta i,
.pf-b2 .pf-meta svg { display: none !important; }

.pf-b2 .pf-meta{
  padding:var(--pf-meta-box-pad,0);
  margin:var(--pf-meta-box-m,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;
  justify-content:var(--pf-meta-justify,flex-start);
  align-items:center;
}

/* Meta icon via ::before */
.pf-b2 .pf-meta .pf-author,
.pf-b2 .pf-meta time { display:inline-flex; align-items:center; gap:.4em; }

.pf-b2 .pf-meta .pf-author,
.pf-b2 .pf-meta time { position: relative; padding-left: 1.25em; }

.pf-b2 .pf-meta .pf-author::before{
  content:"";
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1em; height:1em;
  background: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<path d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/>\
<circle cx='12' cy='7' r='4'/></svg>") no-repeat center/contain;
}
.pf-b2 .pf-meta time::before{
  content:"";
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1em; height:1em;
  background: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<rect x='3' y='4' width='18' height='18' rx='2' ry='2'/>\
<line x1='16' y1='2' x2='16' y2='6'/>\
<line x1='8' y1='2' x2='8' y2='6'/>\
<line x1='3' y1='10' x2='21' y2='10'/></svg>") no-repeat center/contain;
}

/* ================= HIGHLIGHT TỪ KHÓA ================= */
.pf-b2 mark.pf-search-hl {
  padding: .08em .18em;
  border-radius: .22em;
  background-color: #ffe082;
  color: #333;
}

/* ================= EXCERPT ================= */
.pf-b2 .pf-excerpt{
  box-sizing:border-box;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-align:var(--pf-excerpt-align,left);
  margin:var(--pf-excerpt-m,var(--pf-excerpt-space,0));
  column-count:var(--pf-excerpt-cols,1);
  column-gap:var(--pf-excerpt-gap,0px);
  color:var(--pf-excerpt-color,inherit);
  background:var(--pf-excerpt-bg,transparent);
  padding:var(--pf-excerpt-pad,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);
}

/* ================= READMORE ================= */
.pf-b2 .pf-readmore{
  display:inline-block;
  text-decoration:none;
  font-size:var(--pf-readmore-fs);
  font-weight:var(--pf-readmore-fw);
  padding:var(--pf-readmore-pad);
  margin:var(--pf-readmore-m);
  background:var(--pf-readmore-bg);
  color:var(--pf-readmore-color);
  border:var(--pf-readmore-bw) var(--pf-readmore-bs) var(--pf-readmore-bc,transparent);
  border-radius:var(--pf-readmore-br);
}
.pf-b2 .pf-readmore-wrap{display:flex;justify-content:var(--pf-btn-align);}

/* ================= BADGE / CATEGORY ================= */
.pf-b2 .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-color:var(--pf-badge-bg,var(--pf-cat-bg,#111827));
  color:var(--pf-badge-text,var(--pf-cat-color,#fff));
  text-decoration:none;
  transition:opacity .2s;
}
.pf-b2 a.pf-badge:hover{opacity:.9;}
.pf-b2 .pf-thumb > .pf-badge{position:absolute;top:12px;left:12px;z-index:3;}
.pf-b2-grid[data-catpos="over"][data-catalign="right"]  .pf-thumb > .pf-badge{left:auto;right:12px;}
.pf-b2-grid[data-catpos="over"][data-catalign="center"] .pf-thumb > .pf-badge{left:50%;transform:translateX(-50%);}
.pf-b2 .pf-cat-row{display:flex;flex-wrap:wrap;justify-content:var(--pf-cat-align-justify,flex-start);}

/* ================= PAGINATION / LOAD MORE ================= */
.pf-b2 .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-b2 .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-b2 .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-b2 .pf-pgrid-pagi button:not(:disabled):hover{opacity:.85;}
.pf-b2 .pf-pgrid-pagi button:disabled{opacity:.5;cursor:not-allowed;}
.pf-b2 .pf-pgrid-pagi .pf-page-indicator{padding:0 8px;color:var(--pf-pagi-color,#6b7280);}

.pf-b2 .pf-pgrid-load{display:flex;align-items:center;justify-content:center;margin:var(--pf-pagi-m,20px 0 0 0);}
.pf-b2 .pf-pgrid-load:not(.is-button-mode){min-height:20px;}
.pf-b2 .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 ease;
}
.pf-b2 .pf-pgrid-load.is-button-mode button{display:inline-flex;}
.pf-b2 .pf-pgrid-load:not(.is-button-mode) button{display:none;}
.pf-b2 .pf-pgrid-load button:hover{opacity:.85;}
.pf-b2 .pf-pgrid-load button:disabled{opacity:.5;cursor:not-allowed;}

/* ================= FEATURE TOGGLES ================= */
.pf-b2-grid[data-thumb="0"] .pf-thumb{display:none !important;}
.pf-b2-grid[data-cat="0"] .pf-badge,.pf-b2-grid[data-cat="0"] .pf-cat-row{display:none !important;}
.pf-b2-grid[data-meta="0"] .pf-meta{display:none !important;}
.pf-b2-grid[data-author="0"] .pf-meta .pf-author,.pf-b2-grid[data-author="0"] .pf-meta [data-meta="author"]{display:none !important;}
.pf-b2-grid[data-date="0"] .pf-meta time,.pf-b2-grid[data-date="0"] .pf-meta [data-meta="date"]{display:none !important;}
.pf-b2-grid[data-excerpt="0"] .pf-excerpt{display:none !important;}
.pf-b2-grid[data-readmore="0"] .pf-readmore,.pf-b2-grid[data-readmore="0"] .pf-readmore-wrap{display:none !important;}

/* ===== Block-2: kill overlay spacer from posts-grid core ===== */
.pf-b2 .pf-body-inner { padding: 0 !important; margin: 0 !important; height: auto !important; min-height: 0 !important; }
.pf-b2 .pf-body-inner::before { content: none !important; }
.pf-b2 .pf-pcard.pf-pos-left  .pf-body-inner,
.pf-b2 .pf-pcard.pf_pos-right .pf-body-inner { padding-top: 0 !important; }