/* =========================
   TRUST SECTION
========================= */

.trust-section{
  overflow:hidden;
}

.trust-wrap{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:40px;
  align-items:center;
}

/* LEFT */

.trust-tag{
  display:inline-flex;
  align-items:center;

  padding:8px 14px;

  border-radius:999px;

  background:
  rgba(8,54,111,.08);

  color:#08366f;

  font-size:12px;
  font-weight:800;
  letter-spacing:.4px;
}

.trust-title{
  margin:18px 0 18px;

  font-size:52px;
  line-height:1.12;
  letter-spacing:-1.2px;

  color:#06162e;

  max-width:760px;
}

.trust-desc{
  max-width:620px;

  font-size:18px;
  line-height:1.75;

  color:#667085;

  margin-bottom:28px;
}

.trust-list{
  display:grid;
  gap:14px;
}

.trust-item{
  display:flex;
  align-items:center;
  gap:12px;

  padding:18px 20px;

  background:#fff;

  border:
  1px solid #e8edf7;

  border-radius:18px;

  font-size:16px;
  font-weight:700;
  color:#172033;

  box-shadow:
  0 10px 24px rgba(0,0,0,.04);

  transition:.25s ease;
}

.trust-item:hover{
  transform:translateY(-2px);

  box-shadow:
  0 14px 28px rgba(0,0,0,.06);
}

.trust-item span{
  color:#f6b73c;
  font-size:18px;
  font-weight:900;
}

/* RIGHT */

.trust-image{
  position:relative;

  min-height:520px;

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

/* blur background */

.trust-bg{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  object-fit:contain;

  filter:blur(12px);

  transform:scale(1.08);

  opacity:.22;
}

/* main image */

.main-person{
  position:relative;
  z-index:2;

  width:100%;
  max-width:360px;

  object-fit:contain;

  filter:
  drop-shadow(
    0 24px 44px rgba(0,0,0,.16)
  );
}

/* badge */

.mini-badge{
  position:absolute;
  z-index:3;

  bottom:20px;
  left:50%;

  transform:
  translateX(-50%);

  width:270px;

  padding:14px 16px;

  border-radius:18px;

  text-align:center;

  background:
  rgba(255,255,255,.86);

  backdrop-filter:blur(10px);

  border:
  1px solid rgba(255,255,255,.45);

  box-shadow:
  0 12px 30px rgba(0,0,0,.10);
}

.mini-badge strong{
  display:block;

  color:#06162e;

  font-size:18px;
  font-weight:800;

  margin-bottom:4px;
}

.mini-badge span{
  color:#667085;

  font-size:14px;
  line-height:1.5;
}

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

@media(max-width:991px){

  .trust-wrap{
    grid-template-columns:1fr;
    gap:34px;
  }

  .trust-content{
    text-align:center;
  }

  .trust-tag{
    margin:auto;
  }

  .trust-title{
    max-width:100%;
    font-size:40px;
  }

  .trust-desc{
    margin-left:auto;
    margin-right:auto;
  }

  .trust-list{
    max-width:620px;
    margin:auto;
  }

  .trust-image{
    min-height:auto;
  }

}

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

@media(max-width:600px){

  .trust-section{
    padding:52px 0;
  }

  .trust-wrap{
    gap:26px;
  }

  .trust-title{
    font-size:32px;
    line-height:1.18;
    letter-spacing:-.5px;

    margin:14px 0;
  }

  .trust-desc{
    font-size:15px;
    line-height:1.65;

    margin-bottom:20px;
  }

  .trust-list{
    gap:10px;
  }

  .trust-item{
    padding:14px 14px;

    border-radius:15px;

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

    text-align:left;
  }

  .trust-image{
    min-height:420px;
  }

  .main-person{
    max-width:260px;
  }

  .mini-badge{
    width:230px;

    padding:12px 14px;

    bottom:10px;
  }

  .mini-badge strong{
    font-size:16px;
  }

  .mini-badge span{
    font-size:12px;
  }

}
      .hero-slider-track {
  cursor: grab;
  user-select: none;
}

.hero-slider-track img {
  pointer-events: none;
}
      /* VALIDATE FORM */
.form input.input-error,
.form select.input-error,
.form textarea.input-error {
  border-color: #d92d20;
  box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.12);
  background: #fffafa;
}

.field-error {
  margin: -6px 0 2px;
  color: #d92d20;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}
      :root {
        --primary: #08366f;
        --primary-2: #0b56b3;
        --secondary: #f6b73c;
        --red: #e11d2e;
        --dark: #06162e;
        --light: #f4f7fb;
        --text: #172033;
        --muted: #667085;
        --white: #ffffff;
        --radius: 20px;
        --shadow: 0 18px 45px rgba(7, 24, 47, 0.14);
      }

      * {
        box-sizing: border-box;
      }
      html {
        scroll-behavior: smooth;
      }

      body {
        margin: 0;
        font-family:
          "Be Vietnam Pro", "Inter", "Segoe UI", Arial, Helvetica, sans-serif;
        color: var(--text);
        background: var(--white);
        line-height: 1.6;
        overflow-x: hidden;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }

      a {
        text-decoration: none;
        color: inherit;
      }
      img {
        max-width: 100%;
        display: block;
      }

      .container {
        width: min(1160px, calc(100% - 32px));
        margin: 0 auto;
      }

      .topbar {
        background: var(--dark);
        color: var(--white);
        padding: 10px 0;
        font-size: 14px;
      }

      .topbar .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 14px;
        flex-wrap: wrap;
      }

      .nav {
        position: sticky;
        top: 0;
        z-index: 99;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid #e8edf7;
      }

      .nav-inner {
        height: 72px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
      }

      .logo {
        display: flex;
        align-items: center;
        gap: 10px;
        color: var(--primary);
        font-weight: 900;
        font-size: 22px;
        white-space: nowrap;
      }

      .logo-mark {
        width: 42px;
        height: 42px;
        border-radius: 12px;
        background: linear-gradient(135deg, var(--primary), var(--primary-2));
        color: var(--white);
        display: grid;
        place-items: center;
        font-weight: 900;
      }

      .menu {
        display: flex;
        gap: 18px;
        color: var(--muted);
        font-size: 15px;
        font-weight: 700;
      }

      .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border: none;
        border-radius: 999px;
        padding: 13px 20px;
        font-weight: 900;
        cursor: pointer;
        transition: 0.2s ease;
        font-family: inherit;
      }

      .btn-primary {
        background: linear-gradient(135deg, var(--secondary), #ff8a00);
        color: #221300;
        box-shadow: 0 12px 28px rgba(246, 183, 60, 0.34);
      }

      .btn-primary:hover {
        transform: translateY(-2px);
      }

      .btn-outline {
        border: 1px solid rgba(255, 255, 255, 0.45);
        color: var(--white);
        background: rgba(255, 255, 255, 0.08);
      }

      .hero {
        color: var(--white);
        padding: 70px 0 58px;
        overflow: hidden;
        background:
          radial-gradient(
            circle at 12% 8%,
            rgba(246, 183, 60, 0.24),
            transparent 33%
          ),
          linear-gradient(135deg, #06162e 0%, #08366f 58%, #0b56b3 100%);
      }

      .hero-grid {
        display: flex;
        flex-direction: column;
        gap: 28px;
        align-items: stretch;
        text-align: left;
        max-width: 980px;
        margin: 0 auto;
      }

      .hero-main {
        width: 100%;
      }

      .hero p {
        margin-left: auto;
        margin-right: auto;
      }

      .hero-actions {
        justify-content: flex-start;
      }

      .hero-card,
      .hero-proof-card,
      .portrait-card {
        max-width: 820px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
      }

      .hero-proof-card {
        text-align: left;
      }


      h1 {
        margin: 0 0 20px;
        font-size: clamp(38px, 5vw, 64px);
        line-height: 1.12;
        letter-spacing: -0.6px;
      }

      .hero-title {
        max-width: 980px;
        margin: 0 auto 20px;
        text-align: left;
        font-size: clamp(42px, 5.4vw, 70px);
        line-height: 1.05;
        letter-spacing: -1.4px;
      }

      .hero-title span {
        display: block;
      }

      .hero-title .hero-highlight {
        color: var(--secondary);
        text-shadow: 0 10px 28px rgba(246, 183, 60, 0.22);
      }
   
      .hero-lead {
        max-width: 860px !important;
        margin: 0 auto 26px !important;
        text-align: left;
        color: rgba(255, 255, 255, 0.88) !important;
        font-size: clamp(17px, 2vw, 22px) !important;
        line-height: 1.65;
        font-weight: 700;
      }

      .hero p {
        color: rgba(255, 255, 255, 0.86);
        font-size: 19px;
        margin: 0 0 24px;
        max-width: 650px;
      }

      .hero-actions {
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
        margin-bottom: 24px;
      }

      .hero-card,
      .portrait-card {
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: var(--radius);
        padding: 20px;
        backdrop-filter: blur(12px);
      }

      .hero-card h3 {
        margin: 0 0 12px;
        font-size: 22px;
      }

      .check-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        gap: 11px;
      }

      .check-list li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
      }

      .check-list span {
        color: var(--secondary);
        font-weight: 900;
      }

      .portrait-card {
        margin-top: 16px;
        display: grid;
        grid-template-columns: 96px 1fr;
        gap: 16px;
        align-items: center;
      }

      .portrait-photo {
        width: 96px;
        height: 96px;
        border-radius: 24px;
        background: linear-gradient(135deg, var(--secondary), #ff8a00);
        color: var(--dark);
        display: grid;
        place-items: center;
        border: 3px solid rgba(255, 255, 255, 0.7);
        font-size: 34px;
        font-weight: 900;
        overflow: hidden;
      }

      .portrait-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .portrait-card h3 {
        color: var(--white);
        margin: 0 0 4px;
        font-size: 20px;
      }

      .portrait-card p {
        color: rgba(255, 255, 255, 0.84);
        margin: 0;
        font-size: 15px;
      }

      .countdown-wrap {
        position: relative;
        overflow: hidden;
        color: var(--dark);
        background: var(--white);
        border-radius: 24px;
        padding: 24px;
        box-shadow: var(--shadow);
        border: 3px solid var(--secondary);
      }

      .countdown-wrap::before {
        content: "TƯ VẤN MIỄN PHÍ";
        position: absolute;
        top: 16px;
        right: -44px;
        transform: rotate(35deg);
        background: var(--red);
        color: var(--white);
        font-size: 12px;
        font-weight: 900;
        padding: 7px 44px;
        letter-spacing: 0.4px;
      }

      .offer {
        display: inline-block;
        background: #fff4db;
        color: #9a5700;
        padding: 8px 12px;
        border-radius: 999px;
        font-weight: 900;
        margin-bottom: 12px;
      }

      .countdown-title {
        margin: 0 0 8px;
        color: var(--dark);
        font-size: 25px;
        line-height: 1.25;
      }

      .countdown-wrap .sub {
        color: var(--muted);
        font-weight: 700;
        margin: 0 0 12px;
      }

      .countdown {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        margin: 16px 0 20px;
        padding: 12px;
        border-radius: 18px;
        background: linear-gradient(135deg, #fff7e6, #fff);
        border: 1px dashed var(--secondary);
      }

      .timebox {
        text-align: center;
        padding: 12px 8px;
        background: var(--light);
        border: 1px solid #e1e8f5;
        border-radius: 14px;
      }

      .timebox strong {
        display: block;
        color: var(--red);
        font-size: 30px;
        line-height: 1;
      }

      .timebox small {
        color: var(--muted);
        font-weight: 800;
      }

      .form {
        display: grid;
        gap: 12px;
      }

      .form input,
      .form select,
      .form textarea {
        width: 100%;
        border: 1px solid #d8e0ee;
        border-radius: 12px;
        padding: 14px;
        font: inherit;
        outline: none;
      }

      .form textarea {
        min-height: 90px;
        resize: vertical;
      }

      .section {
        padding: 76px 0;
      }
      .section-light {
        background: var(--light);
      }

      .section-title {
        max-width: 820px;
        margin: 0 auto 42px;
        text-align: center;
      }

      .tag {
        color: var(--primary);
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 8px;
      }

      h2 {
        color: var(--dark);
        margin: 0 0 14px;
        font-size: clamp(30px, 4vw, 46px);
        line-height: 1.18;
        letter-spacing: -0.35px;
      }

      .section-title p {
        color: var(--muted);
        font-size: 18px;
        margin: 0;
      }

      .grid-3 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 22px;
      }

      .card {
        background: var(--white);
        border: 1px solid #edf1f8;
        border-radius: var(--radius);
        padding: 26px;
        box-shadow: 0 10px 28px rgba(7, 24, 47, 0.08);
      }

      .card .icon {
        width: 52px;
        height: 52px;
        border-radius: 16px;
        background: #eaf2ff;
        display: grid;
        place-items: center;
        color: var(--primary);
        font-size: 25px;
        margin-bottom: 16px;
        font-weight: 900;
      }

      .card h3 {
        margin: 0 0 10px;
        color: var(--dark);
        font-size: 22px;
      }

      .card p {
        color: var(--muted);
        margin: 0;
      }

      .split {
        display: grid;
        grid-template-columns: 0.95fr 1.05fr;
        gap: 42px;
        align-items: center;
      }

      .image-box {
        min-height: 430px;
        border-radius: 28px;
        background: url("./imgaes/thangmay.png") center/cover;
        box-shadow: var(--shadow);
        position: relative;
        overflow: hidden;
      }

      .badge-card {
        position: absolute;
        left: 22px;
        right: 22px;
        bottom: 22px;
        background: rgba(255, 255, 255, 0.94);
        border-radius: 20px;
        padding: 18px;
        color: var(--dark);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
      }

      .badge-card strong {
        display: block;
        color: var(--primary);
        font-size: 22px;
        margin-bottom: 4px;
      }

      .about-box {
        background: var(--white);
        border: 1px solid #e8edf7;
        border-radius: 28px;
        padding: 34px;
        box-shadow: var(--shadow);
      }

      .about-box p {
        color: var(--muted);
      }

      .about-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
        margin-top: 22px;
      }

      .stat {
        text-align: center;
        padding: 16px;
        border-radius: 18px;
        background: var(--light);
        border: 1px solid #e1e8f5;
      }

      .stat strong {
        display: block;
        color: var(--primary);
        font-size: 26px;
        line-height: 1.1;
      }

      .stat span {
        color: var(--muted);
        font-size: 14px;
        font-weight: 800;
      }

      /* VIDEO MOBILE-FIRST KIỂU LANDING PAGE MẪU */
      .video-section {
        background: #eef3fb;
        padding: 70px 0;
      }

      .video-list {
        display: grid;
        grid-template-columns: 1fr;
        gap: 26px;
        max-width: 440px;
        margin: 0 auto;
      }

      .video-card {
        display: block;
        background: #fff;
        overflow: hidden;
        box-shadow: 0 12px 30px rgba(7, 24, 47, 0.12);
        border: 1px solid #e5ebf5;
      }

      .video-thumb {
        position: relative;
        aspect-ratio: 16 / 10.1;
        overflow: hidden;
        background:
          linear-gradient(135deg, rgba(6, 22, 46, 0.28), rgba(6, 22, 46, 0.5)),
          url("./imgaes/youtobe3.png") center/cover;
      }

      @media (max-width:600px){

  .video-thumb{
    aspect-ratio:16/9 !important;
    background-size: contain !important;
  }

}
      .video-card:nth-child(2) .video-thumb {
        background:
          linear-gradient(135deg, rgba(6, 22, 46, 0.28), rgba(6, 22, 46, 0.5)),
          url("./imgaes/youtobe1.png") center/cover;
      }

      .video-card:nth-child(3) .video-thumb {
        background:
          linear-gradient(135deg, rgba(6, 22, 46, 0.28), rgba(6, 22, 46, 0.5)),
          url("./imgaes/youtobe2.png") center/cover;
      }

      .video-card:nth-child(4) .video-thumb {
        background:
          linear-gradient(135deg, rgba(6, 22, 46, 0.28), rgba(6, 22, 46, 0.5)),
          url("./imgaes/youtobe4.png") center/cover;
      }

      .speaker-cutout {
        position: absolute;
        left: 18px;
        bottom: 0;
        width: 36%;
        max-width: 150px;
        height: 82%;
        border-radius: 80px 80px 0 0;
        background:
          radial-gradient(circle at 50% 22%, #f1c7a6 0 16%, transparent 17%),
          linear-gradient(180deg, #10213f 0%, #050b17 100%);
        border: 3px solid rgba(255, 255, 255, 0.15);
        box-shadow: 0 16px 28px rgba(0, 0, 0, 0.22);
      }

      .speaker-cutout::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 20%;
        transform: translateX(-50%);
        width: 34%;
        height: 22%;
        border-radius: 50% 50% 42% 42%;
        background: #f5d0b4;
      }

      .video-logo {
        position: absolute;
        top: 16px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        gap: 6px;
        color: #fff;
        font-size: 11px;
        font-weight: 900;
        opacity: 0.94;
      }

      .video-logo span {
        width: 28px;
        height: 28px;
        border-radius: 9px;
        background: #fff;
        color: var(--primary);
        display: grid;
        place-items: center;
        font-weight: 900;
      }

      .video-headline {
        position: absolute;
        top: 62px;
        right: 18px;
        left: 43%;
        color: #fff;
        text-transform: uppercase;
        font-weight: 900;
        font-size: clamp(12px, 3.6vw, 18px);
        line-height: 1.2;
        text-align: left;
        text-shadow: 0 3px 10px rgba(0, 0, 0, 0.24);
        overflow-wrap: break-word;
        word-break: normal;
      }

      .video-headline .red-box {
        display: inline-block;
        background: var(--red);
        padding: 2px 6px;
        margin: 2px 0;
        line-height: 1.2;
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
      }

      .video-headline .gold {
        color: var(--secondary);
      }

      .play-button {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 58px;
        height: 58px;
        border-radius: 50%;
        background: rgba(225, 29, 46, 0.96);
        color: #fff;
        display: grid;
        place-items: center;
        font-size: 25px;
        line-height: 1;
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.28);
        padding-left: 4px;
      }

      .person-box {
        position: absolute;
        left: 16px;
        bottom: 16px;
        min-width: 220px;
        max-width: 72%;
        background: rgba(255, 255, 255, 0.94);
        color: #0c1f3f;
        padding: 10px 13px 10px 44px;
        border-left: 5px solid var(--primary);
        box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
        border-radius: 0 12px 12px 0;
        padding-right: 24px;
      }

      .person-box::before {
        content: "P";
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        width: 24px;
        height: 24px;
        border-radius: 7px;
        background: var(--primary);
        color: #fff;
        display: grid;
        place-items: center;
        font-size: 13px;
        font-weight: 900;
      }

      .person-box strong {
        display: block;
        font-size: 13px;
        line-height: 1.15;
      }

      .person-box span {
        display: block;
        color: var(--muted);
        font-size: 11px;
        margin-top: 2px;
        line-height: 1.25;
      }

      .video-quote {
        padding: 18px 18px 24px;
        text-align: center;
        color: #24364f;
        font-size: 16px;
        line-height: 1.5;
        font-weight: 700;
        font-style: italic;
        background: #fff;
      }

      .video-quote span {
        color: var(--primary);
      }

      .video-note {
        max-width: 760px;
        margin: 28px auto 0;
        text-align: center;
        color: var(--muted);
        font-weight: 700;
      }

      .steps {
        counter-reset: step;
        display: grid;
        gap: 16px;
      }

      .step {
        background: var(--white);
        border: 1px solid #e6edf7;
        border-radius: 18px;
        padding: 20px;
        display: grid;
        grid-template-columns: 52px 1fr;
        gap: 16px;
        align-items: start;
      }

      .step::before {
        counter-increment: step;
        content: counter(step);
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: var(--primary);
        color: var(--white);
        display: grid;
        place-items: center;
        font-weight: 900;
        font-size: 22px;
      }

      .step h3 {
        margin: 0 0 6px;
        color: var(--dark);
      }
      .step p {
        margin: 0;
        color: var(--muted);
      }

      .project-card {
        min-height: 240px;
        border-radius: 22px;
        overflow: hidden;
        position: relative;
        color: var(--white);
        display: flex;
        align-items: flex-end;
        padding: 22px;
        background: linear-gradient(
          135deg,
          rgba(7, 24, 47, 0.92),
          rgba(11, 61, 145, 0.78)
        );
        box-shadow: 0 12px 28px rgba(7, 24, 47, 0.12);
      }

      .project-card h3 {
        margin: 0 0 6px;
      }
      .project-card p {
        margin: 0;
        color: rgba(255, 255, 255, 0.82);
      }

      .testimonial {
        background: var(--white);
        border-radius: var(--radius);
        padding: 24px;
        border: 1px solid #e8edf7;
        box-shadow: 0 10px 28px rgba(7, 24, 47, 0.06);
      }

      .testimonial p {
        color: var(--muted);
        margin: 0 0 14px;
        font-style: italic;
      }

      .testimonial strong {
        color: var(--dark);
      }

      .cta-band {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 26px;
        background: linear-gradient(135deg, var(--dark), var(--primary));
        color: var(--white);
        border-radius: 30px;
        padding: 42px;
        box-shadow: var(--shadow);
      }

      .cta-band h2 {
        color: var(--white);
        margin-bottom: 10px;
      }
      .cta-band p {
        margin: 0;
        color: rgba(255, 255, 255, 0.82);
        font-size: 18px;
      }

      .faq {
        max-width: 880px;
        margin: 0 auto;
        display: grid;
        gap: 14px;
      }

      details {
        background: var(--white);
        border-radius: 16px;
        padding: 18px 20px;
        border: 1px solid #e6edf7;
        box-shadow: 0 6px 18px rgba(7, 24, 47, 0.05);
      }

      summary {
        font-weight: 900;
        color: var(--dark);
        cursor: pointer;
      }

      details p {
        color: var(--muted);
        margin-bottom: 0;
      }

      .footer {
        background: var(--dark);
        color: rgba(255, 255, 255, 0.78);
        padding: 38px 0;
        font-size: 15px;
      }

      .footer strong {
        color: var(--white);
      }

      .floating-cta {
        position: fixed;
        right: 18px;
        bottom: 18px;
        z-index: 150;
        display: flex;
        flex-direction: column;
        gap: 10px;
      }

      .floating-cta a {
        padding: 12px 16px;
        border-radius: 999px;
        background: var(--secondary);
        color: #1f1300;
        font-weight: 900;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
        text-align: center;
      }


      .hero-slider {
        position: relative;
        margin: 26px 0 24px;
        border-radius: 24px;
        overflow: hidden;
        box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22);
        border: 1px solid rgba(255, 255, 255, 0.18);
      }

      .hero-slider-track {
        display: flex;
        
      }

      .hero-slide {
        position: relative;
        flex: 0 0 100%;
        min-width: 100%;
        aspect-ratio: 16 / 10;
        overflow: hidden;
      }

      .hero-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .hero-slide::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(6, 22, 46, 0.86), rgba(6, 22, 46, 0.08));
      }

      .hero-slide-caption {
        position: absolute;
        left: 18px;
        right: 18px;
        bottom: 18px;
        z-index: 2;
      }

      .hero-slide-caption strong {
        display: block;
        color: #fff;
        font-size: 20px;
        line-height: 1.15;
        margin-bottom: 4px;
      }

      .hero-slide-caption span {
        color: rgba(255, 255, 255, 0.86);
        font-size: 14px;
        font-weight: 600;
      }

      .hero-slider-dots {
        position: absolute;
        left: 18px;
        bottom: 14px;
        z-index: 3;
        display: flex;
        gap: 6px;
      }

      .hero-slider-dots span {
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.52);
      }

      .hero-slider-dots span:first-child {
        width: 22px;
        background: #fff;
      }

      .project-stack-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 22px;
      }

      .project-stack {
        display: grid;
        gap: 14px;
      }

      @media (min-width: 768px) {
        .video-list {
          max-width: 920px;
          grid-template-columns: repeat(2, 1fr);
        }
      }

      @media (min-width: 901px) and (max-width: 1120px) {
        .menu {
          gap: 10px;
          font-size: 13px;
        }
        .nav-inner .btn {
          padding: 11px 14px;
          font-size: 14px;
        }
        .hero-grid {
          gap: 28px;
        }
        h1 {
          font-size: 48px;
        }
      }

      @media (max-width: 900px) {
        .menu {
          display: none;
        }
        .hero {
          padding-top: 44px;
        }
        .hero-grid,
        .split,
        .cta-band {
          grid-template-columns: 1fr;
        }
        .grid-3 {
          grid-template-columns: 1fr;
        }
        .project-stack-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .countdown {
          grid-template-columns: repeat(2, 1fr);
        }
        .portrait-card {
          grid-template-columns: 76px 1fr;
        }
        .portrait-photo {
          width: 76px;
          height: 76px;
          border-radius: 18px;
        }
        .about-stats {
          grid-template-columns: 1fr;
        }
        .cta-band {
          padding: 28px;
        }
      }

      @media (max-width: 480px) {
        .container {
          width: min(100% - 22px, 1160px);
        }
        .topbar {
          text-align: center;
          font-size: 13px;
        }
        .topbar .container {
          justify-content: center;
        }
        .nav-inner {
          height: 64px;
          gap: 10px;
        }
        .logo {
          font-size: 18px;
          min-width: 0;
        }
        .logo span:last-child {
          max-width: 150px;
          white-space: normal;
          line-height: 1.1;
        }
        .logo-mark {
          width: 36px;
          height: 36px;
          flex: 0 0 auto;
        }
        .nav-inner .btn {
          padding: 10px 12px;
          font-size: 13px;
          white-space: nowrap;
        }
        .hero {
          padding: 36px 0 46px;
        }
        h1 {
          font-size: clamp(31px, 10vw, 38px);
        }
        .hero p {
          font-size: 17px;
        }
        .countdown-wrap {
          padding: 18px;
        }
        .section {
          padding: 54px 0;
        }
        .video-section {
          padding: 50px 0;
        }
        .video-list {
          gap: 22px;
        }
        .video-headline {
          top: 56px;
          right: 12px;
          left: 41%;
          font-size: 12.2px;
          line-height: 1.18;
        }
        .person-box {
          left: 12px;
          bottom: 12px;
          min-width: 190px;
          max-width: 76%;
          padding-left: 40px;
        }
        .person-box strong {
          font-size: 12px;
        }
        .person-box span {
          font-size: 10px;
        }
        .play-button {
          width: 52px;
          height: 52px;
          font-size: 22px;
        }
        .speaker-cutout {
          left: 12px;
          width: 34%;
        }
        .video-quote {
          font-size: 14px;
          padding: 16px 14px 20px;
        }
        .floating-cta {
          right: 12px;
          bottom: 12px;
        }
        .hero-actions .btn {
          width: 100%;
        }
        .form .btn {
          width: 100%;
        }
      }

      @media (max-width: 380px) {
        .container {
          width: min(100% - 18px, 1160px);
        }
        .logo span:last-child {
          max-width: 118px;
          font-size: 16px;
        }
        .nav-inner .btn {
          padding: 9px 10px;
          font-size: 12px;
        }
        .countdown-wrap {
          padding: 16px;
        }
        .countdown-title {
          font-size: 22px;
        }
        .timebox strong {
          font-size: 26px;
        }
        .video-thumb {
          aspect-ratio: 4 / 3;
        }
        .video-headline {
          top: 52px;
          right: 10px;
          left: 39%;
          font-size: 10.8px;
          line-height: 1.16;
        }
        .speaker-cutout {
          width: 33%;
          left: 10px;
        }
        .person-box {
          min-width: 160px;
          max-width: 82%;
          left: 10px;
          padding: 8px 10px 8px 38px;
        }
        .person-box strong {
          font-size: 11.5px;
        }
        .video-quote {
          font-size: 13.5px;
        }
        .floating-cta a {
          padding: 10px 13px;
          font-size: 13px;
        }
      }
      .portrait-main {
        position: relative;
        min-height: 430px;
        border-radius: 28px;
        overflow: hidden;
        background: #dfe8f5;
      }

      .portrait-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        filter: blur(16px);
        transform: scale(1.08);
        opacity: 0.55;
      }

      .portrait-full {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
        z-index: 1;
      }

      .portrait-main .badge-card {
        z-index: 2;
      }
      /* ảnh */
      .project-card {
        min-height: 260px;
        border-radius: 22px;
        overflow: hidden;
        position: relative;
        color: #fff;
        display: flex;
        align-items: flex-end;
        padding: 0;
        box-shadow: 0 12px 28px rgba(7, 24, 47, 0.12);
        background: #06162e;
      }

      .project-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: blur(14px);
        transform: scale(1.12);
        opacity: 0.55;
      }

      .project-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
        z-index: 1;
      }

      .project-card::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 2;
        background: linear-gradient(
          to top,
          rgba(6, 22, 46, 0.92),
          rgba(6, 22, 46, 0.35),
          rgba(6, 22, 46, 0.1)
        );
      }

      .project-content {
        position: relative;
        z-index: 3;
        padding: 22px;
      }

      .project-card h3 {
        margin: 0 0 6px;
        color: #fff;
      }

      .project-card p {
        margin: 0;
        color: rgba(255, 255, 255, 0.9);
      }

      /* MOBILE STICKY COUNTDOWN BAR */
      .mobile-offer-bar {
        display: none;
        background: #06162e;
        color: #fff;
        padding: 10px 12px 12px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.14);
      }

      .mobile-offer-title {
        text-align: center;
        font-size: 14px;
        font-weight: 900;
        letter-spacing: 0.3px;
        margin-bottom: 8px;
      }

      .mobile-offer-row {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 10px;
        align-items: center;
      }

      .mobile-time-group {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
      }

      .mobile-timebox {
        background: #fff;
        color: #08366f;
        text-align: center;
        border-radius: 2px;
        padding: 6px 4px 5px;
        min-width: 44px;
        box-shadow: inset 0 -2px 0 rgba(8, 54, 111, 0.08);
      }

      .mobile-timebox strong {
        display: block;
        font-size: 22px;
        line-height: 1;
        font-weight: 900;
        letter-spacing: 0.5px;
      }

      .mobile-timebox span {
        display: block;
        margin-top: 4px;
        color: #06162e;
        font-size: 10px;
        font-weight: 800;
      }

      .mobile-offer-cta {
        text-align: center;
        min-width: 118px;
      }

      .mobile-discount {
        color: #ffd34d;
        font-size: 20px;
        line-height: 1;
        font-weight: 900;
        letter-spacing: 1px;
        margin-bottom: 6px;
        text-transform: uppercase;
      }

      .mobile-offer-cta a {
        display: block;
        background: linear-gradient(180deg, #ff3434, #e11d2e);
        color: #fff;
        border-radius: 999px;
        padding: 8px 12px;
        font-size: 13px;
        font-weight: 900;
        text-transform: uppercase;
        box-shadow:
          0 5px 0 #b50e18,
          0 10px 18px rgba(225, 29, 46, 0.28);
        animation: mobileCtaPulse 1.4s ease-in-out infinite;
      }

      @keyframes mobileCtaPulse {
        0%,
        100% {
          transform: scale(1);
          box-shadow:
            0 5px 0 #b50e18,
            0 10px 18px rgba(225, 29, 46, 0.28);
        }
        50% {
          transform: scale(1.04);
          box-shadow:
            0 5px 0 #b50e18,
            0 12px 24px rgba(225, 29, 46, 0.45);
        }
      }

      @media (max-width: 600px) {
        .mobile-offer-bar {
          display: block;
          position: sticky;
          top: 0;
          z-index: 300;
        }

        /* Ẩn phần logo + nút đăng ký tư vấn trên điện thoại */
        .topbar,
        .nav {
          display: none;
        }

        .hero {
          padding-top: 30px;
        }
      }

      @media (max-width: 380px) {
        .mobile-offer-bar {
          padding: 9px 8px 11px;
        }

        .mobile-offer-title {
          font-size: 12px;
        }

        .mobile-offer-row {
          gap: 7px;
        }

        .mobile-time-group {
          gap: 4px;
        }

        .mobile-timebox {
          min-width: 38px;
          padding: 5px 3px 4px;
        }

        .mobile-timebox strong {
          font-size: 19px;
        }

        .mobile-timebox span {
          font-size: 9px;
        }

        .mobile-offer-cta {
          min-width: 104px;
        }

        .mobile-discount {
          font-size: 17px;
        }

        .mobile-offer-cta a {
          font-size: 11px;
          padding: 7px 9px;
        }
      }

      /* FINAL MOBILE TUNING: ngắn hơn, card đi ngang 2 cột, đánh giá bám theo từng ảnh */
      @media (max-width: 600px) {
        .hero {
          padding-top: 22px;
        }

        .hero-grid {
          gap: 18px;
        }


        h1 {
          font-size: clamp(27px, 8.5vw, 34px);
          margin-bottom: 10px;
        }

        .hero-title {
          font-size: clamp(32px, 10vw, 44px) !important;
          line-height: 1.08;
          letter-spacing: -0.7px;
          text-align: left;
          margin-bottom: 12px;
        }

        .hero-lead {
          font-size: 15px !important;
          line-height: 1.55;
          margin-bottom: 16px !important;
          text-align: left;
        }

        .hero-actions {
          justify-content: flex-start;
        }

        .hero p {
          font-size: 15px;
          margin-bottom: 12px;
        }

        .hero-slider {
          margin: 8px 0 14px;
          border-radius: 18px;
        }

        .hero-slide {
          aspect-ratio: 4 / 3;
        }

        .hero-slide-caption {
          left: 12px;
          right: 12px;
          bottom: 12px;
        }

        .hero-slide-caption strong {
          font-size: 15px;
        }

        .hero-slide-caption span {
          display: none;
        }

        .hero-slider-dots {
          left: 12px;
          bottom: 9px;
        }

        .hero-actions {
          gap: 8px;
          margin-bottom: 12px;
        }

        .hero-actions .btn {
          padding: 11px 14px;
          font-size: 13px;
        }

        .hero-card {
          padding: 14px;
        }

        .hero-card h3 {
          font-size: 17px;
          margin-bottom: 8px;
        }

        .check-list {
          gap: 7px;
          font-size: 13px;
        }

        .portrait-card {
          display: none;
        }

        .section,
        .video-section {
          padding: 34px 0;
        }

        .section-title {
          margin-bottom: 16px;
        }

        .section-title h2,
        h2 {
          font-size: 24px;
        }

        .section-title p {
          font-size: 13px;
        }

        .about-box p {
          font-size: 13px;
          margin-bottom: 12px;
        }

        .about-stats {
          grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
          gap: 8px;
        }

        .stat {
          padding: 10px 6px;
        }

        .stat strong {
          font-size: 20px;
        }

        .stat span {
          font-size: 10px;
          line-height: 1.2;
        }

        #van-de .grid-3,
        #quy-trinh .grid-3,
        #du-an .project-stack-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
          gap: 10px !important;
        }

        #van-de .card,
        #quy-trinh .card {
          padding: 13px 11px;
          border-radius: 16px;
          min-height: 0;
        }

        #van-de .card .icon,
        #quy-trinh .card .icon {
          width: 34px;
          height: 34px;
          border-radius: 11px;
          font-size: 17px;
          margin-bottom: 8px;
        }

        #van-de .card h3,
        #quy-trinh .card h3 {
          font-size: 14px;
          line-height: 1.22;
          margin-bottom: 5px;
        }

        #van-de .card p,
        #quy-trinh .card p {
          font-size: 12px;
          line-height: 1.35;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }

        .project-stack {
          gap: 8px;
        }

        .project-card {
          min-height: 155px;
          border-radius: 16px;
        }

        .project-content {
          padding: 12px;
        }

        .project-content h3 {
          font-size: 14px;
          line-height: 1.2;
        }

        .project-content p {
          display: none;
        }

        .project-stack .testimonial {
          padding: 10px;
          border-radius: 14px;
        }

        .project-stack .testimonial p {
          font-size: 12px;
          line-height: 1.35;
          margin-bottom: 7px;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }

        .project-stack .testimonial strong {
          font-size: 11px;
          line-height: 1.25;
        }

        .countdown-wrap {
          padding: 16px;
        }

        .countdown-title {
          font-size: 21px;
        }

        .countdown-wrap .sub {
          font-size: 13px;
        }

        .form {
          gap: 9px;
        }

        .form input,
        .form select,
        .form textarea {
          padding: 12px;
          border-radius: 11px;
          font-size: 14px;
        }

        .form textarea {
          min-height: 68px;
        }
      }

      @media (max-width: 380px) {
        #van-de .grid-3,
        #quy-trinh .grid-3,
        #du-an .project-stack-grid {
          gap: 8px !important;
        }

        #van-de .card,
        #quy-trinh .card {
          padding: 12px 9px;
        }

        #van-de .card h3,
        #quy-trinh .card h3 {
          font-size: 13px;
        }

        #van-de .card p,
        #quy-trinh .card p,
        .project-stack .testimonial p {
          font-size: 11px;
        }

        .project-card {
          min-height: 132px;
        }
      }


      /* MOBILE BOXES NGANG: trên điện thoại các box đi 2 cột để trang ngắn hơn */
      @media (max-width: 600px) {
        #van-de .grid-3,
        #giai-phap .grid-3,
        .steps,
        .project-stack-grid,
        .video-list,
        .faq {
          display: grid !important;
          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
          gap: 10px !important;
          align-items: stretch;
        }

        .about-stats {
          display: grid !important;
          grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
          gap: 8px !important;
        }

        .grid-3 > .card,
        .steps > .step,
        .project-stack,
        .video-card,
        .faq details {
          min-width: 0;
          height: 100%;
        }

        .card,
        .step,
        .testimonial,
        details {
          padding: 12px 10px !important;
          border-radius: 15px !important;
        }

        .card .icon {
          width: 32px !important;
          height: 32px !important;
          border-radius: 10px !important;
          font-size: 16px !important;
          margin-bottom: 8px !important;
        }

        .card h3,
        .step h3,
        summary {
          font-size: 13.5px !important;
          line-height: 1.25 !important;
          margin-bottom: 5px !important;
        }

        .card p,
        .step p,
        .testimonial p,
        details p,
        .video-quote {
          font-size: 11.5px !important;
          line-height: 1.35 !important;
        }

        .card p,
        .step p,
        .testimonial p,
        details p {
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }

        .steps > .step {
          grid-template-columns: 1fr !important;
          gap: 7px !important;
        }

        .step::before {
          width: 30px !important;
          height: 30px !important;
          font-size: 14px !important;
        }

        .project-card {
          min-height: 142px !important;
        }

        .project-content {
          padding: 10px !important;
        }

        .project-content h3 {
          font-size: 13px !important;
          line-height: 1.2 !important;
        }

        .project-stack .testimonial {
          padding: 9px !important;
          margin: 0;
        }

        .project-stack .testimonial strong {
          font-size: 10.5px !important;
          line-height: 1.25 !important;
        }

        .video-thumb {
          aspect-ratio: 4 / 3 !important;
        }

        .video-quote {
          padding: 10px 8px !important;
          min-height: 56px;
        }

        .play-button {
          width: 42px !important;
          height: 42px !important;
          font-size: 18px !important;
        }

        .person-box {
          display: none !important;
        }
      }

      @media (max-width: 380px) {
        .grid-3,
        .steps,
        .project-stack-grid,
        .video-list,
        .faq {
          gap: 8px !important;
        }

        .card,
        .step,
        .testimonial,
        details {
          padding: 10px 8px !important;
        }

        .card h3,
        .step h3,
        summary {
          font-size: 12.5px !important;
        }

        .card p,
        .step p,
        .testimonial p,
        details p,
        .video-quote {
          font-size: 10.8px !important;
        }

        .project-card {
          min-height: 124px !important;
        }
      }


      /* UPDATE: mobile gọn, không còn nút xem thêm ngoài phần video */
      .hero-slider-track {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        animation: none !important;
        scrollbar-width: none;
      }

      .hero-slider-track::-webkit-scrollbar {
        display: none;
      }

      .hero-slide {
        scroll-snap-align: start;
        cursor: pointer;
        border: 0;
      }

      .project-trigger {
        cursor: pointer;
      }

      .concern-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }

      .video-more-btn {
        display: none;
        width: min(100%, 320px);
        margin: 18px auto 0;
        border: 1px solid #d8e0ee;
        background: #fff;
        color: var(--primary);
        border-radius: 999px;
        padding: 12px 18px;
        font-family: inherit;
        font-weight: 900;
        cursor: pointer;
      }

      .project-modal {
        position: fixed;
        inset: 0;
        z-index: 999;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 18px;
      }

      .project-modal.is-open {
        display: flex;
      }

      .project-modal-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(6, 22, 46, 0.72);
        backdrop-filter: blur(6px);
      }

      .project-modal-card {
        position: relative;
        width: min(920px, 100%);
        max-height: min(88vh, 820px);
        overflow: auto;
        background: #fff;
        border-radius: 26px;
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
        display: grid;
        grid-template-columns: 1fr 1fr;
      }

      .project-modal-card img {
        width: 100%;
        height: 100%;
        min-height: 420px;
        object-fit: cover;
        background: #e8edf7;
      }

      .project-modal-body {
        padding: 30px;
      }

      .project-modal-body h2 {
        margin-bottom: 10px;
      }

      .project-modal-body p {
        color: var(--muted);
        margin: 0 0 12px;
      }

      .project-modal-quote {
        background: var(--light);
        border-left: 5px solid var(--primary);
        border-radius: 16px;
        padding: 16px;
        margin: 16px 0 20px;
      }

      .project-modal-quote p {
        font-style: italic;
        color: #24364f;
      }

      .project-modal-quote strong {
        color: var(--dark);
      }

      .project-modal-close {
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 2;
        width: 38px;
        height: 38px;
        border: 0;
        border-radius: 50%;
        background: #fff;
        color: var(--dark);
        font-size: 28px;
        line-height: 1;
        cursor: pointer;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
      }

      @media (max-width: 900px) {
        .concern-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        }
      }

      @media (max-width: 600px) {
        .hero-slide {
          flex-basis: 86%;
          min-width: 86%;
          aspect-ratio: 4 / 3;
        }

        .hero-slider {
          overflow: hidden;
        }

        .hero-slider-track {
          gap: 10px;
          padding-right: 18px;
        }

        .hero-slider-dots {
          display: none;
        }

        .grid-3,
        .steps,
        .project-stack-grid,
        .video-list,
        .faq {
          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        }

        .video-list:not(.is-expanded) .video-card:nth-child(n + 3) {
          display: none;
        }

        .video-more-btn {
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .project-modal-card {
          grid-template-columns: 1fr;
          max-height: 90vh;
          border-radius: 22px;
        }

        .project-modal-card img {
          min-height: 0;
          height: 230px;
        }

        .project-modal-body {
          padding: 20px;
        }

        .project-modal-body h2 {
          font-size: 24px;
        }

        .project-modal-body p {
          font-size: 14px;
        }
      }


      /* PROCESS ARROW STYLE */
      #quy-trinh.process-section {
        background:
          radial-gradient(circle at 12% 10%, rgba(246, 183, 60, 0.16), transparent 30%),
          linear-gradient(135deg, #06162e 0%, #0c2547 58%, #08366f 100%);
        color: #fff;
        overflow: hidden;
      }

      #quy-trinh.process-section .section-title {
        margin-bottom: 46px;
      }

      #quy-trinh.process-section .tag {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        padding: 6px 14px;
        border-radius: 999px;
        background: rgba(246, 183, 60, 0.16);
        color: #f6b73c;
        font-size: 12px;
      }

      #quy-trinh.process-section h2 {
        color: #fff;
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
      }

      #quy-trinh .process-subtitle {
        color: rgba(255, 255, 255, 0.72);
        margin: 8px 0 0;
        font-size: 15px;
        font-weight: 700;
      }

      .process-flow {
        position: relative;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0;
        max-width: 1080px;
        margin: 0 auto;
      }

      .process-flow::before {
        content: "";
        position: absolute;
        top: 39px;
        left: 11%;
        right: 11%;
        height: 2px;
        background: rgba(246, 183, 60, 0.42);
      }

      .process-step {
        position: relative;
        z-index: 1;
        text-align: center;
        padding: 0 16px;
      }

      .process-step:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 32px;
        right: -8px;
        width: 18px;
        height: 18px;
        border-top: 3px solid rgba(246, 183, 60, 0.85);
        border-right: 3px solid rgba(246, 183, 60, 0.85);
        transform: rotate(45deg);
      }

      .process-number {
        width: 78px;
        height: 78px;
        border-radius: 50%;
        margin: 0 auto 18px;
        display: grid;
        place-items: center;
        background: linear-gradient(135deg, #f6b73c, #ff8a00);
        color: #fff;
        font-size: 28px;
        font-weight: 900;
        box-shadow: 0 14px 30px rgba(246, 183, 60, 0.28);
        border: 5px solid rgba(255, 255, 255, 0.08);
      }

      .process-step h3 {
        margin: 0 0 8px;
        color: #fff;
        font-size: 15px;
        line-height: 1.25;
        text-transform: uppercase;
        letter-spacing: 0.2px;
      }

      .process-step p {
        max-width: 210px;
        margin: 0 auto;
        color: rgba(255, 255, 255, 0.72);
        font-size: 13px;
        line-height: 1.45;
      }

      .process-cta {
        margin: 44px auto 0;
        max-width: 820px;
        text-align: center;
        padding: 28px;
        border-radius: 28px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.14);
        backdrop-filter: blur(10px);
      }

      .process-cta h3 {
        margin: 0 0 8px;
        color: #fff;
        font-size: clamp(24px, 3vw, 34px);
        line-height: 1.18;
      }

      .process-cta p {
        margin: 0 0 18px;
        color: rgba(255, 255, 255, 0.74);
        font-weight: 700;
      }

      @media (max-width: 900px) {
        #quy-trinh.process-section {
          padding: 42px 0;
        }

        #quy-trinh.process-section .section-title {
          margin-bottom: 22px;
        }

        #quy-trinh .process-subtitle {
          font-size: 12px;
        }

        .process-flow {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 26px 12px;
        }

        .process-flow::before,
        .process-step::after {
          display: none;
        }

        .process-step {
          padding: 14px 8px;
          border-radius: 18px;
          background: rgba(255, 255, 255, 0.07);
          border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .process-number {
          width: 52px;
          height: 52px;
          margin-bottom: 10px;
          font-size: 20px;
          border-width: 3px;
        }

        .process-step h3 {
          font-size: 12px;
          margin-bottom: 5px;
        }

        .process-step p {
          font-size: 11px;
          line-height: 1.35;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }

        .process-cta {
          margin-top: 24px;
          padding: 20px 14px;
          border-radius: 22px;
        }

        .process-cta h3 {
          font-size: 22px;
        }

        .process-cta p {
          font-size: 12px;
        }
      }

      @media (max-width: 380px) {
        .process-flow {
          gap: 10px;
        }

        .process-step {
          padding: 12px 6px;
        }

        .process-step h3 {
          font-size: 11px;
        }

        .process-step p {
          font-size: 10.5px;
        }
      }


      /* FLOATING CALL BUTTON: thêm icon + hiệu ứng chuyển động */
      .floating-cta {
        animation: floatingCtaEnter 0.55s ease-out 0.2s both;
      }

      .floating-cta a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-width: 118px;
        line-height: 1;
        user-select: none;
      }

      .floating-cta .call-btn {
        position: relative;
        overflow: visible;
        background: linear-gradient(135deg, #f6b73c, #ff8a00);
        color: #1f1300;
        animation: callButtonFloat 2.2s ease-in-out infinite;
      }

      .floating-cta .call-btn::before,
      .floating-cta .call-btn::after {
        content: "";
        position: absolute;
        inset: -6px;
        border-radius: 999px;
        border: 2px solid rgba(246, 183, 60, 0.5);
        opacity: 0;
        pointer-events: none;
        animation: callHalo 1.8s ease-out infinite;
      }

      .floating-cta .call-btn::after {
        animation-delay: 0.55s;
      }

      .floating-cta .call-icon,
      .floating-cta .register-icon {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        background: rgba(255, 255, 255, 0.96);
        color: #08366f;
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.14);
      }

      .floating-cta .call-icon {
        animation: phoneRing 1.15s ease-in-out infinite;
      }

      .floating-cta .call-icon svg {
        width: 16px;
        height: 16px;
        fill: currentColor;
      }

      .floating-cta .register-btn {
        background: #ffffff;
        color: var(--primary);
        border: 1px solid #e5ebf5;
      }

      .floating-cta .register-icon {
        font-size: 14px;
      }

      @keyframes floatingCtaEnter {
        from {
          opacity: 0;
          transform: translateY(18px) scale(0.96);
        }
        to {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }

      @keyframes callButtonFloat {
        0%, 100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-4px);
        }
      }

      @keyframes phoneRing {
        0%, 100% {
          transform: rotate(0deg);
        }
        10%, 30%, 50% {
          transform: rotate(-14deg);
        }
        20%, 40%, 60% {
          transform: rotate(14deg);
        }
        70% {
          transform: rotate(0deg);
        }
      }

      @keyframes callHalo {
        0% {
          opacity: 0.75;
          transform: scale(0.92);
        }
        100% {
          opacity: 0;
          transform: scale(1.35);
        }
      }

      @media (max-width: 600px) {
        .floating-cta {
          right: 12px;
          bottom: 12px;
          gap: 8px;
        }

        .floating-cta a {
          min-width: 104px;
          padding: 10px 12px !important;
          font-size: 13px !important;
        }

        .floating-cta .call-icon,
        .floating-cta .register-icon {
          width: 24px;
          height: 24px;
        }

        .floating-cta .call-icon svg {
          width: 14px;
          height: 14px;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .floating-cta,
        .floating-cta .call-btn,
        .floating-cta .call-btn::before,
        .floating-cta .call-btn::after,
        .floating-cta .call-icon {
          animation: none !important;
        }
      }

.project-more-btn{
  display:none;
}

@media (max-width:600px){

  .project-stack-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }

  /* mặc định chỉ hiện 4 */
  .project-stack-grid .project-stack{
  display:block;
}

.project-stack-grid:not(.is-expanded)
.project-stack:nth-child(n+5){
  display:none !important;
}

.project-stack-grid.is-expanded
.project-stack:nth-child(n+5){
  display:block !important;
}

  .project-more-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    margin-top:16px;
    padding:13px 16px;
    border:none;
    border-radius:999px;
    background:#08366f;
    color:#fff;
    font-weight:800;
    font-family:inherit;
    cursor:pointer;
  }
}
.project-detail-list{
  margin:16px 0 0;
  padding-left:20px;

  display:grid;
  gap:10px;
}
.form select {
  width: 100%;
  border: 1px solid #d8e0ee;
  border-radius: 12px;
  padding: 14px;
  font: inherit;
  outline: none;
  background: #fff;
  color: #667085; /* màu placeholder */
}

/* Khi đã chọn */
.form select:valid {
  color: #172033;
  font-weight: 500;
}

      /* HERO USP + FORM CUỐI TRANG */
      .hero-proof-card {
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: 28px;
        padding: 30px;
        backdrop-filter: blur(12px);
        box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
      }

      .hero-proof-card h2 {
        color: #fff;
        margin: 0 0 14px;
        font-size: clamp(28px, 3.6vw, 44px);
      }

      .hero-proof-card p {
        color: rgba(255, 255, 255, 0.84);
        font-size: 17px;
        margin: 0 0 20px;
      }

      .final-lead-grid {
        display: grid;
        grid-template-columns: 0.9fr 1.1fr;
        gap: 38px;
        align-items: center;
      }

      .final-lead-copy p {
        color: var(--muted);
        font-size: 18px;
        margin: 0 0 22px;
      }

      .lead-benefit-list {
        display: grid;
        gap: 14px;
      }

      .lead-benefit-list div {
        display: grid;
        grid-template-columns: 52px 1fr;
        gap: 12px;
        align-items: center;
        background: #fff;
        border: 1px solid #e6edf7;
        border-radius: 18px;
        padding: 14px;
        box-shadow: 0 8px 22px rgba(7, 24, 47, 0.06);
      }

      .lead-benefit-list strong {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: var(--primary);
        color: #fff;
        font-weight: 900;
      }

      .lead-benefit-list span {
        color: var(--text);
        font-weight: 700;
        line-height: 1.45;
      }

      @media (max-width: 900px) {
        .final-lead-grid {
          grid-template-columns: 1fr;
        }
      }

      @media (max-width: 600px) {
        .hero-proof-card {
          padding: 18px;
          border-radius: 20px;
        }

        .hero-proof-card h2 {
          font-size: 24px;
        }

        .hero-proof-card p,
        .final-lead-copy p {
          font-size: 13px;
        }

        .lead-benefit-list div {
          grid-template-columns: 38px 1fr;
          padding: 11px;
          border-radius: 14px;
        }

        .lead-benefit-list strong {
          width: 34px;
          height: 34px;
          font-size: 12px;
        }

        .lead-benefit-list span {
          font-size: 12px;
        }
      }
      
/* =========================
   PAIN SECTION
========================= */

.pain-section{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 8% 10%, rgba(246,183,60,.22), transparent 28%),
    radial-gradient(circle at 92% 15%, rgba(11,86,179,.20), transparent 30%),
    linear-gradient(135deg, #06162e 0%, #08366f 58%, #0b56b3 100%);
  color:#fff;
}

.pain-section::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:46px 46px;
  opacity:.25;
}

.pain-section .container{
  position:relative;
  z-index:2;
}

.pain-title h2{
  color:#fff;
  max-width:900px;
  margin-left:auto;
  margin-right:auto;
}

.pain-title p{
  color:rgba(255,255,255,.78);
  max-width:760px;
  margin:auto;
  font-weight:600;
}

.pain-tag{
  display:inline-flex;
  padding:8px 16px;
  border-radius:999px;
  background:rgba(246,183,60,.16);
  color:#f6b73c;
}

.grid-4{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}

.pain-grid{
  margin-top:42px;
}

.pain-card{
  position:relative;
  min-height:245px;
  padding:28px 24px;
  border-radius:24px;

  background:rgba(255,255,255,.94);
  color:#06162e;

  border:1px solid rgba(255,255,255,.65);

  box-shadow:
    0 18px 48px rgba(0,0,0,.20);

  transition:.28s ease;
}

.pain-card:hover{
  transform:translateY(-8px);
  box-shadow:
    0 26px 60px rgba(0,0,0,.28);
}

.pain-card::after{
  content:"";
  position:absolute;
  left:24px;
  right:24px;
  bottom:0;
  height:4px;
  border-radius:999px 999px 0 0;
  background:linear-gradient(90deg, #f6b73c, #ff8a00);
}

.pain-icon{
  width:54px;
  height:54px;
  border-radius:18px;
  display:grid;
  place-items:center;

  font-size:25px;

  background:
    linear-gradient(135deg, rgba(8,54,111,.12), rgba(246,183,60,.20));

  margin-bottom:18px;
}

.pain-card h3{
  margin:0 0 12px;
  font-size:22px;
  line-height:1.3;
  color:#06162e;
}

.pain-card p{
  margin:0;
  color:#56657a;
  font-size:15.5px;
  line-height:1.65;
  font-weight:600;
}

/* TABLET */
@media(max-width:900px){
  .grid-4{
    grid-template-columns:repeat(2,1fr);
  }

  .pain-card{
    min-height:220px;
  }
}

/* MOBILE */
@media(max-width:600px){
  .pain-section{
    padding:52px 0;
  }

  .pain-title h2{
    font-size:28px;
    line-height:1.22;
  }

  .pain-title p{
    font-size:14px;
    line-height:1.6;
  }

  .pain-grid{
    margin-top:26px;
  }

  .grid-4{
    grid-template-columns:1fr;
    gap:14px;
  }

  .pain-card{
    min-height:auto;
    padding:20px 18px;
    border-radius:20px;
  }

  .pain-icon{
    width:46px;
    height:46px;
    font-size:22px;
    border-radius:15px;
    margin-bottom:14px;
  }

  .pain-card h3{
    font-size:19px;
  }

  .pain-card p{
    font-size:14px;
  }
}
/* =========================
   SOLUTION SECTION
========================= */

.solution-section{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at top right, rgba(246,183,60,.16), transparent 30%),
    linear-gradient(180deg,#ffffff 0%,#f4f7fb 100%);
}

.solution-title h2{
  max-width:860px;
  margin-left:auto;
  margin-right:auto;
}

.solution-title p{
  max-width:760px;
  margin:auto;
}

.solution-tag{
  display:inline-flex;
  padding:8px 16px;
  border-radius:999px;
  background:#fff4db;
  color:#9a5700;
}

.solution-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
  margin-top:42px;
}

.solution-card{
  position:relative;
  min-height:270px;
  padding:26px 22px;
  border-radius:24px;
  background:#fff;
  border:1px solid #e4ebf5;
  box-shadow:0 14px 36px rgba(7,24,47,.08);
  transition:.28s ease;
}

.solution-card:hover{
  transform:translateY(-8px);
  box-shadow:0 24px 58px rgba(7,24,47,.14);
}

.solution-icon{
  width:58px;
  height:58px;
  border-radius:18px;
  display:grid;
  place-items:center;
  font-size:28px;
  margin-bottom:16px;
  background:linear-gradient(135deg, rgba(8,54,111,.10), rgba(246,183,60,.22));
  border:1px solid rgba(8,54,111,.08);
}

.solution-card span{
  position:absolute;
  top:24px;
  right:22px;
  color:rgba(8,54,111,.16);
  font-size:34px;
  font-weight:900;
  line-height:1;
}

.solution-card h3{
  margin:0 0 10px;
  font-size:21px;
  line-height:1.3;
  color:#06162e;
}

.solution-card p{
  margin:0;
  color:#667085;
  font-size:15px;
  line-height:1.65;
  font-weight:600;
}

.solution-cta{
  margin:46px auto 0;
  max-width:900px;
  text-align:center;
  padding:34px 28px;
  border-radius:28px;
  background:linear-gradient(135deg,#06162e,#08366f);
  color:#fff;
  box-shadow:0 18px 48px rgba(7,24,47,.18);
}

.solution-cta h3{
  margin:0 0 10px;
  font-size:30px;
  line-height:1.25;
}

.solution-cta p{
  margin:0 auto 22px;
  max-width:720px;
  color:rgba(255,255,255,.78);
  font-weight:600;
}

/* TABLET */
@media(max-width:900px){
  .solution-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

/* MOBILE */
@media(max-width:600px){
  .solution-section{
    padding:52px 0;
  }

  .solution-title h2{
    font-size:28px;
    line-height:1.22;
  }

  .solution-title p{
    font-size:14px;
    line-height:1.6;
  }

  .solution-grid{
    grid-template-columns:1fr;
    gap:14px;
    margin-top:26px;
  }

  .solution-card{
    min-height:auto;
    padding:20px 18px;
    border-radius:20px;
  }

  .solution-icon{
    width:48px;
    height:48px;
    font-size:23px;
    border-radius:15px;
    margin-bottom:14px;
  }

  .solution-card span{
    font-size:28px;
    top:20px;
    right:18px;
  }

  .solution-card h3{
    font-size:19px;
  }

  .solution-card p{
    font-size:14px;
  }

  .solution-cta{
    padding:24px 18px;
    border-radius:22px;
    margin-top:28px;
  }

  .solution-cta h3{
    font-size:23px;
  }

  .solution-cta p{
    font-size:14px;
  }
}

      /* =========================
         FINAL CLEAN MOBILE OPTIMIZATION
         - Các nhóm 4 item trên mobile hiển thị 2-2.
         - Override cuối để triệt tiêu CSS trùng/chồng phía trên.
      ========================= */
      .four-grid,
      .concern-grid,
      .process-flow {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }

      .hero-slider-track {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        cursor: grab;
        user-select: none;
      }

      .hero-slider-track::-webkit-scrollbar {
        display: none;
      }

      .hero-slider-track img {
        pointer-events: none;
      }

      @media (max-width: 900px) {
        .split,
        .cta-band,
        .trust-wrap {
          grid-template-columns: 1fr;
        }

        .grid-3,
        .project-stack-grid,
        .video-list,
        .faq,
        .concern-grid,
        .process-flow {
          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        }
      }

      @media (max-width: 600px) {
        :root {
          --radius: 16px;
        }

        body {
          font-size: 14px;
        }

        .container {
          width: min(100% - 22px, 1160px);
        }

        .topbar,
        .nav {
          display: none;
        }

        .mobile-offer-bar {
          display: block;
          position: sticky;
          top: 0;
          z-index: 300;
        }

        .mobile-offer-row {
          grid-template-columns: 1fr;
          gap: 8px;
        }

        .mobile-time-group,
        .countdown,
        .about-stats,
        .grid-3,
        .steps,
        .project-stack-grid,
        .video-list,
        .faq,
        .concern-grid,
        .process-flow {
          display: grid !important;
          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
          gap: 10px !important;
          align-items: stretch;
        }

        .about-stats.four-grid,
        .four-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        }

        .hero {
          padding: 24px 0 38px;
        }

        .hero-grid {
          gap: 16px;
        }

        .hero-title {
          font-size: clamp(31px, 9.5vw, 42px) !important;
          line-height: 1.08;
          letter-spacing: -0.7px;
          margin-bottom: 12px;
        }

        .hero-lead {
          font-size: 15px !important;
          line-height: 1.55;
          margin-bottom: 16px !important;
        }

        .hero-actions {
          gap: 8px;
          margin-bottom: 12px;
        }

        .hero-actions .btn,
        .form .btn {
          width: 100%;
          padding: 12px 14px;
          font-size: 13px;
        }

        .hero-slider {
          margin: 8px 0 14px;
          border-radius: 18px;
        }

        .hero-slider-track {
          gap: 10px;
          padding-right: 14px;
        }

        .hero-slide {
          flex: 0 0 86%;
          min-width: 86%;
          aspect-ratio: 4 / 3;
          scroll-snap-align: start;
        }

        .hero-slide-caption strong {
          font-size: 15px;
        }

        .hero-slide-caption span,
        .hero-slider-dots,
        .portrait-card,
        .person-box {
          display: none !important;
        }

        .section,
        .video-section {
          padding: 36px 0;
        }

        .section-title {
          margin-bottom: 18px;
        }

        h2,
        .section-title h2 {
          font-size: 24px;
        }

        .section-title p,
        .about-box p,
        .process-cta p,
        .solution-cta p {
          font-size: 13px;
        }

        .card,
        .step,
        .testimonial,
        details,
        .hero-card,
        .about-box {
          padding: 12px 10px !important;
          border-radius: 15px !important;
        }

        .card .icon {
          width: 32px !important;
          height: 32px !important;
          border-radius: 10px !important;
          font-size: 16px !important;
          margin-bottom: 8px !important;
        }

        .card h3,
        .step h3,
        summary,
        .project-content h3 {
          font-size: 13.5px !important;
          line-height: 1.25 !important;
          margin-bottom: 5px !important;
        }

        .card p,
        .step p,
        .testimonial p,
        details p,
        .video-quote,
        .project-stack .testimonial strong {
          font-size: 11.5px !important;
          line-height: 1.35 !important;
        }

        .card p,
        .step p,
        .testimonial p,
        details p {
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }

        .steps > .step {
          grid-template-columns: 1fr !important;
          gap: 7px !important;
        }

        .step::before,
        .process-number {
          width: 34px !important;
          height: 34px !important;
          font-size: 15px !important;
          margin-bottom: 8px !important;
        }

        .project-card {
          min-height: 142px !important;
          border-radius: 16px;
        }

        .project-content {
          padding: 10px !important;
        }

        .project-content p {
          display: none;
        }

        .video-list:not(.is-expanded) .video-card:nth-child(n + 3),
        .project-stack-grid:not(.is-expanded) .project-stack:nth-child(n + 5) {
          display: none;
        }

        .video-more-btn,
        .project-more-btn {
          display: flex;
          align-items: center;
          justify-content: center;
          width: min(100%, 320px);
          margin: 18px auto 0;
        }

        .trust-title {
          font-size: 30px;
        }

        .trust-desc {
          font-size: 15px;
        }

        .trust-list {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 10px;
        }

        .trust-item {
          padding: 12px 10px;
          font-size: 12.5px;
          align-items: flex-start;
        }

        .trust-image {
          min-height: 360px;
        }

        .main-person {
          max-width: 240px;
        }

        .mini-badge {
          width: 220px;
          bottom: 8px;
        }

        .project-modal-card {
          grid-template-columns: 1fr;
          max-height: 90vh;
          border-radius: 22px;
        }

        .project-modal-card img {
          height: 230px;
          min-height: 0;
        }

        .project-modal-body {
          padding: 20px;
        }
      }

      @media (max-width: 380px) {
        .container {
          width: min(100% - 18px, 1160px);
        }

        .mobile-timebox strong {
          font-size: 19px;
        }

        .card,
        .step,
        .testimonial,
        details {
          padding: 10px 8px !important;
        }

        .card h3,
        .step h3,
        summary,
        .project-content h3 {
          font-size: 12.5px !important;
        }

        .card p,
        .step p,
        .testimonial p,
        details p,
        .video-quote {
          font-size: 10.8px !important;
        }

        .project-card {
          min-height: 124px !important;
        }
      }


      /* =========================
         HIGHLIGHT SOLUTION SECTION
         Làm nổi bật phần giải pháp + mobile 2-2
      ========================= */
      .solution-section {
        position: relative;
        background:
          radial-gradient(circle at 10% 12%, rgba(246, 183, 60, 0.22), transparent 30%),
          radial-gradient(circle at 88% 8%, rgba(11, 86, 179, 0.18), transparent 34%),
          linear-gradient(135deg, #f7fbff 0%, #ffffff 42%, #fff7e6 100%) !important;
      }

      .solution-section::before {
        content: "";
        position: absolute;
        inset: 18px;
        border-radius: 34px;
        border: 1px solid rgba(8, 54, 111, 0.08);
        pointer-events: none;
      }

      .solution-title {
        position: relative;
        z-index: 1;
      }

      .solution-tag {
        background: linear-gradient(135deg, #08366f, #0b56b3) !important;
        color: #fff !important;
        box-shadow: 0 12px 28px rgba(8, 54, 111, 0.22);
      }

      .solution-title h2 {
        font-size: clamp(34px, 4.5vw, 54px);
      }

      .solution-highlight-box {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 18px;
        align-items: center;
        max-width: 980px;
        margin: 30px auto 0;
        padding: 20px 22px;
        border-radius: 24px;
        background: linear-gradient(135deg, #06162e, #08366f);
        color: #fff;
        box-shadow: 0 22px 55px rgba(7, 24, 47, 0.2);
        border: 1px solid rgba(255, 255, 255, 0.14);
      }

      .solution-highlight-box strong {
        display: block;
        font-size: 22px;
        line-height: 1.25;
        margin-bottom: 5px;
      }

      .solution-highlight-box span {
        display: block;
        color: rgba(255, 255, 255, 0.76);
        font-weight: 700;
      }

      .solution-grid {
        position: relative;
        z-index: 1;
      }

      .solution-card {
        overflow: hidden;
        border: 1px solid rgba(8, 54, 111, 0.12) !important;
        box-shadow: 0 18px 45px rgba(7, 24, 47, 0.11) !important;
      }

      .solution-card::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 6px;
        background: linear-gradient(90deg, #f6b73c, #ff8a00, #08366f);
      }

      .solution-card::after {
        content: "";
        position: absolute;
        right: -46px;
        top: -46px;
        width: 112px;
        height: 112px;
        border-radius: 50%;
        background: rgba(246, 183, 60, 0.13);
      }

      .solution-icon {
        background: linear-gradient(135deg, #08366f, #0b56b3) !important;
        color: #fff;
        box-shadow: 0 12px 26px rgba(8, 54, 111, 0.2);
      }

      .solution-pill {
        display: inline-flex;
        align-items: center;
        margin-bottom: 10px;
        padding: 5px 10px;
        border-radius: 999px;
        background: #fff4db;
        color: #9a5700;
        font-size: 12px;
        line-height: 1;
        font-style: normal;
        font-weight: 900;
      }

      .solution-number {
        color: rgba(8, 54, 111, 0.13) !important;
      }

      .solution-card h3 {
        color: #06162e;
      }

      .solution-card p {
        color: #4b5b73;
      }

      .solution-cta {
        position: relative;
        z-index: 1;
        border: 1px solid rgba(246, 183, 60, 0.34);
      }

      @media (max-width: 600px) {
        .solution-section {
          padding: 40px 0 !important;
        }

        .solution-section::before {
          inset: 8px;
          border-radius: 22px;
        }

        .solution-title h2 {
          font-size: 25px !important;
        }

        .solution-highlight-box {
          grid-template-columns: 1fr;
          gap: 12px;
          margin-top: 20px;
          padding: 16px;
          border-radius: 18px;
          text-align: left;
        }

        .solution-highlight-box strong {
          font-size: 17px;
        }

        .solution-highlight-box span {
          font-size: 12.5px;
          line-height: 1.45;
        }

        .solution-highlight-box .btn {
          width: 100%;
          padding: 11px 14px;
          font-size: 13px;
        }

        .solution-grid {
          display: grid !important;
          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
          gap: 10px !important;
          margin-top: 18px !important;
        }

        .solution-card {
          min-height: 178px !important;
          padding: 14px 10px !important;
          border-radius: 16px !important;
        }

        .solution-icon {
          width: 34px !important;
          height: 34px !important;
          font-size: 17px !important;
          border-radius: 11px !important;
          margin-bottom: 8px !important;
        }

        .solution-pill {
          font-size: 9.8px;
          padding: 4px 7px;
          margin-bottom: 7px;
        }

        .solution-number {
          top: 14px !important;
          right: 10px !important;
          font-size: 24px !important;
        }

        .solution-card h3 {
          font-size: 13.5px !important;
          line-height: 1.22 !important;
          margin-bottom: 5px !important;
        }

        .solution-card p {
          font-size: 11.2px !important;
          line-height: 1.35 !important;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }

        .solution-cta {
          margin-top: 20px !important;
          padding: 20px 14px !important;
          border-radius: 20px !important;
        }

        .solution-cta h3 {
          font-size: 20px !important;
        }
      }

   
/* FIX MOBILE 2-2 ONLY FOR VẤN ĐỀ + GIẢI PHÁP */
@media (max-width:600px){

  #van-de .grid-3,
  #giai-phap .grid-3{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }

  #van-de .card,
  #giai-phap .card{
    height:100%;
  }

  /* giữ countdown như desktop */
  .countdown{
    grid-template-columns:repeat(4,1fr) !important;
  }

}


/* FINAL MOBILE FIX */
@media (max-width:600px){

  /* vấn đề gặp phải -> 2-2 */
  #van-de .grid-3{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }

  #van-de .card{
    width:100% !important;
    min-width:0 !important;
    height:100%;
  }

  /* đồng hồ đếm ngược giữ 1 hàng */
  .countdown{
    display:grid !important;
    grid-template-columns:repeat(4,1fr) !important;
    gap:8px !important;
  }

  .timebox{
    padding:10px 4px !important;
  }

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

}


/* COUNTDOWN MOBILE 1 ROW FIX */
@media (max-width:600px){

  .countdown{
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:6px !important;
    overflow:hidden !important;
  }

  .countdown .timebox{
    flex:1 1 25% !important;
    min-width:0 !important;
    padding:8px 2px !important;
  }

  .countdown .timebox strong{
    font-size:20px !important;
    line-height:1 !important;
  }

  .countdown .timebox small{
    font-size:10px !important;
  }

}


/* MOBILE COUNTDOWN STYLE GIỐNG ẢNH MẪU */
@media (max-width:600px){

  .mobile-offer-bar{
    display:block !important;
    position:sticky !important;
    top:0 !important;
    z-index:300 !important;
    background:#06162e !important;
    color:#fff !important;
    padding:6px 8px 7px !important;
    border-bottom:0 !important;
  }

  .mobile-offer-title{
    margin:0 0 4px !important;
    text-align:center !important;
    font-size:10px !important;
    line-height:1.1 !important;
    font-weight:900 !important;
    letter-spacing:.2px !important;
    text-transform:uppercase !important;
  }

  .mobile-offer-row{
    display:grid !important;
    grid-template-columns:1fr auto !important;
    gap:6px !important;
    align-items:center !important;
  }

  .mobile-time-group{
    display:grid !important;
    grid-template-columns:repeat(4,1fr) !important;
    gap:5px !important;
    min-width:0 !important;
  }

  .mobile-timebox{
    min-width:0 !important;
    padding:11px 5px 10px !important;
    border-radius:2px !important;
    background:#fff !important;
    color:#06162e !important;
    text-align:center !important;
  }

  .mobile-timebox strong{
    display:block !important;
    font-size:17px !important;
    line-height:1 !important;
    font-weight:900 !important;
    color:#08366f !important;
  }

  .mobile-timebox span{
    display:block !important;
    margin-top:2px !important;
    font-size:7px !important;
    line-height:1 !important;
    font-weight:900 !important;
    color:#06162e !important;
  }

  .mobile-offer-cta{
    min-width:82px !important;
    text-align:center !important;
  }

  .mobile-discount{
    margin:0 0 3px !important;
    color:#ffd34d !important;
    font-size:16px !important;
    line-height:1 !important;
    font-weight:900 !important;
    letter-spacing:.4px !important;
    text-transform:uppercase !important;
  }

  .mobile-offer-cta a{
    display:block !important;
    padding:5px 8px !important;
    border-radius:999px !important;
    background:linear-gradient(180deg,#ff3434,#e11d2e) !important;
    color:#fff !important;
    font-size:8.5px !important;
    line-height:1 !important;
    font-weight:900 !important;
    text-transform:uppercase !important;
    box-shadow:0 3px 0 #b50e18,0 7px 12px rgba(225,29,46,.28) !important;
  }

  /* form countdown chính vẫn 1 dòng khi xuất hiện trong hero */
  .countdown{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:5px !important;
  }

  .countdown .timebox{
    min-width:0 !important;
    padding:7px 2px !important;
  }

  .countdown .timebox strong{
    font-size:18px !important;
  }

  .countdown .timebox small{
    font-size:9px !important;
  }

}

@media (max-width:380px){
  .mobile-offer-bar{
    padding:5px 6px 6px !important;
  }

  .mobile-time-group{
    gap:4px !important;
  }

  .mobile-timebox strong{
    font-size:15px !important;
  }

  .mobile-timebox span{
    font-size:6.5px !important;
  }

  .mobile-offer-cta{
    min-width:76px !important;
  }

  .mobile-discount{
    font-size:14px !important;
  }

  .mobile-offer-cta a{
    font-size:7.5px !important;
    padding:5px 6px !important;
  }
}