/** =======================================================
    HOME PAGE CSS – TTC BRAND VERSION
    Đổi toàn bộ xanh lá (#55AC39 / #178040)
    thành gradient thương hiệu TTC
======================================================= **/

/* ---------- BUTTON HOME ---------- */
.btn-home.primary {
  margin: 0;
  border: 0;
  height: 48px;
  padding-left: 30px;
  padding-right: 30px;
  background: var(--brand-grad) !important;
}

.btn-home.primary span {
  font-size: 16px;
  font-weight: 700;
  line-height: 48px;
  color: #fff;
}

/* ---------- SECTION HEADINGS ---------- */
.block__element_head h4 {
  color: var(--brand-1); /* Xanh tím thương hiệu */
  font-size: 19px;
  font-weight: 500;
  line-height: 44px;
  letter-spacing: 0.07em;
  text-transform: capitalize;
}

.block__element_head h2.heading {
  color: var(--brand-1);
  font-size: 36px;
  font-weight: 700;
  line-height: 44px;
  text-transform: uppercase;
}

/* ---------- ICON BOX (LỢI ÍCH, TẠI SAO CHỌN, ETC.) ---------- */
.rt-section-necessity .icon-box h4 {
  color: var(--brand-1);
  font-size: 18px;
  font-weight: 600;
  line-height: 30px;
  text-transform: capitalize;
}

/* ---------- BOX BADGE (PROCEDURE SECTION) ---------- */
.rt-section-procedure .box.box-badge .box-text {
  bottom: 0;
  padding-top: 15px;
  padding-bottom: 15px;
  background: linear-gradient(
    270deg,
    rgba(241, 40, 13, 0.8) 0%,  /* cam đỏ */
    rgba(2, 1, 101, 0.8) 100%   /* xanh tím */
  ) !important;
}

.rt-section-procedure .box.box-badge:hover .box-text {
  background: linear-gradient(
    270deg,
    rgba(241, 40, 13, 1) 0%,    /* cam đỏ */
    rgba(2, 1, 101, 1) 100%     /* xanh tím */
  ) !important;
}

/* ---------- BOX TITLE TREND / NEWS ---------- */
.rt-section-trend .box.box-normal h5.post-title a,
.rt-section-trend .box.box-vertical h5.post-title a,
.rt-section-news .testimonial-text h4 {
  color: var(--brand-1);
}

.rt-section-trend .box.box-vertical h5.post-title a:hover,
.rt-section-trend .box.box-normal h5.post-title a:hover,
.rt-section-news .testimonial-text h4:hover {
  color: var(--brand-2);
}

/* ---------- TREND TITLE BAR ---------- */
.rt-section-trend .block__element_head h2.heading::before {
  content: "";
  width: 5px;
  height: 32px;
  background: var(--brand-grad) !important;
  border-radius: 3px;
  position: absolute;
  top: 2px;
  left: 0;
}

/* ---------- BANNER / INTRO LABEL ---------- */
.rt-section-banner .block__element_head h4,
.rt-section-intro .block__element_head h4 {
  color: var(--brand-2);
  background: rgba(241, 40, 13, 0.08); /* nhạt hơn, giữ bố cục */
  border-radius: 50px;
  padding-left: 20px;
  padding-right: 20px;
  width: max-content;
}

/* ---------- FORM / WHY SECTION ---------- */
.rt-section-why .bg-form > .col-inner::before {
  content: "";
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  background: rgba(2, 1, 101, 1);
  border: 1px dashed #fff;
  border-radius: 20px;
  position: absolute;
  top: 10px;
  left: 10px;
}

/* ---------- GLOBAL BUTTON OVERRIDE ---------- */
a.button,
a.more-link,
.button,
.more-link,
input[type="submit"],
.ux-button {
  background: var(--brand-grad) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  font-weight: 600;
  padding: 10px 22px !important;
  transition: all 0.25s ease;
  text-decoration: none !important;
  display: inline-block;
}

a.button:hover,
a.more-link:hover,
.button:hover,
.more-link:hover,
input[type="submit"]:hover,
.ux-button:hover {
  opacity: 0.9 !important;
  transform: translateY(-1px);
}

/* Outline buttons */
a.button.is-outline,
.button.is-outline {
  background: transparent !important;
  color: var(--brand-2) !important;
  border: 2px solid var(--brand-2) !important;
}
a.button.is-outline:hover,
.button.is-outline:hover {
  background: var(--brand-grad) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* Inline style case */
a.button[style],
.button[style] {
  background: var(--brand-grad) !important;
  color: #fff !important;
  border-color: transparent !important;
}