/* ===============================
   BASE
================================ */
#px-landing {
  font-family: 'Inter', sans-serif;
  color: #154a81;
}

.px-container {
  max-width: 1100px;
  margin: auto;
  padding: 0 20px;
}

.center { text-align: center; }

.site,
.site-content,
.main-content,
.content-area {
  background-color: #f8fafc;
}

/* ===============================
   HERO
================================ */
.px-hero {
  position: relative;
  background-image: url('<?php echo get_the_post_thumbnail_url(null, "full"); ?>');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 120px 0;
  color: #fff;
  text-align: center;
  overflow: hidden;
}

/* LỚP OVERLAY */
.px-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(15,47,79,0.35) 0%,
    rgba(15,47,79,0.55) 55%,
    rgba(15,47,79,0.75) 100%
  );
  z-index: 1;
}

/* CONTENT LUÔN NẰM TRÊN OVERLAY */
.px-hero > .px-container {
  position: relative;
  z-index: 2;
}
.px-hero h1,
.px-hero .px-lead {
  text-shadow: 0 2px 10px rgba(0,0,0,0.25);
}

@media (max-width: 768px) {
  .px-hero {
    background-image:
      linear-gradient(
        to bottom,
        rgba(15,47,79,0.5),
        rgba(15,47,79,0.75)
      ),
      inherit;
  }
}

.px-eyebrow {
  font-size: 12px;
  letter-spacing: 2px;
  color: #f0b529;
  margin-bottom: 15px;
  display: inline-block;
}

.px-hero h1 {
  font-size: 42px;
  line-height: 1.25;
  margin-bottom: 24px;
}

.px-lead {
  font-size: 18px;
  max-width: 720px;
  margin: auto;
  margin-bottom: 10px; /* thêm dòng này */
  opacity: 0.9;
}

.px-btn-group {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 20px importan;
  flex-wrap: wrap;
}

/* Nút chính */
.px-btn-primary {
  display: inline-block;
  background: #f0b529;
  color: #ffffff;
  padding: 12px 36px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
}

/* Nút call – nền trong, overlay nhẹ */
.px-btn-call {
  display: inline-block;
  background: rgba(255, 255, 255, 0.1); /* overlay nhẹ */
  color: #ffffff;
  padding: 12px 36px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(6px); /* hiệu ứng kính mờ */
  transition: all 0.3s ease;
}

/* Hover hiệu ứng chung */
.px-btn-primary:hover,
.px-btn-call:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* Hover riêng nút call */
.px-btn-call:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: #ffffff;
}

.px-note {
  margin-top: 16px;
  font-size: 13px;
  opacity: 0.7;
}

@media (max-width: 768px) {

  .px-btn-group {
    justify-content: center;
    gap: 10px;
  }

  .px-btn-call {
    padding: 12px 14px; /* nhỏ lại */
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .px-call-text {
    display: none; /* ẩn chữ */
  }

  .px-btn-call i {
    font-size: 18px;
    color: #ffffff;
  }
}

/* ===============================
   PROBLEM
================================ */
.px-pain {
  padding: 100px 0;
}
.px-pain h2 {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 8px; /* khoảng cách với title phụ */
}

.px-pain-lead {
  max-width: 700px;
  margin: 0 auto 48px; /* sát title chính, thoáng với content dưới */
  text-align: center;
  color: #6c757d;
}

.px-pain-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.px-pain-card {
  background: #fff;
  padding: 32px;
  border-radius: 16px;
}

.px-pain-card h3 {
  font-size: 18px;
  margin-bottom: 12px;
  color: #154a81;
}

.px-pain-card p {
  font-size: 15px;
  line-height: 1.6;
  color: #495057;
}

.px-pain-card.highlight {
  grid-column: span 2;
  border-left: 4px solid #f0b529;
  background: #fff;
}

@media (max-width: 768px) {
  .px-pain-grid {
    grid-template-columns: 1fr;
  }

  .px-pain-card.highlight {
    grid-column: span 1;
  }
}

/* CARD 70 / 30 */
.px-pain-card.horizontal {
  display: grid;
  grid-template-columns: 2.2fr 1fr; /* ~70 / 30 */
  gap: 24px;
  align-items: center;
}

/* TEXT */
.px-pain-text h3 {
  margin-bottom: 12px;
}

/* KHUNG ẢNH CỐ ĐỊNH 4:3 */
.px-pain-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 12px;
  background: #e9ecef; /* fallback khi ảnh load chậm */
}

/* ẢNH SCALE & CROP */
.px-pain-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* crop theo khung */
  object-position: center;
  display: block;
}

/* HIGHLIGHT CARD */
.px-pain-card.highlight {
  background: #ffffff;
}

/* MOBILE */
@media (max-width: 768px) {
  .px-pain-card.horizontal {
    grid-template-columns: 1fr;
  }

  .px-pain-thumb {
    margin-top: 16px;
  }
}


/* ===============================
   COMPARE – MATRIX
================================ */
/* COMPARE */
.px-compare { padding: 110px 0; }
.px-compare h2, .px-compare-lead { text-align:center; }
.px-compare-lead { margin-bottom: 70px; color:#6c757d; }

.px-compare-wrap { max-width: 1100px; margin: 0 auto; }

/* YEAR (circle) */
.px-year{
  width:56px; height:56px; border-radius:50%;
  background:#fff; color:#154a81;
  display:flex; flex-direction:column;
  justify-content:center; align-items:center;
  font-weight:600; font-size:14px;
  box-shadow:0 10px 24px rgba(21,74,129,0.18), 0 4px 10px rgba(21,74,129,0.08);
}
.px-year small{ font-size:11px; color:#6c757d; font-weight:500; }

/* ===== DESKTOP LAYOUT ===== */
.px-compare-years{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  justify-items:center;
  gap:24px;
  margin-bottom: 22px;
}

.px-row-title{
  padding: 18px 24px;
  border-radius: 14px;
  font-size: 18px;
  font-weight: 600;
  margin: 18px 0 18px;
}
.px-row-title.common{ background:#fff; color:#1A365D; border-left:4px solid #f0b529; border-right:4px solid #f0b529; }
.px-row-title.poolex{ background:#fff; color:#1A365D; border-left:4px solid #f0b529; border-right:4px solid #f0b529; }

.px-compare-row{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:24px;
}
.px-cell{
  background:#E7EFF8;
  padding:24px;
  border-radius:16px;
  font-size:15px;
  line-height:1.6;
  color:#154A81;
}
.px-cell.poolex{
  background:#E7EFF8;
  box-shadow:0 16px 32px rgba(21,74,129,0.08);
  color:#154A81;
}

/* MOBILE BLOCK hidden on desktop */
.px-compare-mobile{ display:none; }

/* ===== MOBILE TIMELINE ===== */
@media (max-width: 768px){

  /* Ẩn layout desktop */
  .px-compare-years,
  .px-row-title,
  .px-compare-row{ display:none; }

  /* Hiện timeline mobile */
  .px-compare-mobile{ display:block; }

  .px-m-item{
    display:grid;
    grid-template-columns: 72px 1fr;
    gap:16px;
    align-items:start;
    margin-bottom: 26px;
  }

  .px-m-item .px-year{ margin-top: 6px; }

  .px-m-card{
    border-radius: 16px;
    padding: 18px 18px;
    font-size: 15px;
    line-height: 1.6;
    color:#154a81;
    background:#fff;
    box-shadow:0 16px 32px rgba(21,74,129,0.08);
  }

  .px-m-card.poolex{
    background:#ffffff;
    box-shadow:0 16px 32px rgba(21,74,129,0.08);
    color:#154a81;
  }

  .px-m-label{
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 8px;
    color:#1A365D;
  }

  .px-m-card.poolex .px-m-label{
    color:#1A365D;
  }
}
@media (max-width: 768px) {
  .px-m-card {
    grid-column: 2 / -1;
  }
}
@media (max-width: 768px) {

  /* HIGHLIGHT VÀNG CHO POOLEX */
  .px-m-card.poolex {
    position: relative;
    padding-left: 26px; /* chừa chỗ cho highlight */
  }

  .px-m-card.poolex::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 18px;
    bottom: 18px;

    width: 4px;
    border-radius: 4px;
    background: #f0b529;
  }

}



/* ===== PROCESS ===== */
.px-process {
  padding: 90px 0;
  text-align: center;
}

.px-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 40px;
}

/* STEP NUMBER */
.px-step span {
  display: block;
  font-size: 32px;
  font-weight: 700;
  color: #f0b529;
  margin-bottom: 12px;
}

/* ===== MOBILE FIX ===== */
@media (max-width: 768px) {

  /* Chuyển process về 1 cột */
  .px-grid-3 {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /* Mỗi step thành layout ngang: số | nội dung */
  .px-step {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 16px;
    text-align: left;
    align-items: flex-start;
  }

  .px-step span {
    margin-bottom: 0;
    font-size: 26px;
    line-height: 1;
  }
}


/* ===============================
   FIT
================================ */
.px-fit {
  background: #f9fafc;
  padding: 90px 0;
}

/* GRID */
.px-fit-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

/* CARD CHUNG */
.px-fit-card {
  background: #ffffff;
  padding: 36px 32px;
  border-radius: 20px;
  box-shadow: 0 16px 32px rgba(21,74,129,0.08);
}

.px-fit-card h3 {
  font-size: 20px;
  margin-bottom: 20px;
  color: #154a81;
}

/* LIST */
.px-fit-card ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.px-fit-card li {
  margin-bottom: 14px;
  font-size: 15px;
  line-height: 1.6;
  color: #495057;
}

/* ICON LIST */
.px-fit-card.positive li::before {
  content: "✓";
  margin-right: 10px;
  color: #154a81;
  font-weight: 700;
}

.px-fit-card.negative li::before {
  content: "–";
  margin-right: 10px;
  color: #adb5bd;
}

/* NGOẶC VÀNG ÔM CẢ KHỐI */
.px-block-bracket {
  position: relative;
}

.px-block-bracket::before {
  content: "";
  position: absolute;
  left: 0;
  top: 24px;
  bottom: 24px;
  width: 4px;
  border-radius: 4px;
  background: #f0b529;
}

/* ===============================
   MOBILE
================================ */
@media (max-width: 768px) {
  .px-fit-grid {
    grid-template-columns: 1fr;
  }

  .px-fit-card {
    padding: 28px 24px;
  }
}


/* ===============================
   FORM
================================ */

.px-form-ui{
  padding: 110px 0;
  background: linear-gradient(
    180deg,
    #f9fafc 0%,
    #ffffff 100%
  );
}

/* Head */
.px-form-head{
  text-align: center;
  max-width: 720px;
  margin: 0 auto 48px;
}
.px-form-head h2{
  font-size: 32px;
  color: #154a81;
  margin-bottom: 12px;
}
.px-form-head p{
  color: #6c757d;
  font-size: 16px;
  line-height: 1.6;
}

/* Card */
.px-form-card{
  max-width: 760px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 20px;
  padding: 36px 40px;
  box-shadow:
    0 20px 40px rgba(21,74,129,0.08),
    0 6px 16px rgba(21,74,129,0.05);
}

/* ===== CF7 INPUT ===== */
.px-form-ui .wpcf7 input[type="text"],
.px-form-ui .wpcf7 input[type="email"],
.px-form-ui .wpcf7 input[type="tel"],
.px-form-ui .wpcf7 select,
.px-form-ui .wpcf7 textarea{
  width: 100%;
  border-radius: 12px;
  border: 1px solid #c7d4e6;
  padding: 12px 14px;
  font-size: 15px;
  color: #1a365d;
  background: #fff;
  box-sizing: border-box;
}

.px-form-ui .wpcf7 textarea{
  min-height: 160px;
  resize: vertical;
}

/* Label */
.px-form-ui .wpcf7 label{
  display: block;
  font-weight: 600;
  color: #154a81;
  margin-bottom: 6px;
  font-size: 14px;
}

/* Submit */
.px-form-ui .wpcf7-submit{
  appearance: none;
  border: none;
  border-radius: 14px;
  background: #154a81;
  color: #ffffff;
  font-weight: 700;
  padding: 14px 28px;
  font-size: 15px;
  cursor: pointer;
  transition: all .25s ease;
}

.px-form-ui .wpcf7-submit:hover{
  background: #f0b529;
  color: #1a365d;
}

/* Validation */
.px-form-ui .wpcf7-not-valid-tip{
  font-size: 13px;
  color: #d9534f;
  margin-top: 4px;
}

/* Note */
.px-form-note{
  margin-top: 18px;
  text-align: center;
  font-size: 13px;
  color: #6c757d;
}

/* ===============================
   RESPONSIVE
================================ */
@media (max-width: 768px){
  .px-form-ui{
    padding: 80px 0;
  }

  .px-form-card{
    padding: 28px 22px;
  }

  .px-form-head h2{
    font-size: 26px;
  }
}

/* ===============================
   FORM – BREATHING SPACE
================================ */

/* 1️⃣ Giãn khoảng cách giữa các field */
.px-form-ui .wpcf7 form p,
.px-form-ui .wpcf7 .wpcf7-form-control-wrap {
  margin-bottom: 18px;
}

/* 2️⃣ Label có khoảng thở rõ ràng hơn */
.px-form-ui .wpcf7 label {
  margin-bottom: 8px;
  line-height: 1.4;
}

/* 3️⃣ Input không bị “dính” vào nhau */
.px-form-ui .wpcf7 input,
.px-form-ui .wpcf7 select,
.px-form-ui .wpcf7 textarea {
  margin-top: 2px;
}

/* 4️⃣ Textarea thở hơn (quan trọng với tư vấn) */
.px-form-ui .wpcf7 textarea {
  margin-top: 4px;
}

/* 5️⃣ Khoảng thở trước nút submit */
.px-form-ui .wpcf7-submit {
  margin-top: 10px;
}

/* 6️⃣ Giãn toàn khối form so với heading */
.px-form-card {
  margin-top: 40px;
}

/* 7️⃣ Khoảng thở dưới form */
.px-form-note {
  margin-top: 22px;
  line-height: 1.6;
}

/* ===============================
   MOBILE – GIỮ THOÁNG NHƯNG GỌN
================================ */
@media (max-width: 768px) {

  .px-form-ui .wpcf7 form p,
  .px-form-ui .wpcf7 .wpcf7-form-control-wrap {
    margin-bottom: 14px;
  }

  .px-form-card {
    margin-top: 28px;
  }

  .px-form-note {
    margin-top: 16px;
    font-size: 12.5px;
  }
}
/* ===============================
   FIX SCROLL ANCHOR (NO JS)
================================ */
#tu-van {
  scroll-margin-top: 120px;
}
@media (max-width: 768px) {
  #tu-van {
    scroll-margin-top: 90px;
  }
}

/* ===============================
   GLOBAL SOFT ANIMATION
================================ */
@keyframes px-fade-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Tắt animation nếu user không thích chuyển động */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

.px-hero .px-container > * {
  animation: px-fade-up 0.9s ease-out both;
}

.px-hero .px-eyebrow { animation-delay: .1s; }
.px-hero h1          { animation-delay: .2s; }
.px-hero .px-lead    { animation-delay: .3s; }
.px-hero .px-btn-primary { animation-delay: .45s; }
.px-hero .px-note    { animation-delay: .55s; }

.px-pain,
.px-compare,
.px-process,
.px-fit,
.px-form-ui {
  animation: px-fade-up 0.8s ease-out both;
}

.px-pain-card {
  animation: px-fade-up 0.7s ease-out both;
}
.px-pain-card:nth-child(1){ animation-delay:.05s }
.px-pain-card:nth-child(2){ animation-delay:.1s }
.px-pain-card:nth-child(3){ animation-delay:.15s }
.px-pain-card:nth-child(4){ animation-delay:.2s }
.px-pain-card:nth-child(5){ animation-delay:.25s }

.px-cell {
  animation: px-fade-up 0.6s ease-out both;
}

.px-step {
  animation: px-fade-up 0.6s ease-out both;
}
.px-step:nth-child(1){ animation-delay:.1s }
.px-step:nth-child(2){ animation-delay:.2s }
.px-step:nth-child(3){ animation-delay:.3s }

.px-form-head,
.px-form-card,
.px-form-note {
  animation: px-fade-up 0.8s ease-out both;
}

.px-form-head { animation-delay: .1s }
.px-form-card { animation-delay: .25s }
.px-form-note { animation-delay: .4s }

.px-pain-card,
.px-cell,
.px-fit-card,
.px-form-card {
  transition: transform .25s ease, box-shadow .25s ease;
}

.px-pain-card:hover,
.px-cell:hover,
.px-fit-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px rgba(21,74,129,0.12);
}
.px-btn-primary {
  transition: all .25s ease;
}

.px-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(240,181,41,0.35);
}

/* THANK YOU MESSAGE */
#px-thankyou-message {
    max-width: 720px;
    margin: 0 auto;
    background: rgba(255,255,255,0.06);
    padding: 48px 36px;
    border-radius: 20px;
    text-align: center;
}

#px-thankyou-message h2 {
    color: #154a81;
    font-size: 28px;
    margin-bottom: 20px;
}

#px-thankyou-message p {
    color: #708296;
    font-size: 16px;
    line-height: 1.6;
}
@media (max-width: 768px) {

    #px-thankyou-message {
        margin: 0 16px;              /* chừa lề hai bên */
        padding: 32px 22px;          /* giảm padding cho gọn */
        border-radius: 16px;
    }

    #px-thankyou-message h2 {
        font-size: 22px;             /* tiêu đề vừa mắt mobile */
        line-height: 1.3;
        margin-bottom: 16px;
    }

    #px-thankyou-message p {
        font-size: 15px;
        line-height: 1.6;
    }

}

/* Anchor link xác nhận niềm tin trên landing */
.px-landing-readmore,
.px-landing-note {
  margin: 16px 0 24px;
}

.px-landing-readmore p,
.px-landing-note p {
  font-size: 15px;
  line-height: 1.6;
  color: #4a5568;
}

.px-landing-readmore a,
.px-landing-note a {
  color: #154a81;
  text-decoration: none;
}

.px-landing-readmore a:hover,
.px-landing-note a:hover {
  text-decoration: underline;
}

/* ===== Landing spacing – Poolex ===== */
#px-landing section {
  padding: 48px 0;
}

#px-landing section > * + * {
  margin-top: 20px;
}

#px-landing p {
  margin-bottom: 14px;
}

#px-landing .px-insight {
  margin: 20px 0;
}

#px-landing .px-landing-note {
  margin-bottom: 16px;
}

@media (max-width: 768px) {
  #px-landing section {
    padding: 36px 0;
  }

  #px-landing section > * + * {
    margin-top: 16px;
  }

  #px-landing p {
    margin-bottom: 12px;
  }
}
#px-landing .px-landing-note {
  margin-bottom: 16px;
}

#px-landing form {
  margin-top: 12px;
}