/* ==========================================================================
   BLOCK 7 – v3.1.0 (DATEBOX INLINE + BUILDER PREVIEW SYNC)
   Layout: column (thumb top) OR row (thumb left) by data-layout
   ========================================================================== */

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

/* ======================
   HEADER
   ====================== */
.pf-b7 .pf-b7-head{
  display:flex;
  flex-direction:column;
  align-items:var(--pf-head-align,flex-start);
  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);
  position:relative;
}
.pf-b7 .pf-b7-head .pf-title{
  margin:0;
  font-size:var(--pf-head-fs,inherit);
  font-weight:var(--pf-head-fw,inherit);
  font-style:var(--pf-head-fstyle,normal);
  text-transform:var(--pf-head-tt,none);
}
.pf-b7 .pf-b7-head .pf-title a{ color:inherit; text-decoration:none; }

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

/* ======================
   GRID + CONTENT AREA
   ====================== */
.pf-b7 .pf-b7-grid{ display:block; }

.pf-b7 .pf-b7-content{
  display:flex;
  flex-direction:column;
  gap:var(--pf-b1-left-gap,20px);
  padding:var(--pf-b1-left-pad,0);
  margin:var(--pf-b1-left-m,0);
}

/* ======================
   POST CARD
   ====================== */
.pf-b7 .pf-pcard{
  display:flex;
  min-width:0;
}

.pf-b7 .pf-b7-content[data-layout="column"] .pf-pcard{ flex-direction:column; }
.pf-b7 .pf-b7-content[data-layout="column"] .pf-thumb{ width:100%; }
.pf-b7 .pf-b7-content[data-layout="column"] .pf-body{ margin-top:15px; }

.pf-b7 .pf-b7-content[data-layout="row"] .pf-pcard{
  flex-direction:row;
  gap:15px;
}
.pf-b7 .pf-b7-content[data-layout="row"] .pf-thumb{
  width:var(--pf-thumb-w,30%);
  flex-shrink:0;
}
.pf-b7 .pf-b7-content[data-layout="row"] .pf-body{
  flex:1;
  min-width:0;
}

.pf-b7 .pf-pcard .pf-thumb{
  position:relative;
  display:block;
  overflow:hidden;
  text-decoration:none;
}
.pf-b7 .pf-pcard .pf-thumb::before{
  content:"";
  display:block;
  padding-top:var(--pf-thumb-ratio,56.25%);
}
.pf-b7 .pf-pcard .pf-thumb img{
  position:absolute;
  top:0; left: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);
  display:block;
}

.pf-b7 .pf-pcard .pf-body{
  display:flex;
  align-items:flex-start;
  gap:15px;
  min-width:0;
}

/* DateBox */
.pf-b7 .pf-datebox{
  box-sizing:border-box;
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:var(--pf-datebox-pad,8px);
  margin:var(--pf-datebox-m,0 15px 0 0);
  border-width:var(--pf-datebox-bw,0);
  border-style:var(--pf-datebox-bs,solid);
  border-color:var(--pf-datebox-bc,transparent);
  border-radius:var(--pf-datebox-br,8px);
  overflow:hidden;
  line-height:1;
  user-select:none;
  align-self:var(--pf-datebox-valign,flex-start);
}
.pf-b7 .pf-datebox .day{
  box-sizing:border-box;
  font-size:var(--pf-datebox-day-fs,24px);
  font-weight:var(--pf-datebox-day-fw,700);
  color:var(--pf-datebox-day-color,#333);
  background:var(--pf-datebox-day-bg,#fff);
  padding:var(--pf-datebox-day-pad,4px 8px);
  margin:var(--pf-datebox-day-m,0);
  display:block;
  width:100%;
  text-align:center;
}
.pf-b7 .pf-datebox .month{
  box-sizing:border-box;
  font-size:var(--pf-datebox-month-fs,12px);
  font-weight:var(--pf-datebox-month-fw,500);
  text-transform:var(--pf-datebox-month-tt,uppercase);
  color:var(--pf-datebox-month-color,#fff);
  background:var(--pf-datebox-month-bg,#f97316);
  padding:var(--pf-datebox-month-pad,4px 8px);
  margin:var(--pf-datebox-month-m,0);
  display:block;
  width:100%;
  text-align:center;
}
.pf-b7 .pf-b7-content[data-datebox="0"] .pf-datebox{ display:none !important; }

/* Content wrap */
.pf-b7 .pf-content-wrap{
  display:flex;
  flex-direction:column;
  flex:1;
  min-width:0;
}
.pf-b7 .pf-body-inner{ min-width:0; }

/* Category badge */
.pf-b7 .pf-badge{
  background-color:var(--pf-badge-bg,var(--pf-cat-bg,transparent));
  color:var(--pf-badge-text,var(--pf-cat-color,inherit));
  margin:var(--pf-cat-spacing);
  padding:var(--pf-cat-padding);
  border-width:var(--pf-cat-bw);
  border-style:solid;
  border-color:var(--pf-cat-bc,transparent);
  border-radius:var(--pf-cat-br);
  font-size:var(--pf-cat-fs);
  font-weight:var(--pf-cat-fw);
  font-style:var(--pf-cat-style,normal);
  text-transform:var(--pf-cat-tt,none);
  line-height:var(--pf-cat-lh,1);
  display:var(--pf-cat-display,inline-block);
}
.pf-b7 .pf-badge a{ color:inherit; text-decoration:none; }

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

/* Title */
.pf-b7 .pf-pcard .pf-title{
  color:var(--pf-title-color,inherit);
  background:var(--pf-title-bg,transparent);
  padding:var(--pf-title-pad,0);
  border-width:var(--pf-title-bw,0);
  border-style:var(--pf-title-bs,solid);
  border-color:var(--pf-title-bc,transparent);
  border-radius:var(--pf-title-br,0);
  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);
  overflow-wrap:anywhere;
}
.pf-b7 .pf-pcard .pf-title a{ color:inherit; text-decoration:none; }

/* Meta */
.pf-b7 .pf-meta{
  padding:var(--pf-meta-pad,0);
  margin:var(--pf-meta-space,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;
}
.pf-b7 .pf-meta:empty{ display:none !important; }

.pf-b7 .pf-meta svg{
  display:inline-block;
  vertical-align:-0.125em;
  width:1em;
  height:1em;
  margin-right:.4em;
  color:currentColor;
}

/* Excerpt */
.pf-b7 .pf-excerpt{
  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,8px 0 0 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);
  column-count:var(--pf-excerpt-cols,1);
  column-gap:var(--pf-excerpt-gap,0);
  text-align:var(--pf-excerpt-align,left);
  overflow-wrap:anywhere;
}

/* ======================
   HIGHLIGHT (SAFE MỚI)
   ====================== */
.pf-b7 mark.pf-search-hl{
  padding: .08em .18em;
  border-radius: .22em;
  background-color: #ffe082;
  color: #333;
}

/* ======================
   TOGGLES
   ====================== */
.pf-b7 .pf-b7-content[data-thumb="0"] .pf-thumb{ display:none !important; }
.pf-b7 .pf-b7-content[data-cat="0"] .pf-badge{ display:none !important; }
.pf-b7 .pf-b7-content[data-meta="0"] .pf-meta{ display:none !important; }
.pf-b7 .pf-b7-content[data-author="0"] .pf-meta [data-meta="author"]{ display:none !important; }
.pf-b7 .pf-b7-content[data-date="0"] .pf-meta [data-meta="date"]{ display:none !important; }
.pf-b7 .pf-b7-content[data-excerpt="0"] .pf-excerpt{ display:none !important; }

/* Align category when before/after title */
.pf-b7 .pf-b7-content[data-catpos="before"] .pf-body-inner,
.pf-b7 .pf-b7-content[data-catpos="after"] .pf-body-inner{
  text-align:left;
}
.pf-b7 .pf-b7-content[data-catalign="center"][data-catpos="before"] .pf-body-inner,
.pf-b7 .pf-b7-content[data-catalign="center"][data-catpos="after"] .pf-body-inner{
  text-align:center;
}
.pf-b7 .pf-b7-content[data-catalign="right"][data-catpos="before"] .pf-body-inner,
.pf-b7 .pf-b7-content[data-catalign="right"][data-catpos="after"] .pf-body-inner{
  text-align:right;
}

/* Keep meta alignment independent */
.pf-b7 .pf-body-inner .pf-meta{ text-align:initial; }

/* AJAX + PAGINATION */
.pf-b7 .pf-pgrid-load{display:flex;justify-content:center;align-items:center;margin:18px 0 0;min-height:44px}
.pf-b7 .pf-pgrid-load[hidden]{display:none!important}
.pf-b7 .pf-loadmore,
.pf-b7 .pf-pagination button{appearance:none;border:1px solid var(--pf-pagi-border, rgba(0,0,0,.14));background:var(--pf-pagi-bg,#fff);color:var(--pf-pagi-color,inherit);border-radius:999px;padding:10px 16px;font:inherit;cursor:pointer;transition:.2s ease}
.pf-b7 .pf-loadmore{color:var(--pf-loadmore-color,var(--pf-pagi-color,inherit));background:var(--pf-loadmore-bg,var(--pf-pagi-bg,#fff));border-color:var(--pf-loadmore-border,var(--pf-pagi-border,rgba(0,0,0,.14)))}
.pf-b7 .pf-pagination{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;margin:18px 0 0}
.pf-b7 .pf-pagination[hidden]{display:none!important}
.pf-b7 .pf-pagination .is-active{color:var(--pf-pagi-active-color,#fff);background:var(--pf-pagi-active-bg,#111827);border-color:var(--pf-pagi-active-border,#111827)}
.pf-b7 .pf-prev[disabled], .pf-b7 .pf-next[disabled]{opacity:.5;cursor:not-allowed}
.pf-b7 .pf-pgrid-load-sentinel{width:100%;min-height:1px;height:1px;border:0}

.pf-b7 .pf-pcard > .pf-body{
  display:flex !important;
  flex-direction:row !important;
  align-items:var(--pf-datebox-valign, flex-start) !important;
  justify-content:flex-start !important;
  gap:0 !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  float:none !important;
  clear:none !important;
}

.pf-b7 .pf-pcard > .pf-body > .pf-datebox{
  order:var(--pf-datebox-order, 0) !important;
  flex:0 0 auto !important;
  align-self:var(--pf-datebox-valign, flex-start) !important;
  position:relative !important;
  z-index:1 !important;
}

.pf-b7 .pf-pcard > .pf-body > .pf-content-wrap{
  order:var(--pf-content-order, 1) !important;
  flex:1 1 auto !important;
  min-width:0 !important;
  max-width:100% !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
}

.pf-b7 .pf-pcard > .pf-body > .pf-content-wrap > .pf-body-inner{
  min-width:0 !important;
  width:100% !important;
}

/* If DateBox is off, content should fill the whole body */
.pf-b7 .pf-b7-content[data-datebox="0"] .pf-pcard > .pf-body{
  display:block !important;
}
.pf-b7 .pf-b7-content[data-datebox="0"] .pf-content-wrap{
  display:block !important;
  width:100% !important;
}

/* Fallback using data attr, even if CSS vars were not generated yet */
.pf-b7 .pf-b7-content[data-datebox-pos="right"] .pf-datebox{ order:2 !important; }
.pf-b7 .pf-b7-content[data-datebox-pos="right"] .pf-content-wrap{ order:1 !important; }
.pf-b7 .pf-b7-content[data-datebox-pos="left"] .pf-datebox{ order:0 !important; }
.pf-b7 .pf-b7-content[data-datebox-pos="left"] .pf-content-wrap{ order:1 !important; }

@media (max-width: 767.98px){
  .pf-b7 .pf-pcard > .pf-body{
    align-items:flex-start !important;
  }
}

/* ==========================================================================
   BLOCK 7 – v3.1.0 FINAL DATEBOX INLINE FIX
   Mục tiêu:
   - DateBox và nội dung luôn cùng hàng trong .pf-body.
   - Vertical Align Top/Middle/Bottom hoạt động giống nhau ở Builder preview và ngoài render.
   - Chống CSS preview/global của Builder ghi đè .pf-body/.pf-content-wrap/.pf-datebox.
   ========================================================================== */

/* BODY = 2 columns: [DateBox] [Content] */
.pf-b7 .pf-pcard > .pf-body,
.b-block-preview .pf-b7 .pf-pcard > .pf-body{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:var(--pf-datebox-valign, flex-start) !important;
  justify-content:flex-start !important;
  gap:0 !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  margin-top:0 !important;
  float:none !important;
  clear:none !important;
  text-align:initial !important;
}

/* Khi layout column: ảnh ở trên, body ở dưới nhưng nội dung trong body vẫn chia 2 cột */
.pf-b7 .pf-b7-content[data-layout="column"] .pf-pcard,
.b-block-preview .pf-b7 .pf-b7-content[data-layout="column"] .pf-pcard{
  display:flex !important;
  flex-direction:column !important;
}
.pf-b7 .pf-b7-content[data-layout="column"] .pf-pcard > .pf-body,
.b-block-preview .pf-b7 .pf-b7-content[data-layout="column"] .pf-pcard > .pf-body{
  margin-top:15px !important;
}

/* Khi layout row: ảnh trái + body phải */
.pf-b7 .pf-b7-content[data-layout="row"] .pf-pcard,
.b-block-preview .pf-b7 .pf-b7-content[data-layout="row"] .pf-pcard{
  display:flex !important;
  flex-direction:row !important;
  align-items:stretch !important;
  gap:15px !important;
  min-width:0 !important;
}
.pf-b7 .pf-b7-content[data-layout="row"] .pf-pcard > .pf-body,
.b-block-preview .pf-b7 .pf-b7-content[data-layout="row"] .pf-pcard > .pf-body{
  flex:1 1 auto !important;
  min-width:0 !important;
}

/* DateBox column */
.pf-b7 .pf-pcard > .pf-body > .pf-datebox,
.b-block-preview .pf-b7 .pf-pcard > .pf-body > .pf-datebox{
  order:var(--pf-datebox-order, 0) !important;
  flex:0 0 auto !important;
  align-self:var(--pf-datebox-valign, flex-start) !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  position:relative !important;
  z-index:2 !important;
  float:none !important;
  clear:none !important;
  min-width:auto !important;
  max-width:none !important;
}

/* Content column */
.pf-b7 .pf-pcard > .pf-body > .pf-content-wrap,
.b-block-preview .pf-b7 .pf-pcard > .pf-body > .pf-content-wrap{
  order:var(--pf-content-order, 1) !important;
  flex:1 1 auto !important;
  min-width:0 !important;
  max-width:100% !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  justify-content:center !important;
  float:none !important;
  clear:none !important;
  text-align:initial !important;
}

.pf-b7 .pf-pcard > .pf-body > .pf-content-wrap > .pf-body-inner,
.b-block-preview .pf-b7 .pf-pcard > .pf-body > .pf-content-wrap > .pf-body-inner{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
}

/* Vertical Align mapping: render + builder */
.pf-b7 .pf-pcard > .pf-body[style*="--pf-datebox-valign:center"],
.b-block-preview .pf-b7 .pf-pcard > .pf-body[style*="--pf-datebox-valign:center"],
.pf-b7 .pf-b7-content[style*="--pf-datebox-valign:center"] .pf-pcard > .pf-body,
.b-block-preview .pf-b7 .pf-b7-content[style*="--pf-datebox-valign:center"] .pf-pcard > .pf-body{
  align-items:center !important;
}
.pf-b7 .pf-b7-content[style*="--pf-datebox-valign:flex-end"] .pf-pcard > .pf-body,
.b-block-preview .pf-b7 .pf-b7-content[style*="--pf-datebox-valign:flex-end"] .pf-pcard > .pf-body{
  align-items:flex-end !important;
}

/* DateBox off: body trở về block bình thường, content full width */
.pf-b7 .pf-b7-content[data-datebox="0"] .pf-pcard > .pf-body,
.b-block-preview .pf-b7 .pf-b7-content[data-datebox="0"] .pf-pcard > .pf-body{
  display:block !important;
  width:100% !important;
}
.pf-b7 .pf-b7-content[data-datebox="0"] .pf-content-wrap,
.b-block-preview .pf-b7 .pf-b7-content[data-datebox="0"] .pf-content-wrap{
  display:block !important;
  width:100% !important;
}

/* DateBox position fallback nếu render/block.js có data-datebox-pos */
.pf-b7 .pf-b7-content[data-datebox-pos="right"] .pf-datebox,
.b-block-preview .pf-b7 .pf-b7-content[data-datebox-pos="right"] .pf-datebox{ order:2 !important; }
.pf-b7 .pf-b7-content[data-datebox-pos="right"] .pf-content-wrap,
.b-block-preview .pf-b7 .pf-b7-content[data-datebox-pos="right"] .pf-content-wrap{ order:1 !important; }
.pf-b7 .pf-b7-content[data-datebox-pos="left"] .pf-datebox,
.b-block-preview .pf-b7 .pf-b7-content[data-datebox-pos="left"] .pf-datebox{ order:0 !important; }
.pf-b7 .pf-b7-content[data-datebox-pos="left"] .pf-content-wrap,
.b-block-preview .pf-b7 .pf-b7-content[data-datebox-pos="left"] .pf-content-wrap{ order:1 !important; }

/* Giữ badge/title/meta/excerpt theo cột content, không rơi xuống dưới DateBox */
.pf-b7 .pf-content-wrap .pf-badge,
.b-block-preview .pf-b7 .pf-content-wrap .pf-badge{
  width:max-content;
  max-width:100%;
}
.pf-b7 .pf-content-wrap .pf-title,
.b-block-preview .pf-b7 .pf-content-wrap .pf-title,
.pf-b7 .pf-content-wrap .pf-meta,
.b-block-preview .pf-b7 .pf-content-wrap .pf-meta,
.pf-b7 .pf-content-wrap .pf-excerpt,
.b-block-preview .pf-b7 .pf-content-wrap .pf-excerpt{
  max-width:100% !important;
}

/* Mobile: vẫn giữ 2 cột DateBox + content, chỉ giảm gap/margin theo setting nếu cần */
@media (max-width: 767.98px){
  .pf-b7 .pf-pcard > .pf-body,
  .b-block-preview .pf-b7 .pf-pcard > .pf-body{
    align-items:flex-start !important;
  }
}