/* =========================
   HPO - BIEN BAO TABS
========================= */
.singleImg{
width: 50% !important;
};
#hpo-sign-page,
#hpo-sign-page * {
  box-sizing: border-box;
}

#hpo-sign-page img {
  max-width: 100%;
}

/* Ẩn toàn bộ pane, chỉ hiện pane active */
#hpo-sign-page [data-hpo-pane] {
  display: none !important;
}

#hpo-sign-page [data-hpo-pane].is-active {
  display: block !important;
}

/* =========================================
   (1) Sticky KHUNG #1 (cả sidebar wrap)
========================================= */
#hpo-sign-sidebar-wrap {
  position: sticky;
  top: var(--hpo-top, 120px);
  align-self: flex-start;
  z-index: 30;
}

/* tránh double-sticky */
#hpo-sign-sidebar {
  position: relative;
  top: auto;
}

/* Fix wpautop bọc <p> quanh <a> */
#hpo-sign-sidebar p {
  margin: 0 !important;
  padding: 0 !important;
}

#hpo-sign-sidebar p:empty {
  display: none !important;
}

#hpo-sign-sidebar p > a {
  display: flex !important;
  width: 100% !important;
}

/* =========================================
   (2) Khung #2: Bỏ khoảng trống trong thumbnail
   - Nếu icon vẫn có viền trắng: tăng scale 1.18 -> 1.22/1.25
========================================= */
#hpo-sign-tabs a span img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transform: scale(1.18);
  transform-origin: center;
}

/* =========================================
   (3) Bỏ hình khung #3 (icon trái trong header content)
========================================= */
#hpo-sign-page .hpo-pane-icon {
  display: none !important;
}

/* =========================================
   (4) Khung #4: 2 dòng tiêu đề canh giữa
========================================= */
#hpo-sign-page .hpo-pane-head {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 6px 0 2px;
}

#hpo-sign-page .hpo-pane-text {
  max-width: 760px;
}

#hpo-sign-page .hpo-pane-title {
  font-size: 30px;
  font-weight: 950;
  line-height: 1.15;
  color: #2925f8;
}

#hpo-sign-page .hpo-pane-subtitle {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.55;
  color: #64748b;
}

/* =========================================
   Spacing nội dung chi tiết cho đẹp
========================================= */
#hpo-sign-page .hpo-sign-detail {
  margin-top: 14px;
  line-height: 1.8;
  color: #334155;
  font-weight: 650;
}

#hpo-sign-page .hpo-sign-detail ul {
  padding-left: 18px;
  margin: 0;
}

#hpo-sign-page .hpo-sign-detail ul + ul {
  margin-top: 12px;
}

#hpo-sign-page .hpo-sign-detail ul li {
  margin: 8px 0;
}

#hpo-sign-page .hpo-sign-detail .hpo-li-sub {
  margin-left: 18px;
  list-style: circle;
}

/* Ảnh nội dung: canh giữa + size */
#hpo-sign-page .hpo-sign-img {
  margin: 14px 0 16px;
  display: flex;
  justify-content: center;
}

#hpo-sign-page .hpo-sign-img img {
  width: 70%;
  max-width: 520px;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  display: block;
}

/* =========================================
   Mobile
========================================= */
@media (max-width: 900px) {
  #hpo-sign-layout {
    display: block !important;
  }

  #hpo-sign-sidebar-wrap {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-bottom: 14px !important;
  }

  #hpo-sign-page .hpo-sign-img img {
    width: 92%;
    max-width: 560px;
  }

  /* crop thumbnail nhẹ hơn trên mobile */
  #hpo-sign-tabs a span img {
    transform: scale(1.12);
  }
}