/* ==========================================
   3S ERP - HEADER
   ========================================== */

.erp-header {
  --header-blue: #005e9c;
  --header-navy: #074b7f;
  --header-text: #263b52;
  --header-height: 72px;

  position: sticky;
  top: 0;
  z-index: 9990;
  width: 100%;
  height: var(--header-height);

  background: #fff;
  border-bottom: 1px solid #e9eef4;
  font-family: 'Inter', sans-serif;

  transition: box-shadow .25s ease;
}

.erp-header.is-scrolled {
  box-shadow: 0 5px 20px rgba(7, 75, 127, .08);
}

/* ==========================================
   CONTAINER
   ========================================== */

.erp-header__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;

  width: 100%;
  height: 100%;
  margin: 0 auto;
}

/* ==========================================
   LOGO
   ========================================== */

.erp-header__logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  line-height: 1;
}

.erp-header__logo img {
  display: block;
  width: 155px;
  height: auto;
  max-height: 58px;
  object-fit: contain;
}

/* ==========================================
   NAVIGATION
   ========================================== */

.erp-header__nav {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex: 1 1 auto;
  align-self: stretch;
  min-width: 0;
}

.erp-header__menu {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: clamp(20px, 2vw, 32px);

  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.erp-header__menu li {
  display: flex;
  align-items: stretch;
  height: 100%;
  margin: 0;
  padding: 0;
}

/* MENU LINK */

.erp-header__link {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;

  padding: 0;
  color: var(--header-text);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  text-decoration: none;

  transition: color .2s ease;
}

/* INDICATOR - SÁT ĐÁY HEADER */

.erp-header__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;

  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--header-blue);

  transform: scaleX(0);
  transform-origin: center;
  transition: transform .25s ease;
}

.erp-header__link:hover,
.erp-header__link.is-active {
  color: var(--header-blue);
}

.erp-header__link:hover::after,
.erp-header__link.is-active::after {
  transform: scaleX(1);
}

/* ==========================================
   RIGHT ACTIONS / CTA
   ========================================== */

.erp-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.erp-header .erp-header__cta.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: auto;
  height: 44px;
  min-height: 44px;
  padding: 2px;

  border: none;
  border-radius: 100px;

  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;

  box-shadow: 0 4px 12px rgba(0, 94, 156, .12);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.erp-header .erp-header__cta.btn .btn__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 20px;
}

.erp-header .erp-header__cta.btn span {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

.erp-header .erp-header__cta.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 94, 156, .18);
}

/* ==========================================
   MOBILE MENU TOGGLE
   ========================================== */

.erp-header__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;

  width: 42px;
  height: 42px;
  padding: 8px;

  border: 1px solid #e2eaf2;
  border-radius: 9px;
  background: #f5f9fc;
  cursor: pointer;
}

.erp-header__toggle span {
  display: block;
  width: 21px;
  height: 2px;
  border-radius: 2px;
  background: var(--header-navy);

  transition:
    transform .25s ease,
    opacity .2s ease;
}

.erp-header__toggle.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.erp-header__toggle.is-open span:nth-child(2) {
  opacity: 0;
}

.erp-header__toggle.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================
   SCROLL OFFSET
   ========================================== */

#modules,
#major,
#usp,
#testo,
#footer {
  scroll-margin-top: 72px;
}

/* ==========================================
   SMALL DESKTOP
   ========================================== */

@media (min-width: 1101px) and (max-width: 1280px) {

  .erp-header__container {
    padding: 0 24px;
    gap: 16px;
  }

  .erp-header__logo img {
    width: 135px;
  }

  .erp-header__menu {
    gap: 18px;
  }

  .erp-header__link {
    font-size: 14px;
  }

  .erp-header .erp-header__cta.btn .btn__inner {
    padding: 0 14px;
  }

  .erp-header .erp-header__cta.btn span {
    font-size: 12px;
  }
}

/* ==========================================
   TABLET / MOBILE NAVIGATION
   ========================================== */

@media (max-width: 1100px) {

  .erp-header__container {
    padding: 0 24px;
    gap: 16px;
  }

  .erp-header__logo img {
    width: 135px;
  }

  .erp-header__nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;

    display: none;
    width: 100%;
    height: auto;
    padding: 12px 24px 20px;

    background: #fff;
    border-top: 1px solid #edf1f6;
    border-bottom: 1px solid #e2eaf2;
    box-shadow: 0 12px 24px rgba(7, 75, 127, .1);
  }

  .erp-header__nav.is-open {
    display: block;
  }

  .erp-header__menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    height: auto;
  }

  .erp-header__menu li {
    display: block;
    height: auto;
  }

  .erp-header__link {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    height: auto;
    min-height: 46px;
    padding: 10px 14px;

    border-radius: 7px;
    font-size: 14px;
  }

  .erp-header__link:hover,
  .erp-header__link.is-active {
    background: #eef7fd;
  }

  .erp-header__link::after {
    display: none;
  }

  .erp-header__toggle {
    display: flex;
  }
}

/* ==========================================
   MOBILE
   ========================================== */

@media (max-width: 767px) {

  .erp-header {
    --header-height: 66px;
  }

  .erp-header__container {
    padding: 0 16px;
    gap: 10px;
  }

  .erp-header__logo img {
    width: 105px;
    max-height: 52px;
  }

  .erp-header__actions {
    gap: 8px;
  }

  .erp-header .erp-header__cta.btn {
    height: 38px;
    min-height: 38px;
  }

  .erp-header .erp-header__cta.btn .btn__inner {
    padding: 0 10px;
  }

  .erp-header .erp-header__cta.btn span {
    font-size: 10px;
    letter-spacing: -.15px;
  }

  .erp-header__toggle {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
  }

  .erp-header__nav {
    padding: 10px 16px 18px;
  }

  #modules,
  #major,
  #usp,
  #testo,
  #footer {
    scroll-margin-top: 66px;
  }
}

/* ==========================================
   EXTRA SMALL MOBILE
   ========================================== */

@media (max-width: 375px) {

  .erp-header__logo img {
    width: 85px;
  }

  .erp-header .erp-header__cta.btn .btn__inner {
    padding: 0 8px;
  }

  .erp-header .erp-header__cta.btn span {
    font-size: 9px;
  }
}

/* ==========================================
   ACCESSIBILITY
   ========================================== */

@media (prefers-reduced-motion: reduce) {

  .erp-header,
  .erp-header__link,
  .erp-header__link::after,
  .erp-header__toggle span,
  .erp-header .erp-header__cta.btn {
    transition: none;
  }
}
/* reset */
/* ===== LANDING PAGE CSS RESET ===== */

/* Box sizing & spacing */
*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0; padding: 0;
}

/* HTML & Body */
html {
  -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
}

body {
  min-width: 320px; line-height: 1.6; font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Typography */
h1, h2, h3, h4, h5, h6, p, blockquote, figure {
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit; font-weight: inherit;
}

/* Lists */
ul, ol {
  list-style: none;
}

/* Links */
a {
  color: inherit; text-decoration: none;
}

/* Images & Media */
img, picture, video, canvas, svg {
  display: block; max-width: 100%;
}

img {
  height: auto;
}

/* Forms */
button, input, textarea, select {
  font: inherit;
}

button {
  cursor: pointer;
}

input, textarea, select {
  max-width: 100%;
}

/* Tables */
table {
  border-collapse: collapse; border-spacing: 0;
}

/* Accessibility */
:focus-visible {
  outline: 2px solid #005e9c; outline-offset: 3px;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Desktop */
section {
  width: 100%; padding: 80px 24px; box-sizing: border-box;
}
.ldp-container {
  width: 100%; max-width: 1200px; margin: 0 auto; box-sizing: border-box;
}

/* hero */
.ldp-erp-hero {
    background: url(https://itgtechnology.vn/wp-content/uploads/2026/10/ldp-bg2.webp) no-repeat center center; background-size: cover;
}
.ldp-hero-container {
    display: flex; gap: 64px;
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  section {
    padding: 64px 24px;
  }
  .ldp-container {
    padding: auto 24px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  section {
    padding: 48px 16px;
  }
  .ldp-container {
    padding: auto 16px;
  }
}

/* ================================================================== */

/* ==========================================
   3S ERP - HERO SECTION
   ========================================== */

/* ===== 1. MAIN LAYOUT ===== */

.ldp-erp-hero {
    padding: 60px 24px 50px;
    overflow: hidden;
}

.ldp-erp-hero .ldp-hero-container {
    align-items: center;
}

.ldp-hero__left {
    flex: 1 1 0;
    min-width: 0;
    color: #fff;
}

.ldp-hero__right {
    flex: 0 0 414px;
    width: 414px;
    min-width: 0;
}

/* ===== 2. LOGO ===== */

.ldp-hero__logo {
    display: flex;
    align-items: center;
}

.ldp-hero__logo img {
    width: 122px;
    height: auto;
    object-fit: contain;
}

/* ===== 3. HEADING ===== */

.ldp-hero__title {
    margin-top: 18px; font-size: 46px; font-weight: 800; line-height: 1.12; letter-spacing: -0.8px;
    text-transform: uppercase; background-image: linear-gradient(273deg, #51affa 2.15%, #dff2ff 50.92%);
    background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: #fff0;
}

.ldp-hero__subtitle {
    max-width: 690px;
    margin-top: 8px;
    color: #d2e8ff;
    font-size: 18px;
    font-weight: 400;
    line-height: 26px;
}

/* ===== 4. TARGET AUDIENCE ===== */

.ldp-hero__position {
    margin-top: 24px;
}

.ldp-hero__position-label {
    color: #9fd5ff;
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    text-transform: uppercase;
}

.ldp-hero__position-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

.ldp-hero__position__items {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-height: 42px;
    padding: 8px 14px;

    border: 1px solid rgba(147, 211, 255, 0.22);
    border-radius: 100px;

    background: rgba(57, 164, 239, 0.20);
    color: #fff;

    white-space: nowrap;
}

.ldp-hero__position__items-img {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
}

.ldp-hero__position__items-img svg {
    display: block;
    width: 22px;
    height: 22px;
    fill: #fff;
}

.ldp-hero__position__items-img svg path {
    fill: #fff;
}

.ldp-hero__position__items-label {
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

/* ===== 5. BENEFITS CHECKLIST ===== */

.ldp-hero__benefits {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

.ldp-hero__benefit {
    display: flex;
    align-items: center;
    gap: 18px;

    color: #fff;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
}

.ldp-hero__benefit::before {
    content: "✓";

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

    flex: 0 0 28px;
    width: 28px;
    height: 28px;

    border-radius: 50%;
    background: #32aeff;
    color: #fff;

    font-size: 19px;
    font-weight: 700;
    line-height: 1;
}

/* ===== 6. STATISTICS ===== */

.ldp-hero__stats {
    display: flex;
    align-items: flex-start;
    width: 100%;
    max-width: 560px;

    margin-top: 22px;
    padding-top: 20px;

    border-top: 1px solid rgba(191, 225, 255, 0.22);
}

.ldp-hero__stat {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-width: 0;
    padding: 0 16px 0 30px;

    border-left: 1px solid rgba(191, 225, 255, 0.22);
}

.ldp-hero__stat:first-child {
    padding-left: 0;
    border-left: none;
}

.ldp-hero__stat strong {
    display: block;
    color: #fff;
    font-size: 27px;
    font-weight: 700;
    line-height: 34px;
}

.ldp-hero__stat span {
    display: block;
    margin-top: 2px;

    color: #b9dcfb;
    font-size: 11px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* ==========================================
   7. CONSULTATION FORM CARD
   ========================================== */

.ldp-hero__form-container {
    width: 100%;
    padding: 28px 32px 32px;

    border-radius: 20px;
    background: #fff;

    box-shadow:
        0 16px 40px rgba(0, 42, 105, 0.13),
        0 2px 8px rgba(0, 42, 105, 0.04);
}

.ldp-hero__form-title {
    color: #084c98;
    font-size: 24px;
    font-weight: 700;
    line-height: 29px;
    letter-spacing: -0.7px;
    text-align: center;
    text-transform: uppercase;
    margin-top: 12px;
}


.ldp-hero__form-subtile {
    margin-top: 6px;

    color: #707b91;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    text-align: center;
}

/* ===== 8. FORM TRUST INDICATORS ===== */

.ldp-hero__form-checklist {
    display: flex;
    align-items: center;
    margin-top: 17px;
}

.ldp-hero__form-checklist__items {
    display: flex;
    flex: 1 1 50%;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.ldp-hero__form-checklist__items + 
.ldp-hero__form-checklist__items {
    margin-left: 12px;
    padding-left: 26px;
    border-left: 1px solid #d4dfef;
}

.ldp-hero__form-checklist__items-img {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 28px;
    width: 28px;
    height: 32px;
}

.ldp-hero__form-checklist__items-img img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.ldp-hero__form-checklist__items-desc {
    color: #0750a1;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
}

/* ==========================================
   9. CONTACT FORM 7
   ========================================== */

.ldp-hero__form-wrapper {
    width: 100%;
    margin-top: 13px;
}

.ldp-hero__form-wrapper .wpcf7 {
    width: 100%;
}

.ldp-hero__form-wrapper .wpcf7 form {
    width: 100%;
}

.ldp__ctf7-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

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

.ldp__ctf7__field-group {
    position: relative;
    width: 100%;
}

.ldp__ctf7__field-group .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

.ldp__ctf7__field-group .input-icon {
    position: absolute;
    z-index: 2;
    top: 21.5px;
    left: 17px;

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

    width: 18px;
    height: 18px;

    color: #98a4b9;
    transform: translateY(-50%);
    pointer-events: none;
}

.ldp__ctf7__field-group .input-icon svg {
    display: block;
    width: 18px;
    height: 18px;
    stroke: currentColor;
}

.ldp__ctf7__field-group .form-control {
    display: block;
    width: 100%;
    height: 43px;

    padding: 0 14px 0 47px;

    border: 1px solid #dfe7f0;
    border-radius: 5px;
    background: #fff;

    color: #273c59;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: normal;

    outline: none;
    box-shadow: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.ldp__ctf7__field-group .form-control::placeholder {
    color: #8993a6;
    opacity: 1;
}

.ldp__ctf7__field-group .form-control:hover {
    border-color: #afcce7;
}

.ldp__ctf7__field-group .form-control:focus {
    border-color: #187fc6;
    box-shadow: 0 0 0 3px rgba(24, 127, 198, 0.10);
}

.ldp__ctf7__field-group:focus-within .input-icon {
    color: #187fc6;
}

/* ===== HIDE TRACKING FIELDS ===== */

/* Các field nội bộ không hiển thị trên form */

.ldp__ctf7-wrapper input[name="your-purpose"],
.ldp__ctf7-wrapper input[name="your-order"],
.ldp__ctf7-wrapper input[name="your-link"],
.ldp__ctf7-wrapper input[name="url"],
.ldp__ctf7-wrapper .hidden,
.ldp__ctf7-wrapper .link-send,
.ldp__ctf7-wrapper .link-source {
    display: none !important;
}

/* CF7 wrappers trực tiếp chứa tracking fields */

.ldp__ctf7-wrapper > .wpcf7-form-control-wrap {
    display: none;
}

.ldp__ctf7-wrapper > p:empty {
    display: none;
}

/* ===== 10. SUBMIT BUTTON ===== */

.ldp__ctf7__action {
    width: 100%;
    margin: 12px auto;
    width: fit-content;
}



/* ===== 11. CF7 VALIDATION ===== */
fieldset.hidden-fields-container {
    border: none;
}
.ldp-hero__form-wrapper .wpcf7-not-valid-tip {
    display: block;
    margin-top: 3px;
    color: #dc3545;
    font-size: 11px;
    line-height: 16px;
}

.ldp-hero__form-wrapper .wpcf7-response-output {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 18px;
}

.ldp-hero__form-wrapper .wpcf7-spinner {
    margin: 10px auto 0;
}

/* ==========================================
   12. SMALL DESKTOP
   ========================================== */

@media (min-width: 1101px) and (max-width: 1250px) {

    .ldp-hero__right {
        flex-basis: 390px;
        width: 390px;
    }

    .ldp-hero__title {
        font-size: 39px;
        line-height: 1.14;
    }

    .ldp-hero__subtitle {
        font-size: 16px;
        line-height: 24px;
    }

    .ldp-hero__position__items {
        padding: 7px 12px;
    }

    .ldp-hero__position__items-label {
        font-size: 12px;
    }

    .ldp-hero__benefit {
        font-size: 14px;
    }

    .ldp-hero__form-container {
        padding: 28px 25px;
    }

    .ldp-hero__form-title {
        font-size: 20px;
    }
}

/* ==========================================
   13. TABLET
   ========================================== */

@media (min-width: 768px) and (max-width: 1100px) {

    .ldp-erp-hero {
        padding: 64px 24px;
    }

    .ldp-erp-hero .ldp-hero-container {
        flex-direction: column;
        align-items: stretch;
        gap: 40px;
    }

    .ldp-hero__left {
        flex: 1 1 auto;
        width: 100%;
    }

    .ldp-hero__right {
        flex: 1 1 auto;
        width: 100%;
        max-width: 520px;
        margin: 0 auto;
    }

    .ldp-hero__title {
        font-size: 44px;
        line-height: 1.14;
    }

    .ldp-hero__subtitle {
        font-size: 18px;
    }

    .ldp-hero__stats {
        max-width: 600px;
    }

    .ldp-hero__form-container {
        padding: 32px;
    }
}

/* ==========================================
   14. MOBILE
   ========================================== */

@media (max-width: 767px) {

    .ldp-erp-hero {
        padding: 48px 16px;
        background-position: 35% center;
    }

    .ldp-erp-hero .ldp-hero-container {
        flex-direction: column;
        align-items: stretch;
        gap: 32px;
    }

    .ldp-hero__left,
    .ldp-hero__right {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
    }

    .ldp-hero__logo img {
        width: 105px;
    }

    .ldp-hero__title {
        margin-top: 18px;
        font-size: 32px;
        line-height: 1.15;
        letter-spacing: -0.6px;
    }

    .ldp-hero__title .pc-only {
        display: none;
    }

    .ldp-hero__subtitle {
        margin-top: 12px;
        font-size: 15px;
        line-height: 24px;
    }

    /* Target audience */

    .ldp-hero__position {
        margin-top: 24px;
    }

    .ldp-hero__position-label {
        font-size: 13px;
    }

    .ldp-hero__position-wrap {
        gap: 8px;
    }

    .ldp-hero__position__items {
        min-height: 38px;
        padding: 7px 11px;
        gap: 7px;
    }

    .ldp-hero__position__items-img {
        flex-basis: 18px;
        width: 18px;
        height: 18px;
    }

    .ldp-hero__position__items-img svg {
        width: 18px;
        height: 18px;
    }

    .ldp-hero__position__items-label {
        font-size: 12px;
        line-height: 18px;
    }

    /* Benefits */

    .ldp-hero__benefits {
        margin-top: 24px;
        gap: 14px;
    }

    .ldp-hero__benefit {
        align-items: flex-start;
        gap: 12px;
        font-size: 14px;
        line-height: 23px;
    }

    .ldp-hero__benefit::before {
        flex-basis: 24px;
        width: 24px;
        height: 24px;
        font-size: 16px;
    }

    /* Stats: 2 columns */

    .ldp-hero__stats {
        flex-wrap: wrap;
        max-width: 100%;
        margin-top: 28px;
        padding-top: 18px;
    }

    .ldp-hero__stat {
        flex: 0 0 50%;
        padding: 0 12px 14px 18px;
    }

    .ldp-hero__stat:nth-child(odd) {
        padding-left: 0;
        border-left: none;
    }

    .ldp-hero__stat:nth-child(n+3) {
        padding-top: 14px;
        border-top: 1px solid rgba(191, 225, 255, 0.15);
    }

    .ldp-hero__stat strong {
        font-size: 25px;
        line-height: 32px;
    }

    .ldp-hero__stat span {
        font-size: 11px;
        line-height: 16px;
    }

    /* Form card */

    .ldp-hero__form-container {
        padding: 26px 20px 24px;
        border-radius: 16px;
    }

    .ldp-hero__form-title {
        font-size: 20px;
        line-height: 27px;
    }

    .ldp-hero__form-subtile {
        font-size: 13px;
        line-height: 20px;
    }

    .ldp-hero__form-checklist {
        margin-top: 18px;
    }

    .ldp-hero__form-checklist__items {
        gap: 7px;
    }

    .ldp-hero__form-checklist__items +
    .ldp-hero__form-checklist__items {
        margin-left: 8px;
        padding-left: 10px;
    }

    .ldp-hero__form-checklist__items-img {
        flex-basis: 23px;
        width: 23px;
    }

    .ldp-hero__form-checklist__items-img img {
        width: 23px;
        height: 23px;
    }

    .ldp-hero__form-checklist__items-desc {
        font-size: 11px;
        line-height: 16px;
    }

    /* CF7 mobile */

    .ldp-hero__form-wrapper {
        margin-top: 20px;
    }

    .ldp__ctf7-wrapper {
        gap: 9px;
    }

    .ldp__ctf7__field-group .form-control {
        height: 46px;
        font-size: 13px;
    }

    .ldp__ctf7__field-group .input-icon {
        top: 23px;
    }
}

/* ===== EXTRA SMALL MOBILE ===== */

@media (max-width: 375px) {

    .ldp-hero__title {
        font-size: 29px;
    }

    .ldp-hero__form-container {
        padding: 24px 16px;
    }

    .ldp-hero__form-title {
        font-size: 18px;
        letter-spacing: -0.5px;
    }

    .ldp-hero__form-checklist__items-desc {
        font-size: 10px;
    }
}

/* ===== REDUCED MOTION ===== */

@media (prefers-reduced-motion: reduce) {
    .ldp__ctf7__action .btn,
    .ldp__ctf7__field-group .form-control {
        transition: none;
    }
}


/* ===== LOGOS MARQUEE SECTION ===== */

.ldp-logos-marquee {
  width: 100%;
  padding: 24px 0 32px;
  background: #fff;
  overflow: hidden;
}

/* Title */
.ldp-logos-marquee__title {
  margin: 0 16px 20px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  color: #9fd5ff;
}

/* Marquee viewport */
.ldp-logos-marquee__wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;

  /* Fade 2 cạnh */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 6%,
    #000 94%,
    transparent 100%
  );

  mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 6%,
    #000 94%,
    transparent 100%
  );
}

/* Logos track */
.ldp-logos-marquee .erp3s-v4-hero-marquee-track {
  display: flex;
  align-items: center;
  gap: 20px;
  width: max-content;

  animation: none !important;
  will-change: transform;
}

/* Logo images */
.ldp-logos-marquee .erp3s-v4-hero-marquee-track img {
  display: block;
  flex: 0 0 165px; width: 165px;
  max-width: none;
  height: 40px;
  object-fit: contain;
}

/* ===== TABLET ===== */
@media (min-width: 768px) and (max-width: 1023px) {
  .ldp-logos-marquee {
    padding: 44px 0;
  }

  .ldp-logos-marquee__title {
    margin-bottom: 28px;
  }

  .ldp-logos-marquee .erp3s-v4-hero-marquee-track {
    gap: 48px;
  }

  .ldp-logos-marquee .erp3s-v4-hero-marquee-track img {
    flex-basis: 145px;
    width: 145px;
    height: 58px;
  }
}

/* ===== MOBILE ===== */
@media (max-width: 767px) {
  .ldp-logos-marquee {
    padding: 24px 0;
  }

  .ldp-logos-marquee__title {
    font-size: 11px;
    line-height: 1.7;
    letter-spacing: 0.12em;
    margin: 0 16px 24px;
  }

  .ldp-logos-marquee__wrapper {
    -webkit-mask-image: linear-gradient(
      to right,
      transparent,
      #000 10%,
      #000 90%,
      transparent
    );

    mask-image: linear-gradient(
      to right,
      transparent,
      #000 10%,
      #000 90%,
      transparent
    );
  }

  .ldp-logos-marquee .erp3s-v4-hero-marquee-track {
    gap: 36px;
  }

  .ldp-logos-marquee .erp3s-v4-hero-marquee-track img {
    flex-basis: 125px;
    width: 125px;
    height: 50px;
  }
}


/* ==========================================
   3S ERP MODULES SECTION
   ========================================== */

/* SECTION */
.ldp-modules, .ldp-major, .ldp-testo, .ldp-footer {
  --ldp-modules-navy: #0b4678;
  --ldp-modules-bg: #f5f9ff;
  --ldp-modules-blue: #0066d9;
  --ldp-modules-text: #52648f;
  --ldp-modules-border: #cfe5ff;
  --ldp-modules-light: #eef7ff;

  position: relative;
  width: 100%;
  overflow: hidden;
  isolation: isolate;

  font-family: 'Inter', sans-serif;
  color: var(--ldp-modules-navy);

  background:
    radial-gradient(
      ellipse at 8% 38%,
      rgba(204, 234, 255, .6),
      transparent 45%
    ),
    radial-gradient(
      ellipse at 90% 70%,
      rgba(199, 230, 255, .75),
      transparent 48%
    ),
    linear-gradient(
      180deg,
      #f8fcff 0%,
      #edf7ff 100%
    );
}

/* Background decorative shapes */
.ldp-modules::before,
.ldp-modules::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  border: 100px solid rgba(255,255,255,.42);
}

.ldp-modules::before {
  width: 650px;
  height: 650px;
  top: 170px;
  left: -450px;
}

.ldp-modules::after {
  width: 800px;
  height: 800px;
  top: -350px;
  right: -560px;
}

.ldp-modules *,
.ldp-modules *::before,
.ldp-modules *::after {
  box-sizing: border-box;
}

/* CONTAINER */
.ldp-modules-container {
  position: relative;
}


/* ==========================================
   SECTION HEADER
   ========================================== */
.ldp-modules__header-eyebrow {
    text-transform: uppercase;
    font-size: 18px;
    letter-spacing: 0.09em;
    font-weight: 600;
    color: #f49a10;
}
.ldp-modules__header {
  max-width: 1100px;
  margin: 0 auto 30px;
  text-align: center;
}

.ldp-section__title {
    margin: 0 0 48px;
    font-size: clamp(32px, 3vw, 52px);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 121.429%;
    text-transform: capitalize;
    background-image: linear-gradient(279deg, #3553a2 12.37%, #0c3b60 81.92%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: #fff0;
}

.ldp-section__title span {
  display: block;
}


/* ==========================================
   TABS NAVIGATION
   ========================================== */

.ldp-modules__tabs {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: stretch;
  gap: 10px;

  width: 100%;
  padding: 0 24px;
  margin-bottom: 18px;
}

.ldp-modules__tab {
  position: relative;

  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;

  min-width: 0;
  min-height: 125px;
  padding: 16px 12px;

  border: 1px solid #cfe5ff;
  border-radius: 12px;

  background: rgba(255,255,255,.94);
  box-shadow: 0 5px 12px rgba(26,106,189,.06);

  color: var(--ldp-modules-navy);
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;

  cursor: pointer;

  transition:
    background .25s ease,
    box-shadow .25s ease,
    border-color .25s ease,
    color .25s ease,
    transform .25s ease;
}

.ldp-modules__tab i {
  display: block;
  color: #0b4678;
  font-size: 32px;
  line-height: 1;
  transition: color .25s ease;
}

.ldp-modules__tab span {
  display: block; color: #0b4678;
}
.ldp-modules__tab--active span {
    color: #fff;
}
.ldp-modules__tab:hover:not([aria-selected="true"]) {
  border-color: #9bcfff;
  background: #f4faff;
  transform: translateY(-2px);
  box-shadow: 0 7px 16px rgba(0,94,156,.11);
}

/* Active tab */
.ldp-modules__tab[aria-selected="true"], .ldp-modules__tab--active {
  border-color: #0866b9;
  background: linear-gradient(284deg, #0165b9 12.37%, #1b4161 81.92%);
  color: #fff;
  box-shadow: 0 7px 18px rgba(0,85,170,.17);
}

.ldp-modules__tab[aria-selected="true"] i,
.ldp-modules__tab--active i {
  color: #fff;
}

/* Triangle below active tab */
.ldp-modules__tab[aria-selected="true"]::after,
.ldp-modules__tab--active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -12px;
  transform: translateX(-50%);

  width: 0;
  height: 0;

  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-top: 13px solid #0753a2;
}

.ldp-modules__tab:focus-visible {
  outline: 3px solid #68b5ff;
  outline-offset: 3px;
}


/* ==========================================
   TAB PANELS
   ========================================== */

.ldp-modules__panels {
  width: 100%;
}

.ldp-modules__panel {
  position: relative;
  width: 100%;
  padding: 30px 38px 16px;

  border: 1px solid rgba(219,235,255,.9);
  border-radius: 20px;
  background: #fff;

  box-shadow: 0 12px 28px rgba(24,98,181,.08);
}

.ldp-modules__panel[hidden] {
  display: none !important;
}

/* Panel heading */
.ldp-modules__panel-header {
  position: relative;

  display: flex;
  align-items: center;

  min-height: 112px;
  margin-bottom: 20px;
}

.ldp-modules__panel-heading {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-width: 0;
    padding: 16px 20px 12px;
}

.ldp-modules__panel-number {
  display: block;
  margin-bottom: 8px;

  color: #999;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.4;
}

.ldp-modules__panel-title {
    font-size: clamp(24px, 2vw, 36px);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 121.429%;
    text-transform: capitalize;
    background-image: linear-gradient(279deg, #3553a2 12.37%, #0c3b60 81.92%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: #fff0;
}

/* Illustration: use a custom image URL per panel */
.ldp-modules__illustration {
  position: absolute;
  right: 0;
  top: -16px;

  width: 250px;
  height: 145px;

  background-image: var(--ldp-modules-illustration, none);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  pointer-events: none;
}


/* ==========================================
   FEATURE CARDS
   ========================================== */

.ldp-modules__features {
  display: flex;
  align-items: stretch;
  gap: 18px;
  width: 100%;
  margin-bottom: 16px;
}

.ldp-modules__feature {
  display: flex;
  flex: 1 1 0;
  align-items: flex-start;
  gap: 20px;
  min-width: 0;
  min-height: 155px;
  padding: 20px;

  border: 1px solid transparent;
  border-radius: 12px;
  background: linear-gradient(135deg, #dde9f775 0%, #f7fbff 100%);

  transition:
    border-color .2s ease,
    background .2s ease;
}

.ldp-modules__feature:hover {
  border-color: #d6eaff;
  background: #edf7ff;
}

/* Feature icon */
.ldp-modules__feature-icon {
  display: flex;
  flex: 0 0 90px;
  align-items: center;
  justify-content: center;

  width: 90px;
  height: 86px;

  border-radius: 12px;
  background: #0165b91a;

  color: #0b4678;
}

.ldp-modules__feature-icon i {
  font-size: 36px;
  line-height: 1;
}

/* Feature text */
.ldp-modules__feature-content {
  flex: 1 1 auto;
  min-width: 0;
}

.ldp-modules__feature-title {
  margin: 0 0 10px;

  color: #0b4678;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.015em;
}

.ldp-modules__feature-description {
  margin: 0;
  color: #586993;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
}


/* ==========================================
   EXPANDABLE DETAILS
   ========================================== */

.ldp-modules__details {
  width: 100%;

  border: 1px solid #cfe5ff;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

/* Toggle */
.ldp-modules__details-toggle {
  display: flex;
  align-items: center;
  gap: 20px;

  min-height: 58px;
  padding: 14px 24px;

  background: linear-gradient(135deg, #dde9f775 0%, #f7fbff 100%);

  color: var(--ldp-modules-navy);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.ldp-modules__details-toggle::-webkit-details-marker {
  display: none;
}

.ldp-modules__details-toggle::marker {
  content: "";
}

.ldp-modules__details-toggle > i {
  flex-shrink: 0;
  font-size: 20px;
  transition: transform .25s ease;
}

.ldp-modules__details[open]
.ldp-modules__details-toggle > i {
  transform: rotate(180deg);
}

.ldp-modules__details-label {
  font-size: 0;
  font-weight: 700;
}

.ldp-modules__details-label::after {
  content: "Xem thêm tính năng";
  font-size: 16px;
}

.ldp-modules__details[open]
.ldp-modules__details-label::after {
  content: "Ẩn bớt tính năng";
}

.ldp-modules__details-toggle:focus-visible {
  outline: 3px solid #68b5ff;
  outline-offset: -3px;
}

/* Expanded content */
.ldp-modules__details-body {
  display: flex;
  align-items: stretch;
  gap: 46px;
  padding: 22px 44px 26px;
}

/* Extras */
.ldp-modules__extras {
  flex: 0 0 35%;
  min-width: 0;

  padding-right: 35px;
  border-right: 1px solid #cfe3ff;
}

.ldp-modules__extras-title, .ldp-modules__benefit-title {
  display: flex;
  align-items: center;
  gap: 16px;

  margin: 0 0 14px;

  color: var(--ldp-modules-navy);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
}

.ldp-modules__extras-title > i, .ldp-modules__benefit-title > i {
  display: inline-flex;
  flex: 0 0 28px;
  align-items: center;
  justify-content: center;

  width: 28px;
  font-size: 24px;
}

/* List */
.ldp-modules__extras-list {
  display: flex;
  flex-direction: column;
  gap: 10px;

  margin: 0 0 0 44px;
  padding: 0;
  list-style: none;
}

.ldp-modules__extras-list li {
  position: relative;
  padding-left: 34px;

  color: #536790;
  font-size: 15px;
  line-height: 1.4;
}

.ldp-modules__extras-list li::before {
  content: "✓";

  position: absolute;
  left: 0;
  top: 0;

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

  width: 23px;
  height: 23px;

  border-radius: 50%;
  background: var(--ldp-modules-bg);
  color: var(--ldp-modules-navy);
  font-size: 14px;
  font-weight: 800;
}

/* Benefit */
.ldp-modules__benefit {
  flex: 1 1 0;
  min-width: 0;
}

.ldp-modules__benefit-content {
  display: flex;
  align-items: center;
  gap: 26px;

  padding: 22px 30px;
  min-height: 90px;

  border-radius: 11px;
  background: linear-gradient(110deg, #f3f8fc 0%, #e7f3ff 100%);
}

.ldp-modules__benefit-content > i {
  flex: 0 0 52px;
  text-align: center;

  color: var(--ldp-modules-navy);
  font-size: 34px;
}

.ldp-modules__benefit-content p {
  flex: 1 1 auto;
  margin: 0;

  color: #365a90;
  font-size: 16px;
  line-height: 1.6;
}


.ldp-request-demo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;

  min-height: 56px;
  padding: 12px 28px;

  border: 2px solid #0165b9;
  border-radius: 100px;
  background: #fff;

  color: #0165b9;
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;

  cursor: pointer;
  transition: all 0.25s ease; margin-top: 32px;
}

.ldp-request-demo i {
  font-size: 20px;
  transition: transform 0.25s ease;
}

.ldp-request-demo:hover {
  background: #0165b9;
  border-color: #0165b9;
  color: #fff;
  box-shadow: 0 4px 16px rgba(0, 102, 232, 0.15);
}

.ldp-request-demo:hover i {
  transform: translateX(4px);
}

.ldp-request-demo:focus-visible {
  outline: 3px solid #80b5ff;
  outline-offset: 3px;
}

/* Mobile */
@media (max-width: 767px) {
  .ldp-request-demo {
    min-height: 48px;
    padding: 10px 20px;
    gap: 16px;
    font-size: 14px;
  }

  .ldp-request-demo i {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ldp-request-demo,
  .ldp-request-demo i {
    transition: none;
  }
}

/* ==========================================
   SMALL DESKTOP: 1024 - 1279px
   ========================================== */

@media (min-width: 1024px) and (max-width: 1279px) {

  .ldp-modules__tabs {
    padding: 0;
  }

  .ldp-modules__tab {
    font-size: 16px;
  }

  .ldp-modules__feature {
    flex-direction: column;
    gap: 14px;
  }

  .ldp-modules__feature-icon {
    flex: 0 0 62px;
    width: 66px;
    height: 62px;
  }

  .ldp-modules__feature-icon i {
    font-size: 28px;
  }

  .ldp-modules__details-body {
    gap: 28px;
    padding-inline: 28px;
  }

  .ldp-modules__extras {
    padding-right: 24px;
  }
}


/* ==========================================
   TABLET: 768 - 1023px
   ========================================== */

@media (min-width: 768px) and (max-width: 1023px) {

  .ldp-modules {
    padding: 48px 24px 56px;
  }

  .ldp-modules__header {
    margin-bottom: 28px;
  }

  .ldp-section__title {
    font-size: 40px;
  }

  /* Tabs scroll horizontally when necessary */
  .ldp-modules__tabs {
    gap: 10px;
    padding: 0 0 14px;

    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  .ldp-modules__tabs::-webkit-scrollbar {
    display: none;
  }

  .ldp-modules__tab {
    flex: 0 0 165px;
    min-height: 90px;
    font-size: 15px;
  }

  .ldp-modules__tab i {
    font-size: 28px;
  }

  .ldp-modules__tab::after {
    display: none;
  }

  /* Panel */
  .ldp-modules__panel {
    padding: 28px 26px 22px;
  }

  .ldp-modules__panel-header {
    min-height: 100px;
  }

  .ldp-modules__panel-heading {
    padding-right: 190px;
  }

  .ldp-modules__panel-title {
    font-size: 27px;
  }

  .ldp-modules__illustration {
    width: 190px;
    height: 120px;
  }

  /* Cards stacked */
  .ldp-modules__features {
    flex-direction: column;
    gap: 14px;
  }

  .ldp-modules__feature {
    flex: 1 1 auto;
    min-height: 0;
    padding: 18px;
  }

  .ldp-modules__feature-icon {
    flex: 0 0 76px;
    width: 76px;
    height: 76px;
  }

  .ldp-modules__feature-icon i {
    font-size: 30px;
  }

  /* Details */
  .ldp-modules__details-body {
    gap: 24px;
    padding: 24px;
  }

  .ldp-modules__extras {
    flex-basis: 43%;
    padding-right: 22px;
  }

  .ldp-modules__extras-list {
    margin-left: 0;
  }

  .ldp-modules__benefit-content {
    gap: 14px;
    padding: 18px;
  }
}


/* ==========================================
   MOBILE: UP TO 767px
   ========================================== */

@media (max-width: 767px) {

  .ldp-modules {
    padding: 48px 0;
  }

  .ldp-modules-container {
    width: 100%;
    padding: 0 16px;
  }

  /* Header */
  .ldp-modules__header {
    margin-bottom: 28px;
  }

  .ldp-section__title {
    margin-bottom: 14px;

    font-size: 32px;
    line-height: 1.25;
    letter-spacing: -.03em;
  }

  .ldp-section__title span {
    display: inline;
  }

  /* ======================================
     MOBILE TABS - HORIZONTAL SWIPE
     ====================================== */

  .ldp-modules__tabs {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 10px;

    width: calc(100% + 32px);
    margin-left: -16px;
    margin-bottom: 16px;

    padding: 0 16px 8px;

    overflow-x: auto;
    overflow-y: hidden;

    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;

    scroll-snap-type: x proximity;
    scroll-padding-inline: 16px;

    scrollbar-width: none;
    touch-action: pan-x pan-y;
  }

  .ldp-modules__tabs::-webkit-scrollbar {
    display: none;
  }

  .ldp-modules__tab {
    flex: 0 0 145px;
    width: 145px;
    min-width: 145px;
    min-height: 82px;

    padding: 12px 10px;
    gap: 8px;

    border-radius: 10px;

    font-size: 14px;
    line-height: 1.3;

    scroll-snap-align: start;
  }

  .ldp-modules__tab i {
    font-size: 26px;
  }

  .ldp-modules__tab::after {
    display: none;
  }

  /* Panel */
  .ldp-modules__panel {
    padding: 22px 16px 16px;
    border-radius: 16px;
  }

  .ldp-modules__panel-header {
    min-height: 0;
    margin-bottom: 22px;
  }

  .ldp-modules__panel-heading {
    width: 100%;
    padding-right: 0;
  }

  .ldp-modules__panel-number {
    margin-bottom: 8px;
    font-size: 12px;
  }

  .ldp-modules__panel-title {
    font-size: 20px;
    line-height: 1.3;
  }

  /* Hide illustration on mobile */
  .ldp-modules__illustration {
    display: none;
  }

  /* Feature cards */
  .ldp-modules__features {
    flex-direction: column;
    gap: 12px;
    margin-bottom: 14px;
  }

  .ldp-modules__feature {
    flex: 1 1 auto;
    gap: 14px;

    min-height: 0;
    padding: 16px;

    border-radius: 10px;
  }

  .ldp-modules__feature-icon {
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    border-radius: 9px;
  }

  .ldp-modules__feature-icon i {
    font-size: 24px;
  }

  .ldp-modules__feature-title {
    margin-bottom: 7px;
    font-size: 15px;
    line-height: 1.4;
  }

  .ldp-modules__feature-description {
    font-size: 13px;
    line-height: 1.6;
  }

  /* Details */
  .ldp-modules__details {
    border-radius: 12px;
  }

  .ldp-modules__details-toggle {
    min-height: 50px;
    padding: 12px 16px;
    gap: 12px;
  }

  .ldp-modules__details-toggle > i {
    font-size: 16px;
  }

  .ldp-modules__details-label::after {
    font-size: 14px;
  }

  /* Expanded details: vertical stacking */
  .ldp-modules__details-body {
    flex-direction: column;
    gap: 24px;
    padding: 20px 16px;
  }

  .ldp-modules__extras {
    flex: 1 1 auto;
    width: 100%;

    padding: 0 0 22px;
    border-right: none;
    border-bottom: 1px solid #d8e9ff;
  }

  .ldp-modules__extras-title,
  .ldp-modules__benefit-title {
    margin-bottom: 14px;
    gap: 12px;
    font-size: 15px;
  }

  .ldp-modules__extras-title > i, .ldp-modules__benefit-title > i {
    flex-basis: 24px;
    width: 24px;
    font-size: 20px;
  }

  .ldp-modules__extras-list {
    gap: 12px;
    margin-left: 0;
  }

  .ldp-modules__extras-list li {
    padding-left: 30px;
    font-size: 13px;
    line-height: 1.5;
  }

  .ldp-modules__extras-list li::before {
    width: 21px;
    height: 21px;
    font-size: 12px;
  }

  .ldp-modules__benefit {
    flex: 1 1 auto;
    width: 100%;
  }

  .ldp-modules__benefit-content {
    align-items: flex-start;
    gap: 14px;
    min-height: 0;
    padding: 18px 14px;
  }

  .ldp-modules__benefit-content > i {
    flex: 0 0 30px;
    font-size: 26px;
  }

  .ldp-modules__benefit-content p {
    font-size: 13px;
    line-height: 1.65;
  }
}


/* ==========================================
   SMALL MOBILE: UP TO 375px
   ========================================== */

@media (max-width: 375px) {

  .ldp-section__title {
    font-size: 28px;
  }

  .ldp-modules__panel-title {
    font-size: 21px;
  }

  .ldp-modules__tab {
    flex-basis: 132px;
    width: 132px;
    min-width: 132px;
  }

  .ldp-modules__feature {
    padding: 14px;
    gap: 12px;
  }

  .ldp-modules__feature-icon {
    flex-basis: 46px;
    width: 46px;
    height: 46px;
  }

  .ldp-modules__feature-icon i {
    font-size: 21px;
  }
}


/* ==========================================
   ACCESSIBILITY
   ========================================== */

@media (prefers-reduced-motion: reduce) {

  .ldp-modules__tab,
  .ldp-modules__tab i,
  .ldp-modules__feature,
  .ldp-modules__details-toggle > i {
    transition: none;
  }

  .ldp-modules__tabs {
    scroll-behavior: auto;
  }
}


/* ===== MODULE FLOW ===== */

.ldp-module-flow {
  width: 100%;
  margin-top: 48px;
  text-align: center;
}

.ldp-module-flow .ldp-modules__panel-title {
  margin-bottom: 32px;
}

/* ===== TABLET ===== */
@media (min-width: 768px) and (max-width: 1023px) {

  .ldp-module-flow .ldp-modules__panel-title {
    margin-bottom: 24px;
  }
}


/* ==========================================
   MORE MODULES
========================================== */

.ldp-more-modules {
    width: 100%;
}

/* Module grid */
.ldp-more-modules__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

/* Module card */
.ldp-more-modules__item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
    min-height: 112px;
    padding: 24px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid #dcecf9;
    border-radius: 20px;
    box-shadow: 0 5px 20px rgba(0, 94, 156, 0.035);
    transition: border-color 0.25s ease,
                box-shadow 0.25s ease,
                transform 0.25s ease;
}

.ldp-more-modules__item:hover {
    border-color: #83c5ef;
    box-shadow: 0 10px 28px #d3e5f9;
    transform: translateY(-2px);
}

/* Module content */
.ldp-more-modules__content {
    flex: 1;
    min-width: 0;
}

.ldp-more-modules__code {
    display: block;
    color: var(--ldp-modules-navy);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
}

.ldp-more-modules__name {
    color: var(--ldp-modules-navy); text-transform: uppercase;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.45;
    margin-bottom: 5px;
}

.ldp-more-modules__desc {
    color: #6c7c98;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
}

/* Arrow - Font Awesome */
.ldp-more-modules__arrow {
    flex: 0 0 auto;
    align-self: center;
    margin-left: auto;
    color: #8b9cb5;
    font-size: 13px;
    line-height: 1;
    transition: color 0.25s ease,
                transform 0.25s ease;
}

.ldp-more-modules__item:hover
.ldp-more-modules__arrow {
    color: #005e9c;
    transform: translateX(3px);
}


/* ==========================================
   FLAT CTA
========================================== */

.ldp-modules__flat-cta {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    min-height: 83px;
    margin-top: 40px;
    padding: 48px;
    overflow: hidden;
    border-radius: 14px;

    background: linear-gradient(
        110deg,
        #064b98 0%,
        #0757ad 48%,
        #086bd0 100%
    );

    border: 1px solid rgba(69, 176, 255, 0.25);
    box-shadow: 0 8px 24px rgba(0, 93, 177, 0.1);
}

/* Decorative geometric background */
.ldp-modules__flat-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            transparent 0%,
            transparent 27%,
            rgba(255,255,255,0.045) 27%,
            rgba(255,255,255,0.045) 49%,
            transparent 49%
        ),
        linear-gradient(
            125deg,
            transparent 0%,
            transparent 72%,
            rgba(0,32,111,0.14) 72%,
            rgba(0,32,111,0.14) 89%,
            transparent 89%
        ),
        linear-gradient(
            25deg,
            transparent 0%,
            transparent 65%,
            rgba(66,178,255,0.09) 65%,
            transparent 90%
        );
}

/* CTA content */
.ldp-modules__flat-cta-content {
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
}

.ldp-modules__flat-cta-title {
    color: #fff;
    font-size: clamp(24px, 2vw, 36px);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 121.429%;
    text-transform: capitalize;
}

.ldp-modules__flat-cta-desc {
    color: #a9d7fa;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.5;
}



/* ==========================================
   TABLET
========================================== */

@media (min-width: 768px) and (max-width: 899px) {

    .ldp-more-modules__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ldp-more-modules__item {
        min-height: 112px;
    }

    .ldp-modules__flat-cta {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 22px 26px;
    }

    .ldp-modules__flat-cta-content {
        flex: 0 1 auto;
    }
}

.ldp-more-modules .ldp-modules__panel-title {
    margin-bottom: 32px;
    margin-top: 48px;
}
.ldp-more-modules .ldp-modules__panel-title {text-align: center;}
/* ==========================================
   MOBILE
========================================== */
.ldp-more-modules__title {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 121.429%;
    text-transform: capitalize;
    background-image: linear-gradient(279deg, #3553a2 12.37%, #0c3b60 81.92%);
    background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: #fff0;
    margin: 32px 4px 16px; text-align: center;
}

@media (max-width: 767px) {
    .ldp-more-modules__grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .ldp-modules-flow__grid {
        gap: 32px;
        flex-direction: column;
    }
    .ldp-more-modules__title {font-size: 18px;}
    .ldp-more-modules__item {
        padding: 24px;
        gap: 20px;
        border-radius: 12px;
        min-height: 135px;
    }

    .ldp-more-modules__name {
        font-size: 14px;
    }

    .ldp-more-modules__desc {
        font-size: 13px;
    }

    .ldp-modules__flat-cta {
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
        margin-top: 20px;
        padding: 24px 20px;
        border-radius: 14px;
    }

    .ldp-modules__flat-cta-title {
        font-size: 18px;
        line-height: 1.4;
        margin-bottom: 6px;
    }

    .ldp-modules__flat-cta-desc {
        font-size: 13px;
        line-height: 1.6;
    }
}


/* ==========================================
   REDUCED MOTION
========================================== */

@media (prefers-reduced-motion: reduce) {
    .ldp-more-modules__item,
    .ldp-more-modules__arrow,
}


/* ==========================================
   MORE MODULES - FONT AWESOME ICONS
========================================== */

.ldp-more-modules__icon {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    color: var(--ldp-modules-navy);
}

/* Icon Font Awesome Solid */
.ldp-more-modules__icon i {
    display: inline-block;
    font-size: 36px;
    line-height: 1;
    color: inherit;
    transition: transform 0.25s ease;
}

/* Hover */
.ldp-more-modules__item:hover
.ldp-more-modules__icon i {
    transform: scale(1.08);
}

/* Mobile */
@media (max-width: 767px) {
    .ldp-more-modules__icon {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
    }
    .pc-only {display: none;}
    .ldp-more-modules__icon i {
        font-size: 32px;
    }
}
.ldp-modules-flow__grid {
    gap: 64px;
    display: flex;
}
.ldp-modules-flow__grid-left {flex: 1;}
.ldp-module-flow__img {height: 100%; width: auto; }
.ldp-modules-flow__grid-right {
    flex: 1.5;
}
.ldp-modules__browser-mockup {
    position: relative;
    width: 100%;
    box-shadow: rgba(0, 0, 0, 0.5) 0px 25px 50px -12px;
    background-color: rgb(15, 23, 42);
    overflow: hidden;
    border-radius: 12px;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.1);
    border-image: none;
}
.ldp-modules__browser-header {
    background-color: rgb(30, 41, 59);
    display: flex;
    align-items: center;
    padding: 8px 12px;
    gap: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.dot-red {
    background: #ef4444;
}

.ldp-modules__browser-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.dot-yellow {
    background: #f59e0b;
}
.dot-green {
    background: #10b981;
}
.ldp-modules__browser-browser-title {
    font-size: 10px;
    color: rgb(100, 116, 139);
    margin-left: 8px;
    font-family: monospace;
}
.ldp-modules-flow__image {
    position: relative;
    padding: 8px;
    overflow: hidden;
}

/* =========================================
   3S ERP - ONE DATA STREAM
   ========================================= */

.ldp-streamline {
    width: 100%;
    font-family: 'Inter', sans-serif;
}

/* Desktop Card */
.ldp-streamline-desktop {
    width: 100%;
    padding: 32px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 14px rgba(0, 94, 156, 0.08);
    margin-top: 24px;
}

/* Header */
.ldp-streamline-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px; color: var(--ldp-modules-navy);
}

.ldp-streamline-header-icon {
    flex-shrink: 0;
    font-size: 24px;
    line-height: 1.2;
    padding-top: 2px;
}

.ldp-streamline-header-content {
    flex: 1;
    min-width: 0;
}

.ldp-streamline-title {
    font-size: 20px;
}

.ldp-streamline-description {
    color: #59738f;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    margin-top: 2px;
}

/* =========================================
   BUSINESS FLOW
   ========================================= */

.ldp-streamline-flow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 0 6px;
}

.ldp-streamline-step {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex: 1 1 0;
    min-width: 0;
    min-height: 48px;
    padding: 8px 10px;
    background: var(--ldp-modules-bg);
    border-radius: 24px;
}

.ldp-streamline-step-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--ldp-modules-navy);
    font-size: 20px;
    line-height: 1;
}

.ldp-streamline-step-label {
    color: var(--ldp-modules-navy);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    white-space: nowrap;
}

.ldp-streamline-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 22px;
    color: var(--ldp-modules-navy);
    font-size: 17px;
    line-height: 1;
}

/* =========================================
   FOOTER MESSAGE
   ========================================= */

.ldp-streamline-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 16px;
    padding: 0 8px;
}

.ldp-streamline-footer-line {
    flex: 1;
    min-width: 0;
    height: 1px;
    background: #d3e5f9;
}

.ldp-streamline-footer-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 28px;
    padding: 5px 18px;
    background: var(--ldp-modules-bg);
    border: 1px solid #d3e5f9;
    border-radius: 20px;
    color: var(--ldp-modules-navy);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    white-space: nowrap;
}

/* Mobile hidden by default */
.ldp-streamline-mobile {
    display: none;
}

/* =========================================
   TABLET: 768px - 1023px
   ========================================= */

@media (min-width: 768px) and (max-width: 1023px) {

    .ldp-streamline-desktop {
        padding: 14px 18px;
        border-radius: 14px;
    }

    .ldp-streamline-title {
        font-size: 15px;
    }

    .ldp-streamline-header-icon {
        font-size: 21px;
    }

    .ldp-streamline-flow {
        gap: 5px;
        padding: 0;
    }

    .ldp-streamline-step {
        gap: 6px;
        padding: 8px 5px;
        min-height: 44px;
    }

    .ldp-streamline-step-icon {
        font-size: 16px;
    }

    .ldp-streamline-step-label {
        font-size: 10px;
    }

    .ldp-streamline-arrow {
        flex-basis: 12px;
        font-size: 12px;
    }

    .ldp-streamline-footer {
        gap: 10px;
        margin-top: 14px;
    }
}

/* =========================================
   MOBILE: <= 767px
   IMAGE ONLY
   ========================================= */

@media (max-width: 767px) {

    .ldp-streamline-desktop {
        display: none;
    }

    .ldp-streamline-mobile {
        display: block;
        width: 100%;
    }

    .ldp-streamline-mobile-image {
        display: block;
        width: 100%;
        height: auto;
        object-fit: contain;
        transform: scale(1.05);
        margin-top: 16px;
    }
}

/* ==========================================================
   3S ERP - GIẢI PHÁP THEO CHUYÊN NGÀNH
   Section-only stylesheet for ldp-major-section.php
   Requires existing landing reset, .ldp-container and section padding.
   JS for tab state + infinite marquee is added separately.
   ========================================================== */

.ldp-major {
  --ldp-major-navy: #0a4678;
  --ldp-major-blue: #0165b9;
  --ldp-major-blue-dark: #0056b2;
  --ldp-major-muted: #627399;
  --ldp-major-line: #dae9f8;
  --ldp-major-pale: #eff7ff;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 5% 46%, rgba(204, 234, 255, .44), transparent 48%),
    radial-gradient(ellipse at 100% 28%, rgba(221, 240, 255, .5), transparent 47%),
    linear-gradient(180deg, #fbfdff 0%, #f0f9ff 100%);
  color: var(--ldp-major-navy);
}

.ldp-major .ldp-major-container {
  position: relative;
  z-index: 1;
}

/* ---------- Heading ---------- */
.ldp-major__heading {
  max-width: 900px;
  margin: 0 auto 30px;
  text-align: center;
}

.ldp-major__title-accent {
  display: block;
  color: #1384f2;
  background: linear-gradient(95deg, #348bd2 5%, #0879f7 85%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- Industry tabs ---------- */
.ldp-major__tab-scroller {
  position: relative;
  padding-bottom: 10px; /* room for active triangle */
  margin-bottom: 7px;
}

.ldp-major__tabs {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 9px;
}

.ldp-major__tab {
  position: relative; display: flex; flex-direction: column; align-items: center;
  justify-content: start; gap: 12px; min-width: 0; min-height: 73px;
  padding: 24px 10px; border: 1px solid #deebfa; border-radius: 9px;
  background: rgba(255, 255, 255, .9); box-shadow: 0 5px 16px rgba(7, 58, 110, .035);
  color: var(--ldp-major-navy); text-align: left;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
}

.ldp-major__tab-icon {
  flex: 0 0 25px;
  font-size: 24px;
  line-height: 1;
  text-align: center;
}

.ldp-major__tab-name {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}
.ldp-major__tab.ldp-major__tab--active .ldp-major__tab-name {background-image: linear-gradient(279deg, #fff 12.37%, #fff 81.92%);}
    
}
.ldp-major__tab:not([aria-selected="true"]):hover {
  border-color: #9bcfff;
  background: #f4faff;
  box-shadow: 0 5px 17px rgba(0, 104, 204, .09);
}

.ldp-major__tab[aria-selected="true"], .ldp-major__tab--active {
  z-index: 1;
  border-color: #0061c5;
  background: linear-gradient(284deg, #0165b9 12.37%, #1b4161 81.92%);
  box-shadow: 0 8px 18px rgba(0, 93, 179, .21);
  color: #fff;
}

.ldp-major__tab[aria-selected="true"] .ldp-major__tab-icon,
.ldp-major__tab--active .ldp-major__tab-icon {
  color: #fff;
}

.ldp-major__tab[aria-selected="true"]::before, .ldp-major__tab--active::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -7px;
    width: 14px;
    height: 14px;
    background: #0b5696;
    transform: translateX(-50%) rotate(45deg);
    border-radius: 1px;
}

.ldp-major__tab:focus-visible {
  outline: 2px solid #0069e5;
  outline-offset: 3px;
}

/* ---------- Panel shell + desktop two-column grid ---------- */
.ldp-major__panel[hidden] {
  display: none !important;
}

.ldp-major__panel {
    padding: 48px 38px 40px;
    border: 1px solid #edf4fc;
    border-radius: 16px;
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 12px 30px rgba(8, 68, 116, .035);
}

.ldp-major__panel-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(0, 1fr);
  align-items: stretch;
  column-gap: 40px;
  row-gap: 20px;
}

/* ---------- Left visual ---------- */
.ldp-major__visual {
  position: relative;
  min-width: 0;
  min-height: 470px;
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(135deg, #082a49, #3c6c90);
  color: #fff;
}

.ldp-major__visual-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.ldp-major__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(1, 17, 32, .91) 0%, rgba(3, 25, 43, .58) 43%, rgba(4, 28, 47, .03) 86%),
    linear-gradient(0deg, rgba(2, 16, 32, .62) 0%, transparent 45%);
}

.ldp-major__visual-overlay {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 28px 27px 19px;
}

.ldp-major__visual-counter {
  display: flex;
  align-items: center;
  gap: 16px;
  width: min(235px, 65%);
  color: rgba(255, 255, 255, .7);
  font-size: 13px;
  letter-spacing: .04em;
  white-space: nowrap;
}

.ldp-major__visual-progress {
  display: block;
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, #9acbed 0 14%, rgba(255, 255, 255, .2) 14% 100%);
}

.ldp-major__visual-title {
  max-width: 330px;
  margin-top: 33px;
  color: #fff;
  font-size: clamp(34px, 3.3vw, 49px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.ldp-major__visual-description {
  max-width: 310px;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
}

/* ---------- Products embedded on visual ---------- */
.ldp-major__products {
    width: min(100%, 525px);
    margin-top: auto;
    padding: 11px 12px 13px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 10px;
    background: rgba(13, 39, 60, .5);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.ldp-major__products-label {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 9px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
}

.ldp-major__products-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}
.ldp-major__product-item {
    display: flex;
    align-items: center;
    border-radius: 7px;
    background: var(--ldp-modules-bg);
    flex-direction: column;
    padding: 4px;
}
.ldp-major__product-image {
    width: 100%;
    height: 70px;
    border-radius: 6px;
    border: 1px solid #fff;
}
.ldp-major__nameprod {
    color: #333;
    margin: 8px 0 4px;
    font-weight: 600;
    font-size: 10px;
}
/* ---------- Right content ---------- */
.ldp-major__details {min-width: 0; padding: 9px 14px 0 0;}

.ldp-major__industry-index {
    display: flex; align-items: baseline; gap: 8px; margin-bottom: 7px;
    font-size: 16px; font-weight: 700; line-height: 1.4; text-transform: uppercase;
}
.ldp-major__industry-index strong {color: #0076f2; font-size: 14px;}
.ldp-major__industry-index span {color: #75839d;}
.ldp-major__summary {margin-top: 8px; color: var(--ldp-major-muted); font-size: 13.5px; line-height: 1.55;}
.ldp-major__features-title {margin: 15px 0 10px; line-height: 1.5;}
.ldp-major__features {display: flex; flex-direction: column; gap: 24px;}
.ldp-major__feature {display: flex; gap: 15px; min-width: 0;}
.ldp-major__feature-icon {
    display: flex; flex: 0 0 60px; align-items: center; justify-content: center; font-size: 26px;
    width: 60px; height: 60px; border-radius: 10px; background: var(--ldp-modules-bg); color: var(--ldp-modules-navy);
}
.ldp-major__feature-copy {flex: 1; min-width: 0;}
.ldp-major__feature-name {margin-bottom: 4px;}
.ldp-major__feature-description {margin-top: 3px; color: var(--ldp-major-muted); font-size: 15px; line-height: 1.5;}

/* ---------- Value highlight ---------- */
.ldp-major__value {
    display: flex; align-items: center; gap: 32px; margin-top: 14px;
    padding: 14px 16px; border-radius: 11px; background: var(--ldp-modules-bg);
}

.ldp-major__value-icon {
  color: var(--ldp-modules-navy); font-size: 29px; line-height: 1;
}

.ldp-major__value-label {
    font-weight: 700; margin-bottom: 2px; line-height: 1.3; font-size: 15px;
}

.ldp-major__value-description {
  color: var(--ldp-major-muted); font-size: 15px; line-height: 1.5;
}

/* ---------- Footer: logos + actions ---------- */
.ldp-major__panel-footer {
  grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 20px; padding: 0 11px;
}
.ldp-major__clients {min-width: 0;}
.ldp-major__clients-title {text-transform: uppercase; margin-top: 12px;}
.ldp-major__logo-viewport {max-width: 600px; overflow: hidden; touch-action: pan-y;}
.ldp-major__logo-track {
  display: flex; align-items: center; gap: 10px; width: max-content;
  max-width: none; min-height: 44px; will-change: transform; 
}
.ldp-major__logo-item {
  display: flex; flex: 0 0 114px; align-items: center; justify-content: center; width: 114px;
  height: 44px; padding: 7px 12px; overflow: hidden; border: 1px solid #d6e6f8; border-radius: 8px; background: #fff;
}
.ldp-major__logo-image {
  display: block; width: 100%; max-width: 100%; height: 100%; object-fit: contain;
}
.ldp-major__actions {
  display: flex; align-items: center; justify-content: flex-end; gap: 20px; min-width: 0;
  padding-left: 20px; border-left: 1px solid #d8e7f7;
}

.ldp-major__link {
  display:none; align-items: center; justify-content: center; gap: 10px; white-space: nowrap; 
  font-size: 12px; font-weight: 700; line-height: 1.4; transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.ldp-major__link {color: #006de9;}
.ldp-major__link:hover {color: #003f8c;}
.ldp-major__link > i:first-child {font-size: 15px;}
.ldp-major__link:focus-visible {outline: 2px solid #0076ef; outline-offset: 3px;}

/* ---------- Tablet: content stacks, tabs may scroll ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .ldp-major__heading {margin-bottom: 25px;}
  .ldp-major__tab-scroller {overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch;}
  .ldp-major__tab-scroller::-webkit-scrollbar {
    display: none;
  }

  .ldp-major__tabs {
    display: flex;
    width: max-content;
  }

  .ldp-major__tab {
    flex: 0 0 134px;
  }

  .ldp-major__panel-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }

  .ldp-major__visual {
    height: 430px;
    min-height: 0;
  }

  .ldp-major__details {
    padding: 4px 20px 0;
  }

  .ldp-major__panel-footer {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding: 0 20px;
  }

  .ldp-major__logo-viewport {
    max-width: 100%;
  }

  .ldp-major__actions {
    justify-content: space-between;
    padding: 0;
    border-left: 0;
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .ldp-major__heading {
    margin-bottom: 21px;
  }
    .ldp-modules__header-eyebrow {font-size: 14px;}

  .ldp-major__lead {
    margin-top: 11px;
    font-size: 13px;
    line-height: 1.55;
  }

  /* Horizontal swipe with native CSS scroll; no tabs carousel JS */
  .ldp-major__tab-scroller {
    margin: 0 -16px 10px;
    padding: 0 16px 13px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    scroll-padding-inline: 16px;
  }

  .ldp-major__tab-scroller::-webkit-scrollbar {
    display: none;
  }

  .ldp-major__tabs {
    display: flex;
    width: max-content;
    gap: 8px;
  }

  .ldp-major__tab {
    flex: 0 0 112px;
    flex-direction: column;
    gap: 8px;
    min-height: 93px;
    padding: 11px 8px;
    border-radius: 9px;
    text-align: center;
    scroll-snap-align: start;
  }

  .ldp-major__tab-icon {
    flex: none;
    font-size: 28px;
  }

  .ldp-major__tab-name {
    font-size: 11.5px;
    line-height: 1.3;
  }

  .ldp-major__panel {
    padding: 6px 6px 17px;
    border-radius: 15px;
  }

  .ldp-major__panel-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 17px;
  }

  .ldp-major__visual {
    height: clamp(355px, 99vw, 460px);
    min-height: 0;
    border-radius: 11px;
  }

  .ldp-major__visual-overlay {
    padding: 21px 20px 16px;
  }

  .ldp-major__visual-counter {
    width: 225px;
    max-width: 75%;
    font-size: 12px;
  }

  .ldp-major__visual-title {
    max-width: 230px;
    margin-top: 25px;
    font-size: clamp(34px, 9vw, 44px);
  }

  .ldp-major__visual-description {
    max-width: 295px;
    margin-top: 11px;
    font-size: 13px;
    line-height: 1.55;
  }

  .ldp-major__products {
    width: min(100%, 400px);
    padding: 10px;
  }

  .ldp-major__products-label {
    font-size: 12px;
    margin-bottom: 8px;
  }

  .ldp-major__products-list {
    gap: 6px;
  }

  .ldp-major__details {
    padding: 0 12px;
  }

  .ldp-major__industry-index {
    margin-bottom: 7px;
    font-size: 11px;
  }

  .ldp-major__summary {
    margin-top: 9px;
    font-size: 15px;
  }

  .ldp-major__features-title {
    margin: 16px 0 10px;
    font-size: 15px;
  }

  .ldp-major__features {
    gap: 12px;
  }

  .ldp-major__feature {
    gap: 12px;
  }

  .ldp-major__feature-icon {
    flex-basis: 57px;
    width: 57px;
    height: 57px;
    font-size: 24px;
  }

  .ldp-major__feature-name {
    font-size: 15px;
  }

  .ldp-major__feature-description {
    font-size: 14px;
  }

  .ldp-major__value {
    grid-template-columns: 36px 95px minmax(0, 1fr);
    gap: 9px;
    margin-top: 24px;
    padding: 12px 10px;
  }

  .ldp-major__value-icon {
    font-size: 25px;
  }

  .ldp-major__value-label {
    padding-right: 8px;
    font-size: 15px;
  }

  .ldp-major__value-description {
    font-size: 14px;
  }

  .ldp-major__panel-footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 17px;
    padding: 0 12px;
  }

  .ldp-major__clients-title {
    margin-bottom: 9px;
    font-size: 15px;
  }

  .ldp-major__logo-viewport {
    max-width: 100%;
  }

  .ldp-major__logo-track {
    gap: 8px;
    min-height: 48px;
  }

  .ldp-major__logo-item {
    flex: 0 0 clamp(100px, 28vw, 136px);
    width: clamp(100px, 28vw, 136px);
    height: 46px;
    padding: 7px 9px;
  }
  .btn.btnJS {margin: 0 auto;}
  .ldp-major__actions {
    display: flex;
    gap: 9px;
    padding: 0;
    border-left: 0;
  }

  .ldp-major__link {
    gap: 7px;
    font-size: 11px;
  }

  .ldp-major__link {
    justify-content: flex-start;
    white-space: normal;
  }
}

/* Narrow phones: keep CTA readable and value box uncrowded. */
@media (max-width: 390px) {
  .ldp-major__visual-overlay {
    padding: 18px 15px 13px;
  }

  .ldp-major__details,
  .ldp-major__panel-footer {
    padding-right: 9px;
    padding-left: 9px;
  }

  .ldp-major__value {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 7px 10px;
  }

  .ldp-major__value-label {
    padding-right: 0;
    border-right: none;
    font-size: 10px;
  }

  .ldp-major__value-description {
    grid-column: 1 / -1;
    font-size: 11.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ldp-major__tab,
  .ldp-major__link {
    transition: none;
  }
}

/* ============================================================
   3S ERP LANDING - USP / COMPARISON SECTION
   Scope: #usp.ldp-usp
   Desktop: comparison table >= 1024px
   Tablet/Mobile: tab panels <= 1023px
   Requires: existing landing reset/container + Font Awesome
   ============================================================ */

.ldp-usp {
  --ldp-usp-primary: #074b7f;
  --ldp-usp-dark: #0b376f;
  --ldp-usp-blue: #0165b9;
  --ldp-usp-blue-strong: #006acb;
  --ldp-usp-light: #edf7ff;
  --ldp-usp-border: #d6e8f8;
  --ldp-usp-muted: #526b94;
  --ldp-usp-red: #d86f76;
  --ldp-usp-radius: 18px;

  position: relative;
  overflow: hidden;
  color: var(--ldp-usp-dark);
  background: #f4faff;
  background-image:
    radial-gradient(ellipse at 7% 48%, rgba(218, 240, 255, .56), transparent 43%),
    radial-gradient(ellipse at 93% 84%, rgba(219, 240, 255, .46), transparent 46%);
}

.ldp-usp-container { position: relative; z-index: 1; }

/* --- Section heading --- */
.ldp-usp-heading {
  max-width: 1050px;
  margin: 0 auto 34px;
  text-align: center;
}
.ldp-usp-title {
  max-width: 940px; margin: 15px auto 10px;
}

.ldp-usp-title-highlight { color: #0881ee; }

@media (min-width: 1024px) {
  .ldp-usp-title-highlight { display: block; }
}

.ldp-usp-description {
  max-width: 920px;
  margin: 0 auto;
  color: var(--ldp-usp-muted);
  font-size: 16px;
  line-height: 1.65;
  text-wrap: pretty;
}

/* --- Default viewport visibility --- */
.ldp-usp-desktop { display: block; }
.ldp-usp-mobile { display: none; }

/* ============================================================
   DESKTOP COMPARISON TABLE
   ============================================================ */
.ldp-usp-table-wrap {
  width: 100%;
  border-radius: var(--ldp-usp-radius);
}

.ldp-usp-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--ldp-usp-dark);
}

.ldp-usp-table th,
.ldp-usp-table td {
  padding: 0;
  text-align: left;
  vertical-align: middle;
}

.ldp-usp-table-criteria-head,
.ldp-usp-table .ldp-usp-criterion { width: 18%; }

.ldp-usp-table-solution-head { width: 27.333%; height: 120px; }

/* Keep the table's first header visually empty as in the mockup. */
.ldp-usp-table-criteria-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  clip-path: inset(50%);
}

.ldp-usp-table-solution-head.ldp-usp-col-international,
.ldp-usp-table-solution-head.ldp-usp-col-domestic {
  border: 1px solid var(--ldp-usp-border);
  border-bottom: 0;
  background: rgba(255, 255, 255, .63);
}

.ldp-usp-table-solution-head.ldp-usp-col-itg {
  position: relative;
  z-index: 1;
  border: 2px solid #0b90ff;
  border-bottom: 0;
  background: linear-gradient(125deg, #074b83 0%, #0063bd 66%, #087be1 100%);
  box-shadow: 0 -2px 18px rgba(0, 113, 226, .09);
  color: #fff;
}

.ldp-usp-solution-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 100%;
  padding: 17px 14px;
  text-align: center;
}

.ldp-usp-solution-brand { display: flex; align-items: center; justify-content: center; }
.ldp-usp-brand-logos { display: flex; align-items: center; justify-content: center; gap: 12px; }
.ldp-usp-brand-logo { display: block; width: auto; max-width: 98px; height: 30px; object-fit: contain; }
.ldp-usp-col-international .ldp-usp-brand-logo:nth-child(1) { max-width: 64px; }
.ldp-usp-col-international .ldp-usp-brand-logo:nth-child(2) { max-width: 92px; }
.ldp-usp-col-international .ldp-usp-brand-logo:nth-child(3) { max-width: 104px; }
.ldp-usp-col-domestic .ldp-usp-solution-brand { color: #4c5665; font-size: 36px; }
.ldp-usp-table-solution-head.ldp-usp-col-itg .ldp-usp-solution-brand {
    display: none;
}
.ldp-usp-solution-title {font-size: 18px;}
.ldp-usp-solution-subtitle { margin-top: 2px; color: var(--ldp-usp-muted); font-size: 11.5px; line-height: 1.45; font-weight: 600; }
/* Đảm bảo áp dụng chính xác cho phần tử .ldp-usp-solution-header đầu tiên */
th.ldp-usp-table-solution-head.ldp-usp-col-international {
    border-radius: 18px 0 0 0;
}
th.ldp-usp-table-solution-head.ldp-usp-col-domestic {
    border-radius: 0 18px 0 0;
}
.ldp-usp-col-itg .ldp-usp-solution-header { flex-direction: row; gap: 13px; text-align: left; }

.ldp-usp-col-itg .ldp-usp-solution-title {
    font-size: 26px; background-image: linear-gradient(279deg, #ffffff 12.37%, #ffffff 81.92%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: #fff0; text-align: center;
}
.ldp-usp-col-itg .ldp-usp-solution-subtitle { color: rgba(255, 255, 255, .92); }
.ldp-usp-col-itg .ldp-usp-brand-logo { max-width: 58px; height: 54px; filter: brightness(0) invert(1); }

.ldp-usp-featured-badge {
  position: absolute;
  top: 10px;
  right: 11px;
  padding: 3px 9px;
  border-radius: 30px;
  background: rgba(42, 167, 255, .95);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
}

/* Criteria column */
.ldp-usp-table .ldp-usp-criterion {
  padding: 17px 12px 17px 16px;
  border-bottom: 1px solid var(--ldp-usp-border);
  background: rgba(255,255,255,.40);
}

.ldp-usp-criterion-inner { display: flex; align-items: flex-start; gap: 12px; }
.ldp-usp-criterion-icon { flex: 0 0 34px; color: #07509a; font-size: 27px; line-height: 1.3; }
.ldp-usp-criterion-content { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ldp-usp-criterion-title {
    color: #0a346b; font-size: 15px; font-weight: 600; line-height: 1.4;
}
.ldp-usp-criterion-subtitle { color: var(--ldp-usp-muted); font-size: 11px; line-height: 1.5; font-weight: 600;}

/* Comparison feature cells */
.ldp-usp-table .ldp-usp-table-cell {
  height: 119px;
  padding: 18px 18px;
  border-bottom: 1px dashed var(--ldp-usp-border);
  background: rgba(255,255,255,.55);
}

.ldp-usp-table .ldp-usp-table-cell.ldp-usp-col-international { border-left: 1px solid var(--ldp-usp-border); }
.ldp-usp-table .ldp-usp-table-cell.ldp-usp-col-domestic { border-right: 1px solid var(--ldp-usp-border); }
.ldp-usp-table .ldp-usp-table-cell.ldp-usp-col-itg {
  position: relative;
  z-index: 1;
  border-right: 2px solid #138bff;
  border-left: 2px solid #138bff;
  background: rgba(242, 249, 255, .96);
}
.ldp-usp-table tbody tr:first-child .ldp-usp-criterion {
    border-radius: 15px 0 0 0;
}
.ldp-usp-table tbody tr:last-child .ldp-usp-table-cell.ldp-usp-col-international {
  border-bottom: 1px solid var(--ldp-usp-border);
}
.ldp-usp-table tbody tr:last-child .ldp-usp-table-cell.ldp-usp-col-domestic {
  border-bottom: 1px solid var(--ldp-usp-border);
  border-radius: 0 0 16px 0;
}
.ldp-usp-table tbody tr:last-child .ldp-usp-table-cell.ldp-usp-col-itg {
  border-bottom: 2px solid #138bff;
  box-shadow: 0 8px 20px rgba(0, 112, 224, .075);
}

.ldp-usp-table tbody tr:last-child .ldp-usp-criterion { border-radius: 0 0 0 15px; }

.ldp-usp-feature { display: flex; align-items: flex-start; gap: 12px; }
.ldp-usp-feature-icon { flex: 0 0 27px; color: var(--ldp-usp-red); font-size: 23px; line-height: 1.35; }
.ldp-usp-col-itg .ldp-usp-feature-icon { color: var(--ldp-usp-blue); }
.ldp-usp-feature-content { flex: 1; min-width: 0; }
.ldp-usp-feature-title { margin-bottom: 5px; font-size: 15px; font-weight: 600;}
.ldp-usp-feature-description { color: var(--ldp-usp-muted); font-size: 12.5px; line-height: 1.55; }
.ldp-usp-col-itg .ldp-usp-feature-title { color: #005bb9; }

/* ============================================================
   SHARED CTA
   ============================================================ */
.ldp-usp-cta {
  display: grid;
  grid-template-columns: 55px minmax(0, 1fr) auto;
  align-items: center;
  gap: 17px;
  margin-top: 18px;
  padding: 19px 22px;
  border: 3px solid #fff;
  border-radius: 17px;
  background: rgba(224, 241, 254, .62);
}

.ldp-usp-cta-icon { color: #0675db; font-size: 45px; line-height: 1; }
.ldp-usp-cta-content { min-width: 0; }
.ldp-usp-cta-eyebrow { display: block; margin-bottom: 3px; color: #0076eb; font-size: 12px; font-weight: 600; line-height: 1.4; }
.ldp-usp-cta-title {font-size: 19px;}
.ldp-usp-cta-description { margin-top: 2px; color: var(--ldp-usp-muted); font-size: 12.5px; line-height: 1.5; }
.ldp-usp-cta-action { display: flex; align-items: center; padding-left: 25px; border-left: 1px solid #9ec9f7; }

/* ============================================================
   TABLET / MOBILE: TABS + PANELS
   ============================================================ */
@media (max-width: 1023px) {
  .ldp-usp-desktop { display: none; }
  .ldp-usp-mobile { display: block; }
  .ldp-usp-heading { max-width: 760px; margin-bottom: 28px; }
  .ldp-usp-title { max-width: 690px; font-size: clamp(28px, 4.1vw, 38px); }
  .ldp-usp-description { max-width: 740px; font-size: 15px; }

  .ldp-usp-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 17px;
    align-items: stretch;
  }

  .ldp-usp-tab {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 111px;
    padding: 13px 8px;
    border: 1px solid var(--ldp-usp-border);
    border-radius: 17px;
    background: rgba(255,255,255,.86);
    box-shadow: 0 4px 12px rgba(34, 108, 181, .035);
    color: var(--ldp-usp-dark);
    text-align: center;
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
  }

  .ldp-usp-tab:hover { border-color: #7fc4ff; }
  .ldp-usp-tab:focus-visible { outline: 3px solid #2192f6; outline-offset: 3px; }
  .ldp-usp-tab-active {
    z-index: 2;
    border-color: #0b89fb;
    background: linear-gradient(135deg, #004884, #0479d9);
    box-shadow: 0 6px 16px rgba(0, 94, 185, .2);
    color: #fff;
  }
  .ldp-usp-tab-active::after {
    position: absolute;
    bottom: -9px;
    left: 50%;
    width: 16px;
    height: 16px;
    border-right: 1px solid #0b89fb;
    border-bottom: 1px solid #0b89fb;
    background: #0472cb;
    content: '';
    transform: translateX(-50%) rotate(45deg);
  }

  .ldp-usp-tab-brand { display: flex; align-items: center; justify-content: center; min-height: 38px; max-width: 100%; margin-bottom: 6px; }
  .ldp-usp-tab-brand > .fas { color: #536074; font-size: 33px; }
  .ldp-usp-tab-active .ldp-usp-tab-brand > .fas { color: #fff; }
  .ldp-usp-tab-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 9px; max-width: 100%; }
  .ldp-usp-tab-logo { width: auto; max-width: 85px; height: 25px; object-fit: contain; }
  .ldp-usp-tab-logos .ldp-usp-tab-logo:nth-child(1) { max-width: 65px; }
  .ldp-usp-tab-logos .ldp-usp-tab-logo:nth-child(2) { max-width: 78px; }
  .ldp-usp-tab-logos .ldp-usp-tab-logo:nth-child(3) { max-width: 95px; }
  .ldp-usp-tab-active .ldp-usp-tab-logo { filter: brightness(0) invert(1); }
  .ldp-usp-tab-title { font-size: 15px; font-weight: 750; line-height: 1.3; }
  .ldp-usp-tab-subtitle { margin-top: 2px; color: var(--ldp-usp-muted); font-size: 11px; line-height: 1.3; }
  .ldp-usp-tab-active .ldp-usp-tab-subtitle { color: rgba(255,255,255,.84); }

  .ldp-usp-panels { position: relative; }
  .ldp-usp-panel {
    overflow: hidden;
    border: 1.5px solid #b9ddfb;
    border-radius: 19px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(8, 101, 192, .08);
  }
  .ldp-usp-panel[hidden] { display: none !important; }
  .ldp-usp-panel-itg { border-color: #58b4ff; }

  .ldp-usp-panel-banner {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 175px;
    overflow: hidden;
    background: linear-gradient(125deg, #e4f3ff, #f8fcff);
  }
  .ldp-usp-panel-itg .ldp-usp-panel-banner {
    min-height: 195px;
    background: linear-gradient(110deg, #003761 0%, #075994 62%, #0d6aaf 100%);
    color: #fff;
  }
  .ldp-usp-panel-banner-image { position: absolute; inset: 0; }
  .ldp-usp-panel-banner-image img { width: 100%; height: 100%; object-fit: cover; object-position: center 46%; }
  .ldp-usp-panel-itg .ldp-usp-panel-banner::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 42, 81, .95), rgba(0, 55, 106, .76) 47%, rgba(0, 51, 93, .03) 100%);
    content: '';
    pointer-events: none;
  }

  .ldp-usp-panel-banner-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 19px;
    width: 100%;
    padding: 24px 30px 39px;
  }
  .ldp-usp-panel-itg .ldp-usp-panel-banner-content { justify-content: flex-start; }
  .ldp-usp-panel-international .ldp-usp-panel-banner-content {
    flex-direction: column;
    gap: 9px;
    text-align: center;
  }
  .ldp-usp-panel-banner-brand { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; flex-shrink: 0; }
  .ldp-usp-panel-banner-logo { width: auto; max-width: 92px; height: 45px; object-fit: contain; }
  .ldp-usp-panel-itg .ldp-usp-panel-banner-logo { max-width: 82px; height: 72px; filter: brightness(0) invert(1); }
  .ldp-usp-panel-banner-brand > .fas { font-size: 50px; color: #68788b; }
  .ldp-usp-panel-banner-text { min-width: 0; }
  .ldp-usp-panel-banner-title { font-size: clamp(23px, 3.8vw, 33px); line-height: 1.25; }
  .ldp-usp-panel-banner-subtitle { max-width: 370px; margin-top: 4px; color: var(--ldp-usp-muted); font-size: 15px; line-height: 1.4; }
  .ldp-usp-panel-itg .ldp-usp-panel-banner-title { background-image: linear-gradient(279deg, #fff 12.37%, #fff 81.92%); text-align: center; }
  .ldp-usp-panel-itg .ldp-usp-panel-banner-subtitle { color: rgba(255,255,255,.95); }

  .ldp-usp-panel-features {
    position: relative;
    z-index: 3;
    margin-top: -18px;
    padding: 8px 30px 6px;
    border-radius: 19px 19px 0 0;
    background: #fff;
  }
  .ldp-usp-panel-feature {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 23px;
    padding: 20px 0;
    border-bottom: 1px solid #e1edf7;
  }
  .ldp-usp-panel-feature:last-child { border-bottom: 0; }
  .ldp-usp-panel-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    border-radius: 17px;
    background: #e6f4ff;
    color: #0878de;
    font-size: 30px;
  }
  .ldp-usp-panel-international .ldp-usp-panel-feature-icon,
  .ldp-usp-panel-domestic .ldp-usp-panel-feature-icon { color: #cc777b; background: #fff1f2; }
  .ldp-usp-panel-feature-content { min-width: 0; }
  .ldp-usp-panel-feature-title { margin-bottom: 4px; font-size: 20px; font-weight: 600; line-height: 1.35; }
  .ldp-usp-panel-feature-description { color: var(--ldp-usp-muted); font-size: 14px; line-height: 1.5; }
  .ldp-usp-panel-feature-arrow { display: flex; align-items: center; justify-content: center; color: #0765ba; font-size: 15px; }

  .ldp-usp-cta { grid-template-columns: 50px minmax(0, 1fr) auto; gap: 13px; margin-top: 18px; padding: 18px; }
  .ldp-usp-cta-icon { font-size: 41px; }
  .ldp-usp-cta-title { font-size: 18px; }
  .ldp-usp-cta-action { padding-left: 14px; }
}

/* ============================================================
   SMALL SCREENS
   ============================================================ */
@media (max-width: 767px) {
  .ldp-usp-heading { margin-bottom: 24px; }
  .ldp-usp-title { max-width: 540px; margin-top: 12px; font-size: clamp(25px, 6.3vw, 33px); letter-spacing: -.03em; line-height: 1.23; }
  .ldp-usp-description { font-size: 15px; line-height: 1.62; }

  .ldp-usp-tabs { gap: 6px; margin-bottom: 14px; }
  .ldp-usp-tab { min-height: 101px; padding: 10px 5px; border-radius: 13px; }
  .ldp-usp-tab-brand { min-height: 32px; margin-bottom: 5px; }
  .ldp-usp-tab-brand > .fas { font-size: 27px; }
  .ldp-usp-tab-logos { gap: 3px 5px; }
  .ldp-usp-tab-logo { height: 20px; max-width: 48px; }
  .ldp-usp-tab-logos .ldp-usp-tab-logo:nth-child(2) { max-width: 50px; }
  .ldp-usp-tab-logos .ldp-usp-tab-logo:nth-child(3) { max-width: 62px; }
  .ldp-usp-tab-title { font-size: 12px; line-height: 1.24; }
  .ldp-usp-tab-subtitle { font-size: 9px; }
  .ldp-usp-tab-active::after { bottom: -7px; width: 12px; height: 12px; }

  .ldp-usp-panel { border-radius: 16px; }
  .ldp-usp-panel-banner,
  .ldp-usp-panel-itg .ldp-usp-panel-banner { min-height: 159px; }
  .ldp-usp-panel-banner-content { gap: 12px; padding: 23px 17px 34px; }
  .ldp-usp-panel-banner-brand { gap: 5px; }
  .ldp-usp-panel-banner-logo { max-width: 55px; height: 29px; }
  .ldp-usp-panel-itg .ldp-usp-panel-banner-logo { max-width: 51px; height: 50px; }
  .ldp-usp-panel-banner-brand > .fas { font-size: 34px; }
  .ldp-usp-panel-banner-title { font-size: 25px; }
  .ldp-usp-panel-banner-subtitle { font-size: 12px; }
  .ldp-usp-panel-features { margin-top: -14px; padding: 4px 15px; border-radius: 15px 15px 0 0; }
  .ldp-usp-panel-feature { grid-template-columns: 47px minmax(0,1fr) 10px; gap: 10px; padding: 15px 0; }
  .ldp-usp-panel-feature-icon { width: 47px; height: 47px; border-radius: 12px; font-size: 23px; }
  .ldp-usp-panel-feature-title { margin-bottom: 4px; font-size: 16px; line-height: 1.35; }
  .ldp-usp-panel-feature-description { font-size: 15px; line-height: 1.5; }
  .ldp-usp-panel-feature-arrow { font-size: 11px; }

  .ldp-usp-cta { grid-template-columns: 39px minmax(0,1fr); align-items: start; gap: 9px 12px; padding: 15px 13px; border-width: 2px; border-radius: 15px; }
  .ldp-usp-cta-icon { font-size: 36px; }
  .ldp-usp-cta-eyebrow { font-size: 12px; }
  .ldp-usp-cta-title { font-size: 18px; line-height: 1.36; }
  .ldp-usp-cta-description { font-size: 14px; }
  .ldp-usp-cta-action { grid-column: 1 / -1; display: block; margin-top: 7px; padding-left: 0; border-left: 0; }
}

/* 320px support: all 3 logos stay present, but use compact sizing. */
@media (max-width: 359px) {
  .ldp-usp-tab { min-height: 105px; }
  .ldp-usp-tab-logos { gap: 3px; }
  .ldp-usp-tab-logos .ldp-usp-tab-logo:nth-child(1) { max-width: 30px; }
  .ldp-usp-tab-logos .ldp-usp-tab-logo:nth-child(2) { max-width: 41px; }
  .ldp-usp-tab-logos .ldp-usp-tab-logo:nth-child(3) { max-width: 50px; }
  .ldp-usp-tab-title { font-size: 11px; }
  .ldp-usp-panel-feature { gap: 8px; }
  .ldp-usp-panel-feature-title { font-size: 13px; }
  .ldp-usp-panel-feature-description { font-size: 11.5px; }
}

/* Subtle interaction is optional for reduced-motion visitors. */
@media (prefers-reduced-motion: reduce) {
  .ldp-usp-tab { transition: none; }
}

/* ==========================================================
   3S ERP LANDING PAGE - TESTIMONIAL SECTION
   Prefix: ldp-testo
   Breakpoints:
   Desktop: >= 1024px
   Tablet: 768px - 1023px
   Mobile: <= 767px
========================================================== */


/* ==========================================================
   01. SECTION & CONTAINER
========================================================== */

.ldp-testo {
    --testo-primary: #005e9c;
    --testo-blue: #0065d5;
    --testo-navy: #08285f;
    --testo-text: #42577d;
    --testo-border: #d8e7fa;
    --testo-light: #edf5ff;
    --testo-orange: #ff7a18;

    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 70px 24px 62px;
    background:
        radial-gradient(
            ellipse at 0% 0%,
            rgba(184, 218, 247, 0.36),
            transparent 28%
        ),
        radial-gradient(
            ellipse at 100% 100%,
            rgba(175, 214, 250, 0.32),
            transparent 32%
        ),
        #f5faff;

    color: var(--testo-navy);
}

/* Decorative background */
.ldp-testo::before,
.ldp-testo::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    background: rgba(211, 232, 252, 0.32);
}

.ldp-testo::before {
    width: 390px;
    height: 390px;
    top: -270px;
    left: -210px;
    border-radius: 50%;
}

.ldp-testo::after {
    width: 450px;
    height: 450px;
    top: 20px;
    right: -325px;
    border-radius: 50%;
}

.ldp-testo-container {
    position: relative;
    z-index: 1;
}


/* ==========================================================
   02. SECTION HEADER
========================================================== */

.ldp-testo-header {
    max-width: 920px;
    margin: 0 auto 30px;
    text-align: center;
}

.ldp-testo-description {
    max-width: 780px;
    margin: 0 auto;

    font-size: 15px;
    line-height: 1.75;
    font-weight: 400;
    color: var(--testo-text);
}


/* ==========================================================
   03. MAIN CONTENT LAYOUT
========================================================== */

.ldp-testo-content {
    display: grid;
    grid-template-columns: minmax(0, 1.34fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 24px;

    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 22px;

    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 12px 38px rgba(28, 84, 144, 0.045);
}

.ldp-testo-featured,
.ldp-testo-sidebar {
    min-width: 0;
}


/* ==========================================================
   04. FEATURED TESTIMONIAL
========================================================== */

.ldp-testo-featured {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Video wrapper */
.ldp-testo-video {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 14px;
    background: #dbeaf7;
}

/* Video button */
.ldp-testo-video-trigger {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    padding: 0;

    overflow: hidden;
    border: 0;
    border-radius: inherit;
    background: #dbeaf7;

    color: #fff;
    text-align: left;
    cursor: pointer;
}

/* Thumbnail */
.ldp-testo-video-image {
    position: absolute;
    inset: 0;

    display: block;
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
    transition: transform 0.45s ease;
}

.ldp-testo-video-trigger:hover .ldp-testo-video-image {
    transform: scale(1.025);
}

/* Dark gradient for text readability */
.ldp-testo-video-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;

    background: linear-gradient(
        180deg,
        rgba(0, 20, 45, 0.08) 0%,
        rgba(0, 20, 45, 0) 43%,
        rgba(0, 18, 38, 0.12) 64%,
        rgba(0, 15, 30, 0.86) 100%
    );
}

/* Product badge */
.ldp-testo-video-badge {
    position: absolute;
    z-index: 2;
    top: 16px;
    left: 16px;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 8px 15px;
    border-radius: 100px;

    background: var(--ldp-modules-navy);
    color: #fff;

    font-size: 13px;
    line-height: 1.3;
    font-weight: 700;
    white-space: nowrap;
}

.ldp-testo-video-badge i {
    font-size: 14px;
}

/* Central play button */
.ldp-testo-video-play {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

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

    width: 68px;
    height: 68px;

    border-radius: 50%;
    background: #fff;
    box-shadow: 0 5px 18px rgba(0, 20, 50, 0.18);

    color: var(--ldp-modules-navy);
    font-size: 23px;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.ldp-testo-video-play i {
    margin-left: 4px;
}

.ldp-testo-video-trigger:hover .ldp-testo-video-play {
    transform: translate(-50%, -50%) scale(1.08);
    box-shadow: 0 7px 24px rgba(0, 20, 50, 0.22);
}

/* Video bottom text */
.ldp-testo-video-info {
    position: absolute;
    z-index: 2;
    bottom: 17px;
    left: 20px;
    right: 16px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.ldp-testo-video-info-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 4px;
}

.ldp-testo-video-title {
    display: block;

    font-size: 21px;
    line-height: 1.3;
    font-weight: 750;
    color: #fff;
}

.ldp-testo-video-subtitle {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.95);
}

.ldp-testo-video-duration {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;

    padding: 5px 9px;
    border-radius: 100px;

    background: rgba(20, 27, 37, 0.65);
    color: #fff;

    font-size: 12px;
    font-weight: 650;
    line-height: 1.4;
    white-space: nowrap;
}

.ldp-testo-video-duration i {
    font-size: 12px;
}


/* ==========================================================
   05. YOUTUBE VIDEO PLAYER
========================================================== */

.ldp-testo-video-player {
    position: absolute;
    z-index: 5;
    inset: 0;

    width: 100%;
    height: 100%;
    background: #000;
}

.ldp-testo-video-player[hidden] {
    display: none !important;
}

.ldp-testo-video-player iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}


/* ==========================================================
   06. FEATURED QUOTE
========================================================== */

.ldp-testo-quote {
    display: flex;
    align-items: flex-start;
    gap: 18px;

    padding: 2px 12px 6px;
}

.ldp-testo-quote-icon {
    flex: 0 0 38px;

    color: #aad1fa;
    font-size: 38px;
    line-height: 1;
}

.ldp-testo-quote-content {
    flex: 1;
    min-width: 0;
}

.ldp-testo-quote-text {
    margin: 0 0 16px;

    font-size: 15px;
    line-height: 1.65;
    font-style: italic;
    color: var(--testo-navy);
}

.ldp-testo-author {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ldp-testo-author-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;

    width: 42px;
    height: 42px;

    border-radius: 50%;
    background: linear-gradient(145deg, #086bd1, #00448d);

    color: #fff;
    font-size: 14px;
    font-weight: 750;
    letter-spacing: 0.2px;
}

.ldp-testo-author-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-width: 0;

    padding-left: 15px;
    border-left: 1px solid #c3dafa;
}

.ldp-testo-author-name {
    font-size: 15px;
    line-height: 1.4;
    font-weight: 600;
    color: var(--testo-navy);
}

.ldp-testo-author-position {
    font-size: 12px;
    line-height: 1.5;
    font-weight: 400;
    color: var(--testo-text);
}


/* ==========================================================
   07. CASE STUDY SIDEBAR
========================================================== */

.ldp-testo-sidebar {
    display: flex;
    flex-direction: column;
}

.ldp-testo-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    min-height: 32px;
    margin-bottom: 14px;
}

.ldp-testo-sidebar-title {
    font-size: 19px;
    line-height: 1.35;
    font-weight: 600;
    letter-spacing: -0.35px;
    color: var(--testo-navy);
}

.ldp-testo-view-all {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;

    color: #005bd0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;

    transition: color 0.2s ease;
}

.ldp-testo-view-all i {
    font-size: 13px;
    transition: transform 0.2s ease;
}

.ldp-testo-view-all:hover {
    color: var(--testo-navy);
}

.ldp-testo-view-all:hover i {
    transform: translateX(3px);
}


/* ==========================================================
   08. CASE STUDY LIST
========================================================== */

.ldp-testo-list {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 10px;
}

.ldp-testo-item {
    display: grid;
    grid-template-columns:
        minmax(0, 36%)
        minmax(0, 1fr)
        14px;
    align-items: center;
    gap: 12px;

    min-height: 102px;
    padding: 10px;

    border: 1px solid #e8f1ff;
    border-radius: 13px;

    background: #fff;
    color: var(--testo-navy);

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.ldp-testo-item:hover {
    border-color: #9fc6fa;
    background: #f6faff;
}

.ldp-testo-item-active,
.ldp-testo-item-active:hover {
    border-color: #609aff;
    background: linear-gradient(
        110deg,
        #e7f2ff 0%,
        #f8fbff 55%,
        #e2efff 100%
    );

    box-shadow: inset 0 0 0 1px rgba(75, 140, 245, 0.12);
}


/* Case thumbnail */
.ldp-testo-item-thumbnail {
    position: relative;
    display: block;

    width: 100%;
    aspect-ratio: 1.75 / 1;

    overflow: hidden;
    border-radius: 10px;
    background: #e5f0fc;
}

.ldp-testo-item-thumbnail img {
    display: block;
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition: transform 0.3s ease;
}

.ldp-testo-item:hover .ldp-testo-item-thumbnail img {
    transform: scale(1.04);
}

/* Thumbnail play */
.ldp-testo-item-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

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

    width: 34px;
    height: 34px;

    border-radius: 50%;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 2px 10px rgba(0, 32, 75, 0.15);

    color: var(--ldp-modules-navy);
    font-size: 12px;
}

.ldp-testo-item-play i {
    margin-left: 2px;
}


/* Case details */
.ldp-testo-item-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    min-width: 0;
    gap: 3px;
}

.ldp-testo-item-tag {
    display: inline-block;
    max-width: 100%;

    padding: 3px 10px;
    border-radius: 100px;
    background: var(--ldp-modules-bg);
    color: var(--ldp-modules-navy);
    font-size: 11px;
    line-height: 1.3;
    font-weight: 700;
    text-align: left;
}

.ldp-testo-item-title {
    display: block;
    width: 100%;

    font-size: 16px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: -0.15px;
    color: var(--testo-navy);
}

.ldp-testo-item-desc {
    display: -webkit-box;
    width: 100%;

    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    color: #304971;
    font-size: 12px;
    line-height: 1.45;
    font-weight: 400;
}


/* Chevron right */
.ldp-testo-item-arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    color: #0059bf;
    font-size: 14px;
    line-height: 1;

    transition: transform 0.2s ease;
}

.ldp-testo-item:hover .ldp-testo-item-arrow {
    transform: translateX(3px);
}


/* ==========================================================
   09. TRUST BAR & CTA
========================================================== */

.ldp-testo-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    margin-top: 22px;
    padding: 22px 24px;

    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.84);
}

.ldp-testo-trust-list {
    display: grid;
    grid-template-columns: 1.65fr 1fr 1fr 0.9fr;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.ldp-testo-trust-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    min-width: 0;
    min-height: 46px;
    padding: 0 15px;

    border-right: 1px solid #b7d4fb;
}

.ldp-testo-trust-item:first-child {
    justify-content: flex-start;
    padding-left: 0;
}

.ldp-testo-trust-item:last-child {
    border-right: 0;
}

.ldp-testo-trust-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    width: 29px;
    height: 32px;

    color: var(--ldp-modules-navy);
    font-size: 27px;
}

.ldp-testo-trust-primary .ldp-testo-trust-icon {
    width: 38px;
    font-size: 31px;
}

.ldp-testo-trust-text {
    color: var(--testo-navy);

    font-size: 14px;
    line-height: 1.5;
    font-weight: 450;
}

.ldp-testo-trust-primary .ldp-testo-trust-text {
    font-size: 18px;
    line-height: 1.5;
    font-weight: 600;
    color: #06458d;
}


/* ==========================================================
   11. TABLET
   768px - 1023px
========================================================== */

@media (min-width: 768px) and (max-width: 1023px) {

    .ldp-testo {
        padding: 64px 24px;
    }

    .ldp-testo-header {
        margin-bottom: 28px;
    }

    /* Stack featured & sidebar */
    .ldp-testo-content {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 18px;
    }

    .ldp-testo-video-trigger {
        aspect-ratio: 16 / 8.5;
    }

    .ldp-testo-quote {
        padding: 4px 10px 8px;
    }

    .ldp-testo-quote-text {
        font-size: 16px;
    }

    .ldp-testo-sidebar-title {
        font-size: 22px;
    }

    .ldp-testo-item {
        grid-template-columns: 180px minmax(0, 1fr) 20px;
        gap: 18px;
        padding: 12px;
    }

    .ldp-testo-item-title {
        font-size: 17px;
    }

    .ldp-testo-item-desc {
        font-size: 14px;
    }

    .ldp-testo-item-tag {
        font-size: 12px;
    }

    /* Bottom */
    .ldp-testo-bottom {
        flex-direction: column;
        align-items: stretch;
        gap: 22px;
    }

    .ldp-testo-trust-list {
        width: 100%;
    }
}


/* ==========================================================
   12. MOBILE
   <= 767px
========================================================== */

@media (max-width: 767px) {

    /* ------------------------------------------
       SECTION
    ------------------------------------------ */

    .ldp-testo {
        padding: 48px 16px 52px;
    }

    .ldp-testo::before {
        width: 230px;
        height: 230px;
        top: -150px;
        left: -120px;
    }

    .ldp-testo::after {
        width: 260px;
        height: 260px;
        top: 130px;
        right: -200px;
    }


    /* ------------------------------------------
       HEADER
    ------------------------------------------ */

    .ldp-testo-header {
        margin-bottom: 24px;
    }

    .ldp-testo-description {
        font-size: 15px;
        line-height: 1.7;
    }


    /* ------------------------------------------
       MAIN CONTENT
    ------------------------------------------ */

    .ldp-testo-content {
        display: flex;
        flex-direction: column;
        gap: 24px;

        padding: 0;
        border: 0;
        border-radius: 0;

        background: transparent;
        box-shadow: none;
    }


    /* ------------------------------------------
       FEATURED CARD
    ------------------------------------------ */

    .ldp-testo-featured {
        gap: 12px;

        padding: 12px;
        border: 1px solid #e2edfa;
        border-radius: 19px;

        background: rgba(255, 255, 255, 0.95);
        box-shadow: 0 5px 20px rgba(29, 93, 156, 0.035);
    }

    .ldp-testo-video {
        border-radius: 12px;
    }

    .ldp-testo-video-trigger {
        aspect-ratio: 16 / 9;
    }

    .ldp-testo-video-badge {
        top: 11px;
        left: 11px;
        gap: 6px;

        padding: 7px 11px;

        font-size: 11px;
    }

    .ldp-testo-video-badge i {
        font-size: 12px;
    }

    .ldp-testo-video-play {
        width: 54px;
        height: 54px;
        font-size: 19px;
    }

    .ldp-testo-video-info {
        bottom: 12px;
        left: 13px;
        right: 10px;
        gap: 8px;
    }

    .ldp-testo-video-title {
        font-size: 17px;
        line-height: 1.3;
    }

    .ldp-testo-video-subtitle {
        font-size: 11px;
        line-height: 1.4;
    }

    .ldp-testo-video-duration {
        padding: 4px 7px;
        font-size: 10px;
        gap: 4px;
    }

    .ldp-testo-video-duration i {
        font-size: 10px;
    }


    /* ------------------------------------------
       QUOTE CARD
    ------------------------------------------ */

    .ldp-testo-quote {
        gap: 10px;

        padding: 16px 13px;

        border: 1px solid #cfe2fb;
        border-radius: 15px;
        background: #fff;
    }

    .ldp-testo-quote-icon {
        flex: 0 0 24px;
        font-size: 29px;
    }

    .ldp-testo-quote-text {
        margin-bottom: 15px;

        font-size: 14px;
        line-height: 1.65;
    }

    .ldp-testo-author {
        gap: 11px;
    }

    .ldp-testo-author-avatar {
        flex-basis: 39px;
        width: 39px;
        height: 39px;

        font-size: 13px;
    }

    .ldp-testo-author-info {
        padding-left: 11px;
    }

    .ldp-testo-author-name {
        font-size: 14px;
    }

    .ldp-testo-author-position {
        font-size: 11px;
    }


    /* ------------------------------------------
       SIDEBAR HEADER
    ------------------------------------------ */

    .ldp-testo-sidebar-header {
        gap: 10px;
        margin-bottom: 14px;
    }

    .ldp-testo-sidebar-title {
        font-size: 19px;
        line-height: 1.3;
        letter-spacing: -0.3px;
    }

    .ldp-testo-view-all {
        gap: 6px;
        font-size: 11px;
    }

    .ldp-testo-view-all i {
        font-size: 11px;
    }


    /* ------------------------------------------
       CASE STUDY LIST
    ------------------------------------------ */

    .ldp-testo-list {
        gap: 10px;
    }

    .ldp-testo-item {
        grid-template-columns:
            minmax(100px, 30%)
            minmax(0, 1fr)
            12px;
        gap: 11px;

        min-height: 95px;
        padding: 10px;

        border-radius: 14px;
    }

    .ldp-testo-item-thumbnail {
        aspect-ratio: 1.75 / 1;
        border-radius: 9px;
    }

    .ldp-testo-item-play {
        width: 29px;
        height: 29px;
        font-size: 10px;
    }

    .ldp-testo-item-content {
        gap: 3px;
    }

    .ldp-testo-item-tag {
        padding: 3px 9px;
        font-size: 12px;
    }

    .ldp-testo-item-title {
        font-size: 15px;
        line-height: 1.3;
    }

    .ldp-testo-item-desc {
        font-size: 13px;
        line-height: 1.45;
        -webkit-line-clamp: 2;
    }

    .ldp-testo-item-arrow {
        font-size: 12px;
    }


    /* ------------------------------------------
       BOTTOM TRUST AREA
    ------------------------------------------ */

    .ldp-testo-bottom {
        flex-direction: column;
        align-items: stretch;
        gap: 18px;

        margin-top: 22px;
        padding: 0;

        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .ldp-testo-trust-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;

        width: 100%;
    }

    .ldp-testo-trust-item {
        justify-content: flex-start;
        gap: 10px;

        min-height: 75px;
        padding: 12px;

        border: 1px solid var(--testo-border);
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.92);
    }

    .ldp-testo-trust-item:first-child {
        padding-left: 12px;
    }

    .ldp-testo-trust-item:last-child {
        border-right: 1px solid var(--testo-border);
    }

    .ldp-testo-trust-icon {
        flex: 0 0 28px;
        width: 28px;
        height: 30px;

        font-size: 25px;
    }

    .ldp-testo-trust-primary .ldp-testo-trust-icon {
        width: 28px;
        font-size: 26px;
    }

    .ldp-testo-trust-text {
        font-size: 14px;
        line-height: 1.45;
    }

    .ldp-testo-trust-primary .ldp-testo-trust-text {
        font-size: 11px;
        line-height: 1.4;
    }

}
.ldp-testo-title.ldp-section__title {
    margin-bottom: 12px;
}
h2.ldp-footer-title.ldp-section__title {
    margin-bottom: 12px;
}
/* ==========================================================
   13. EXTRA SMALL MOBILE
   <= 390px
========================================================== */

@media (max-width: 390px) {

    .ldp-testo {
        padding-left: 14px;
        padding-right: 14px;
    }

    .ldp-testo-description {
        font-size: 14px;
    }

    .ldp-testo-sidebar-title {
        font-size: 17px;
    }

    .ldp-testo-view-all {
        font-size: 10px;
    }

    .ldp-testo-featured {
        padding: 9px;
    }

    .ldp-testo-video-title {
        font-size: 15px;
    }

    .ldp-testo-video-subtitle {
        font-size: 10px;
    }

    .ldp-testo-video-play {
        width: 46px;
        height: 46px;
        font-size: 16px;
    }

    .ldp-testo-quote {
        gap: 8px;
        padding: 13px 10px;
    }

    .ldp-testo-quote-icon {
        flex-basis: 20px;
        font-size: 24px;
    }

    .ldp-testo-quote-text {
        font-size: 15px;
    }

    .ldp-testo-item {
        grid-template-columns:
            95px
            minmax(0, 1fr)
            10px;
        gap: 8px;

        min-height: 88px;
        padding: 8px;
    }

    .ldp-testo-item-tag {
        padding: 3px 7px;
        font-size: 12px;
    }

    .ldp-testo-item-title {
        font-size: 15px;
    }

    .ldp-testo-item-desc {
        font-size: 13px;
    }

    .ldp-testo-trust-item {
        gap: 8px;
        padding: 10px;
    }

    .ldp-testo-trust-item:first-child {
        padding-left: 10px;
    }

    .ldp-testo-trust-icon {
        flex-basis: 24px;
        width: 24px;
        font-size: 22px;
    }

    .ldp-testo-trust-primary .ldp-testo-trust-icon {
        width: 24px;
        font-size: 23px;
    }

    .ldp-testo-trust-text,
    .ldp-testo-trust-primary .ldp-testo-trust-text {
        font-size: 14px;
    }
}


/* ==========================================================
   14. ACCESSIBILITY & MOTION
========================================================== */

.ldp-testo a:focus-visible,
.ldp-testo button:focus-visible {
    outline: 2px solid var(--testo-primary);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {

    .ldp-testo *,
    .ldp-testo *::before,
    .ldp-testo *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ==========================================================
   3S ERP LANDING PAGE - FOOTER SECTION
   Prefix: ldp-footer
   Desktop / Tablet / Mobile
========================================================== */


/* ==========================================================
   01. SECTION BACKGROUND
========================================================== */

.ldp-footer {
    --footer-primary: #005e9c;
    --footer-blue: #0068ce;
    --footer-navy: #08285f;
    --footer-text: #526889;
    --footer-border: #d6e5f5;
    --footer-light: #edf6ff;
    --footer-orange: #ff8515;

    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding: 72px 24px 76px;

    background:
        radial-gradient(
            ellipse at 0% 100%,
            rgba(190, 224, 251, 0.35),
            transparent 42%
        ),
        radial-gradient(
            ellipse at 100% 0%,
            rgba(202, 227, 250, 0.32),
            transparent 30%
        ),
        #f4faff;

    color: var(--footer-navy);
}

/* Decorative shapes */

.ldp-footer::before,
.ldp-footer::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;
    background: rgba(196, 226, 251, 0.25);
}

.ldp-footer::before {
    width: 440px;
    height: 440px;
    top: -325px;
    left: -220px;
}

.ldp-footer::after {
    width: 480px;
    height: 480px;
    top: 35px;
    right: -345px;
}

.ldp-footer-container {
    position: relative;
    z-index: 1;
    min-width: 0;
}


/* ==========================================================
   02. SECTION HEADING
========================================================== */

.ldp-footer-heading {
    max-width: 950px;
    margin: 0 auto 32px;
    text-align: center;
}

.ldp-footer-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 7px 17px;
    margin-bottom: 13px;

    border-radius: 100px;
    background: #d7ebff;

    color: #005bb9;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 750;
    letter-spacing: 0.2px;
}

.ldp-footer-description {
    max-width: 790px;
    margin: 0 auto;

    color: var(--footer-text);
    font-size: 16px;
    line-height: 1.7;
    font-weight: 400;
}


/* ==========================================================
   03. DESKTOP MAIN GRID
========================================================== */

.ldp-footer-main {
    display: grid;
    grid-template-columns:
        minmax(0, 1.43fr)
        minmax(0, 1fr);

    align-items: stretch;
    gap: 20px;
}

/* Projects left */

.ldp-footer-projects {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
}
.ldp-footer-projects-title.ldp-modules__panel-title {
    font-size: 20px;
    line-height: 2;
}
/* Form right */

.ldp-footer-form-card {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}


/* ==========================================================
   04. SHARED CARDS
========================================================== */

.ldp-footer-projects,
.ldp-footer-form-card {
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 28px;

    background: rgba(255, 255, 255, 0.91);

    box-shadow:
        0 10px 34px rgba(27, 76, 132, 0.045);
}


/* ==========================================================
   05. PROJECT SHOWCASE
========================================================== */

.ldp-footer-projects {
    display: flex;
    flex-direction: column;

    padding: 20px 18px 22px;
}

/* Project heading */

.ldp-footer-projects-header {
    display: flex;
    align-items: center;
    gap: 15px;

    min-height: 52px;
    margin-bottom: 18px;
    padding: 0 12px;
}

.ldp-footer-projects-heading-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 52px;

    width: 52px;
    height: 52px;

    border-radius: 15px;
    background: var(--ldp-modules-bg);
    color: var(--ldp-modules-navy);
    font-size: 30px;
}

/* ==========================================================
   06. PROJECT GRID
   Desktop: 2 top + 3 bottom
========================================================== */

.ldp-footer-projects-track {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 9px;

    min-width: 0;
}

/* Top two projects */

.ldp-footer-project-card:nth-child(-n+2) {
    grid-column: span 3;
}

/* Bottom three projects */

.ldp-footer-project-card:nth-child(n+3) {
    grid-column: span 2;
}


/* Project card */

.ldp-footer-project-card {
    min-width: 0;
    overflow: hidden;
    border-radius: 12px;
    background: #fff;
}

.ldp-footer-project-media {
    position: relative;
    display: block;

    width: 100%;
    overflow: hidden;
    border-radius: inherit;

    background: #d9eaf8;
}

/* Top cards larger */

.ldp-footer-project-card:nth-child(-n+2)
.ldp-footer-project-media {
    aspect-ratio: 1.7 / 1;
}

/* Bottom cards */

.ldp-footer-project-card:nth-child(n+3)
.ldp-footer-project-media {
    aspect-ratio: 1.28 / 1;
}


/* Project image */

.ldp-footer-project-media img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition: transform 0.4s ease;
}

.ldp-footer-project-card:hover
.ldp-footer-project-media img {
    transform: scale(1.035);
}


/* Bottom overlay */

.ldp-footer-project-overlay {
    position: absolute;
    z-index: 1;
    inset: 0;

    pointer-events: none;

    background: linear-gradient(
        to bottom,
        rgba(5, 22, 46, 0) 40%,
        rgba(5, 22, 46, 0.25) 65%,
        rgba(5, 22, 46, 0.88) 100%
    );
}


/* Featured badge */

.ldp-footer-project-badge {
    position: absolute;
    z-index: 2;
    top: 12px;
    left: 12px;

    display: inline-block;

    padding: 5px 11px;
    border-radius: 100px;

    background: #0754a0;
    color: #fff;

    font-size: 10px;
    line-height: 1.4;
    font-weight: 750;
}


/* Project caption */

.ldp-footer-project-caption {
    position: absolute;
    z-index: 2;
    left: 13px;
    right: 10px;
    bottom: 13px;

    display: flex;
    align-items: flex-end;
    gap: 9px;

    color: #fff;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 700;
}

.ldp-footer-project-caption i {
    flex: 0 0 auto;
    font-size: 16px;
    line-height: 1.3;
}

.ldp-footer-project-caption span {
    min-width: 0;
}


/* Mobile-only project description */

.ldp-footer-project-info {
    display: none;
}


/* Desktop: hide slider dots */

.ldp-footer-project-pagination {
    display: none;
}


/* ==========================================================
   07. CONSULTATION BENEFITS
   Desktop only
========================================================== */

.ldp-footer-benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: 0;

    margin-top: auto;
    padding-top: 24px;
}

.ldp-footer-benefit {
    display: flex;
    align-items: center;
    gap: 11px;

    min-width: 0;
    padding: 0 12px;

    border-right: 1px solid #bbd6f4;
}

.ldp-footer-benefit:first-child {
    padding-left: 0;
}

.ldp-footer-benefit:last-child {
    border-right: 0;
    padding-right: 0;
}

.ldp-footer-benefit-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 49px;

    width: 49px;
    height: 49px;

    border-radius: 14px;
    background: var(--ldp-modules-bg);
    color: var(--ldp-modules-navy);
    font-size: 23px;
}

.ldp-footer-benefit-content {
    min-width: 0;
}

.ldp-footer-benefit-title {
    display: block;
    margin-bottom: 3px;
    color: var(--ldp-modules-navy);
    font-size: 16px;
    line-height: 1.35;
    font-weight: 700;
}

.ldp-footer-benefit-desc {
    color: var(--footer-text);
    font-size: 12px;
    line-height: 1.45;
}


/* ==========================================================
   08. FORM CARD
========================================================== */

.ldp-footer-form-card {
    display: flex;
    flex-direction: column;

    padding: 27px 26px 26px;
}


/* ==========================================================
   09. FORM HEADER - DESKTOP
========================================================== */

.ldp-footer-form-header {
    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 20px;
    text-align: center;
}

/* Icon appears only on Mobile */

.ldp-footer-form-header-icon {
    display: none;
}

.ldp-footer-form-header-content {
    min-width: 0;
}

.ldp-footer-form-title {
    margin-bottom: 9px;

    color: var(--footer-navy);
    font-size: clamp(21px, 2vw, 26px);
    line-height: 1.3;
    letter-spacing: -0.45px;
}

.ldp-footer-form-description {
    max-width: 400px;
    margin: 0 auto;

    color: var(--footer-text);
    font-size: 14px;
    line-height: 1.65;
}


/* ==========================================================
   10. FORM BODY / FIELDS LAYOUT
   Field appearance uses existing form CSS
========================================================== */

.ldp-footer-form-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.ldp-footer-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ldp-footer-field {
    position: relative;
    min-width: 0;
}

/* Visually hidden labels
   Keep labels accessible for screen readers */

.ldp-footer-field-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;

    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Input + icon wrapper */

.ldp-footer-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

/* Field icon */

.ldp-footer-input-wrap > i {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 17px;
    transform: translateY(-50%);

    color: #6c8aaf;
    font-size: 17px;
    line-height: 1;

    pointer-events: none;
}

/* Only positioning rules for existing inputs */

.ldp-footer-input-wrap .ldp-footer-input {
    display: block;
    width: 100%;
    min-width: 0;
    padding-left: 47px;
}

/* Form response */

.ldp-footer-form-message[hidden] {
    display: none;
}

.ldp-footer-form-message {
    font-size: 13px;
    line-height: 1.5;
}


/* ==========================================================
   11. FORM SUBMIT BUTTON
========================================================== */

.ldp-footer-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    width: 100%;
    min-height: 54px;
    margin-top: 10px;
    padding: 12px 20px;

    border: 0;
    border-radius: 100px;

    background: linear-gradient(
        100deg,
        #ff990a 0%,
        #ff7910 48%,
        #ff5b12 100%
    );

    color: #fff;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 750;
    text-align: center;

    box-shadow: 0 6px 13px rgba(238, 110, 24, 0.12);

    transition:
        filter 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.ldp-footer-submit i {
    flex-shrink: 0;
    font-size: 14px;
    transition: transform 0.2s ease;
}

.ldp-footer-submit:hover {
    filter: brightness(1.04);
    transform: translateY(-1px);
    box-shadow: 0 8px 17px rgba(238, 110, 24, 0.18);
}

.ldp-footer-submit:hover i {
    transform: translateX(3px);
}

.ldp-footer-submit:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}


/* ==========================================================
   12. DIRECT CONTACT
========================================================== */

.ldp-footer-contact {
    margin-top: auto;
    padding-top: 26px;
}


/* Separator */

.ldp-footer-contact-divider {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 18px;

    color: #657b9a;
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
    white-space: nowrap;
}

.ldp-footer-contact-divider::before,
.ldp-footer-contact-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #cbdef3;
}


/* Contact cards */

.ldp-footer-contact-list {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 10px;
}

.ldp-footer-contact-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-width: 0;
    min-height: 46px;
    padding: 10px 12px;

    border-radius: 12px;
    background: var(--ldp-modules-bg);
    color: var(--ldp-modules-navy);
    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;
    white-space: nowrap;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.ldp-footer-contact-item i {
    flex-shrink: 0;
    font-size: 19px;
}

.ldp-footer-contact-item:hover {
    background: #dceeff;
    color: #004b96;
}

/* ==========================================================
   13. TABLET
   768px - 1023px
========================================================== */

@media (min-width: 768px) and (max-width: 1023px) {

    .ldp-footer {
        padding: 64px 24px;
    }

    .ldp-footer-heading {
        margin-bottom: 30px;
    }
    .ldp-footer-description {
        font-size: 15px;
    }

    /* Stack form and projects */

    .ldp-footer-main {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .ldp-footer-form-card {
        order: 1;
        width: 100%;
        padding: 30px;
    }

    .ldp-footer-projects {
        order: 2;
        width: 100%;
        padding: 24px;
    }

    .ldp-footer-form-header {
        margin-bottom: 24px;
    }

    .ldp-footer-form-title {
        font-size: 26px;
    }

    .ldp-footer-form {
        max-width: 600px;
        width: 100%;
        margin: 0 auto;
    }

    .ldp-footer-contact {
        max-width: 600px;
        width: 100%;
        margin: 0 auto;
        padding-top: 26px;
    }

    .ldp-footer-projects-track {
        gap: 12px;
    }

    .ldp-footer-benefits {
        margin-top: 24px;
    }

    .ldp-footer-benefit-title {
        font-size: 15px;
    }

    .ldp-footer-benefit-desc {
        font-size: 13px;
    }
}


/* ==========================================================
   14. MOBILE
   <= 767px
========================================================== */

@media (max-width: 767px) {

    /* ------------------------------------------
       SECTION
    ------------------------------------------ */

    .ldp-footer {
        padding: 44px 16px 54px;
    }

    .ldp-footer::before {
        width: 260px;
        height: 260px;
        top: -185px;
        left: -140px;
    }

    .ldp-footer::after {
        width: 280px;
        height: 280px;
        top: 80px;
        right: -225px;
    }


    /* ------------------------------------------
       HEADING
    ------------------------------------------ */

    .ldp-footer-heading {
        margin-bottom: 24px;
    }

    .ldp-footer-eyebrow {
        margin-bottom: 12px;
        padding: 6px 13px;

        font-size: 10px;
        letter-spacing: 0;
    }
    .ldp-footer-description {
        max-width: 450px;
        line-height: 1.7;
    }


    /* ------------------------------------------
       MAIN ORDER
    ------------------------------------------ */

    .ldp-footer-main {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .ldp-footer-form-card {
        order: 1;
    }

    .ldp-footer-projects {
        order: 2;
    }


    /* ------------------------------------------
       FORM CARD
    ------------------------------------------ */

    .ldp-footer-form-card {
        padding: 0;

        border: 1px solid #e3edf8;
        border-radius: 18px;

        background: #fff;
        overflow: hidden;

        box-shadow: 0 8px 25px rgba(25, 80, 138, 0.045);
    }


    /* ------------------------------------------
       MOBILE BLUE FORM HEADER
    ------------------------------------------ */

    .ldp-footer-form-header {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;

        min-height: 94px;
        margin: 0;
        padding: 17px 16px;

        border-radius: 0;

        background: #005e9c;
        color: #fff;
        text-align: left;
    }

    .ldp-footer-form-header-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 37px;

        width: 37px;
        height: 37px;

        border-radius: 11px;
        background: rgba(255, 255, 255, 0.12);

        color: #fff;
        font-size: 18px;
    }

    .ldp-footer-form-header-content {
        min-width: 0;
    }

    .ldp-footer-form-title {
        margin-bottom: 5px;

        background-image: linear-gradient(279deg, #fff 12.37%, #fff 81.92%);
        font-size: 20px;
        line-height: 1.35;
        font-weight: 700;
        letter-spacing: -0.2px;
    }

    .ldp-footer-form-description {
        margin: 0;
        max-width: 100%;

        color: rgba(255, 255, 255, 0.85);
        font-size: 14px;
        line-height: 1.5;
    }


    /* ------------------------------------------
       FORM BODY
    ------------------------------------------ */

    .ldp-footer-form-body {
        padding: 17px 15px 15px;
    }

    .ldp-footer-form {
        gap: 10px;
    }

    .ldp-footer-input-wrap > i {
        left: 15px;
        font-size: 15px;
    }

    .ldp-footer-input-wrap .ldp-footer-input {
        padding-left: 43px;
    }


    /* ------------------------------------------
       SUBMIT BUTTON
    ------------------------------------------ */

    .ldp-footer-submit {
        min-height: 49px;
        margin-top: 1px;
        padding: 12px 13px;

        border-radius: 11px;

        font-size: 13px;
        line-height: 1.4;
        gap: 9px;
    }

    .ldp-footer-submit i {
        font-size: 12px;
    }


    /* ------------------------------------------
       MOBILE CONTACT
    ------------------------------------------ */

    .ldp-footer-contact {
        margin-top: 0;
        padding-top: 18px;
    }

    .ldp-footer-contact-divider {
        gap: 9px;
        margin-bottom: 12px;

        color: #7185a2;
        font-size: 10px;
    }

    .ldp-footer-contact-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .ldp-footer-contact-item {
        width: 100%;
        min-height: 42px;
        padding: 10px 12px;

        border-radius: 10px;

        font-size: 12px;
        font-weight: 700;
    }

    .ldp-footer-contact-item i {
        font-size: 16px;
    }


    /* ------------------------------------------
       MOBILE PROJECTS SECTION
       Remove desktop white container
    ------------------------------------------ */

    .ldp-footer-projects {
        display: flex;
        flex-direction: column;

        min-width: 0;
        padding: 0;

        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }


    /* ------------------------------------------
       PROJECT HEADING
    ------------------------------------------ */

    .ldp-footer-projects-header {
        display: block;
        min-height: 0;

        margin-bottom: 14px;
        padding: 0;
    }

    /* Hide icon */

    .ldp-footer-projects-heading-icon {
        display: none;
    }


    /* ------------------------------------------
       MOBILE SLIDER TRACK
       One project per view
    ------------------------------------------ */

    .ldp-footer-projects-track {
        display: flex;
        align-items: stretch;

        gap: 12px;

        width: 100%;
        min-width: 0;

        overflow-x: auto;
        overflow-y: hidden;

        scroll-snap-type: x mandatory;
        scroll-snap-stop: always;
        scroll-behavior: smooth;
        overscroll-behavior-x: contain;

        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .ldp-footer-projects-track::-webkit-scrollbar {
        display: none;
    }


    /* ------------------------------------------
       MOBILE SLIDE CARD
    ------------------------------------------ */

    .ldp-footer-project-card,
    .ldp-footer-project-card:nth-child(-n+2),
    .ldp-footer-project-card:nth-child(n+3) {
        display: flex;
        flex-direction: column;

        flex: 0 0 100%;

        width: 100%;
        min-width: 0;
        max-width: 100%;

        overflow: hidden;

        scroll-snap-align: start;

        border: 1px solid #d9e7f6;
        border-radius: 15px;

        background: #fff;
        box-shadow: 0 3px 12px rgba(24, 83, 145, 0.04);
    }


    /* ------------------------------------------
       MOBILE IMAGE
    ------------------------------------------ */

    .ldp-footer-project-card .ldp-footer-project-media,
    .ldp-footer-project-card:nth-child(-n+2)
    .ldp-footer-project-media,
    .ldp-footer-project-card:nth-child(n+3)
    .ldp-footer-project-media {
        width: 100%;
        aspect-ratio: 1.75 / 1;

        border-radius: 0;
    }

    .ldp-footer-project-media img {
        object-fit: cover;
        object-position: center;
    }

    .ldp-footer-project-overlay {
        background: linear-gradient(
            to bottom,
            transparent 43%,
            rgba(5, 22, 46, 0.1) 58%,
            rgba(5, 22, 46, 0.86) 100%
        );
    }

    .ldp-footer-project-badge {
        top: 11px;
        left: 11px;

        padding: 5px 10px;
        font-size: 10px;
    }

    .ldp-footer-project-caption {
        bottom: 12px;
        left: 13px;
        right: 13px;

        gap: 7px;
        font-size: 13px;
        line-height: 1.4;
    }

    .ldp-footer-project-caption i {
        font-size: 14px;
    }


    /* ------------------------------------------
       MOBILE PROJECT DESCRIPTION
    ------------------------------------------ */

    .ldp-footer-project-info {
        display: block;

        flex: 1;
        padding: 13px 14px 15px;
        background: #fff;
    }

    .ldp-footer-project-info-title {
        margin-bottom: 4px;

        color: #07508a;
        font-size: 12px;
        line-height: 1.5;
        font-weight: 750;
    }

    .ldp-footer-project-info-desc {
        color: #7a8ca5;
        font-size: 11px;
        line-height: 1.5;
    }


    /* ------------------------------------------
       SLIDER DOTS
    ------------------------------------------ */

    .ldp-footer-project-pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;

        margin-top: 13px;
    }

    .ldp-footer-project-dot {
        display: block;
        flex: 0 0 auto;

        width: 7px;
        height: 7px;
        padding: 0;

        border: 0;
        border-radius: 100px;

        background: #c8d9e9;

        cursor: pointer;

        transition:
            width 0.25s ease,
            background 0.25s ease;
    }

    .ldp-footer-project-dot:hover {
        background: #81b1de;
    }

    .ldp-footer-project-dot-active,
    .ldp-footer-project-dot[aria-current="true"] {
        width: 21px;
        background: #0061a5;
    }


    /* ------------------------------------------
       HIDE DESKTOP BENEFITS
    ------------------------------------------ */

    .ldp-footer-benefits {
        display: none;
    }

}


/* ==========================================================
   15. SMALL MOBILE
   <= 390px
========================================================== */

@media (max-width: 390px) {

    .ldp-footer {
        padding-left: 14px;
        padding-right: 14px;
    }

    .ldp-footer-form-header {
        gap: 10px;
        padding: 15px 13px;
    }

    .ldp-footer-form-title {
        font-size: 16px;
    }

    .ldp-footer-form-body {
        padding: 15px 13px 14px;
    }

    .ldp-footer-submit {
        font-size: 12px;
    }

    .ldp-footer-contact-divider {
        font-size: 9px;
    }

    .ldp-footer-project-caption {
        font-size: 12px;
    }

}


/* ==========================================================
   16. ACCESSIBILITY
========================================================== */

.ldp-footer a:focus-visible,
.ldp-footer button:focus-visible,
.ldp-footer input:focus-visible {
    outline: 2px solid #005e9c;
    outline-offset: 3px;
}

.ldp-footer-projects-track:focus:not(:focus-visible) {
    outline: none;
}

@media (prefers-reduced-motion: reduce) {

    .ldp-footer *,
    .ldp-footer *::before,
    .ldp-footer *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }

}

/* =========================================
   LDP POPUP DEMO
   ========================================= */

/* Popup Wrapper */
.ldp-popup__demo {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    isolation: isolate;
}

/* Hidden State */
.ldp-popup__demo[hidden] {
    display: none !important;
}

/* Overlay */
.ldp-popup__demo-overlay {
    position: absolute;
    inset: 0;
    background: rgba(7, 25, 43, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Popup Dialog */
.ldp-popup__demo-dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 980px;
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    background: #fff;
    border-radius: 16px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 0 24px 70px rgba(0, 25, 54, 0.22);
    scrollbar-width: thin;
    scrollbar-color: #c4d3df transparent;
    animation: ldp-popup-demo-enter 0.25s ease both;
}

@keyframes ldp-popup-demo-enter {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Close Button */
.ldp-popup__demo-close {
    position: absolute;
    z-index: 5;
    top: 16px;
    right: 16px;
    width: 34px;
    height: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0;
    border-radius: 50%;
    background: #f1f5f9;
    color: #64748b;
    font-size: 15px;
    transition: background 0.2s, color 0.2s;
}

.ldp-popup__demo-close:hover {
    background: #e2e8f0;
    color: #074B7F;
}

/* Main Grid */
.ldp-popup__demo-content {
    display: grid;
    grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
    align-items: stretch;
    min-width: 0;
}

/* =========================================
   LEFT COLUMN
   ========================================= */

.ldp-popup__demo-left {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 46px 38px 34px;
    background: #074B7F;
    color: #fff;
}

/* Eyebrow */
.ldp-popup__demo-eyebrow {
    display: inline-block;
    margin-bottom: 16px;
    color: #ffbb66;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

/* Main Heading */
.ldp-popup__demo-heading {
    max-width: 370px;
    margin-bottom: 16px;
    color: #fff;
    font-size: clamp(24px, 2.3vw, 30px);
    font-weight: 750;
    line-height: 1.35;
    letter-spacing: -0.7px;
}

/* Description */
.ldp-popup__demo-description {
    max-width: 380px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 14px;
    line-height: 1.8;
}

/* Benefits */
.ldp-popup__demo-benefits {
    display: flex;
    flex-direction: column;
    gap: 17px;
    margin-top: 32px;
    margin-bottom: 28px;
    padding: 0;
}

.ldp-popup__demo-benefit {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: rgba(255, 255, 255, 0.94);
    font-size: 13.5px;
    font-weight: 450;
    line-height: 1.65;
}

.ldp-popup__demo-benefit i {
    flex: 0 0 auto;
    margin-top: 4px;
    color: #FAAF40;
    font-size: 16px;
}

/* Illustration */
.ldp-popup__demo-visual {
    width: 100%;
    height: 150px;
    min-height: 120px;
    margin-top: auto;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    background-color: #12679B;
    background-image:
        linear-gradient(
            180deg,
            rgba(7, 75, 127, 0.06),
            rgba(7, 75, 127, 0.25)
        ),
        url("https://itgtechnology.vn/wp-content/uploads/2026/10/ldp-bg2.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* =========================================
   RIGHT COLUMN
   ========================================= */

.ldp-popup__demo-right {
    min-width: 0;
    padding: 46px 42px 34px;
    background: #fff;
}

/* Form Header */
.ldp-popup__demo-form-header {
    margin-bottom: 26px;
    padding-right: 12px;
}

/* Form Icon */
.ldp-popup__demo-form-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 16px;
    border-radius: 11px;
    background: #FFF2E5;
    color: #E78031;
    font-size: 20px;
}

/* Form Title */
.ldp-popup__demo-form-title {
    margin-bottom: 10px;
    color: #074B7F;
    font-size: 25px;
    font-weight: 750;
    line-height: 1.3;
    letter-spacing: -0.5px;
}

/* Form Description */
.ldp-popup__demo-form-description {
    color: #64748b;
    font-size: 13.5px;
    line-height: 1.75;
}

/* =========================================
   CONTACT FORM 7
   ========================================= */

.ldp-popup__demo-form {
    width: 100%;
    min-width: 0;
}

.ldp-popup__demo-form form {
    width: 100%;
}



/* Contact Form 7 Validation */
.ldp-popup__demo-form .wpcf7-not-valid {
    border-color: #dc3545 !important;
}

.ldp-popup__demo-form .wpcf7-not-valid-tip {
    margin-top: 5px;
    color: #dc3545;
    font-size: 12px;
}

.ldp-popup__demo-form .wpcf7-response-output {
    margin: 14px 0 0;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.6;
}

.ldp-popup__demo-form .wpcf7-spinner {
    vertical-align: middle;
}

/* =========================================
   PRIVACY NOTE
   ========================================= */

.ldp-popup__demo-privacy {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    color: #94a3b8;
    font-size: 11px;
    line-height: 1.6;
    text-align: left;
}

.ldp-popup__demo-privacy i {
    flex: 0 0 auto;
    margin-top: 3px;
    color: #94a3b8;
    font-size: 12px;
}

/* =========================================
   LAPTOP: 1024px - 1439px
   ========================================= */

@media (min-width: 1024px) and (max-width: 1439px) {

    .ldp-popup__demo {
        padding: 20px;
    }

    .ldp-popup__demo-dialog {
        max-width: 900px;
        max-height: calc(100dvh - 40px);
    }

    .ldp-popup__demo-left {
        padding: 38px 32px 30px;
    }

    .ldp-popup__demo-right {
        padding: 38px 36px 30px;
    }

    .ldp-popup__demo-heading {
        font-size: 25px;
    }

    .ldp-popup__demo-form-title {
        font-size: 23px;
    }

    .ldp-popup__demo-benefits {
        gap: 14px;
        margin-top: 24px;
    }

    .ldp-popup__demo-visual {
        height: 125px;
    }
}

/* Laptop with limited viewport height */
@media (min-width: 1024px) and (max-height: 760px) {

    .ldp-popup__demo-left {
        padding-top: 30px;
        padding-bottom: 24px;
    }

    .ldp-popup__demo-right {
        padding-top: 30px;
        padding-bottom: 24px;
    }

    .ldp-popup__demo-eyebrow {
        margin-bottom: 10px;
    }

    .ldp-popup__demo-heading {
        margin-bottom: 10px;
    }

    .ldp-popup__demo-benefits {
        gap: 11px;
        margin-top: 18px;
        margin-bottom: 18px;
    }

    .ldp-popup__demo-form-header {
        margin-bottom: 18px;
    }

    .ldp-popup__demo-form-icon {
        width: 38px;
        height: 38px;
        margin-bottom: 10px;
        font-size: 17px;
    }

    .ldp-popup__demo-visual {
        height: 105px;
        min-height: 105px;
    }
}

/* =========================================
   TABLET: 768px - 1023px
   ========================================= */

@media (min-width: 768px) and (max-width: 1023px) {

    .ldp-popup__demo {
        padding: 20px;
    }

    .ldp-popup__demo-dialog {
        max-width: 760px;
        max-height: calc(100dvh - 40px);
    }

    .ldp-popup__demo-content {
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    }

    .ldp-popup__demo-left {
        padding: 32px 24px;
    }

    .ldp-popup__demo-right {
        padding: 32px 28px;
    }

    .ldp-popup__demo-heading {
        font-size: 22px;
    }

    .ldp-popup__demo-description {
        font-size: 12.5px;
    }

    .ldp-popup__demo-benefits {
        gap: 13px;
        margin-top: 24px;
    }

    .ldp-popup__demo-benefit {
        font-size: 12px;
    }

    .ldp-popup__demo-visual {
        height: 110px;
        min-height: 110px;
    }

    .ldp-popup__demo-form-title {
        font-size: 22px;
    }

    .ldp-popup__demo-form-description {
        font-size: 12.5px;
    }
}

/* =========================================
   MOBILE: <=767px
   ========================================= */

@media (max-width: 767px) {

    .ldp-popup__demo {
        padding: 12px;
    }

    .ldp-popup__demo-dialog {
        width: 100%;
        max-width: 480px;
        max-height: calc(100dvh - 24px);
        border-radius: 12px;
    }

    .ldp-popup__demo-content {
        display: block;
    }

    /* Prioritize form on mobile */
    .ldp-popup__demo-left {
        display: none;
    }

    .ldp-popup__demo-right {
        width: 100%;
        padding: 30px 22px 24px;
    }

    .ldp-popup__demo-close {
        top: 12px;
        right: 12px;
        width: 30px;
        height: 30px;
        font-size: 13px;
    }

    .ldp-popup__demo-form-header {
        margin-bottom: 22px;
        padding-right: 18px;
    }

    .ldp-popup__demo-form-icon {
        width: 40px;
        height: 40px;
        margin-bottom: 12px;
        font-size: 18px;
    }

    .ldp-popup__demo-form-title {
        font-size: 21px;
    }

    .ldp-popup__demo-form-description {
        font-size: 12.5px;
    }

    .ldp-popup__demo-form form > p {
        margin-bottom: 12px;
    }

    .ldp-popup__demo-form input[type="text"],
    .ldp-popup__demo-form input[type="email"],
    .ldp-popup__demo-form input[type="tel"],
    .ldp-popup__demo-form input[type="number"],
    .ldp-popup__demo-form input[type="url"],
    .ldp-popup__demo-form select,
    .ldp-popup__demo-form textarea {
        min-height: 44px;
        font-size: 14px;
    }

    .ldp-popup__demo-privacy {
        margin-top: 16px;
    }
}

/* =========================================
   REDUCED MOTION
   ========================================= */

@media (prefers-reduced-motion: reduce) {

    .ldp-popup__demo-dialog {
        animation: none;
    }

    .ldp-popup__demo-close,
    .ldp-popup__demo-form input,
    .ldp-popup__demo-form button {
        transition: none;
    }
}

/* CSS trích xuất từ css.txt cho button.btn.btnJS */
/* Giữ nguyên giá trị của stylesheet gốc; không bao gồm JavaScript mở popup. */

:root {
  --font-pri: "Inter", sans-serif;
  --font-sec: "WixMadeforText", sans-serif;
  --header-index: 151;
  --header-height: 12.4rem;
}

@media screen and (max-width:1200px) {
  :root {
    --header-height: 10rem;
  }
}

* {
  box-sizing: border-box;
}

html {
  font-size: 10px;
  scroll-behavior: smooth;
}

@media only screen and (max-width:1599.98px) and (min-width:1200px) {
  html {
    font-size: 8px;
  }
}

button,select {
  border: none;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  font-family: var(--font-pri);
}

button {
  padding: 0;
  cursor: pointer;
  background-color: #fff0;
}

.btn {
  --btn-box-shadow: rgba(86, 97, 133, 0.44);
  --btn-hover-box-shadow: rgba(86, 97, 133, 0.5);
  z-index: 3;
  flex-shrink: 0;
  color: #fff;
  cursor: pointer;
  font-weight: 600;
  line-height: 1.5;
  overflow: hidden;
  column-gap: 1rem;
  user-select: none;
  font-size: 2rem;
  text-align: center;
  position: relative;
  width: fit-content;
  height: 5.6rem;
  transition: 0.4s ease-in-out;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  font-family: var(--font-pri);
  border-radius: 6.544rem;
  padding: 2px;
  box-shadow: 8.35px 5.57px 39.96px var(--btn-box-shadow);
}

@media only screen and (max-width:1599.98px) and (min-width:1200px) {
  .btn {
    font-size: max(18px, 2rem);
  }
}

@media only screen and (max-width:1200px) {
  .btn {
    font-size: 1.8rem;
  }
}

@media only screen and (max-width:800px) {
  .btn {
    font-size: 1.6rem;
  }
}

@media only screen and (max-width:1599.98px) and (min-width:1200px) {
  .btn {
    font-size: max(16px, 2rem);
  }
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  box-shadow: inset 0 -7px 24px #ffffff80,0 3px 12px #0057f280;
}

.btn::after {
  content: "";
  position: absolute;
  width: 160%;
  aspect-ratio: 1;
  z-index: -1;
  pointer-events: none;
  animation: spin 3s linear infinite;
  background-image: conic-gradient(from 0 at 50% 50%,rgb(241 97 0 / .8) 0deg,#fff0 60deg,#fff0 310deg,rgb(241 97 0 / .8) 360deg);
}

.btn__inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.4s ease-in-out;
  border-radius: 6.544rem;
  padding: 1.2rem 3.4rem;
  background: linear-gradient(-90deg,#ffc91f -70%,#e78031 100%);
  position: relative;
  overflow: hidden;
}

.btn__inner::before {
  position: absolute;
  content: "";
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(https://itgtechnology.vn/template/assets/css/../images/webinar/decora_btn.svg);
  top: 0;
  height: 60%;
  width: 18%;
  right: 0;
  pointer-events: none;
}

.btn__inner>* {
  position: relative;
  z-index: 1;
}

@media screen and (max-width:1199.98px) {
  .btn__inner {
    padding: 1rem 2.4rem;
  }
}

@media screen and (max-width:991.98px) {
  .btn__inner {
    padding: .75rem 2.35rem;
  }
}

@media screen and (max-width:767.98px) {
  .btn__inner {
    padding: .75rem 1rem;
  }
}

@media screen and (min-width:1201px) {
  .btn:hover {
    box-shadow: 8.35px 5.57px 39.96px 3px var(--btn-hover-box-shadow);
    color: #fff;
  }
  .btn:hover::after {
    left: 0;
    width: calc(100% - 4px);
  }
}

@media screen and (max-width:1199.98px) {
  .btn {
    font-size: 1.6rem;
    height: 4.4rem;
  }
}

@media screen and (max-width:767.98px) {
  .btn {
    font-size: 1.4rem;
    height: 4rem;
    padding: .2rem;
  }
}

.btn span {
  line-height: inherit;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.itg-popup {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s ease, visibility .3s ease;
}

.itg-popup.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.itg-popup__overlay {
  position: absolute;
  inset: 0;
  background: rgba(5, 26, 46, .7);
  backdrop-filter: blur(4px);
}

.itg-popup__content {
  position: relative;
  z-index: 1;
  background: #fff;
  width: 100%;
  max-width: 440px;
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  border-radius: 18px;
  padding: 36px 40px 40px;
  box-shadow: 0 20px 70px rgba(0, 40, 80, .18);
  transform: translateY(20px) scale(.98);
  transition: transform .3s ease;
}

.itg-popup.is-active .itg-popup__content {
  transform: translateY(0) scale(1);
}

.itg-popup__close {
  position: absolute;
  top: 12px;
  right: 16px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: #555;
  font-size: 30px;
  font-weight: 400;
  cursor: pointer;
  transition: color .2s ease;
}

.itg-popup__close:hover {
  color: #e78031;
}

.itg-popup__title {
    color: #074b7f;
    font-family: Inter, sans-serif;
    font-size: 24px;
    line-height: 1.35;
    font-weight: 700;
    text-align: center;
    margin-bottom: 8px;
}

.itg-popup__description {
  color: #676767;
  font-size: 15px;
  line-height: 1.6;
  text-align: center;
  margin: 0 0 28px;
}

.itg-popup__form {
  width: 100%;
}

body.itg-popup-open {
  overflow: hidden;
}

@media (max-width: 600px) {
  .itg-popup {
    padding: 12px;
  }

  .itg-popup__content {
    padding: 40px 20px 24px;
    border-radius: 14px;
    max-height: calc(100dvh - 24px);
  }

  .itg-popup__title {
    font-size: 20px;
  }

  .itg-popup__description {
    font-size: 14px;
    margin-bottom: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .itg-popup,
  .itg-popup__content {
    transition: none;
  }
}

/* ==========================================
   ITG FOOTER - BASE
   CSS hoàn toàn độc lập
   ========================================== */

.erp-site-footer {
  --footer-white: #ffffff;
  --footer-muted: #d7e7f4;
  --footer-border: rgba(255,255,255,.22);

  width: 100%;
  padding: 68px 24px 0;

  background: linear-gradient(
    18deg,
    #052d47 -16.74%,
    #0a5c9d 61.02%,
    #0a5c9d 97.14%
  );

  color: var(--footer-white);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.7;
}

.erp-site-footer *,
.erp-site-footer *::before,
.erp-site-footer *::after {
  box-sizing: border-box;
}

.erp-site-footer__container {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
}

/* ==========================================
   GRID LAYOUT
   ========================================== */

.erp-site-footer__grid {
  display: grid;
  grid-template-columns:
    minmax(0, 1.45fr)
    minmax(0, .65fr)
    minmax(0, .85fr)
    minmax(0, 1.4fr);

  gap: 48px;
  align-items: start;
}

/* ==========================================
   COMPANY INTRODUCTION
   ========================================== */

.erp-site-footer__about {
  min-width: 0;
}

.erp-site-footer__logo {
  display: inline-flex;
  align-items: center;
  margin-bottom: 25px;
}

.erp-site-footer__logo img {
  display: block;
  width: 166px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.erp-site-footer__description {
  max-width: 370px;
  margin: 0;

  color: var(--footer-muted);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.85;
  text-align: left;
}

/* ==========================================
   SOCIAL ICONS
   ========================================== */

.erp-site-footer__social {
  display: flex;
  align-items: center;
  gap: 22px;

  margin-top: 28px;
}

.erp-site-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 24px;
  height: 24px;
  flex: 0 0 24px;

  text-decoration: none;

  transition:
    opacity .2s ease,
    transform .2s ease;
}

.erp-site-footer__social img {
  display: block;
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.erp-site-footer__social a:hover {
  opacity: .85;
  transform: translateY(-3px);
}

/* ==========================================
   DMCA
   ========================================== */

.erp-site-footer__dmca {
  margin-top: 26px;
}

.erp-site-footer__dmca img {
  display: block;
  width: 100px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* ==========================================
   COLUMN HEADINGS
   ========================================== */

.erp-site-footer__heading {
  display: block;
  margin: 5px 0 26px;
  padding: 0;

  color: #fff;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.2px;
  text-transform: none;
}

/* ==========================================
   LINK LISTS
   ========================================== */

.erp-site-footer__links {
  display: flex;
  flex-direction: column;
  gap: 11px;

  margin: 0;
  padding: 0;
  list-style: none;
}

.erp-site-footer__links li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.erp-site-footer__links a {
  display: inline-block;

  color: var(--footer-muted);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  text-decoration: none;

  transition:
    color .2s ease,
    transform .2s ease;
}

.erp-site-footer__links a:hover {
  color: #fff;
  transform: translateX(4px);
}

/* ==========================================
   CONTACT INFORMATION
   ========================================== */

.erp-site-footer__contact-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.erp-site-footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: 13px;
}

.erp-site-footer__contact-item > i {
  display: inline-flex;
  justify-content: center;
  align-items: center;

  flex: 0 0 18px;
  width: 18px;
  height: 24px;
  margin-top: 2px;

  color: #fff;
  font-size: 15px;
}

.erp-site-footer__contact-item > div {
  flex: 1 1 auto;
  min-width: 0;

  color: var(--footer-muted);
  font-size: 14px;
  line-height: 1.75;
}

.erp-site-footer__contact-item strong {
  display: block;
  color: #fff;
  font-weight: 600;
}

.erp-site-footer__contact-item a {
  color: var(--footer-muted);
  text-decoration: none;
  overflow-wrap: anywhere;

  transition: color .2s ease;
}

.erp-site-footer__contact-item a:hover {
  color: #fff;
  text-decoration: underline;
}

/* ==========================================
   COPYRIGHT
   ========================================== */

.erp-site-footer__bottom {
  margin-top: 55px;
  padding: 21px 0 24px;

  border-top: 1px solid var(--footer-border);
  text-align: center;
}

.erp-site-footer__bottom p {
  margin: 0;
  color: #cfdfed;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
}

/* ==========================================
   SMALL DESKTOP
   1024px - 1279px
   ========================================== */

@media (min-width: 1024px) and (max-width: 1279px) {

  .erp-site-footer__grid {
    grid-template-columns:
      minmax(0, 1.2fr)
      minmax(0, .65fr)
      minmax(0, .85fr)
      minmax(0, 1.3fr);

    gap: 28px;
  }

  .erp-site-footer__heading {
    font-size: 18px;
  }

  .erp-site-footer__description,
  .erp-site-footer__links a,
  .erp-site-footer__contact-item > div {
    font-size: 13px;
  }
}

/* ==========================================
   TABLET
   768px - 1023px
   ========================================== */

@media (min-width: 768px) and (max-width: 1023px) {

  .erp-site-footer {
    padding: 55px 32px 0;
  }

  .erp-site-footer__grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 48px;
    row-gap: 42px;
  }

  .erp-site-footer__about {
    grid-column: 1 / -1;
  }

  .erp-site-footer__description {
    max-width: 650px;
  }

  .erp-site-footer__contact {
    grid-column: 1 / -1;
  }

  .erp-site-footer__contact-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 30px;
  }

  .erp-site-footer__bottom {
    margin-top: 45px;
  }
}

/* ==========================================
   MOBILE
   <= 767px
   ========================================== */

@media (max-width: 767px) {

  .erp-site-footer {
    padding: 42px 20px 0;
  }

  .erp-site-footer__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 36px 20px;
  }

  /* Giới thiệu chiếm toàn bộ chiều ngang */
  .erp-site-footer__about {
    grid-column: 1 / -1;
  }

  .erp-site-footer__logo {
    margin-bottom: 20px;
  }

  .erp-site-footer__logo img {
    width: 150px;
  }

  .erp-site-footer__description {
    max-width: 100%;
    font-size: 13px;
    line-height: 1.8;
  }

  .erp-site-footer__social {
    gap: 18px;
    margin-top: 24px;
  }

  .erp-site-footer__social a,
  .erp-site-footer__social img {
    width: 38px;
    height: 38px;
  }

  .erp-site-footer__social a {
    flex-basis: 38px;
  }

  .erp-site-footer__dmca {
    margin-top: 22px;
  }

  .erp-site-footer__dmca img {
    width: 140px;
  }

  /* Headings */
  .erp-site-footer__heading {
    margin: 0 0 18px;
    font-size: 17px;
  }

  /* Lists */
  .erp-site-footer__links {
    gap: 12px;
  }

  .erp-site-footer__links a {
    font-size: 13px;
    line-height: 1.5;
  }

  /* Liên hệ full width */
  .erp-site-footer__contact {
    grid-column: 1 / -1;
  }

  .erp-site-footer__contact-list {
    gap: 18px;
  }

  .erp-site-footer__contact-item > div {
    font-size: 13px;
    line-height: 1.7;
  }

  /* Copyright */
  .erp-site-footer__bottom {
    margin-top: 38px;
    padding: 20px 0 22px;
  }

  .erp-site-footer__bottom p {
    font-size: 12px;
  }
}

/* ==========================================
   EXTRA SMALL MOBILE
   ========================================== */

@media (max-width: 375px) {

  .erp-site-footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  .erp-site-footer__grid {
    column-gap: 14px;
  }

  .erp-site-footer__heading {
    font-size: 16px;
  }

  .erp-site-footer__links a {
    font-size: 12px;
  }
}

/* ==========================================
   ACCESSIBILITY
   ========================================== */

.erp-site-footer a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .erp-site-footer__social a,
  .erp-site-footer__links a,
  .erp-site-footer__contact-item a {
    transition: none;
  }
}
.text-gradient {    background-image: linear-gradient(279deg, #3553a2 12.37%, #0c3b60 81.92%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: #fff0;
}