/* ==========================================================================
   templates/blocks/block-3/style.css — v7.1
   - Post title align & Meta align hoạt động độc lập
   - CatTag align + color
   - Decorative line: top/bottom/left/right
   - FIX: Header margin uses --pf-head-m (no hard margin-bottom)
   - FIX: Meta vertical align uses --pf-meta-align (no hard align-items:center)
   ========================================================================== */

/* ---------- Wrapper ---------- */
.pf-b3{
  width:var(--pf-container-w,100%);
  margin:0 auto var(--pf-bottom-space,36px);
  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);
}

/* ---------- Header ---------- */
.pf-b3-head{
  display:flex;
  flex-direction:column;
  align-items:var(--pf-head-align,flex-start);
  margin:var(--pf-head-m,0 0 16px 0);
  position:relative;
  padding:var(--pf-head-pad,0);
  background:var(--pf-head-bg,transparent);
  color:var(--pf-head-color,inherit);
}
.pf-b3-head .pf-title-wrap{
  display:flex;
  align-items:center;
  justify-content:var(--pf-head-align,flex-start);
  width:100%;
}
.pf-b3-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-b3-head .pf-title a{ color:inherit; text-decoration:none; }

/* Decorative line: horizontal (top/bottom) */
.pf-b3-head[data-line="1"][data-line-pos="bottom"]::after,
.pf-b3-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;
}
.pf-b3-head[data-line="1"][data-line-pos="bottom"]::after{
  margin-top:var(--pf-head-line-offset,6px);
}
.pf-b3-head[data-line="1"][data-line-pos="top"]::before{
  margin-bottom:var(--pf-head-line-offset,6px);
}

/* Decorative line: vertical (left/right) */
.pf-b3-head[data-line="1"][data-line-pos="left"]::before,
.pf-b3-head[data-line="1"][data-line-pos="right"]::after{
  content:"";
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  height:var(--pf-head-line-len,40%);
  width:var(--pf-head-line-thickness,3px);
  background:var(--pf-head-line-color,currentColor);
  border-radius:2px;
}
.pf-b3-head[data-line="1"][data-line-pos="left"]::before{ left:var(--pf-head-line-offset,6px); }
.pf-b3-head[data-line="1"][data-line-pos="right"]::after{ right:var(--pf-head-line-offset,6px); }

/* ---------- Grid ---------- */
.pf-b3-grid{
  display:grid;
  grid-template-columns:repeat(var(--pf-cols,2),1fr);
  gap:var(--pf-gap,20px);
}

/* ---------- Card ---------- */
.pf-b3 .pf-pcard{
  display:flex;
  gap:15px;
  overflow:hidden;
  align-items:center;

  padding:var(--pf-item-pad,0);
  border-style:var(--pf-item-bs,solid);
  border-width:var(--pf-item-bw,0);
  border-color:var(--pf-item-bc,transparent);
  border-radius:var(--pf-item-br,8px);
  box-shadow:var(--pf-item-shadow,none);
  background-color:var(--pf-item-bg,transparent);
}

/* ---------- Image side ---------- */
.pf-b3[data-img-pos="left"]  .pf-pcard{ flex-direction:row; }
.pf-b3[data-img-pos="right"] .pf-pcard{ flex-direction:row-reverse; }

/* ---------- Thumb ---------- */
.pf-b3-grid .pf-pcard .pf-thumb{
  width:var(--pf-thumb-w,100px);
  height:var(--pf-thumb-h,70px);
  flex-shrink:0;
  border-radius:var(--pf-thumb-radius,6px);
  overflow:hidden;
  position:relative;
}
.pf-b3-grid .pf-pcard .pf-thumb::before{
  content:"";
  display:block;
  padding-top:calc(100% * (var(--pf-thumb-h,70) / var(--pf-thumb-w,100)));
}
.pf-b3-grid .pf-pcard .pf-thumb img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:var(--pf-thumb-fit,cover);
  object-position:center center;
}

/* ---------- Body ---------- */
.pf-b3-grid .pf-pcard .pf-body{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
}
.pf-b3-grid .pf-pcard .pf-body-inner{
  display:block;
  width:100%;
}

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

/* ---------- Meta ---------- */
.pf-b3 .pf-pcard .pf-meta{
  display:flex !important;
  flex-wrap:wrap;
  align-items:var(--pf-meta-align,center);
  justify-content:var(--pf-meta-justify,flex-start);
  gap:var(--pf-meta-gap,8px);
  margin:var(--pf-meta-space,0);
  padding:var(--pf-meta-pad,0);
  font-size:var(--pf-meta-fs,13px);
  font-weight:var(--pf-meta-fw,400);
  color:var(--pf-meta-color,inherit);
}
.pf-b3 .pf-meta .pf-meta-item{
  display:inline-flex;
  align-items:center;
  gap:.4em;
  line-height:1;
}

/* Inline SVG trong meta ăn màu currentColor */
.pf-b3 .pf-meta svg [stroke]:not([stroke="none"]){ stroke:currentColor; }
.pf-b3 .pf-meta svg [fill]:not([fill="none"]){ fill:currentColor; }

/* ---------- Highlight Search Preview ---------- */
.pf-b3 mark.pf-search-hl {
  padding: .08em .18em;
  border-radius: .22em;
  background-color: #ffe082;
  color: #333;
}

/* ---------- Feature toggles ---------- */
.pf-b3-grid[data-thumb="0"]  .pf-thumb{ display:none !important; }
.pf-b3-grid[data-cat="0"]    .pf-badge{ display:none !important; }
.pf-b3-grid[data-meta="0"]   .pf-meta{  display:none !important; }
.pf-b3-grid[data-author="0"] .pf-meta [data-meta="author"]{ display:none !important; }
.pf-b3-grid[data-date="0"]   .pf-meta [data-meta="date"]{   display:none !important; }

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

.pf-cat-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0;
  justify-content:var(--pf-cat-align-justify,flex-start);
}
.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);
  border-width:var(--pf-cat-bw,0);
  border-style:solid;
  border-radius:var(--pf-cat-br,6px);
  border-color:var(--pf-cat-bc,transparent);
  background-color:var(--pf-badge-bg,var(--pf-cat-bg,transparent));
  color:var(--pf-badge-text,var(--pf-cat-color,inherit));
  font-size:var(--pf-cat-fs,13px);
  font-weight:var(--pf-cat-fw,600);
  font-style:var(--pf-cat-style,normal);
  line-height:var(--pf-cat-lh,1);
  text-transform:var(--pf-cat-tt,none);
}
.pf-badge a{ color:inherit; text-decoration:none; }

.pf-b3 .pf-ic{
  width: 1em;
  height: 1em;
  stroke: currentColor;
  fill: none;
  stroke-width: 2px;
  display: inline-block;
  flex-shrink: 0;
}

.pf-b3 .pf-pcard .pf-meta{ line-height: 1; }

/* ---------- Responsive ---------- */
@media (max-width:991.98px){
  .pf-b3-grid{ grid-template-columns:repeat(var(--pf-cols-tablet,1),1fr); }
}
@media (max-width: 767.98px){
  .pf-b3-grid{
    grid-template-columns: repeat(var(--pf-cols-mobile, 1), 1fr);
  }

  .pf-b3[data-img-pos="left"]  .pf-pcard{ flex-direction: row; }
  .pf-b3[data-img-pos="right"] .pf-pcard{ flex-direction: row-reverse; }
  .pf-b3 .pf-pcard{ align-items: center; }

  .pf-b3-grid .pf-pcard .pf-thumb{
    width:  clamp(70px, 28vw, var(--pf-thumb-w, 100px));
    height: clamp(50px, 20vw, var(--pf-thumb-h, 70px));
  }
  .pf-b3-grid .pf-pcard .pf-thumb::before{ display: none; }

  .pf-b3 .pf-pcard .pf-body{ padding-top: 0; }

  .pf-b3 .pf-pcard .pf-title{ text-align: var(--pf-title-align, left); }
  .pf-b3 .pf-pcard .pf-meta{  justify-content: var(--pf-meta-justify, flex-start); }
}