/* Phần mềm quản lý theo mô hình kinh doanh của bạn */

// .hero-bg {
//     position: relative;
//     background: url('../images/pos/banner3.png') no-repeat center;
//     background-size: cover;
//     min-height: 500px;
//     display: flex;
//     align-items: center;
// }

section {
  padding: 64px 0;
}

.title-wrapper {
  margin-bottom: 3rem;
}

.hero-bg {
  background: url("../images/pos/banner3.png") no-repeat center;
  background-size: cover;
  display: flex;
  align-items: center;
}

/* đảm bảo content nằm trên (trong trường hợp có element khác) */
.hero-bg .container {
  position: relative;
  z-index: 1;
}

/* HERO BUTTON STYLE */
.hero-section .btn {
  border-radius: 10px;
  font-weight: 600;
  transition: all 0.3s ease;
}

/* BUTTON CHÍNH (Đăng ký demo) */
.hero-section .btn-success {
  box-shadow: 0 8px 25px rgba(34, 197, 94, 0.35);
  border: none;
}

.hero-section .btn-success:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(34, 197, 94, 0.45);
}

.btn-demo {
  background: #2f855a; /* xanh đậm */
  color: #fff;

  font-weight: 600;
  font-size: 16px;

  padding: 12px 28px;
  border-radius: 10px;

  // border: 2px solid #e6f4ea; /* viền sáng nhẹ */

  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.05),
    0 6px 12px rgba(47, 133, 90, 0.25);

  transition: all 0.25s ease;
}

/* HOVER */
.btn-demo:hover {
  color: #fff;
  background: #276749; /* xanh đậm hơn */
  transform: translateY(-2px);

  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.08),
    0 10px 20px rgba(47, 133, 90, 0.35);
}

/* CLICK */
.btn-demo:active {
  transform: translateY(0);

  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.05),
    0 4px 10px rgba(47, 133, 90, 0.2);
}

/* BUTTON PHỤ (Xem cách vận hành) */
.hero-section .btn-outline-dark {
  border: none !important;
  background: #ffffff;
  color: #222;

  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.hero-section .btn-outline-dark:hover {
  background: #111;
  color: #fff;

  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

/* Phần mềm cũ không theo kịp mô hình của bạn? */
/* WRAPPER để icon nổi */
.pain-wrapper {
  position: relative;
  padding-top: 40px; /* tạo khoảng cho icon nổi */
}

/* Card đồng đều chiều cao */
.pain-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;

  background: #fff;
  border-radius: 16px;
  transition: all 0.3s ease;

  border: 1px solid #f1f1f1;

  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* Hover nhẹ cho feel SaaS */
.pain-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

/* ICON NỔI */
.pain-emoji {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 64px;
  height: 64px;
  border-radius: 50%;

  background: none; /* vàng nhạt giống ảnh */
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 40px;

  box-shadow: none;
}

/* TEXT */
.pain-card h4 {
  font-size: 18px;
  margin-top: 10px;
  margin-bottom: 8px;
}

/* Text gọn gàng */
.pain-card p {
  font-size: 14px;
}

// .pain-emoji {
//     font-size: 32px;
//     width: 64px;
//     height: 64px;
//     margin: 0 auto;
//     border-radius: 50%;
//     background: transparent;
//     display: flex;
//     align-items: center;
//     justify-content: center;
// }

/* Soflex giúp bạn vận hành trơn tru ở mọi khâu */
.feature-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;

  background: #fff;
  border-radius: 16px;
  transition: all 0.3s ease;

  border: 1px solid #f1f1f1;

  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* Hover effect xịn hơn */
.feature-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

/* Icon style SaaS */
.feature-icon {
  font-size: 32px;
  width: 64px;
  height: 64px;
  margin: 0 auto;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;
  background: #f3f6ff;

  transition: all 0.3s ease;
}

.feature-image {
  width: 100%;
  display: flex;
  justify-content: center;

  & img {
    width: 90%;
    max-width: 200px;
    height: auto;

    /* Webkit (Chrome, Safari) */
    -webkit-mask-image:
      linear-gradient(to top, transparent, black 15%),
      linear-gradient(to bottom, transparent, black 15%),
      linear-gradient(to left, transparent, black 15%),
      linear-gradient(to right, transparent, black 15%);

    -webkit-mask-composite: destination-in;

    /* Standard */
    mask-image:
      linear-gradient(to top, transparent, black 15%),
      linear-gradient(to bottom, transparent, black 15%),
      linear-gradient(to left, transparent, black 15%),
      linear-gradient(to right, transparent, black 15%);

    mask-composite: intersect;

    transition: all 0.4s ease;
  }
}

/* Hover icon nhẹ */
.feature-card:hover .feature-icon {
  background: #e6ecff;

  transform: scale(1.1);
}

/* Title */
.feature-card h5 {
  font-size: 18px;
  margin-bottom: 8px;
}

/* Text */
.feature-card p {
  font-size: 14px;
}

/* Vì sao Soflex khác biệt? */

/* SECTION */
.why-section {
  background: #f8fbff;
}

/* TITLE */
.why-title {
  font-weight: 700;
  color: #12315b;
}

.why-title span {
  color: #39b54a;
  font-style: italic;
}

.why-sub {
  margin-top: 12px;
  font-size: 16px;
  color: #5b7192;
}

/* CARD */
.why-card {
  padding: 14px;
  border-radius: 20px;
  border: 1px solid #e6eef5;
  background: #fff;
  box-shadow: 0 10px 24px rgba(18, 49, 91, 0.05);
  height: 100%;
  transition: all 0.3s ease;
}

.why-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(18, 49, 91, 0.08);
}

/* ICON WRAPPER */
// .why-icon-wrap {
//   width: 56px;
//   height: 56px;
//   min-width: 56px;
//   border-radius: 16px;
//   background: linear-gradient(
//     135deg,
//     rgba(57, 181, 74, 0.1),
//     rgba(31, 98, 199, 0.06)
//   );
//   border: 1px solid rgba(216, 229, 242, 0.9);

//   display: flex;
//   align-items: center;
//   justify-content: center;
// }

.why-icon-wrap img {
  width: 56px;
  height: 56px;
}

/* TITLE */
.why-card h5 {
  margin-top: 16px;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
}

/* BODY */
.why-card p {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.7;
}

/* Header ngang */
.why-head {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  gap: 10px;

  min-height: 64px;
}

.why-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  border-radius: 16px;
  transition: all 0.3s ease;
  border: 1px solid #f1f1f1;
}

/* Hover nâng cấp */
.why-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

/* Icon check style SaaS */
.why-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;
  font-size: 20px;

  background: #eafaf1;
  color: #22c55e;
}

/* Hover icon */
.why-card:hover .why-icon {
  transform: scale(1.1);
  background: #dff7ea;
}

/* Title */
.why-head h5 {
  margin: 0; 
  line-height: 1.3;
  font-size: 18px;
}

/* Text */
.why-card p {
  font-size: 14px;
  text-align: center;
}

/* ================= PHÙ HỢP VỚI MỌI MÔ HÌNH ================= */
.model-card {
  height: 100%;
  transition: all 0.3s ease;
  border-radius: 16px;
  overflow: hidden;
}

.model-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

.model-card img {
  transition: transform 0.4s ease;
}

.model-card:hover img {
  transform: scale(1.05);
}

.model-card h5 {
  font-size: 18px;
  margin-bottom: 8px;
}

/* ================= KHÁCH HÀNG NÓI GÌ? ================= */
.main-title {
  font-size: 32px;
  font-weight: 700;
}

/* BOX LEFT + RIGHT */
.testimonial-box {
  background: #f8f9fb;
  border-radius: 16px;
  padding: 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  transition: all 0.3s ease;

  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.testimonial-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.testimonial-box h6 {
  font-weight: 600;
}

.testimonial-box small {
  color: #888;
}

.testimonial-box p {
  font-size: 14px;
  color: #555;
  margin: 15px 0;
}

/* CENTER CARD */
.testimonial-center {
  background: #fff;
  border-radius: 16px;
  overflow: hidden; /* QUAN TRỌNG để bo góc cả block */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.image-group {
  display: flex;
}

.image-group img {
  width: 50%;
  height: auto;
  object-fit: cover;
}

.brand-bar {
  display: flex;
  background: #fff;
}

.brand-bar .brand-item {
  flex: 1;
  text-align: center;
  padding: 12px;
  font-weight: 600;
  font-size: 14px;
}

.brand-item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.brand-item img {
    max-height: 40px;
    max-width: 100%;   
    object-fit: contain;
    opacity: 0.9;
}

/* ================= VIDEO ================= */

.video-card {
  max-width: 900px; 
  margin: 0 auto; 

  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #f1f1f1;

  background: #fff;

  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.04),
    0 8px 20px rgba(0, 0, 0, 0.06);

  // transition: all 0.3s ease;
}

/* Hover đồng bộ */
.video-card:hover {
  // transform: translateY(-6px) scale(1.01);

  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.08),
    0 20px 60px rgba(0, 0, 0, 0.12);
}

/* Responsive iframe */
.video-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  border: none;
}

/* ================= FAQ ================= */

.faq-wrapper {
  max-width: 800px;
  margin: 0 auto;
}

.faq-item {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #f1f1f1;

  margin-bottom: 16px;

  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.04),
    0 8px 20px rgba(0, 0, 0, 0.06);

  transition: all 0.3s ease;
}

.faq-item:hover {
  transform: translateY(-3px);
}

/* Question */
.faq-question {
  padding: 18px 20px;
  font-weight: 600;
  cursor: pointer;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Icon */
.faq-icon {
  font-size: 20px;
  transition: 0.3s;
}

/* Answer */
.faq-answer {
  max-height: 0;
  overflow: hidden;

  padding: 0 20px;

  font-size: 14px;
  color: #555;

  transition: all 0.3s ease;
}

/* Active */
.faq-item.active .faq-answer {
  max-height: 200px;
  padding: 0 20px 20px;
}

.faq-item.active .faq-icon {
  transform: rotate(45deg);
}

/* =========================================================
   SOFLEX LANDING OVERRIDE
   ========================================================= */

.card-title {
  color: #00204e;
}

/* ===== CARD SYSTEM (ĐỒNG BỘ TOÀN BỘ) ===== */
.pain-card,
.feature-card,
.why-card,
.model-card,
.testimonial-box {
  background: #fff !important;
  border-radius: 16px;
  border: 1px solid #f1f1f1;

  /* Shadow chuẩn SaaS (nhẹ + sạch) */
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.04),
    0 8px 20px rgba(0, 0, 0, 0.06);

  transition: all 0.3s ease;
}

/* Hover đồng bộ */
.pain-card:hover,
.feature-card:hover,
.why-card:hover,
.model-card:hover,
.testimonial-box:hover {
  transform: translateY(-6px) scale(1.01);

  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.08),
    0 20px 60px rgba(0, 0, 0, 0.12);
}

/* ===== FIX TESTIMONIAL (nền xám) ===== */
.testimonial-box {
  background: #fff !important;
}

/* ===== ICON CONSISTENT ===== */
// .pain-emoji,
.feature-icon {
  width: 64px;
  height: 64px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;
}

/* ===== WHY ICON ===== */
.why-icon {
  transition: all 0.3s ease;
}

.why-card:hover .why-icon {
  transform: scale(1.1);
}

/* ===== MODEL CARD FIX ===== */
.model-card {
  // padding: 16px;
  background: linear-gradient(135deg, #002d4b 0%, #004f56 100%) !important;
}

.model-card img {
  border-radius: 12px 12px 0 0;
}

/* ===== TEXT CONSISTENT ===== */
.pain-card p,
.feature-card p,
.why-card p,
.model-card p,
.testimonial-box p {
  font-size: 14px;
}

/* ===== BUTTON ROW FIX ===== */
.btn-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.soflex-final-cta {
  position: relative;
  padding: 72px 0 64px;
  background: linear-gradient(180deg, #f8fbff 0%, #f3f8fc 100%);
  overflow: hidden;
}

.soflex-final-cta__panel {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  padding: 48px 40px;
  border-radius: 32px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.94),
    rgba(244, 249, 253, 0.98)
  );
  border: 1px solid rgba(230, 238, 245, 1);
  box-shadow:
    0 20px 48px rgba(18, 49, 91, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  text-align: center;
  overflow: hidden;
}

.soflex-final-cta__glow {
  position: absolute;
  right: -60px;
  bottom: -50px;
  width: 220px;
  height: 220px;
  background: radial-gradient(
    circle,
    rgba(57, 181, 74, 0.16) 0%,
    rgba(57, 181, 74, 0) 68%
  );
  pointer-events: none;
}

.soflex-final-cta__content {
  position: relative;
  z-index: 1;
}

.soflex-final-cta__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(57, 181, 74, 0.10);
  border: 1px solid rgba(57, 181, 74, 0.14);
  color: #2f8f57;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.soflex-final-cta__eyebrow-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #39b54a;
  flex: 0 0 auto;
}

.soflex-final-cta__title {
  margin: 0px auto;
  max-width: 760px;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: #12315b;
}

.soflex-final-cta__desc {
  margin: 16px auto 0;
  max-width: 720px;
  font-size: 18px;
  color: #5b7192;
}

.soflex-final-cta__actions {
  margin-top: 28px;
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.soflex-final-cta__btn {
  min-width: 220px;
  height: 52px;
  padding: 0 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.soflex-final-cta__btn--primary {
  color: #fff;
  background: linear-gradient(135deg, #39b54a, #1c7c54);
  box-shadow: 0 12px 24px rgba(57, 181, 74, 0.24);
}

.soflex-final-cta__btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 28px rgba(57, 181, 74, 0.28);
}

.soflex-final-cta__btn--secondary {
  color: #12315b;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(216, 229, 242, 1);
}

.soflex-final-cta__btn--secondary:hover {
  transform: translateY(-1px);
  border-color: rgba(57, 181, 74, 0.22);
  box-shadow: 0 10px 22px rgba(18, 49, 91, 0.06);
}

.soflex-final-cta__trust {
  margin-top: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  color: #5b7192;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 500;
}

.soflex-final-cta__trust .dot {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: rgba(18, 49, 91, 0.28);
  flex: 0 0 auto;
}

/* ===== TABLET ===== */
@media (max-width: 992px) {
  .font-size-48 {
    font-size: 36px !important;
  }

  .font-size-32 {
    font-size: 26px !important;
  }

  /* spacing card */
  .row.g-4 {
    gap: 20px 0;
  }

  .video-card {
    max-width: 700px;
  }

  .soflex-final-cta {
    padding: 56px 0 52px;
  }

  .soflex-final-cta__panel {
    padding: 40px 28px;
    border-radius: 28px;
  }

  .soflex-final-cta__title {
    max-width: 680px;
  }

  .soflex-final-cta__desc {
    font-size: 17px;
  }
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
  section {
    padding: 48px 0;
  }
  /* HERO */
  .hero-bg {
    min-height: auto;
    padding: 60px 0;
    text-align: center;
  }

  .font-size-48 {
    font-size: 30px !important;
    line-height: 1.3;
  }

  .font-size-32 {
    font-size: 22px !important;
  }

  .font-size-18 {
    font-size: 16px !important;
  }

  /* BUTTON */
  .btn-row {
    flex-direction: column;
    align-items: stretch;
  }

  .btn-row .btn {
    width: 100%;
  }

  /* CARD PADDING */
  .pain-card,
  .feature-card,
//   .why-card,
  .testimonial-box {
    padding: 20px !important;
  }

  /* FIX TEXT ALIGN */
  .why-card p {
    text-align: center;
  }

  .video-card {
    max-width: 100%;
  }

  .soflex-final-cta {
    padding: 44px 0 44px;
  }

  .soflex-final-cta__panel {
    padding: 28px 18px;
    border-radius: 24px;
  }

  .soflex-final-cta__desc {
    font-size: 15px;
  }

  .soflex-final-cta__actions {
    gap: 10px;
  }

  .soflex-final-cta__btn {
    width: 100%;
    min-width: 0;
    height: 48px;
    font-size: 15px;
  }

  .soflex-final-cta__trust {
    margin-top: 18px;
    font-size: 13px;
    gap: 8px;
  }
}

/* ===== SMALL MOBILE ===== */
@media (max-width: 480px) {
  .hero-bg {
    min-height: auto;
    padding: 48px 0;
  }

  .title-wrapper {
    margin-bottom: 2rem;
  }

  .font-size-48 {
    font-size: 26px !important;
  }

  .font-size-32 {
    font-size: 20px !important;
  }

  .video-card {
    max-width: 100%;
  }
}