/* templates/blocks/column-title/style.css — v1.8.4 */

.pf-ct {
  width: 100%;
  display: block;
  box-sizing: border-box;
  background: var(--ct-box-bg, transparent);
  padding: var(--ct-box-pad, 0);
  margin: var(--ct-box-mar, 0);
  border: var(--ct-box-bd, none);
  border-radius: var(--ct-box-rad, 0);
  box-shadow: var(--ct-box-shadow, none);
  visibility: visible;
}

.pf-ct * { box-sizing: border-box; }

.pf-ct[data-wrap-mode="full"] { display:block; width:100%; }
.pf-ct[data-wrap-mode="inline"] { display:inline-block; width:auto; max-width:100%; }

.pf-ct .ta-left { text-align: left !important; justify-content: flex-start !important; }
.pf-ct .ta-center { text-align: center !important; justify-content: center !important; }
.pf-ct .ta-right { text-align: right !important; justify-content: flex-end !important; }

.pf-ct__title {
  display: block;
  width: 100%;
  position: relative;
  margin: var(--ct-title-mt, 0) 0 var(--ct-title-mb, 0) !important;
  padding: var(--ct-title-pad, 0) !important;
  color: var(--ct-title-color, inherit) !important;
  background: var(--ct-title-bg, transparent) !important;
  border: var(--ct-title-bd, none) !important;
  border-radius: var(--ct-title-rad, 0) !important;
  box-shadow: var(--ct-title-shadow, none) !important;
  line-height: var(--ct-title-lh, 1.25) !important;
  font-weight: var(--ct-title-fw, 700) !important;
  font-family: var(--ct-title-ff, inherit) !important;
  text-transform: var(--ct-title-transform, none) !important;
  letter-spacing: var(--ct-title-ls, normal) !important;
  text-shadow: var(--ct-title-text-shadow, none) !important;
  font-style: normal;
  min-height: 1em;
  overflow: visible;
  opacity: 1;
  visibility: visible;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

.pf-ct__title[data-width-mode="inline"] { display:inline-block; width:auto; max-width:100%; }
.pf-ct__title[data-width-mode="full"] { display:block; width:100%; }

.pf-ct__title a {
  color: inherit !important;
  text-decoration: none !important;
}

.pf-ct__title a:hover {
  text-decoration: underline !important;
}

.pf-ct__title.is-italic { font-style: italic !important; }
.pf-ct__title.is-ul .pf-ct__title-text { text-decoration: underline !important; }
.pf-ct__title-text { display: inline; color: inherit !important; }

.pf-ct__title.size-small { font-size: var(--ct-title-fs, 14px) !important; }
.pf-ct__title.size-medium { font-size: var(--ct-title-fs, 18px) !important; }
.pf-ct__title.size-large { font-size: var(--ct-title-fs, 24px) !important; }
.pf-ct__title.size-xl { font-size: var(--ct-title-fs, 32px) !important; }

.pf-ct__title.style2::after {
  content: "";
  position: absolute;
  height: var(--ct-line-h, 2px) !important;
  bottom: calc(-1 * var(--ct-line-space, 12px)) !important;
  background: var(--ct-line, currentColor) !important;
  width: var(--ct-line-wp, 40%) !important;
  transition: width .25s ease, left .25s ease, transform .25s ease;
}

.pf-ct__title.ta-left.style2::after {
  left: var(--ct-line-align, 0px) !important;
  right: auto !important;
  transform: none !important;
}

/* Giữ đúng tâm của line khi width thay đổi lúc hover. */
.pf-ct__title.ta-center.style2::after {
  left: calc(50% + var(--ct-line-align, 0px)) !important;
  right: auto !important;
  transform: translateX(-50%) !important;
}

/* Với căn phải, neo cạnh phải để line nở về bên trái. */
.pf-ct__title.ta-right.style2::after {
  left: auto !important;
  right: var(--ct-line-align, 0px) !important;
  transform: none !important;
}

/* Hover hỗ trợ cả frontend lẫn builder: trong builder lớp overlay có thể bắt chuột
   nên kích hoạt khi hover trực tiếp title, nội dung title hoặc toàn wrapper block. */
.pf-ct__title.style2:hover::after,
.pf-ct__title.style2:focus-within::after,
.pf-ct:hover > .pf-ct__title.style2::after {
  width: var(--ct-line-wp-hover, var(--ct-line-wp, 40%)) !important;
}

/* Bảo đảm pseudo line không chặn vùng hover của title. */
.pf-ct__title.style2::after {
  pointer-events: none !important;
}


.pf-ct__subtitle {
  position: relative;
  display: block;
  width: 100%;
  margin: var(--ct-sub-mt, 0) 0 var(--ct-sub-mb, 0) !important;
  max-width: var(--ct-sub-max-w, none) !important;
  box-sizing: border-box;
  overflow: visible;
  opacity: 1;
  visibility: visible;
}

.pf-ct__subtitle-inner {
  color: var(--ct-sub-color, inherit) !important;
  background: var(--ct-sub-bg, transparent) !important;
  padding: var(--ct-sub-pad, 0) !important;
  border: var(--ct-sub-bd, none) !important;
  border-radius: var(--ct-sub-rad, 0) !important;
  box-shadow: var(--ct-sub-shadow, none) !important;
  font-size: var(--ct-sub-fs, .85em) !important;
  line-height: var(--ct-sub-lh, 1.4) !important;
  font-weight: var(--ct-sub-fw, 500) !important;
  font-family: var(--ct-sub-ff, inherit) !important;
  text-transform: var(--ct-sub-transform, none) !important;
  letter-spacing: var(--ct-sub-ls, normal) !important;
  text-shadow: var(--ct-sub-text-shadow, none) !important;
  font-style: normal;
  display: inline-block;
  color: inherit;
  overflow-wrap: anywhere;
}

.pf-ct__subtitle[data-width-mode="full"] .pf-ct__subtitle-inner { display:block; width:100%; }
.pf-ct__subtitle[data-width-mode="inline"] .pf-ct__subtitle-inner { display:inline-block; width:auto; max-width:100%; }

.pf-ct__subtitle.is-italic .pf-ct__subtitle-inner { font-style: italic !important; }
.pf-ct__subtitle.is-ul .pf-ct__subtitle-inner { text-decoration: underline !important; }

/* style3: line nằm giữa title và subtitle. Vẫn hiển thị khi chưa nhập subtitle. */
.pf-ct__subtitle[data-variant="style3"] {
  padding-top: 0 !important;
}

.pf-ct__subtitle[data-variant="style3"]::before {
  content: none !important;
}

.pf-ct__middle-line {
  display: flex;
  width: 100%;
  margin-top: var(--ct-line-space, 12px);
  margin-bottom: var(--ct-line-space, 12px);
  pointer-events: none;
}

.pf-ct__middle-line span {
  display: block;
  flex: 0 0 var(--ct-line-length, 90px);
  width: var(--ct-line-length, 90px);
  max-width: 100%;
  border-top-width: var(--ct-line-h, 2px);
  border-top-style: var(--ct-line-style, solid);
  border-top-color: var(--ct-line, currentColor);
  border-radius: var(--ct-line-radius, 999px);
}

.pf-ct__middle-line.ta-left { justify-content: flex-start; padding-left: var(--ct-line-align, 0px); }
.pf-ct__middle-line.ta-center { justify-content: center; transform: translateX(var(--ct-line-align, 0px)); }
.pf-ct__middle-line.ta-right { justify-content: flex-end; padding-right: var(--ct-line-align, 0px); }

@media (max-width: 767.98px) {
  .pf-ct__title,
  .pf-ct__subtitle-inner {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}

/* v1.8.0 — line quanh tiêu đề */
.pf-ct__title.line-both,
.pf-ct__title.line-left,
.pf-ct__title.line-right {
  display: flex !important;
  align-items: center;
  gap: var(--ct-line-gap, 18px);
}
.pf-ct__title.line-both::before,
.pf-ct__title.line-both::after,
.pf-ct__title.line-left::before,
.pf-ct__title.line-right::after {
  content: "";
  display: block;
  flex: 0 0 var(--ct-line-length, 90px);
  width: var(--ct-line-length, 90px);
  min-width: 0;
  height: 0;
  border-top-width: var(--ct-line-h, 2px);
  border-top-style: var(--ct-line-style, solid);
  border-top-color: var(--ct-line, currentColor);
  border-radius: var(--ct-line-radius, 999px);
}
.pf-ct__title.line-both.ta-center { justify-content: center !important; }
.pf-ct__title.line-both.ta-left { justify-content: flex-start !important; }
.pf-ct__title.line-both.ta-right { justify-content: flex-end !important; }
.pf-ct__title.line-left::after,
.pf-ct__title.line-right::before { content: none !important; }

.pf-ct__title.line-above,
.pf-ct__title.line-below { padding-block: var(--ct-line-space, 12px) !important; }
.pf-ct__title.line-above::before,
.pf-ct__title.line-below::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: var(--ct-line-length, 90px);
  height: 0;
  border-top-width: var(--ct-line-h, 2px);
  border-top-style: var(--ct-line-style, solid);
  border-top-color: var(--ct-line, currentColor);
  border-radius: var(--ct-line-radius, 999px);
}
.pf-ct__title.line-above::before { top: 0; }
.pf-ct__title.line-below::after { bottom: 0; }
.pf-ct__title.line-above.ta-left::before,
.pf-ct__title.line-below.ta-left::after { left: var(--ct-line-align, 0px); transform: none; }
.pf-ct__title.line-above.ta-right::before,
.pf-ct__title.line-below.ta-right::after { left: auto; right: var(--ct-line-align, 0px); transform: none; }

@media (max-width: 767.98px) {
  .pf-ct__title.line-both::before,
  .pf-ct__title.line-both::after,
  .pf-ct__title.line-left::before,
  .pf-ct__title.line-right::after {
    max-width: 24vw;
  }
}

/* v1.8.4 — Hover cho các kiểu line mới.
   Line trên/dưới được neo đúng tâm và nở đều sang hai phía. */
.pf-ct__title.line-above::before,
.pf-ct__title.line-below::after {
  transition: width .28s ease, left .28s ease, right .28s ease, transform .28s ease;
  pointer-events: none !important;
}

.pf-ct__title.line-above:hover::before,
.pf-ct__title.line-above:focus-within::before,
.pf-ct:hover > .pf-ct__title.line-above::before,
.pf-ct__title.line-below:hover::after,
.pf-ct__title.line-below:focus-within::after,
.pf-ct:hover > .pf-ct__title.line-below::after {
  width: var(--ct-line-wp-hover, var(--ct-line-length, 90px)) !important;
}

/* Các kiểu một line bên trái/phải cũng nhận Hover Width. */
.pf-ct__title.line-left::before,
.pf-ct__title.line-right::after {
  transition: flex-basis .28s ease, width .28s ease;
  pointer-events: none !important;
}
.pf-ct__title.line-left:hover::before,
.pf-ct__title.line-left:focus-within::before,
.pf-ct:hover > .pf-ct__title.line-left::before,
.pf-ct__title.line-right:hover::after,
.pf-ct__title.line-right:focus-within::after,
.pf-ct:hover > .pf-ct__title.line-right::after {
  flex-basis: var(--ct-line-wp-hover, var(--ct-line-length, 90px)) !important;
  width: var(--ct-line-wp-hover, var(--ct-line-length, 90px)) !important;
}