/* ==========================================================================
   templates/blocks/block-9/style.css — v1.3.0 (HIGHLIGHT SYNCED)
   SYNC with:
   - block.js v1.3.0
   - render.php v1.3.0
   - render-part.php v1.3.0

   Purpose:
   - Independent service/list/classified block
   - Fix: Flexbox orientation (Left/Right/Top)
   - Fix: Auto-hide empty elements (.pf-is-empty)
   - Add: Highlight class cho kết quả tìm kiếm (mark.pf-search-hl)
   ========================================================================== */

.pf-b9 {
  width: min(var(--pf-container-w, 100%), 100%);
  max-width: 100%;
  box-sizing: border-box;
  padding: var(--pf-pad, 0);
  margin: 0 auto var(--pf-bottom-space, 36px);
  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);
  box-shadow: var(--pf-shadow, none);
  background: var(--pf-bg, transparent);
  min-width: 0;
}

.pf-b9 *,
.pf-b9 *::before,
.pf-b9 *::after {
  box-sizing: border-box;
}

.pf-b9 a {
  text-decoration: none;
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.pf-b9-head {
  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-b9-head .pf-title-wrap {
  display: flex;
  align-items: center;
  justify-content: var(--pf-head-align, flex-start);
  width: 100%;
  min-width: 0;
}

.pf-b9-head .pf-title {
  margin: 0;
  min-width: 0;
  max-width: 100%;
  font-size: var(--pf-head-fs, 22px);
  font-weight: var(--pf-head-fw, 700);
  font-style: var(--pf-head-fstyle, normal);
  text-transform: var(--pf-head-tt, none);
  color: inherit;
  line-height: 1.3;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.pf-b9-head .pf-title a {
  color: inherit;
  text-decoration: none;
}

.pf-b9-head[data-line="1"][data-line-pos="bottom"]::after {
  content: "";
  display: block;
  width: var(--pf-head-line-len, 40%);
  height: var(--pf-head-line-thickness, 3px);
  margin-top: var(--pf-head-line-offset, 6px);
  margin-left: var(--pf-head-line-ml, 0);
  margin-right: var(--pf-head-line-mr, auto);
  background: var(--pf-head-line-color, currentColor);
  border-radius: 999px;
}

.pf-b9-head[data-line="1"][data-line-pos="top"]::before {
  content: "";
  display: block;
  width: var(--pf-head-line-len, 40%);
  height: var(--pf-head-line-thickness, 3px);
  margin-bottom: var(--pf-head-line-offset, 6px);
  margin-left: var(--pf-head-line-ml, 0);
  margin-right: var(--pf-head-line-mr, auto);
  background: var(--pf-head-line-color, currentColor);
  border-radius: 999px;
}

/* ==========================================================================
   HEADER + FILTER WRAP
   ========================================================================== */

.pf-b9-header-filter-wrap.is-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin-bottom: 14px;
}

.pf-b9-header-filter-wrap.is-inline .pf-b9-head {
  margin-bottom: 0;
  flex: 1 1 320px;
}

.pf-b9-header-filter-wrap.is-inline .pf-filter {
  margin: 0;
  justify-content: var(--pf-head-filter-align, flex-start);
}

/* ==========================================================================
   FILTER
   ========================================================================== */

.pf-b9 .pf-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: var(--pf-head-filter-align, flex-start);
  margin: 0 0 16px 0;
}

.pf-b9 .pf-filter .pf-tab,
.pf-b9 .pf-filter .pf-pill,
.pf-b9 .pf-filter .pf-dropdown {
  font: inherit;
}

.pf-b9 .pf-filter .pf-tab,
.pf-b9 .pf-filter .pf-pill {
  appearance: none;
  border: 1px solid rgba(148,163,184,.35);
  background: rgba(255,255,255,.02);
  color: inherit;
  padding: 8px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: .2s ease;
}

.pf-b9 .pf-filter .pf-pill {
  border-radius: 999px;
}

.pf-b9 .pf-filter .pf-tab:hover,
.pf-b9 .pf-filter .pf-pill:hover,
.pf-b9 .pf-filter .pf-tab.is-active,
.pf-b9 .pf-filter .pf-pill.is-active {
  background: rgba(255,255,255,.07);
  border-color: rgba(148,163,184,.55);
}

.pf-b9 .pf-filter .pf-dropdown {
  min-width: 180px;
  max-width: 100%;
  border: 1px solid rgba(148,163,184,.35);
  background: rgba(255,255,255,.03);
  color: inherit;
  padding: 9px 12px;
  border-radius: 10px;
  outline: none;
}

/* ==========================================================================
   GRID
   ========================================================================== */

.pf-b9-grid {
  display: grid;
  grid-template-columns: repeat(var(--pf-cols, 1), minmax(0, 1fr));
  gap: var(--pf-gap, 20px);
  min-width: 0;
}

@media (max-width: 991.98px) {
  .pf-b9-grid {
    grid-template-columns: repeat(var(--pf-cols-tablet, 1), minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .pf-b9-grid {
    grid-template-columns: repeat(var(--pf-cols-mobile, 1), minmax(0, 1fr));
  }
}

/* ==========================================================================
   CARD LAYOUT (Crucial Flexbox Settings)
   ========================================================================== */

.pf-b9 .pf-pcard.pf-b9-card {
  display: flex;
  flex-direction: row; /* Force row by default */
  gap: var(--pf-item-gap, 14px);
  align-items: stretch;
  min-width: 0;
  padding: var(--pf-item-pad, 12px);
  border-width: var(--pf-item-bw, 1px);
  border-style: var(--pf-item-bs, solid);
  border-color: var(--pf-item-bc, #334155);
  border-radius: var(--pf-item-br, 8px);
  box-shadow: var(--pf-item-shadow, none);
  background: var(--pf-item-bg, transparent);
  overflow: hidden;
}

/* Right layout = reverse the row */
.pf-b9 .pf-pcard.pf-b9-card[data-img-pos="right"] {
  flex-direction: row-reverse;
}

/* Top layout = stack in column */
.pf-b9 .pf-pcard.pf-b9-card[data-img-pos="top"] {
  flex-direction: column;
}

.pf-b9 .pf-pcard .pf-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ==========================================================================
   THUMB
   ========================================================================== */

.pf-b9 .pf-thumb {
  position: relative;
  display: block;
  overflow: hidden;
  width: var(--pf-thumb-w-pct, 22%);
  flex: 0 0 var(--pf-thumb-w-pct, 22%);
  min-width: 140px;
  border-radius: var(--pf-thumb-radius, 8px);
  background: rgba(148,163,184,.08);
}

.pf-b9 .pf-pcard[data-img-pos="top"] .pf-thumb {
  width: 100%;
  flex: 0 0 auto;
  min-width: 0;
}

.pf-b9 .pf-thumb::before {
  content: "";
  display: block;
  padding-top: var(--pf-thumb-ratio, 100%);
}

.pf-b9 .pf-thumb img,
.pf-b9 .pf-thumb .pf-thumb-ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.pf-b9 .pf-thumb img {
  display: block;
  object-fit: var(--pf-thumb-fit, cover);
  object-position: center var(--pf-thumb-valign, 50%);
}

.pf-b9 .pf-thumb .pf-thumb-ph {
  display: block;
  background: linear-gradient(135deg, rgba(148,163,184,.18), rgba(100,116,139,.24));
}

/* Hide thumb toggle */
.pf-b9-grid[data-thumb="0"] .pf-thumb {
  display: none !important;
}

/* ==========================================================================
   TITLE ROW
   ========================================================================== */

.pf-b9 .pf-b9-titleline {
  min-width: 0;
  max-width: 100%;
}

.pf-b9 .pf-b9-titleline--inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pf-b9-inline-gap, 10px);
  min-width: 0;
}

.pf-b9 .pf-b9-titleline--block {
  display: flex;
  flex-direction: column;
  gap: var(--pf-b9-row-gap, 10px);
  min-width: 0;
  width: 100%;
}

.pf-b9 .pf-b9-titleline-row {
  min-width: 0;
  width: 100%;
}

.pf-b9 .pf-b9-titleline-row--title {
  min-width: 0;
}

.pf-b9 .pf-b9-before,
.pf-b9 .pf-b9-after,
.pf-b9 .pf-b9-price,
.pf-b9 .pf-b9-price-current,
.pf-b9 .pf-b9-price-old {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  vertical-align: middle;
  box-sizing: border-box;
}

/* Fallback Typography for Before/After/Price */
.pf-b9 .pf-b9-before { color: var(--pf-before-color, inherit); background: var(--pf-before-bg, transparent); }
.pf-b9 .pf-b9-after  { color: var(--pf-after-color, inherit); background: var(--pf-after-bg, transparent); }

.pf-b9 .pf-b9-price {
  gap: 8px;
  flex-wrap: wrap;
}

.pf-b9 .pf-b9-price-current {
  white-space: nowrap;
  color: var(--pf-price-color, inherit);
}

.pf-b9 .pf-b9-price-old {
  white-space: nowrap;
  text-decoration: line-through;
  opacity: .72;
  color: var(--pf-oldprice-color, inherit);
}

.pf-b9 .pf-b9-title {
  display: inline;
  margin: var(--pf-title-space, 0 0 8px 0);
  min-width: 0;
  max-width: 100%;
  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);
  background: var(--pf-title-bg, transparent);
  color: var(--pf-title-color, inherit);
  font-size: var(--pf-title-fs, 20px);
  font-weight: var(--pf-title-fw, 700);
  text-transform: var(--pf-title-tt, none);
  line-height: var(--pf-title-lh, 1.35);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.pf-b9 .pf-b9-title a {
  color: inherit;
  text-decoration: none;
}

.pf-b9 .pf-b9-titleline--inline .pf-b9-title {
  margin: 0;
}

/* ==========================================================================
   IMPORTANT: HIDE EMPTY ELEMENTS
   ========================================================================== */
.pf-b9 .pf-is-empty {
  display: none !important;
}

/* ==========================================================================
   META
   ========================================================================== */

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

.pf-b9 .pf-meta > * {
  min-width: 0;
}

.pf-b9 .pf-meta .pf-sep {
  opacity: .55;
}

.pf-b9-grid[data-meta="0"] .pf-meta { display:none !important; }
.pf-b9-grid[data-cat="0"] .pf-meta .pf-cat { display:none !important; }
.pf-b9-grid[data-author="0"] .pf-meta .pf-author { display:none !important; }
.pf-b9-grid[data-date="0"] .pf-meta time { display:none !important; }

/* ==========================================================================
   EXCERPT
   ========================================================================== */

.pf-b9 .pf-excerpt {
  margin: var(--pf-excerpt-m, var(--pf-excerpt-space, 8px 0 0 0));
  padding: var(--pf-excerpt-pad, 0);
  min-width: 0;
  color: var(--pf-excerpt-color, inherit);
  background: var(--pf-excerpt-bg, transparent);
  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);
  text-align: var(--pf-excerpt-align, left);
  column-count: var(--pf-excerpt-cols, 1);
  column-gap: var(--pf-excerpt-gap, 0px);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.pf-b9-grid[data-excerpt="0"] .pf-excerpt {
  display:none !important;
}

/* ==========================================================================
   BUTTON
   ========================================================================== */

.pf-b9 .pf-readmore-wrap {
  display: flex;
  justify-content: var(--pf-btn-align, flex-start);
  margin: var(--pf-btn-space, 14px 0 0 0);
}

.pf-b9 .pf-readmore {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: var(--pf-readmore-pad, 6px 16px);
  border-width: var(--pf-readmore-bw, 0);
  border-style: var(--pf-readmore-bs, solid);
  border-color: var(--pf-readmore-bc, transparent);
  border-radius: var(--pf-readmore-br, 6px);
  background: var(--pf-readmore-bg, #16a34a);
  color: var(--pf-readmore-color, #fff);
  font-size: var(--pf-readmore-fs, 14px);
  font-weight: var(--pf-readmore-fw, 600);
  text-decoration: none;
  transition: .2s ease;
  cursor: pointer;
}

.pf-b9 .pf-readmore:hover {
  filter: brightness(1.05);
}

.pf-b9-grid[data-readmore="0"] .pf-readmore-wrap {
  display:none !important;
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */

.pf-b9 .pf-pgrid-pagi,
.pf-b9 .pf-pgrid-load {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: var(--pf-pagi-m, 20px 0 0 0);
}

.pf-b9 .pf-pgrid-pagi {
  justify-content: center;
}

.pf-b9 .pf-pgrid-pagi button,
.pf-b9 .pf-pgrid-load button {
  appearance: none;
  cursor: pointer;
  transition: .2s ease;
}

.pf-b9 .pf-pgrid-load button {
  padding: var(--pf-lm-pad, 10px 16px);
  border-width: var(--pf-lm-bw, 1px);
  border-style: var(--pf-lm-bs, solid);
  border-color: var(--pf-loadmore-bc, rgba(148,163,184,.35));
  border-radius: var(--pf-lm-br, 10px);
  background: var(--pf-loadmore-bg, rgba(255,255,255,.04));
  color: var(--pf-loadmore-color, inherit);
  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);
}

.pf-b9 .pf-pgrid-load button[disabled] {
  opacity: .45;
  cursor: default;
}

.pf-b9 .pf-pgrid-pagi button {
  min-width: 40px;
  padding: var(--pf-pagi-pad, 0 12px);
  height: 40px;
  border-width: var(--pf-pagi-bw, 1px);
  border-style: var(--pf-pagi-bs, solid);
  border-color: var(--pf-pagi-bc, rgba(148,163,184,.35));
  border-radius: var(--pf-pagi-br, 10px);
  background: var(--pf-pagi-bg, rgba(255,255,255,.04));
  color: var(--pf-pagi-color, inherit);
  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);
}

.pf-b9 .pf-pgrid-pagi button.is-active {
  background: var(--pf-pagi-bg-active, rgba(255,255,255,.12));
  color: var(--pf-pagi-color-active, inherit);
  border-color: var(--pf-pagi-bc-active, rgba(148,163,184,.65));
}

.pf-b9 .pf-pgrid-pagi button[disabled] {
  opacity: .45;
  cursor: default;
}

.pf-b9 .pf-pgrid-pagi .pf-page-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  opacity: .86;
}

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

/* ==========================================================================
   EMPTY
   ========================================================================== */

.pf-b9 .pf-b9-empty {
  padding: 18px;
  border: 1px dashed rgba(148,163,184,.35);
  border-radius: 10px;
  opacity: .82;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 991.98px) {
  .pf-b9 .pf-pcard.pf-b9-card {
    gap: max(12px, calc(var(--pf-item-gap, 14px) - 2px));
  }

  .pf-b9 .pf-thumb {
    min-width: 120px;
  }
}

@media (max-width: 767.98px) {
  .pf-b9-header-filter-wrap.is-inline {
    flex-direction: column;
    align-items: stretch;
  }

  .pf-b9-header-filter-wrap.is-inline .pf-filter {
    justify-content: flex-start;
  }

  /* Reset layout on mobile */
  .pf-b9 .pf-pcard.pf-b9-card {
    flex-direction: column !important;
  }

  .pf-b9 .pf-thumb {
    width: 100% !important;
    flex: 0 0 auto !important;
    min-width: 0;
  }

  .pf-b9 .pf-b9-titleline--inline {
    align-items: flex-start;
  }

  .pf-b9 .pf-b9-before,
  .pf-b9 .pf-b9-after,
  .pf-b9 .pf-b9-price {
    max-width: 100%;
  }
}

@media (max-width: 479.98px) {
  .pf-b9 .pf-b9-price {
    gap: 6px;
  }

  .pf-b9 .pf-pgrid-pagi {
    gap: 8px;
  }

  .pf-b9 .pf-pgrid-pagi button {
    min-width: 36px;
    height: 36px;
  }
}