/* templates/blocks/column-title/style.css — v1.3.0 (BULLETPROOF)
   - FIX: Chống theme ghi đè bằng !important
   - FIX: Sửa lỗi tính toán size
*/

.pf-ct { 
    width: 100%; 
    display: block; 
    box-sizing: border-box;
}

/* ===== Align helpers ===== */
.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; }

/* =========================================================
 * TITLE
 * =======================================================*/
.pf-ct__title {
  display: block;
  width: 100%;
  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;
  line-height: var(--ct-title-lh, 1.25) !important;
  font-weight: var(--ct-title-fw, 700) !important;
  text-transform: var(--ct-title-transform, none) !important;
  letter-spacing: var(--ct-title-ls, normal) !important;
  font-style: normal;
  position: relative;
  box-sizing: border-box;
}

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

/* State */
.pf-ct__title.is-italic { font-style: italic !important; }
.pf-ct__title.is-ul .pf-ct__title-text { text-decoration: underline !important; }

/* Size Fallbacks (Ưu tiên size nhập từ input, nếu không nhập thì dùng size mặc định) */
.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; }

/* =========================================================
 * STYLE 2 — line dưới Title (%)
 * =======================================================*/
.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; transform: none !important; }
.pf-ct__title.ta-center.style2::after { left: calc(50% - (var(--ct-line-wp, 40%) / 2) + var(--ct-line-align, 0px)) !important; }
.pf-ct__title.ta-right.style2::after { left: calc(100% - var(--ct-line-wp, 40%) - var(--ct-line-align, 0px)) !important; transform: none !important; }
.pf-ct__title.style2:hover::after { width: var(--ct-line-wp-hover, var(--ct-line-wp, 40%)) !important; }

/* =========================================================
 * SUBTITLE
 * =======================================================*/
.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;
  padding-top: var(--ct-line-space, 12px) !important;
  box-sizing: border-box;
}

.pf-ct__subtitle-inner {
  color: var(--ct-sub-color, inherit) !important;
  background: var(--ct-sub-bg, transparent) !important;
  font-size: var(--ct-sub-fs, 0.85em) !important;
  line-height: var(--ct-sub-lh, 1.4) !important;
  padding: var(--ct-sub-pad, 0) !important;
  font-weight: var(--ct-sub-fw, 500) !important;
  text-transform: var(--ct-sub-transform, none) !important;
  letter-spacing: var(--ct-sub-ls, normal) !important;
  font-style: normal;
  display: inline-block;
}

/* State */
.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; }

/* =========================================================
 * STYLE 3 — line giữa Title & Subtitle (%)
 * =======================================================*/
.pf-ct__title.style3::after { content: none !important; }

.pf-ct__subtitle::before {
  content: "";
  position: absolute;
  top: 0;
  height: var(--ct-line-h, 2px) !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__subtitle.ta-left::before { left: var(--ct-line-align, 0px) !important; transform: none !important; }
.pf-ct__subtitle.ta-center::before { left: calc(50% - (var(--ct-line-wp, 40%) / 2) + var(--ct-line-align, 0px)) !important; }
.pf-ct__subtitle.ta-right::before { left: calc(100% - var(--ct-line-wp, 40%) - var(--ct-line-align, 0px)) !important; transform: none !important; }
.pf-ct:hover .pf-ct__subtitle::before { width: var(--ct-line-wp-hover, var(--ct-line-wp, 40%)) !important; }