/* =========================================================
   NATIONLED - DỊCH VỤ OEM / ODM
   Chỉ áp dụng trong .kht-dichvu-section1

   CẬP NHẬT:
   - Viền xanh quanh ảnh bằng nhau 4 cạnh.
   - Không để cột ảnh bị kéo cao theo cột text.
   - Giữ nguyên bố cục, badge và hiệu ứng hiện tại.
========================================================= */

.kht-dichvu-section1 {
  --kht-primary: #28cb8b;
  --kht-primary-dark: #078563;
  --kht-dark: #0c3025;
  --kht-text: #304c43;
  --kht-muted: #526a61;
  --kht-white: #ffffff;
  --kht-border: rgba(40, 203, 139, 0.22);

  --kht-visual-height: 610px;
  --kht-image-frame-gap: 24px;

  position: relative;

  overflow: hidden;

  background: #f4faf7;
}

.kht-dichvu-section1 *,
.kht-dichvu-section1 *::before,
.kht-dichvu-section1 *::after {
  box-sizing: border-box;
}


/* =========================================================
   BACKGROUND
========================================================= */

.kht-dichvu-section1 .section-bg {
  background:
    radial-gradient(circle at 6% 12%,
      rgba(40, 203, 139, 0.13),
      transparent 27%),
    radial-gradient(circle at 94% 86%,
      rgba(40, 203, 139, 0.08),
      transparent 25%),
    linear-gradient(135deg,
      #f9fcfa,
      #f0f8f4);
}


/* Lưới nền mờ */
.kht-dichvu-section1 .section-bg::after {
  position: absolute;
  inset: 0;

  content: "";

  pointer-events: none;

  opacity: 0.28;

  background-image:
    linear-gradient(rgba(40, 203, 139, 0.06) 1px,
      transparent 1px),
    linear-gradient(90deg,
      rgba(40, 203, 139, 0.06) 1px,
      transparent 1px);

  background-size: 52px 52px;

  -webkit-mask-image:
    linear-gradient(90deg,
      #000,
      transparent 72%);

  mask-image:
    linear-gradient(90deg,
      #000,
      transparent 72%);
}


/* Khoảng cách tổng section */
.kht-dichvu-section1>.section-content {
  position: relative;
  z-index: 2;

  padding: 42px 20px;
}


/* =========================================================
   BỐ CỤC CHÍNH
========================================================= */

.kht-dichvu-section1>.section-content>.row {
  display: grid;

  grid-template-columns:
    minmax(0, 0.96fr) minmax(560px, 1.04fr);

  /*
     * Hai column vẫn bắt đầu cùng vị trí,
     * nhưng không ép nội dung bên phải cao bằng bên trái.
     */
  align-items: start;

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

  margin: 0 auto;

  gap: clamp(38px, 4vw, 58px);
}


/* Reset cột mặc định Flatsome */
.kht-dichvu-section1>.section-content>.row>.dichvu-trai-s1,
.kht-dichvu-section1>.section-content>.row>.dichvu-phai-s1 {
  width: auto;
  max-width: none;
  min-width: 0;

  flex-basis: auto;

  padding: 0;
}


/* =========================================================
   CỘT TRÁI
========================================================= */

.kht-dichvu-section1 .dichvu-trai-s1 {
  position: relative;
  z-index: 3;

  min-height: var(--kht-visual-height);
}


.kht-dichvu-section1 .dichvu-trai-s1>.col-inner {
  display: flex;

  flex-direction: column;
  justify-content: space-between;

  width: 100%;
  height: 100%;

  min-height: var(--kht-visual-height);

  padding: 64px 0 52px;
}


/* Reset row con */
.kht-dichvu-section1 .dichvu-trai-s1 .row {
  width: 100%;
  max-width: none;

  margin-right: 0;
  margin-left: 0;
}


.kht-dichvu-section1 .s1-trai-text1,
.kht-dichvu-section1 .s1-trai-text2,
.kht-dichvu-section1 .s1-trai-text3 {
  flex: 0 0 auto;
}


.kht-dichvu-section1 .s1-trai-text1>.col,
.kht-dichvu-section1 .s1-trai-text3>.col {
  padding: 0;
}


/* Ẩn pseudo cũ */
.kht-dichvu-section1 .s1-trai-text1>.col>.col-inner::before,
.kht-dichvu-section1 .s1-trai-text1>.col>.col-inner::after {
  display: none;

  content: none;
}


/* =========================================================
   TIÊU ĐỀ
========================================================= */

.kht-dichvu-section1 .s1-t1,
.kht-dichvu-section1 .s1-t2,
.kht-dichvu-section1 .s1-t3,
.kht-dichvu-section1 .s1-t1 p,
.kht-dichvu-section1 .s1-t2 p,
.kht-dichvu-section1 .s1-t3 p {
  margin: 0;
}


.kht-dichvu-section1 .s1-t1 p,
.kht-dichvu-section1 .s1-t2 p {
  font-size:
    clamp(2.45rem,
      3.7vw,
      3.75rem);

  line-height: 0.98;

  letter-spacing: -0.05em;

  text-transform: uppercase;
}


.kht-dichvu-section1 .s1-t1 p {
  color: var(--kht-dark);

  font-weight: 500;
}


.kht-dichvu-section1 .s1-t2 p {
  margin-top: 10px;

  color: var(--kht-primary-dark);

  font-weight: 800;
}


@media screen and (min-width: 1181px) {

  .kht-dichvu-section1 .s1-t1 p,
  .kht-dichvu-section1 .s1-t2 p {
    white-space: nowrap;
  }
}


/* =========================================================
   CARD MÔ TẢ
========================================================= */

.kht-dichvu-section1 .s1-t3 {
  position: relative;

  margin-top: 30px;

  padding:
    23px 25px 22px 72px;

  overflow: hidden;

  border:
    1px solid rgba(15, 48, 37, 0.08);

  border-radius: 19px;

  background:
    rgba(255, 255, 255, 0.82);

  box-shadow:
    0 12px 35px rgba(13, 62, 46, 0.065);

  backdrop-filter: blur(10px);
}


/* Dấu ngoặc kép */
.kht-dichvu-section1 .s1-t3::before {
  position: absolute;

  top: 14px;
  left: 21px;

  color: var(--kht-primary);

  content: "“";

  font-family: Georgia, serif;

  font-size: 4.7rem;
  font-weight: 700;
  line-height: 1;
}


/* Line dưới mô tả */
.kht-dichvu-section1 .s1-t3::after {
  position: absolute;

  right: 25px;
  bottom: 0;
  left: 72px;

  height: 3px;

  content: "";

  border-radius:
    999px 999px 0 0;

  background:
    linear-gradient(90deg,
      var(--kht-primary),
      rgba(40, 203, 139, 0.35) 62%,
      transparent);
}


.kht-dichvu-section1 .s1-t3 p {
  color: var(--kht-text);

  font-size:
    clamp(0.96rem,
      1.1vw,
      1.04rem);

  line-height: 1.85;
}


/* =========================================================
   3 CARD TEXT
========================================================= */

.kht-dichvu-section1 .s1-trai-text2 {
  display: grid;

  grid-template-columns:
    repeat(3,
      minmax(0, 1fr));

  /*
     * Khoảng cách với card lớn phía trên.
     */
  margin-top: 30px;

  margin-right: 0;
  margin-left: 0;

  gap: 20px;
}


.kht-dichvu-section1 .s1-trai-text2>.col {
  width: auto;
  max-width: none;
  min-width: 0;

  flex-basis: auto;

  padding: 0;
}


.kht-dichvu-section1 .s1-trai-text2>.col>.col-inner {
  position: relative;

  display: flex;

  flex-direction: column;
  justify-content: center;

  height: 100%;

  min-height: 108px;

  padding:
    17px 16px 15px;

  overflow: hidden;

  border:
    1px solid var(--kht-border);

  border-radius: 18px;

  background:
    rgba(255, 255, 255, 0.68);

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


/* Line xanh đầu card */
.kht-dichvu-section1 .s1-trai-text2>.col>.col-inner::before {
  position: absolute;

  top: 0;
  right: 16px;
  left: 16px;

  height: 3px;

  content: "";

  border-radius:
    0 0 999px 999px;

  background:
    var(--kht-primary);

  transform: scaleX(0.3);

  transform-origin: left center;

  transition:
    transform 0.3s ease;
}


.kht-dichvu-section1 .s1-trai-text2>.col>.col-inner:hover {
  border-color:
    rgba(40, 203, 139, 0.48);

  background:
    var(--kht-white);

  box-shadow:
    0 14px 32px rgba(18, 84, 61, 0.09);

  transform:
    translateY(-3px);
}


.kht-dichvu-section1 .s1-trai-text2>.col>.col-inner:hover::before {
  transform: scaleX(1);
}


.kht-dichvu-section1 .s1-trai-text2 p {
  margin: 0;
}


.kht-dichvu-section1 .s1-so-1 p,
.kht-dichvu-section1 .s1-so-2 p,
.kht-dichvu-section1 .s1-so-3 p {
  margin-bottom: 7px;

  color: var(--kht-dark);

  font-size:
    clamp(1.14rem,
      1.45vw,
      1.42rem);

  font-weight: 800;

  line-height: 1.1;
}


.kht-dichvu-section1 .s1-trai-text2>.col>.col-inner>p {
  color: var(--kht-muted);

  font-size: 0.8rem;
  font-weight: 500;

  line-height: 1.5;

  text-align: justify;
}


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

.kht-dichvu-section1 .s1-trai-text3 {
  margin-top: 0;
}


.kht-dichvu-section1 .s1-trai-text3>.col:nth-child(2) {
  display: none;
}


.kht-dichvu-section1 .s1-trai-text3 .button {
  position: relative;

  display: inline-flex;

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

  min-height: 54px;

  margin: 0;

  padding:
    0 59px 0 26px;

  overflow: hidden;

  border:
    1px solid var(--kht-primary);

  border-radius: 999px;

  color: var(--kht-dark);

  background:
    var(--kht-primary);

  box-shadow:
    0 12px 28px rgba(40, 203, 139, 0.2);

  font-size: 0.78rem;
  font-weight: 700;

  line-height: 1;

  letter-spacing: 0.07em;

  text-transform: uppercase;

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


.kht-dichvu-section1 .s1-trai-text3 .button::before {
  position: absolute;

  top: 50%;
  right: 6px;

  display: grid;

  width: 41px;
  height: 41px;

  place-items: center;

  border-radius: 50%;

  color: var(--kht-white);

  content: "→";

  background: var(--kht-dark);

  font-size: 1.12rem;

  transform:
    translateY(-50%);

  transition:
    color 0.3s ease,
    background-color 0.3s ease,
    transform 0.3s ease;
}


.kht-dichvu-section1 .s1-trai-text3 .button:hover {
  border-color:
    var(--kht-primary-dark);

  color:
    var(--kht-white);

  background:
    var(--kht-primary-dark);
}


.kht-dichvu-section1 .s1-trai-text3 .button:hover::before {
  color:
    var(--kht-dark);

  background:
    var(--kht-white);

  transform:
    translateY(-50%) rotate(-22deg);
}


/* =========================================================
   KHUNG ẢNH BÊN PHẢI
========================================================= */

.kht-dichvu-section1 .dichvu-phai-s1 {
  position: relative;
  z-index: 2;

  align-self: start;

  min-width: 0;
}


/*
 * QUAN TRỌNG
 *
 * Không dùng height: 100%.
 * Nếu dùng 100%, khi cột text bên trái cao hơn,
 * cột ảnh sẽ bị kéo theo và sinh ra mảng xanh lớn ở đáy.
 *
 * Khung bây giờ chỉ ôm đúng:
 *
 * 24px trên
 * + ảnh
 * + 24px dưới
 *
 * Đồng thời trái/phải cũng là 24px.
 */
.kht-dichvu-section1 .dichvu-phai-s1>.col-inner {
  position: relative;

  width: 100%;

  height: auto;
  min-height: 0;

  padding:
    var(--kht-image-frame-gap);

  border:
    1px solid rgba(12, 48, 37, 0.12);

  border-radius: 35px;

  background:
    var(--kht-primary);

  box-shadow:
    0 24px 58px rgba(40, 203, 139, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}


/* Tắt decoration cũ */
.kht-dichvu-section1 .dichvu-phai-s1>.col-inner::before {
  display: none;

  content: none;
}


/* Nhãn NATIONLED bên cạnh */
.kht-dichvu-section1 .dichvu-phai-s1>.col-inner::after {
  position: absolute;

  top: 125px;
  left: -12px;

  z-index: 8;

  display: flex;

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

  width: 38px;

  min-height: 112px;

  padding: 10px 0;

  border:
    1px solid var(--kht-border);

  border-radius: 10px;

  color:
    var(--kht-primary-dark);

  content: "NATIONLED";

  background:
    var(--kht-white);

  box-shadow:
    0 10px 26px rgba(12, 48, 37, 0.16);

  font-size: 0.6rem;
  font-weight: 800;

  line-height: 1;

  letter-spacing: 0.12em;

  writing-mode:
    vertical-rl;

  transform:
    rotate(180deg);
}


/* =========================================================
   ẢNH
========================================================= */

.kht-dichvu-section1 .dichvu-phai-s1 .img {
  position: relative;
  z-index: 2;

  display: block;

  width: 100%;

  margin: 0;
}


/*
 * Chiều cao ảnh giữ nguyên.
 * Khung xanh bên ngoài sẽ tự ôm theo ảnh.
 */
.kht-dichvu-section1 .dichvu-phai-s1 .img-inner {
  position: relative;

  width: 100%;
  height: 562px;

  overflow: hidden;

  border:
    1px solid rgba(12, 48, 37, 0.12);

  border-radius: 25px;

  background:
    #dfe8e4;
}


/* Overlay ảnh */
.kht-dichvu-section1 .dichvu-phai-s1 .img-inner::after {
  position: absolute;

  inset: 0;

  z-index: 2;

  content: "";

  pointer-events: none;

  background:
    linear-gradient(180deg,
      rgba(7, 38, 28, 0.01) 40%,
      rgba(7, 38, 28, 0.24)),
    linear-gradient(90deg,
      rgba(7, 38, 28, 0.05),
      transparent 52%);
}


.kht-dichvu-section1 .dichvu-phai-s1 .img-inner img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position:
    center 62%;

  filter:
    brightness(1.055) contrast(1.02) saturate(0.95);

  transform:
    scale(1.025);

  will-change:
    transform;
}


/* =========================================================
   BADGE NỔI TRÊN ẢNH
========================================================= */

.kht-dichvu-section1 .s1-badge {
  position: absolute;

  inset: 0;

  z-index: 6;

  display: block;

  width: 100%;
  max-width: none;

  margin: 0;

  pointer-events: none;
}


.kht-dichvu-section1 .s1-badge>.col {
  position: absolute;

  width: 170px;
  max-width: 170px;

  padding: 0;

  pointer-events: auto;

  will-change: transform;
}


.kht-dichvu-section1 .s1-badge>.col::before {
  display: none;

  content: none;
}


/* ISO */
.kht-dichvu-section1 .s1-badge>.badge1 {
  top: 98px;
  right: 12px;
}


/* OEM ODM */
.kht-dichvu-section1 .s1-badge>.badge2 {
  bottom: 133px;
  left: 12px;
}


/* R&D */
.kht-dichvu-section1 .s1-badge>.badge3 {
  right: 18px;
  bottom: 28px;
}


.kht-dichvu-section1 .s1-badge>.col>.col-inner {
  position: relative;

  display: flex;

  flex-direction: column;
  justify-content: center;

  min-height: 74px;

  padding:
    11px 14px;

  overflow: hidden;

  border:
    1px solid rgba(40, 203, 139, 0.2);

  border-radius: 15px;

  background:
    rgba(255, 255, 255, 0.96);

  box-shadow:
    0 13px 29px rgba(0, 0, 0, 0.14);

  backdrop-filter:
    blur(10px);

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


.kht-dichvu-section1 .s1-badge>.col>.col-inner::after {
  display: none;

  content: none;
}


.kht-dichvu-section1 .s1-badge>.col:hover>.col-inner {
  border-color:
    rgba(40, 203, 139, 0.55);

  box-shadow:
    0 18px 36px rgba(0, 0, 0, 0.17),
    0 0 0 3px rgba(40, 203, 139, 0.06);

  transform:
    translateY(-3px);
}


.kht-dichvu-section1 .s1-badge p {
  margin: 0;
}


.kht-dichvu-section1 .s1-badge>.col>.col-inner>p:first-child {
  width: 100%;

  margin-bottom: 4px;

  color:
    var(--kht-dark);

  font-size: 0.9rem;
  font-weight: 800;

  line-height: 1.25;

  white-space: nowrap;
}


.kht-dichvu-section1 .s1-badge>.col>.col-inner>p:last-child {
  color:
    var(--kht-muted);

  font-size: 0.7rem;
  font-weight: 500;

  line-height: 1.4;
}


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

@media screen and (max-width: 1180px) {

  .kht-dichvu-section1>.section-content>.row {
    grid-template-columns:
      1fr;

    align-items: start;

    max-width: 850px;

    gap: 46px;
  }


  .kht-dichvu-section1 .dichvu-trai-s1 {
    min-height: 0;
  }


  .kht-dichvu-section1 .dichvu-trai-s1>.col-inner {
    display: block;

    height: auto;
    min-height: 0;

    padding: 0;
  }


  .kht-dichvu-section1 .s1-trai-text2 {
    margin-top: 28px;
  }


  .kht-dichvu-section1 .s1-trai-text3 {
    margin-top: 18px;
  }


  .kht-dichvu-section1 .s1-t1 p,
  .kht-dichvu-section1 .s1-t2 p {
    font-size:
      clamp(2.5rem,
        7vw,
        4rem);

    white-space: normal;
  }


  /*
     * Đảm bảo khung ảnh tablet
     * cũng không bị stretch.
     */
  .kht-dichvu-section1 .dichvu-phai-s1 {
    align-self: start;
  }


  .kht-dichvu-section1 .dichvu-phai-s1>.col-inner {
    height: auto;

    min-height: 0;
  }
}


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

@media screen and (max-width: 767px) {

  .kht-dichvu-section1>.section-content {
    padding:
      30px 16px;
  }


  .kht-dichvu-section1>.section-content>.row {
    gap: 32px;
  }


  /* Tiêu đề */
  .kht-dichvu-section1 .s1-t1 p,
  .kht-dichvu-section1 .s1-t2 p {
    font-size:
      clamp(2rem,
        9.5vw,
        3rem);

    line-height: 1.02;
  }


  /* Mô tả */
  .kht-dichvu-section1 .s1-t3 {
    margin-top: 22px;

    padding:
      55px 18px 19px;

    border-radius: 18px;
  }


  .kht-dichvu-section1 .s1-t3::before {
    top: 8px;
    left: 17px;

    font-size: 3.9rem;
  }


  .kht-dichvu-section1 .s1-t3::after {
    right: 18px;
    left: 18px;
  }


  .kht-dichvu-section1 .s1-t3 p {
    font-size: 0.93rem;

    line-height: 1.8;
  }


  /* =====================================================
       3 CARD TEXT
    ===================================================== */

  .kht-dichvu-section1 .s1-trai-text2 {
    display: flex;

    flex-wrap: nowrap;

    width: 100%;
    max-width: 100%;

    margin-top: 22px;

    margin-right: 0;
    margin-left: 0;

    padding:
      1px 1px 6px;

    gap: 12px;

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

    scroll-snap-type:
      x mandatory;

    scroll-padding-left: 1px;

    scroll-behavior: smooth;

    overscroll-behavior-inline:
      contain;

    -webkit-overflow-scrolling:
      touch;

    scrollbar-width: none;
  }


  .kht-dichvu-section1 .s1-trai-text2::-webkit-scrollbar {
    display: none;
  }


  .kht-dichvu-section1 .s1-trai-text2>.col {
    flex:
      0 0 calc((100% - 12px) / 2);

    width:
      calc((100% - 12px) / 2);

    min-width:
      calc((100% - 12px) / 2);

    max-width:
      calc((100% - 12px) / 2);

    padding: 0;

    scroll-snap-align:
      start;

    scroll-snap-stop:
      always;
  }


  .kht-dichvu-section1 .s1-trai-text2>.col>.col-inner {
    display: flex;

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

    width: 100%;

    min-height: 92px;

    padding:
      16px 18px;

    border-radius: 16px;
  }


  .kht-dichvu-section1 .s1-so-1 p,
  .kht-dichvu-section1 .s1-so-2 p,
  .kht-dichvu-section1 .s1-so-3 p {
    margin:
      0 12px 0 0;

    font-size: 0.96rem;

    line-height: 1.1;

    white-space: nowrap;
  }


  .kht-dichvu-section1 .s1-trai-text2>.col>.col-inner>p {
    width: 100%;

    margin: 0;

    font-size: 0.82rem;

    line-height: 1.55;

    text-align: left;
  }


  /* CTA */
  .kht-dichvu-section1 .s1-trai-text3 {
    margin-top: 18px;
  }


  .kht-dichvu-section1 .s1-trai-text3 .button {
    width: 100%;
  }


  /* =====================================================
       KHUNG ẢNH MOBILE
    ===================================================== */

  .kht-dichvu-section1 .dichvu-phai-s1>.col-inner {
    height: auto;

    min-height: 0;

    /*
         * Mobile giữ khoảng trên lớn hơn
         * để có chỗ cho nhãn NATIONLED ngang.
         */
    padding:
      42px 14px 14px;

    border-radius: 25px;
  }


  /* Nhãn ngang mobile */
  .kht-dichvu-section1 .dichvu-phai-s1>.col-inner::after {
    top: 21px;
    left: 50%;

    width: auto;

    min-width: 116px;
    min-height: 32px;

    padding:
      0 14px;

    writing-mode: initial;

    transform:
      translate(-50%, -50%);
  }


  .kht-dichvu-section1 .dichvu-phai-s1 .img-inner {
    height: 390px;

    border-radius: 20px;
  }


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

  .kht-dichvu-section1 .s1-badge {
    position: relative;

    inset: auto;

    display: grid;

    grid-template-columns:
      repeat(3,
        minmax(0, 1fr));

    width: 100%;
    max-width: 100%;

    margin-top: 8px;

    gap: 6px;
  }


  .kht-dichvu-section1 .s1-badge>.col,
  .kht-dichvu-section1 .s1-badge>.badge1,
  .kht-dichvu-section1 .s1-badge>.badge2,
  .kht-dichvu-section1 .s1-badge>.badge3 {
    position: relative;

    inset: auto;

    width: 100%;
    max-width: none;
    min-width: 0;

    padding: 0;
  }


  .kht-dichvu-section1 .s1-badge>.col>.col-inner {
    display: flex;

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

    flex-direction: column;

    width: 100%;

    min-height: 50px;

    padding:
      5px 3px;

    border-radius: 10px;

    text-align: center;
  }


  .kht-dichvu-section1 .s1-badge>.col>.col-inner>p:first-child {
    width: 100%;

    margin-bottom: 2px;

    font-size: 0.63rem;

    line-height: 1.15;

    text-align: center;

    white-space: nowrap;
  }


  .kht-dichvu-section1 .s1-badge>.badge3>.col-inner>p:first-child {
    font-size: 0.56rem;
  }


  .kht-dichvu-section1 .s1-badge>.col>.col-inner>p:last-child {
    width: 100%;

    font-size: 0.49rem;

    line-height: 1.2;

    text-align: center;

    white-space: normal;
  }
}


/* =========================================================
   MOBILE NHỎ
========================================================= */

@media screen and (max-width: 390px) {

  .kht-dichvu-section1 .s1-t1 p,
  .kht-dichvu-section1 .s1-t2 p {
    font-size: 1.92rem;
  }


  .kht-dichvu-section1 .s1-trai-text2 {
    margin-top: 20px;
  }


  .kht-dichvu-section1 .s1-trai-text2>.col {
    flex-basis:
      calc((100% - 12px) / 2);

    width:
      calc((100% - 12px) / 2);

    min-width:
      calc((100% - 12px) / 2);

    max-width:
      calc((100% - 12px) / 2);
  }


  .kht-dichvu-section1 .s1-trai-text2>.col>.col-inner {
    min-height: 88px;

    padding:
      14px 15px;
  }


  .kht-dichvu-section1 .s1-trai-text2>.col>.col-inner>p {
    font-size: 0.78rem;

    line-height: 1.5;
  }


  .kht-dichvu-section1 .dichvu-phai-s1 .img-inner {
    height: 340px;
  }


  .kht-dichvu-section1 .s1-badge {
    gap: 5px;
  }


  .kht-dichvu-section1 .s1-badge>.col>.col-inner {
    min-height: 46px;

    padding:
      4px 2px;

    border-radius: 9px;
  }


  .kht-dichvu-section1 .s1-badge>.col>.col-inner>p:first-child {
    font-size: 0.58rem;
  }


  .kht-dichvu-section1 .s1-badge>.badge3>.col-inner>p:first-child {
    font-size: 0.51rem;
  }


  .kht-dichvu-section1 .s1-badge>.col>.col-inner>p:last-child {
    font-size: 0.45rem;
  }
}


/* =========================================================
   GIẢM CHUYỂN ĐỘNG
========================================================= */

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

  .kht-dichvu-section1 *,
  .kht-dichvu-section1 *::before,
  .kht-dichvu-section1 *::after {
    transition-duration:
      0.01ms;

    animation-duration:
      0.01ms;

    animation-iteration-count:
      1;
  }
}











/* =========================================================
   NATIONLED - QUY TRÌNH GIA CÔNG OEM/ODM
   Desktop: vòng tròn đầy đủ
   Mobile: thu nhỏ nguyên vòng desktop

   CẬP NHẬT:
   - Sửa logo NationLED ở trung tâm.
   - Không còn bị nền trắng / khung tròn cắt mất chữ.
   - Vòng nền trung tâm vẫn giữ hình tròn.
   - Logo bên trong hiển thị FULL.
   - Giữ nguyên vị trí, line và animation hiện tại.
========================================================= */

.kht-dichvu-section2 {
  --kht-process-primary: #28cb8b;
  --kht-process-dark: #237d31;
  --kht-process-deep: #103e13;
  --kht-process-text: #263238;
  --kht-process-muted: #647076;
  --kht-process-tint: #e8f5e9;
  --kht-process-white: #ffffff;

  position: relative;

  overflow: hidden;

  padding: 0;

  background:
    radial-gradient(circle at 75% 50%,
      rgba(40, 203, 139, 0.1) 0,
      rgba(40, 203, 139, 0.035) 35%,
      transparent 64%),
    linear-gradient(130deg,
      #ffffff 0%,
      #f7faf9 50%,
      #effaf5 100%);
}


/* =========================================================
   RESET
========================================================= */

.kht-dichvu-section2 *,
.kht-dichvu-section2 *::before,
.kht-dichvu-section2 *::after {
  box-sizing: border-box;
}


/* =========================================================
   BACKGROUND TRANG TRÍ
========================================================= */

.kht-dichvu-section2::before {
  position: absolute;

  top: -350px;
  right: -230px;

  width: 1120px;
  height: 1120px;

  content: "";

  pointer-events: none;

  border:
    80px solid rgba(40, 203, 139, 0.02);

  border-radius: 50%;

  box-shadow:
    0 0 0 100px rgba(40, 203, 139, 0.014),

    0 0 0 200px rgba(40, 203, 139, 0.008);
}


/* =========================================================
   SECTION CONTENT
========================================================= */

.kht-dichvu-section2>.section-content {
  position: relative;

  z-index: 2;

  padding:
    58px 20px;
}


/* =========================================================
   BỐ CỤC CHÍNH
========================================================= */

.kht-dichvu-section2>.section-content>.row {
  display: grid;

  grid-template-columns:
    420px minmax(0, 1fr);

  align-items: center;

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

  margin: 0 auto;

  gap: 30px;
}


/* Reset cột Flatsome */
.kht-dichvu-section2>.section-content>.row>.quytrinh-trai,
.kht-dichvu-section2>.section-content>.row>.quytrinh-phai {
  width: 100%;
  max-width: 100%;
  min-width: 0;

  padding: 0;

  flex-basis: auto;
}


/* =========================================================
   NỘI DUNG BÊN TRÁI
========================================================= */

.kht-dichvu-section2 .quytrinh-trai>.col-inner {
  position: relative;

  padding:
    10px 0;
}


/* Line trên tiêu đề */
.kht-dichvu-section2 .quytrinh-trai>.col-inner::before {
  display: block;

  width: 42px;
  height: 3px;

  margin-bottom: 23px;

  content: "";

  border-radius: 999px;

  background:
    var(--kht-process-primary);
}


/* =========================================================
   H2
========================================================= */

.kht-dichvu-section2 .quytrinh-trai h2 {
  width: max-content;
  max-width: 100%;

  margin: 0;

  color:
    var(--kht-process-text);

  font-size:
    clamp(1.8rem,
      2.35vw,
      2.45rem);

  font-weight: 800;

  line-height: 1.05;

  letter-spacing:
    -0.055em;

  white-space: nowrap;

  text-transform: uppercase;
}


/* =========================================================
   H3
========================================================= */

.kht-dichvu-section2 .quytrinh-trai h3 {
  position: relative;

  margin:
    16px 0 27px;

  padding-bottom: 25px;

  color:
    var(--kht-process-dark);

  font-size:
    clamp(1.4rem,
      1.8vw,
      1.9rem);

  font-weight: 800;

  line-height: 1.1;

  letter-spacing:
    -0.045em;

  text-transform: uppercase;
}


/* Line dưới H3 */
.kht-dichvu-section2 .quytrinh-trai h3::after {
  position: absolute;

  bottom: 0;
  left: 0;

  width: 145px;
  height: 1px;

  content: "";

  background:
    linear-gradient(90deg,
      var(--kht-process-primary),
      rgba(40, 203, 139, 0));
}


/* Chấm tròn cuối line */
.kht-dichvu-section2 .quytrinh-trai h3::before {
  position: absolute;

  bottom: -2px;
  left: 140px;

  width: 5px;
  height: 5px;

  content: "";

  border-radius: 50%;

  background:
    var(--kht-process-primary);
}


/* =========================================================
   TEXT MÔ TẢ
========================================================= */

.kht-dichvu-section2 .quytrinh-trai p:first-of-type {
  max-width: 420px;

  margin:
    0 0 18px;

  color:
    var(--kht-process-text);

  font-size: 0.98rem;

  font-weight: 700;

  line-height: 1.55;
}


.kht-dichvu-section2 .quytrinh-trai p:nth-of-type(2) {
  max-width: 440px;

  margin:
    0 0 27px;

  color:
    var(--kht-process-muted);

  font-size: 0.86rem;

  font-weight: 500;

  line-height: 1.78;
}


/* =========================================================
   BUTTON
========================================================= */

.kht-dichvu-section2 .quytrinh-trai .button {
  position: relative;

  display: inline-flex;

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

  min-width: 220px;
  min-height: 51px;

  margin: 0;

  padding:
    0 58px 0 27px;

  border:
    1px solid var(--kht-process-primary);

  border-radius: 10px;

  color:
    var(--kht-process-white);

  background:
    linear-gradient(105deg,
      var(--kht-process-dark),
      var(--kht-process-primary));

  box-shadow:
    0 13px 28px rgba(40, 203, 139, 0.22);

  font-size: 0.81rem;

  font-weight: 800;

  line-height: 1;

  letter-spacing: 0.03em;

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


/* Mũi tên button */
.kht-dichvu-section2 .quytrinh-trai .button::after {
  position: absolute;

  top: 50%;
  right: 22px;

  color:
    var(--kht-process-white);

  content: "→";

  font-size: 1.25rem;

  transform:
    translateY(-52%);

  transition:
    transform 0.3s ease;
}


.kht-dichvu-section2 .quytrinh-trai .button:hover {
  color:
    var(--kht-process-white);

  box-shadow:
    0 17px 34px rgba(40, 203, 139, 0.3);

  transform:
    translateY(-3px);
}


.kht-dichvu-section2 .quytrinh-trai .button:hover::after {
  transform:
    translate(5px,
      -52%);
}


/* =========================================================
   CỘT SƠ ĐỒ
========================================================= */

.kht-dichvu-section2 .quytrinh-phai {
  position: relative;

  min-width: 0;
}


.kht-dichvu-section2 .quytrinh-phai>.col-inner {
  display: flex;

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

  min-height: 770px;

  overflow: visible;
}


/* =========================================================
   CANVAS 750PX
========================================================= */

.kht-dichvu-section2 .quytrinh-phai .row-small {
  position: relative;

  display: block;

  flex:
    0 0 750px;

  width: 750px;
  min-width: 750px;
  max-width: none;

  height: 750px;
  min-height: 750px;

  margin:
    14px 0 0;

  overflow: visible;
}


/* =========================================================
   VÒNG TRÒN NGOÀI
========================================================= */

.kht-dichvu-section2 .quytrinh-phai .row-small::before {
  position: absolute;

  z-index: 0;

  top: 50%;
  left: 50%;

  width: 480px;
  height: 480px;

  content: "";

  border:
    1px solid rgba(35, 125, 49, 0.17);

  border-radius: 50%;

  box-shadow:
    0 0 0 28px rgba(40, 203, 139, 0.018),

    0 0 0 68px rgba(40, 203, 139, 0.01);

  transform:
    translate(-50%, -50%);
}


/* Ánh sáng quanh logo */
.kht-dichvu-section2 .quytrinh-phai .row-small::after {
  position: absolute;

  z-index: 0;

  top: 50%;
  left: 50%;

  width: 290px;
  height: 290px;

  content: "";

  border-radius: 50%;

  background:
    radial-gradient(circle,
      rgba(40, 203, 139, 0.11),
      rgba(40, 203, 139, 0.025) 58%,
      transparent 74%);

  transform:
    translate(-50%, -50%);
}


/* =========================================================
   SVG
========================================================= */

.kht-dichvu-section2 .kht-process-svg {
  position: absolute;

  z-index: 1;

  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  overflow: visible;

  pointer-events: none;
}


/* Line SVG */
.kht-dichvu-section2 .kht-process-path {
  fill: none;

  stroke:
    var(--kht-process-primary);

  stroke-width: 2;

  stroke-linecap: round;

  stroke-linejoin: round;

  opacity: 0;
}


/* =========================================================
   STEP
========================================================= */

.kht-dichvu-section2 .quytrinh-phai .row-small>.kht-process-step {
  position: absolute;

  z-index: 3;

  width: 76px;
  max-width: 76px;

  height: 76px;

  padding: 0;

  transform:
    translate(-50%, -50%);
}


.kht-dichvu-section2 .quytrinh-phai .kht-process-step>.col-inner {
  position: relative;

  width: 76px;
  height: 76px;

  padding: 0;

  overflow: visible;

  background:
    transparent;
}


/* =========================================================
   ICON BOX
========================================================= */

.kht-dichvu-section2 .quytrinh-phai .icon-box {
  position: relative;

  display: block;

  width: 76px;
  height: 76px;

  overflow: visible;
}


/* =========================================================
   KHUNG ICON
========================================================= */

.kht-dichvu-section2 .quytrinh-phai .icon-box-img {
  position: relative;

  display: flex;

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

  width: 76px;
  min-width: 76px;
  max-width: 76px;

  height: 76px;

  margin: 0;

  padding: 7px;

  border:
    1px solid rgba(35, 125, 49, 0.2);

  border-radius: 50%;

  background:
    linear-gradient(145deg,
      #ffffff,
      #f3faf5);

  box-shadow:
    0 9px 20px rgba(38, 50, 56, 0.1),

    0 0 0 5px rgba(40, 203, 139, 0.025);

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


/* =========================================================
   SỐ THỨ TỰ
========================================================= */

.kht-dichvu-section2 .quytrinh-phai .icon-box-img::before {
  position: absolute;

  z-index: 4;

  top: -15px;
  left: 50%;

  display: flex;

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

  width: 30px;
  height: 30px;

  content:
    attr(data-step);

  border:
    3px solid var(--kht-process-white);

  border-radius: 50%;

  color:
    var(--kht-process-white);

  background:
    linear-gradient(145deg,
      var(--kht-process-dark),
      var(--kht-process-primary));

  box-shadow:
    0 4px 12px rgba(35, 125, 49, 0.24);

  font-size: 0.75rem;

  font-weight: 800;

  transform:
    translateX(-50%);
}


/* =========================================================
   ICON 60PX
========================================================= */

.kht-dichvu-section2 .quytrinh-phai .icon-box-img .icon,
.kht-dichvu-section2 .quytrinh-phai .icon-box-img .icon-inner {
  display: flex;

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

  flex:
    0 0 60px;

  width: 60px;
  min-width: 60px;
  max-width: 60px;

  height: 60px;
}


.kht-dichvu-section2 .quytrinh-phai .icon-box-img img {
  display: block;

  width: 60px;
  min-width: 60px;
  max-width: 60px;

  height: 60px;

  object-fit: contain;
}


/* =========================================================
   TEXT STEP
========================================================= */

.kht-dichvu-section2 .quytrinh-phai .icon-box-text {
  position: absolute;

  z-index: 5;

  top: 50%;
  left: 50%;

  width: 162px;

  min-height: 0;

  margin: 0;

  pointer-events: none;

  transform:
    translate(-50%, -50%) translate(var(--kht-text-x, 0),
      var(--kht-text-y, 0));
}


.kht-dichvu-section2 .quytrinh-phai .icon-box-text p {
  margin: 0;

  color:
    var(--kht-process-text);

  font-size: 0.68rem;

  font-weight: 700;

  line-height: 1.42;

  letter-spacing:
    -0.012em;

  text-align:
    var(--kht-text-align, center);

  text-transform: uppercase;
}


/* =========================================================
   ACTIVE
========================================================= */

.kht-dichvu-section2 .quytrinh-phai .kht-process-step.is-active .icon-box-img {
  border-color:
    var(--kht-process-primary);

  box-shadow:
    0 14px 28px rgba(40, 203, 139, 0.22),

    0 0 0 8px rgba(40, 203, 139, 0.1);

  transform:
    scale(1.035);
}


.kht-dichvu-section2 .quytrinh-phai .kht-process-step.is-active .icon-box-text p {
  color:
    var(--kht-process-dark);
}


/* =========================================================
   HOVER STEP
========================================================= */

.kht-dichvu-section2 .quytrinh-phai .kht-process-step:hover .icon-box-img {
  border-color:
    var(--kht-process-primary);

  box-shadow:
    0 14px 28px rgba(40, 203, 139, 0.18),

    0 0 0 7px rgba(40, 203, 139, 0.07);

  transform:
    scale(1.035);
}


/* =========================================================
   LOGO TRUNG TÂM
========================================================= */

/*
 * Cột logo được giữ chính xác giữa canvas.
 */
.kht-dichvu-section2 .quytrinh-phai .row-small>.center-img {
  position: absolute;

  z-index: 4;

  top: 50%;
  left: 50%;

  display: flex;

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

  width: 180px;
  max-width: 180px;

  padding: 0;

  transform:
    translate(-50%, -50%);
}


/* =========================================================
   VÒNG TRÒN TRẮNG CHỨA LOGO
========================================================= */

.kht-dichvu-section2 .center-img>.col-inner {
  position: relative;

  display: flex;

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

  width: 180px;
  height: 180px;

  padding: 22px;

  /*
     * Cho phép logo bên trong hiển thị đầy đủ.
     */
  overflow: visible;

  border:
    8px solid rgba(255, 255, 255, 0.96);

  border-radius: 50%;

  background:
    radial-gradient(circle at 38% 28%,
      #ffffff,
      #f5f7fa 58%,
      var(--kht-process-tint));

  box-shadow:
    0 20px 40px rgba(38, 50, 56, 0.14),

    0 0 0 1px rgba(40, 203, 139, 0.14);
}


/* Vòng ngoài */
.kht-dichvu-section2 .center-img>.col-inner::before {
  position: absolute;

  z-index: -1;

  inset: -17px;

  content: "";

  border:
    1px solid rgba(40, 203, 139, 0.13);

  border-radius: 50%;
}


/* =========================================================
   FIX LOGO NATIONLED
   QUAN TRỌNG
========================================================= */

/*
 * .img chỉ là lớp wrapper.
 *
 * KHÔNG bo tròn wrapper này.
 * KHÔNG cắt overflow.
 */
.kht-dichvu-section2 .center-img .img {
  position: relative;

  z-index: 3;

  display: flex;

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

  width: 100%;
  height: 100%;

  margin: 0;

  overflow: visible !important;

  border-radius: 0 !important;

  background:
    transparent !important;
}


/*
 * Đây là thẻ .img-inner.dark của Flatsome.
 *
 * Trước đây đang bị border-radius 50%
 * và overflow hidden nên phần chữ NATIONLED
 * ở đáy ảnh bị hình tròn cắt mất.
 */
.kht-dichvu-section2 .center-img .img-inner {
  position: relative;

  z-index: 3;

  display: flex;

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

  width: 100%;
  height: 100%;

  padding: 0;

  overflow: visible !important;

  border: 0 !important;

  border-radius: 0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;
}


/*
 * Tắt mọi overlay mà class .dark của Flatsome
 * có thể chèn lên ảnh.
 */
.kht-dichvu-section2 .center-img .img-inner::before,
.kht-dichvu-section2 .center-img .img-inner::after {
  display: none !important;

  content: none !important;

  opacity: 0 !important;

  background:
    transparent !important;
}


/*
 * Quan trọng:
 * logo thật KHÔNG được border-radius 50%.
 *
 * Ảnh gốc NationLED là ảnh vuông,
 * logo + chữ nằm bên trong ảnh.
 */
.kht-dichvu-section2 .center-img img {
  position: relative;

  z-index: 4;

  display: block;

  width: 100%;
  height: 100%;

  max-width: 100%;

  margin: 0;

  padding: 0;

  opacity: 1 !important;

  visibility: visible !important;

  border: 0 !important;

  border-radius: 0 !important;

  background:
    transparent !important;

  object-fit: contain;

  object-position: center;

  filter: none !important;
}


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

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

  .kht-dichvu-section2>.section-content {
    padding:
      52px 20px;
  }


  .kht-dichvu-section2>.section-content>.row {
    grid-template-columns:
      minmax(0, 1fr);

    gap: 30px;
  }


  .kht-dichvu-section2 .quytrinh-trai>.col-inner {
    max-width: 760px;
  }


  .kht-dichvu-section2 .quytrinh-phai>.col-inner {
    min-height: 750px;
  }
}


/* =========================================================
   MOBILE
   Scale nguyên canvas desktop
========================================================= */

@media screen and (max-width: 767px) {

  .kht-dichvu-section2>.section-content {
    padding:
      32px 14px 36px;
  }


  .kht-dichvu-section2>.section-content>.row {
    display: block;

    width: 100%;
    max-width: 100%;

    margin: 0;
  }


  /* Reset cột */
  .kht-dichvu-section2>.section-content>.row>.quytrinh-trai,
  .kht-dichvu-section2>.section-content>.row>.quytrinh-phai {
    display: block;

    float: none;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    padding: 0;

    flex-basis: 100%;
  }


  /* Nội dung trái */
  .kht-dichvu-section2 .quytrinh-trai>.col-inner {
    padding: 0;
  }


  /* Line tiêu đề */
  .kht-dichvu-section2 .quytrinh-trai>.col-inner::before {
    width: 34px;
    height: 2px;

    margin-bottom: 15px;
  }


  /* H2 */
  .kht-dichvu-section2 .quytrinh-trai h2 {
    width: 100%;

    font-size:
      clamp(1.35rem,
        6.5vw,
        1.72rem);

    line-height: 1.08;

    white-space: nowrap;
  }


  /* H3 */
  .kht-dichvu-section2 .quytrinh-trai h3 {
    margin:
      10px 0 19px;

    padding-bottom: 17px;

    font-size: 1.15rem;
  }


  .kht-dichvu-section2 .quytrinh-trai h3::after {
    width: 118px;
  }


  .kht-dichvu-section2 .quytrinh-trai h3::before {
    left: 114px;
  }


  /* Text 1 */
  .kht-dichvu-section2 .quytrinh-trai p:first-of-type {
    margin-bottom: 11px;

    font-size: 0.86rem;

    line-height: 1.55;
  }


  /* Text 2 */
  .kht-dichvu-section2 .quytrinh-trai p:nth-of-type(2) {
    margin-bottom: 19px;

    font-size: 0.74rem;

    line-height: 1.65;
  }


  /* Button */
  .kht-dichvu-section2 .quytrinh-trai .button {
    min-width: 176px;

    min-height: 45px;

    padding:
      0 47px 0 20px;

    font-size: 0.72rem;
  }


  /* Khoảng cách sơ đồ */
  .kht-dichvu-section2 .quytrinh-phai {
    width: 100%;

    margin-top: 28px;

    clear: both;
  }


  /* Stage */
  .kht-dichvu-section2 .quytrinh-phai>.col-inner {
    position: relative;

    display: block;

    width: 100%;

    height:
      var(--kht-mobile-stage-height,
        320px);

    min-height:
      var(--kht-mobile-stage-height,
        320px);

    overflow: visible;
  }


  /*
     * Scale nguyên canvas 750px.
     */
  .kht-dichvu-section2 .quytrinh-phai .row-small {
    position: absolute;

    top: 0;
    left: 50%;

    display: block;

    flex: none;

    width: 750px;
    min-width: 750px;
    max-width: none;

    height: 750px;
    min-height: 750px;

    margin: 0;

    overflow: visible;

    transform:
      translateX(-50%) scale(var(--kht-mobile-scale,
          0.42));

    transform-origin:
      top center;

    will-change:
      transform;
  }


  /* Active mobile */
  .kht-dichvu-section2 .quytrinh-phai .kht-process-step.is-active .icon-box-img {
    transform:
      scale(1.025);
  }
}


/* =========================================================
   MOBILE NHỎ
========================================================= */

@media screen and (max-width: 374px) {

  .kht-dichvu-section2 .quytrinh-trai h2 {
    font-size:
      1.28rem;
  }
}


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

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

  .kht-dichvu-section2 *,
  .kht-dichvu-section2 *::before,
  .kht-dichvu-section2 *::after {
    transition-duration:
      0.01ms;
  }
}


















/* =========================================================
   NATIONLED
   SECTION: CHÚNG TÔI CUNG CẤP DỊCH VỤ
   ODM / OEM / SAM

   HTML GIỮ NGUYÊN TRONG FLATSOME

   DESKTOP : 3 CARD / HÀNG
   TABLET  : 2 CARD / HÀNG
   MOBILE  : 1 CARD / HÀNG

   ICON TRÁI + TITLE PHẢI
   TITLE CĂN GIỮA ICON
   LIST NẰM BÊN DƯỚI
========================================================= */


/* =========================================================
   01. SECTION
========================================================= */

.cung-cap-dv {
  --dv-green: #28cb8b;
  --dv-dark: #078563;

  --dv-title: #123f34;
  --dv-text: #60746e;

  --dv-border: #d6e9e2;

  position: relative;

  padding-top: 62px !important;
  padding-bottom: 68px !important;

  overflow: hidden;

  background:
    radial-gradient(circle at 0% 0%,
      rgba(40, 203, 139, 0.07),
      transparent 30%),
    radial-gradient(circle at 100% 100%,
      rgba(7, 133, 99, 0.04),
      transparent 28%),
    #ffffff;
}


.cung-cap-dv *,
.cung-cap-dv *::before,
.cung-cap-dv *::after {
  box-sizing: border-box;
}


/* =========================================================
   02. SECTION CONTENT
========================================================= */

.cung-cap-dv>.section-content {
  position: relative;

  z-index: 2;

  width: 100% !important;
  max-width: none !important;
}


/* =========================================================
   03. CONTAINER
========================================================= */

.cung-cap-dv .tieu-de,
.cung-cap-dv .card-nd {
  width: calc(100% - 40px) !important;
  max-width: 1320px !important;

  margin-left: auto !important;
  margin-right: auto !important;
}


/* =========================================================
   04. TIÊU ĐỀ
========================================================= */

.cung-cap-dv .tieu-de {
  margin-top: 0 !important;
  margin-bottom: 38px !important;
}


.cung-cap-dv .tieu-de>.col {
  width: 100% !important;
  max-width: 100% !important;

  padding: 0 !important;
}


.cung-cap-dv .tieu-de .col-inner {
  padding: 0 !important;

  text-align: center;
}


.cung-cap-dv .tieu-de p {
  position: relative;

  display: inline-block;

  margin: 0 !important;

  padding:
    0 0 18px !important;

  color: var(--dv-title);

  font-size: 30px;
  line-height: 1.25;

  font-weight: 800;

  letter-spacing: -0.7px;

  text-transform: uppercase;
}


/* =========================================================
   05. LINE DƯỚI TITLE
========================================================= */

.cung-cap-dv .tieu-de p::before {
  content: "";

  position: absolute;

  left: 50%;
  bottom: 0;

  width: 64px;
  height: 3px;

  transform:
    translateX(-50%);

  border-radius: 50px;

  background:
    linear-gradient(90deg,

      var(--dv-green) 0%,
      var(--dv-green) 42%,

      transparent 42%,
      transparent 58%,

      var(--dv-dark) 58%,
      var(--dv-dark) 100%);
}


/* dot giữa */
.cung-cap-dv .tieu-de p::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: -2px;

  width: 7px;
  height: 7px;

  transform:
    translateX(-50%);

  border-radius: 50%;

  background:
    var(--dv-dark);

  box-shadow:
    0 0 0 4px #ffffff;
}


/* =========================================================
   06. ROW CARD
   DÙNG FLEX ĐỂ TƯƠNG THÍCH FLATSOME
========================================================= */

.cung-cap-dv .card-nd,
.cung-cap-dv .card-nd.row-small {
  display: flex !important;

  flex-direction: row !important;
  flex-wrap: wrap !important;

  align-items: stretch !important;

  padding: 0 !important;

  margin-top: 0 !important;
  margin-bottom: 0 !important;
}


/* =========================================================
   07. DESKTOP
   3 CARD / HÀNG
========================================================= */

.cung-cap-dv .card-nd>.col {
  display: flex !important;

  float: none !important;

  flex:
    0 0 33.333333% !important;

  width:
    33.333333% !important;

  max-width:
    33.333333% !important;

  min-width: 0 !important;

  padding:
    9px !important;

  margin: 0 !important;
}


/* =========================================================
   08. CARD
========================================================= */

.cung-cap-dv .card-nd>.col>.col-inner {
  position: relative;

  display: block !important;

  width: 100% !important;
  height: 100% !important;

  min-height: 268px;

  margin: 0 !important;

  padding:
    27px 27px 27px !important;

  background:
    linear-gradient(145deg,
      rgba(40, 203, 139, 0.025),
      transparent 48%),
    #ffffff;

  border:
    1px solid var(--dv-border);

  border-radius: 17px;

  box-shadow:
    0 9px 30px rgba(18, 74, 57, 0.055),
    0 2px 5px rgba(18, 74, 57, 0.025);

  overflow: hidden;

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


/* =========================================================
   09. LINE XANH TRÊN CARD
========================================================= */

.cung-cap-dv .card-nd>.col>.col-inner::after {
  content: "";

  position: absolute;

  left: 0;
  top: 0;

  width: 108px;
  height: 4px;

  border-radius:
    0 0 5px 0;

  background:
    linear-gradient(90deg,
      var(--dv-green),
      var(--dv-dark));

  transition:
    width .35s ease;
}


/* =========================================================
   10. NUMBER
========================================================= */

.cung-cap-dv .card-nd>.col>.col-inner::before {
  position: absolute;

  top: 17px;
  right: 20px;

  z-index: 1;

  color:
    rgba(7, 133, 99, 0.065);

  font-size: 40px;
  line-height: 1;

  font-weight: 900;

  letter-spacing: -3px;

  pointer-events: none;
}


.cung-cap-dv .card-nd>.col:nth-child(1)>.col-inner::before {
  content: "01";
}


.cung-cap-dv .card-nd>.col:nth-child(2)>.col-inner::before {
  content: "02";
}


.cung-cap-dv .card-nd>.col:nth-child(3)>.col-inner::before {
  content: "03";
}


/* =========================================================
   11. ICON BOX
   ICON TRÁI + TITLE PHẢI

   KHÓA CẤU TRÚC CỦA FLATSOME
========================================================= */

.cung-cap-dv .card-nd .icon-box {
  position: relative;

  z-index: 2;

  display: flex !important;

  flex-direction: row !important;

  flex-wrap: nowrap !important;

  align-items: center !important;

  justify-content: flex-start !important;

  width: 100% !important;

  min-height: 72px;

  margin: 0 !important;
  padding: 0 !important;
}


/* =========================================================
   12. ICON
========================================================= */

.cung-cap-dv .card-nd .icon-box-img {
  position: relative;

  display: block !important;

  float: none !important;

  flex:
    0 0 72px !important;

  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;

  height: 72px !important;

  margin:
    0 20px 0 0 !important;

  padding: 8px !important;

  border:
    1px solid rgba(40, 203, 139, 0.28);

  border-radius: 15px;

  background:
    linear-gradient(145deg,
      rgba(40, 203, 139, 0.12),
      rgba(40, 203, 139, 0.035));

  overflow: visible;

  transition:
    transform .35s ease;
}


/* =========================================================
   13. DOT ICON
========================================================= */

.cung-cap-dv .card-nd .icon-box-img::after {
  content: "";

  position: absolute;

  top: -5px;
  right: -5px;

  z-index: 5;

  width: 10px;
  height: 10px;

  border-radius: 50%;

  background:
    var(--dv-green);

  box-shadow:
    0 0 0 4px #fff,
    0 0 0 5px rgba(40, 203, 139, 0.16);
}


/* =========================================================
   14. RESET ICON FLATSOME
========================================================= */

.cung-cap-dv .icon-box-img .icon,

.cung-cap-dv .icon-box-img .icon-inner {
  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;
}


.cung-cap-dv .icon-box-img img {
  display: block !important;

  width: 100% !important;
  max-width: 100% !important;

  height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  object-fit: contain;

  transition:
    transform .35s ease;
}


/* =========================================================
   15. TITLE BOX
   CÙNG HÀNG VỚI ICON
   CĂN GIỮA THEO CHIỀU CAO ICON
========================================================= */

.cung-cap-dv .card-nd .icon-box-text {
  display: flex !important;

  flex:
    1 1 0 !important;

  flex-direction: column !important;

  align-items: flex-start !important;
  justify-content: center !important;

  float: none !important;

  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;

  min-height: 72px !important;

  margin: 0 !important;

  padding:
    0 35px 0 0 !important;
}


/* =========================================================
   16. TITLE
========================================================= */

.cung-cap-dv .card-nd .icon-box-text h3 {
  display: block !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  color:
    var(--dv-title);

  font-size: 17px;
  line-height: 1.42;

  font-weight: 800;

  letter-spacing: -0.25px;

  text-align: left !important;

  word-break: normal !important;

  overflow-wrap: normal !important;

  white-space: normal !important;
}


/* =========================================================
   17. LIST
   UL NẰM NGOÀI .ICON-BOX TRONG HTML
========================================================= */

.cung-cap-dv .card-nd>.col>.col-inner>ul {
  display: flex !important;

  flex-direction: column !important;

  gap: 10px !important;

  width: 100% !important;

  margin:
    20px 0 0 !important;

  padding: 0 !important;

  list-style:
    none !important;

  list-style-type:
    none !important;
}


/* =========================================================
   18. LI
========================================================= */

.cung-cap-dv .card-nd>.col>.col-inner>ul>li {
  position: relative;

  display: block !important;

  width: 100% !important;

  margin: 0 !important;

  padding:
    0 0 0 27px !important;

  color:
    var(--dv-text);

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

  font-weight: 500;

  text-align: left !important;

  word-break: normal !important;

  overflow-wrap: break-word !important;

  list-style:
    none !important;

  list-style-type:
    none !important;
}


/* =========================================================
   19. XOÁ BULLET MẶC ĐỊNH
========================================================= */

.cung-cap-dv .card-nd>.col>.col-inner>ul>li::marker {
  content: "" !important;

  font-size: 0 !important;
}


/* =========================================================
   20. DẤU TÍCH
========================================================= */

.cung-cap-dv .card-nd>.col>.col-inner>ul>li::before {
  content: "\2713" !important;

  position: absolute !important;

  left: 0 !important;
  top: 2px !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  width: 17px !important;
  height: 17px !important;

  margin: 0 !important;
  padding: 0 !important;

  border-radius: 50% !important;

  background:
    rgba(40, 203, 139, 0.14) !important;

  color:
    var(--dv-dark) !important;

  font-size: 10px !important;
  line-height: 1 !important;

  font-weight: 900 !important;
}


/* =========================================================
   21. XOÁ PSEUDO THỪA
========================================================= */

.cung-cap-dv .card-nd>.col>.col-inner>ul>li::after {
  content: none !important;

  display: none !important;
}


/* =========================================================
   22. HOVER DESKTOP
========================================================= */

@media (hover: hover) {

  .cung-cap-dv .card-nd>.col>.col-inner:hover {
    transform:
      translateY(-5px);

    border-color:
      rgba(40, 203, 139, 0.45);

    box-shadow:
      0 21px 46px rgba(7, 133, 99, 0.10),
      0 5px 14px rgba(7, 133, 99, 0.04);
  }


  .cung-cap-dv .card-nd>.col>.col-inner:hover::after {
    width: 100%;
  }


  .cung-cap-dv .card-nd>.col>.col-inner:hover .icon-box-img {
    transform:
      translateY(-3px);
  }


  .cung-cap-dv .card-nd>.col>.col-inner:hover .icon-box-img img {
    transform:
      scale(1.05);
  }

}


/* =========================================================
   23. TABLET
   700PX - 1023PX
   2 CARD / HÀNG
========================================================= */

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

  .cung-cap-dv {
    padding-top:
      52px !important;

    padding-bottom:
      56px !important;
  }


  .cung-cap-dv .tieu-de {
    margin-bottom:
      30px !important;
  }


  .cung-cap-dv .tieu-de p {
    font-size:
      27px;
  }


  .cung-cap-dv .card-nd>.col {
    flex:
      0 0 50% !important;

    width:
      50% !important;

    max-width:
      50% !important;

    padding:
      7px !important;
  }


  /* CARD 3 CĂN GIỮA */
  .cung-cap-dv .card-nd>.col:nth-child(3) {
    margin-left:
      25% !important;
  }


  .cung-cap-dv .card-nd>.col>.col-inner {
    min-height:
      260px;
  }

}


/* =========================================================
   24. MOBILE
   <= 699PX

   QUAN TRỌNG:
   ÉP MỖI CARD = 100% WIDTH
========================================================= */

@media screen and (max-width: 699px) {

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

  .cung-cap-dv {
    padding-top:
      40px !important;

    padding-bottom:
      44px !important;
  }


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

  .cung-cap-dv .tieu-de,
  .cung-cap-dv .card-nd {
    width:
      calc(100% - 28px) !important;

    max-width:
      none !important;
  }


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

  .cung-cap-dv .tieu-de {
    margin-bottom:
      24px !important;
  }


  .cung-cap-dv .tieu-de p {
    max-width:
      100%;

    padding-bottom:
      14px !important;

    font-size:
      21px;

    line-height:
      1.3;

    letter-spacing:
      -0.4px;
  }


  /* =====================================================
       QUAN TRỌNG
       ROW MOBILE CHUYỂN THÀNH BLOCK
    ===================================================== */

  .cung-cap-dv .card-nd,
  .cung-cap-dv .card-nd.row-small {
    display:
      block !important;

    width:
      calc(100% - 28px) !important;

    margin-left:
      auto !important;

    margin-right:
      auto !important;

    padding:
      0 !important;
  }


  /* =====================================================
       QUAN TRỌNG
       MỖI CARD = 100%
       KHÔNG CHO 3 CARD NẰM CÙNG HÀNG
    ===================================================== */

  .cung-cap-dv .card-nd>.col,

  .cung-cap-dv .card-nd>.col.medium-4,

  .cung-cap-dv .card-nd>.col.large-4,

  .cung-cap-dv .card-nd>.col.small-12 {
    display:
      block !important;

    float:
      none !important;

    flex:
      none !important;

    flex-basis:
      auto !important;

    width:
      100% !important;

    min-width:
      100% !important;

    max-width:
      100% !important;

    margin:
      0 0 12px 0 !important;

    padding:
      0 !important;
  }


  .cung-cap-dv .card-nd>.col:last-child {
    margin-bottom:
      0 !important;
  }


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

  .cung-cap-dv .card-nd>.col>.col-inner {
    display:
      block !important;

    width:
      100% !important;

    min-height:
      0 !important;

    padding:
      20px 18px 21px !important;

    margin:
      0 !important;

    border-radius:
      15px;
  }


  /* line card */
  .cung-cap-dv .card-nd>.col>.col-inner::after {
    width:
      76px;

    height:
      3px;
  }


  /* number */
  .cung-cap-dv .card-nd>.col>.col-inner::before {
    top:
      14px;

    right:
      14px;

    font-size:
      33px;
  }


  /* =====================================================
       ICON + TITLE MOBILE
    ===================================================== */

  .cung-cap-dv .card-nd .icon-box {
    display:
      flex !important;

    flex-direction:
      row !important;

    flex-wrap:
      nowrap !important;

    align-items:
      center !important;

    width:
      100% !important;

    min-height:
      58px !important;

    height:
      auto !important;

    margin:
      0 !important;
  }


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

  .cung-cap-dv .card-nd .icon-box-img {
    display:
      block !important;

    float:
      none !important;

    flex:
      0 0 58px !important;

    width:
      58px !important;

    min-width:
      58px !important;

    max-width:
      58px !important;

    height:
      58px !important;

    margin:
      0 15px 0 0 !important;

    padding:
      6px !important;

    border-radius:
      13px;
  }


  /* =====================================================
       TITLE MOBILE
       CHIẾM TOÀN BỘ KHÔNG GIAN CÒN LẠI
    ===================================================== */

  .cung-cap-dv .card-nd .icon-box-text {
    display:
      flex !important;

    flex:
      1 1 auto !important;

    flex-direction:
      column !important;

    justify-content:
      center !important;

    align-items:
      flex-start !important;

    float:
      none !important;

    width:
      auto !important;

    min-width:
      0 !important;

    max-width:
      none !important;

    min-height:
      58px !important;

    margin:
      0 !important;

    padding:
      0 25px 0 0 !important;
  }


  .cung-cap-dv .card-nd .icon-box-text h3 {
    display:
      block !important;

    width:
      100% !important;

    margin:
      0 !important;

    padding:
      0 !important;

    font-size:
      15.5px;

    line-height:
      1.4;

    text-align:
      left !important;

    word-break:
      normal !important;

    overflow-wrap:
      normal !important;

    white-space:
      normal !important;
  }


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

  .cung-cap-dv .card-nd>.col>.col-inner>ul {
    display:
      flex !important;

    flex-direction:
      column !important;

    gap:
      8px !important;

    width:
      100% !important;

    margin:
      16px 0 0 !important;

    padding:
      0 !important;
  }


  .cung-cap-dv .card-nd>.col>.col-inner>ul>li {
    display:
      block !important;

    width:
      100% !important;

    padding-left:
      24px !important;

    font-size:
      13.5px;

    line-height:
      1.5;

    word-break:
      normal !important;

    overflow-wrap:
      break-word !important;
  }


  .cung-cap-dv .card-nd>.col>.col-inner>ul>li::before {
    width:
      16px !important;

    height:
      16px !important;

    font-size:
      9px !important;
  }

}


/* =========================================================
   25. MOBILE NHỎ
   <= 380PX
========================================================= */

@media screen and (max-width: 380px) {

  .cung-cap-dv .tieu-de,
  .cung-cap-dv .card-nd {
    width:
      calc(100% - 22px) !important;
  }


  .cung-cap-dv .tieu-de p {
    font-size:
      19px;
  }


  .cung-cap-dv .card-nd,
  .cung-cap-dv .card-nd.row-small {
    width:
      calc(100% - 22px) !important;
  }


  .cung-cap-dv .card-nd>.col>.col-inner {
    padding:
      18px 15px 19px !important;
  }


  /* icon 52 */
  .cung-cap-dv .card-nd .icon-box {
    min-height:
      52px !important;
  }


  .cung-cap-dv .card-nd .icon-box-img {
    flex-basis:
      52px !important;

    width:
      52px !important;

    min-width:
      52px !important;

    max-width:
      52px !important;

    height:
      52px !important;

    margin-right:
      13px !important;
  }


  .cung-cap-dv .card-nd .icon-box-text {
    min-height:
      52px !important;

    padding-right:
      22px !important;
  }


  .cung-cap-dv .card-nd .icon-box-text h3 {
    font-size:
      14.5px;
  }


  .cung-cap-dv .card-nd>.col>.col-inner>ul>li {
    font-size:
      13px;
  }

}














/* =========================================================
   NATIONLED
   SECTION: NĂNG LỰC GIA CÔNG

   HTML GIỮ NGUYÊN TRONG FLATSOME

   MÀU THƯƠNG HIỆU:
   #28cb8b
   #078563

   DESKTOP : 4 CỘT
   TABLET  : 2 CỘT
   MOBILE  : 2 CỘT
========================================================= */


/* =========================================================
   01. SECTION
========================================================= */

.nang-luc-gia-cong {
  --nlgc-green: #28cb8b;
  --nlgc-dark: #078563;

  --nlgc-heading: #123f34;
  --nlgc-text: #536963;

  --nlgc-border: rgba(7, 133, 99, 0.75);
  --nlgc-line: rgba(7, 133, 99, 0.16);

  position: relative;

  padding-top: 60px !important;
  padding-bottom: 60px !important;

  background: #ffffff;

  overflow: hidden;
}


.nang-luc-gia-cong *,
.nang-luc-gia-cong *::before,
.nang-luc-gia-cong *::after {
  box-sizing: border-box;
}


/* =========================================================
   02. SECTION CONTENT
========================================================= */

.nang-luc-gia-cong>.section-content {
  position: relative;

  z-index: 2;

  width: 100% !important;
  max-width: none !important;
}


/* =========================================================
   03. CONTAINER CHUNG
========================================================= */

.nang-luc-gia-cong .title,
.nang-luc-gia-cong .card-icon {
  width: calc(100% - 40px) !important;
  max-width: 1320px !important;

  margin-left: auto !important;
  margin-right: auto !important;
}


/* =========================================================
   04. TIÊU ĐỀ SECTION

   CÙNG FORMAT VỚI:
   CHÚNG TÔI CUNG CẤP DỊCH VỤ
========================================================= */

.nang-luc-gia-cong .title {
  position: relative;

  z-index: 10;

  margin-top: 0 !important;

  /*
     * kéo title xuống đè lên viền trên
     */
  margin-bottom: -22px !important;
}


.nang-luc-gia-cong .title>.col {
  width: 100% !important;
  max-width: 100% !important;

  padding: 0 !important;
}


.nang-luc-gia-cong .title .col-inner {
  display: flex !important;

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

  padding: 0 !important;

  text-align: center;
}


/* =========================================================
   TITLE CHÍNH

   CÙNG SIZE / FONT VỚI SECTION PHÍA TRÊN
========================================================= */

.nang-luc-gia-cong .title p {
  position: relative;

  display: inline-flex;

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

  min-height: 44px;

  margin: 0 !important;

  padding:
    0 26px !important;

  background: #ffffff;

  color: var(--nlgc-heading);

  font-family: inherit !important;

  font-size: 30px !important;
  line-height: 1.25 !important;

  font-weight: 800 !important;

  letter-spacing: -0.7px !important;

  text-transform: uppercase;

  white-space: nowrap;
}


/* =========================================================
   LINE TRÁI TITLE
========================================================= */

.nang-luc-gia-cong .title p::before {
  content: "";

  position: absolute;

  top: 50%;
  right: 100%;

  width: 95px;
  height: 2px;

  margin-right: 8px;

  transform: translateY(-50%);

  border-radius: 50px;

  background:
    linear-gradient(90deg,
      var(--nlgc-green),
      var(--nlgc-dark));
}


/* =========================================================
   LINE PHẢI TITLE
========================================================= */

.nang-luc-gia-cong .title p::after {
  content: "";

  position: absolute;

  top: 50%;
  left: 100%;

  width: 95px;
  height: 2px;

  margin-left: 8px;

  transform: translateY(-50%);

  border-radius: 50px;

  background:
    linear-gradient(90deg,
      var(--nlgc-dark),
      var(--nlgc-green));
}


/* =========================================================
   05. KHUNG CHÍNH
========================================================= */

.nang-luc-gia-cong .card-icon,
.nang-luc-gia-cong .card-icon.row-small {
  position: relative;

  display: flex !important;

  flex-direction: row !important;
  flex-wrap: wrap !important;

  align-items: stretch !important;

  padding:
    48px 18px 28px !important;

  margin-top: 0 !important;
  margin-bottom: 0 !important;

  background: #ffffff;

  border:
    1.5px solid var(--nlgc-border);

  border-radius: 12px;

  box-shadow:
    0 8px 30px rgba(7, 133, 99, 0.035);

  overflow: hidden;
}


/* =========================================================
   06. DESKTOP
   4 CỘT
========================================================= */

.nang-luc-gia-cong .card-icon>.col {
  position: relative;

  display: flex !important;

  float: none !important;

  flex:
    0 0 25% !important;

  width:
    25% !important;

  max-width:
    25% !important;

  min-width: 0 !important;

  padding:
    0 26px !important;

  margin: 0 !important;
}


/* =========================================================
   07. ĐƯỜNG PHÂN CÁCH DỌC
========================================================= */

.nang-luc-gia-cong .card-icon>.col:not(:last-child)::after {
  content: "";

  position: absolute;

  right: 0;
  top: 4%;

  width: 1px;
  height: 92%;

  background:
    linear-gradient(180deg,
      transparent 0%,
      var(--nlgc-line) 12%,
      var(--nlgc-line) 88%,
      transparent 100%);
}


/* =========================================================
   08. COLUMN INNER
========================================================= */

.nang-luc-gia-cong .card-icon>.col>.col-inner {
  display: flex !important;

  align-items: stretch !important;

  width: 100%;
  height: 100%;

  padding: 0 !important;

  margin: 0 !important;
}


/* =========================================================
   09. ICON BOX
========================================================= */

.nang-luc-gia-cong .card-icon .icon-box {
  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;
  justify-content: flex-start !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  text-align: center !important;
}


/* =========================================================
   10. ICON

   TO HƠN BẢN HIỆN TẠI
========================================================= */

.nang-luc-gia-cong .card-icon .icon-box-img {
  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  flex: none !important;

  width: 66px !important;
  height: 66px !important;

  margin:
    0 auto 14px !important;

  padding: 5px !important;

  background:
    rgba(40, 203, 139, 0.055);

  border-radius: 12px;

  transition:
    background-color .3s ease,
    transform .3s ease;
}


/* =========================================================
   RESET ICON FLATSOME
========================================================= */

.nang-luc-gia-cong .icon-box-img .icon,

.nang-luc-gia-cong .icon-box-img .icon-inner {
  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;
}


/* =========================================================
   11. ĐỔI MÀU ICON SANG #078563

   ÁP DỤNG CHO PNG HIỆN TẠI
========================================================= */

.nang-luc-gia-cong .card-icon .icon-box-img img {
  display: block !important;

  width: 100% !important;
  max-width: 100% !important;

  height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  object-fit: contain;

  /*
     * Chuyển toàn bộ icon PNG
     * về tone #078563
     */
  filter:
    brightness(0) saturate(100%) invert(36%) sepia(76%) saturate(1017%) hue-rotate(118deg) brightness(83%) contrast(101%);

  transition:
    transform .3s ease,
    filter .3s ease;
}


/* =========================================================
   12. TEXT BOX
========================================================= */

.nang-luc-gia-cong .card-icon .icon-box-text {
  display: block !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  text-align: center !important;
}


/* =========================================================
   13. NỘI DUNG
========================================================= */

.nang-luc-gia-cong .card-icon .icon-box-text p {
  width: 100%;

  margin: 0 !important;

  color: var(--nlgc-text);

  font-family: inherit !important;

  font-size: 15px !important;
  line-height: 1.55 !important;

  font-weight: 500;

  text-align: center !important;

  word-break: normal;
  overflow-wrap: break-word;
}


/* =========================================================
   14. TIÊU ĐỀ TỪNG CỘT

   TĂNG KÍCH THƯỚC
========================================================= */

.nang-luc-gia-cong .card-icon .icon-box-text strong {
  display: block;

  width: 100%;

  margin:
    0 0 8px !important;

  color: var(--nlgc-dark);

  font-family: inherit !important;

  font-size: 16px !important;
  line-height: 1.3 !important;

  font-weight: 800 !important;

  letter-spacing: -0.1px;

  text-align: center;

  text-transform: uppercase;
}


/* =========================================================
   15. XÓA BR SAU STRONG
========================================================= */

.nang-luc-gia-cong .card-icon .icon-box-text strong+br {
  display: none !important;
}


/* =========================================================
   16. HOVER DESKTOP
========================================================= */

@media (hover: hover) {

  .nang-luc-gia-cong .card-icon>.col {
    transition:
      background-color .3s ease;
  }


  .nang-luc-gia-cong .card-icon>.col:hover {
    background:
      linear-gradient(180deg,
        rgba(40, 203, 139, 0.045),
        transparent);
  }


  .nang-luc-gia-cong .card-icon>.col:hover .icon-box-img {
    transform:
      translateY(-3px);

    background:
      rgba(40, 203, 139, 0.09);
  }


  /*
     * Hover icon sang #28cb8b
     */
  .nang-luc-gia-cong .card-icon>.col:hover .icon-box-img img {
    transform:
      scale(1.06);

    filter:
      brightness(0) saturate(100%) invert(69%) sepia(70%) saturate(521%) hue-rotate(101deg) brightness(91%) contrast(92%);
  }

}


/* =========================================================
   17. LAPTOP
   <= 1199PX
========================================================= */

@media screen and (max-width: 1199px) {

  .nang-luc-gia-cong .title,

  .nang-luc-gia-cong .card-icon {
    width:
      calc(100% - 32px) !important;
  }


  .nang-luc-gia-cong .card-icon {
    padding:
      46px 12px 25px !important;
  }


  .nang-luc-gia-cong .card-icon>.col {
    padding:
      0 18px !important;
  }


  .nang-luc-gia-cong .card-icon .icon-box-text strong {
    font-size:
      15px !important;
  }


  .nang-luc-gia-cong .card-icon .icon-box-text p {
    font-size:
      14px !important;
  }

}


/* =========================================================
   18. TABLET
   700PX - 899PX

   2 CỘT / 2 HÀNG
========================================================= */

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

  .nang-luc-gia-cong {
    padding-top:
      52px !important;

    padding-bottom:
      52px !important;
  }


  /* TITLE */
  .nang-luc-gia-cong .title {
    margin-bottom:
      -21px !important;
  }


  .nang-luc-gia-cong .title p {
    font-size:
      27px !important;
  }


  .nang-luc-gia-cong .title p::before,
  .nang-luc-gia-cong .title p::after {
    width:
      60px;
  }


  /* KHUNG */
  .nang-luc-gia-cong .card-icon {
    padding:
      42px 16px 18px !important;
  }


  /* 2 CỘT */
  .nang-luc-gia-cong .card-icon>.col {
    flex:
      0 0 50% !important;

    width:
      50% !important;

    max-width:
      50% !important;

    min-height:
      205px;

    padding:
      24px 28px !important;
  }


  /* reset line */
  .nang-luc-gia-cong .card-icon>.col::after {
    display: none;
  }


  /* line dọc */
  .nang-luc-gia-cong .card-icon>.col:nth-child(odd)::after {
    content: "";

    display: block;

    position: absolute;

    top: 12%;
    right: 0;

    width: 1px;
    height: 76%;

    background:
      var(--nlgc-line);
  }


  /* line ngang hàng 2 */
  .nang-luc-gia-cong .card-icon>.col:nth-child(n+3)::before {
    content: "";

    position: absolute;

    top: 0;
    left: 10%;

    width: 80%;
    height: 1px;

    background:
      var(--nlgc-line);
  }

}


/* =========================================================
   19. MOBILE
   <= 699PX
   2 CỘT / 2 HÀNG
========================================================= */

@media screen and (max-width: 699px) {

  .nang-luc-gia-cong {
    padding-top:
      44px !important;

    padding-bottom:
      46px !important;
  }


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

  .nang-luc-gia-cong .title,

  .nang-luc-gia-cong .card-icon {
    width:
      calc(100% - 24px) !important;

    max-width:
      none !important;
  }


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

       GIỐNG FORMAT SECTION TRÊN
    ===================================================== */

  .nang-luc-gia-cong .title {
    margin-bottom:
      -19px !important;
  }


  .nang-luc-gia-cong .title p {
    min-height:
      38px;

    padding:
      0 12px !important;

    font-size:
      22px !important;

    line-height:
      1.3 !important;

    font-weight:
      800 !important;

    letter-spacing:
      -0.4px !important;
  }


  .nang-luc-gia-cong .title p::before,
  .nang-luc-gia-cong .title p::after {
    width:
      30px;

    margin-left:
      5px;

    margin-right:
      5px;
  }


  /* =====================================================
       KHUNG
    ===================================================== */

  .nang-luc-gia-cong .card-icon,
  .nang-luc-gia-cong .card-icon.row-small {
    display:
      flex !important;

    flex-wrap:
      wrap !important;

    padding:
      37px 8px 10px !important;

    border-radius:
      10px;
  }


  /* =====================================================
       2 CỘT
    ===================================================== */

  .nang-luc-gia-cong .card-icon>.col,

  .nang-luc-gia-cong .card-icon>.col.small-6,

  .nang-luc-gia-cong .card-icon>.col.medium-3,

  .nang-luc-gia-cong .card-icon>.col.large-3 {
    position:
      relative;

    display:
      flex !important;

    flex:
      0 0 50% !important;

    width:
      50% !important;

    max-width:
      50% !important;

    min-width:
      0 !important;

    min-height:
      195px;

    padding:
      19px 10px !important;

    margin:
      0 !important;
  }


  /* =====================================================
       RESET LINE DESKTOP
    ===================================================== */

  .nang-luc-gia-cong .card-icon>.col::after {
    display:
      none;
  }


  /* =====================================================
       LINE DỌC
    ===================================================== */

  .nang-luc-gia-cong .card-icon>.col:nth-child(odd)::after {
    content: "";

    display: block;

    position: absolute;

    top: 12%;
    right: 0;

    width: 1px;
    height: 76%;

    background:
      var(--nlgc-line);
  }


  /* =====================================================
       LINE NGANG HÀNG 2
    ===================================================== */

  .nang-luc-gia-cong .card-icon>.col:nth-child(n+3)::before {
    content: "";

    position: absolute;

    top: 0;
    left: 10%;

    width: 80%;
    height: 1px;

    background:
      var(--nlgc-line);
  }


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

  .nang-luc-gia-cong .card-icon .icon-box-img {
    width:
      56px !important;

    height:
      56px !important;

    padding:
      4px !important;

    margin-bottom:
      11px !important;

    border-radius:
      10px;
  }


  /* =====================================================
       CARD TITLE
    ===================================================== */

  .nang-luc-gia-cong .card-icon .icon-box-text strong {
    margin-bottom:
      7px !important;

    font-size:
      14px !important;

    line-height:
      1.3 !important;
  }


  /* =====================================================
       DESCRIPTION
    ===================================================== */

  .nang-luc-gia-cong .card-icon .icon-box-text p {
    font-size:
      13px !important;

    line-height:
      1.5 !important;
  }

}


/* =========================================================
   20. MOBILE RẤT NHỎ
   <= 380PX
========================================================= */

@media screen and (max-width: 380px) {

  .nang-luc-gia-cong .title,

  .nang-luc-gia-cong .card-icon {
    width:
      calc(100% - 18px) !important;
  }


  /* title vẫn đủ lớn */
  .nang-luc-gia-cong .title p {
    padding:
      0 9px !important;

    font-size:
      20px !important;
  }


  .nang-luc-gia-cong .title p::before,
  .nang-luc-gia-cong .title p::after {
    width:
      20px;
  }


  .nang-luc-gia-cong .card-icon {
    padding-left:
      5px !important;

    padding-right:
      5px !important;
  }


  .nang-luc-gia-cong .card-icon>.col {
    min-height:
      190px;

    padding:
      17px 7px !important;
  }


  .nang-luc-gia-cong .card-icon .icon-box-img {
    width:
      52px !important;

    height:
      52px !important;
  }


  .nang-luc-gia-cong .card-icon .icon-box-text strong {
    font-size:
      13px !important;
  }


  .nang-luc-gia-cong .card-icon .icon-box-text p {
    font-size:
      12px !important;

    line-height:
      1.45 !important;
  }

}



















/* =========================================================
   NATIONLED
   SECTION 4 CARD - QUY TRÌNH SẢN XUẤT

   HTML GIỮ NGUYÊN TRONG FLATSOME

   - ẢNH VUÔNG 1:1
   - TITLE ĐÈ DƯỚI ẢNH
   - DESKTOP: 4 CỘT
   - TABLET: 2 CỘT
   - MOBILE: 2 CỘT

   BRAND:
   #28cb8b
   #078563
========================================================= */


/* =========================================================
   01. SECTION
========================================================= */

section[class~="4-card"] {
  --nl-green: #28cb8b;
  --nl-dark: #078563;
  --nl-title: #ffffff;
  --nl-border: rgba(7, 133, 99, 0.18);

  position: relative;

  padding-top: 28px !important;
  padding-bottom: 28px !important;

  background: #ffffff;

  overflow: hidden;
}


section[class~="4-card"] *,
section[class~="4-card"] *::before,
section[class~="4-card"] *::after {
  box-sizing: border-box;
}


/* =========================================================
   02. SECTION CONTENT
========================================================= */

section[class~="4-card"]>.section-content {
  position: relative;

  z-index: 2;

  width: 100% !important;
  max-width: none !important;
}


/* =========================================================
   03. CONTAINER
========================================================= */

section[class~="4-card"]>.section-content>.row {
  display: flex !important;

  flex-wrap: wrap !important;
  align-items: stretch !important;

  width: calc(100% - 40px) !important;
  max-width: 1320px !important;

  margin-left: auto !important;
  margin-right: auto !important;

  padding: 0 !important;
}


/* =========================================================
   04. DESKTOP - 4 CỘT
========================================================= */

section[class~="4-card"] .row>.col {
  display: flex !important;

  float: none !important;

  flex: 0 0 25% !important;

  width: 25% !important;
  max-width: 25% !important;

  min-width: 0 !important;

  padding: 5px !important;

  margin: 0 !important;
}


/* =========================================================
   05. COL INNER
========================================================= */

section[class~="4-card"] .row>.col>.col-inner {
  display: flex !important;

  width: 100% !important;
  height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;
}


/* =========================================================
   06. CARD
========================================================= */

section[class~="4-card"] .box {
  position: relative;

  display: block !important;

  width: 100% !important;

  margin: 0 !important;

  background: #ffffff;

  border: 1px solid var(--nl-border);

  border-radius: 14px;

  box-shadow:
    0 5px 18px rgba(7, 86, 64, 0.07),
    0 1px 4px rgba(7, 86, 64, 0.035);

  overflow: hidden;

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


/* =========================================================
   07. IMAGE BOX
========================================================= */

section[class~="4-card"] .box-image {
  position: relative;

  display: block !important;

  width: 100% !important;

  margin: 0 !important;

  padding: 0 !important;

  overflow: hidden;
}


/* =========================================================
   08. QUAN TRỌNG
   ÉP ẢNH VUÔNG 1:1
========================================================= */

section[class~="4-card"] .box-image>div {
  position: relative;

  display: block;

  width: 100% !important;

  aspect-ratio: 1 / 1 !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden;
}


/* =========================================================
   09. IMAGE
========================================================= */

section[class~="4-card"] .box-image img {
  position: absolute;

  inset: 0;

  display: block !important;

  width: 100% !important;
  max-width: none !important;

  height: 100% !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

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

  transition:
    transform 0.55s cubic-bezier(.2, .65, .3, 1);
}


/* =========================================================
   10. OVERLAY NHẸ
========================================================= */

section[class~="4-card"] .box-image::after {
  content: "";

  position: absolute;

  z-index: 3;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(180deg,
      rgba(0, 45, 34, 0) 58%,
      rgba(0, 45, 34, 0.08) 76%,
      rgba(0, 45, 34, 0.18) 100%);
}


/* =========================================================
   11. TEXT BAR
   NẰM ĐÈ DƯỚI ĐÁY ẢNH
========================================================= */

section[class~="4-card"] .box-text {
  position: absolute !important;

  z-index: 6;

  left: 0;
  right: 0;
  bottom: 0;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;

  min-height: 47px;

  margin: 0 !important;

  padding:
    9px 12px !important;

  background:
    linear-gradient(90deg,
      #078563 0%,
      #0a9a71 50%,
      #28cb8b 100%);

  text-align: center !important;

  transition:
    background 0.35s ease;
}


/* =========================================================
   12. TEXT INNER
========================================================= */

section[class~="4-card"] .box-text-inner {
  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;
}


/* =========================================================
   13. TITLE
========================================================= */

section[class~="4-card"] .box-text p {
  display: block;

  width: 100%;

  margin: 0 !important;
  padding: 0 !important;

  color: #ffffff !important;

  font-family: inherit !important;

  font-size: 15px !important;
  line-height: 1.25 !important;

  font-weight: 800 !important;

  letter-spacing: -0.15px;

  text-align: center !important;

  text-transform: uppercase;

  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.12);
}


/* =========================================================
   14. LINE NHẸ TRÊN TITLE BAR
========================================================= */

section[class~="4-card"] .box-text::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0;

  width: 100%;
  height: 1px;

  background:
    rgba(255, 255, 255, 0.24);
}


/* =========================================================
   15. HOVER DESKTOP
========================================================= */

@media (hover: hover) {

  section[class~="4-card"] .box:hover {
    transform:
      translateY(-5px);

    border-color:
      rgba(40, 203, 139, 0.55);

    box-shadow:
      0 16px 35px rgba(7, 133, 99, 0.15),
      0 4px 10px rgba(7, 133, 99, 0.05);
  }


  section[class~="4-card"] .box:hover .box-image img {
    transform:
      scale(1.055);
  }


  section[class~="4-card"] .box:hover .box-text {
    background:
      linear-gradient(90deg,
        #066d52 0%,
        #078563 45%,
        #28cb8b 100%);
  }

}


/* =========================================================
   16. LAPTOP
   <= 1199PX
========================================================= */

@media screen and (max-width: 1199px) {

  section[class~="4-card"]>.section-content>.row {
    width:
      calc(100% - 30px) !important;
  }


  section[class~="4-card"] .row>.col {
    padding:
      4px !important;
  }


  section[class~="4-card"] .box-text {
    min-height:
      44px;

    padding:
      8px 8px !important;
  }


  section[class~="4-card"] .box-text p {
    font-size:
      13.5px !important;
  }

}


/* =========================================================
   17. TABLET
   700PX - 1023PX
   2 CỘT
========================================================= */

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

  section[class~="4-card"] {
    padding-top:
      26px !important;

    padding-bottom:
      28px !important;
  }


  section[class~="4-card"] .row>.col,

  section[class~="4-card"] .row>.col.medium-3,

  section[class~="4-card"] .row>.col.large-3 {
    flex:
      0 0 50% !important;

    width:
      50% !important;

    max-width:
      50% !important;

    padding:
      6px !important;
  }


  /*
     * VẪN GIỮ VUÔNG
     */
  section[class~="4-card"] .box-image>div {
    aspect-ratio:
      1 / 1 !important;
  }


  section[class~="4-card"] .box-text {
    min-height:
      48px;
  }


  section[class~="4-card"] .box-text p {
    font-size:
      15px !important;
  }

}


/* =========================================================
   18. MOBILE
   <= 699PX
   2 CỘT x 2 HÀNG
========================================================= */

@media screen and (max-width: 699px) {

  section[class~="4-card"] {
    padding-top:
      20px !important;

    padding-bottom:
      22px !important;
  }


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

  section[class~="4-card"]>.section-content>.row {
    width:
      calc(100% - 16px) !important;

    max-width:
      none !important;
  }


  /* =====================================================
       2 CỘT
    ===================================================== */

  section[class~="4-card"] .row>.col,

  section[class~="4-card"] .row>.col.small-6,

  section[class~="4-card"] .row>.col.medium-3,

  section[class~="4-card"] .row>.col.large-3 {
    display:
      flex !important;

    float:
      none !important;

    flex:
      0 0 50% !important;

    width:
      50% !important;

    max-width:
      50% !important;

    min-width:
      0 !important;

    padding:
      4px !important;

    margin: 0 !important;
  }


  /* =====================================================
       CARD
    ===================================================== */

  section[class~="4-card"] .box {
    border-radius:
      11px;
  }


  /* =====================================================
       MOBILE VẪN VUÔNG 1:1
    ===================================================== */

  section[class~="4-card"] .box-image>div {
    width:
      100% !important;

    aspect-ratio:
      1 / 1 !important;
  }


  section[class~="4-card"] .box-image img {
    width:
      100% !important;

    height:
      100% !important;

    object-fit:
      cover !important;
  }


  /* =====================================================
       TITLE BAR
    ===================================================== */

  section[class~="4-card"] .box-text {
    min-height:
      42px;

    padding:
      7px 5px !important;
  }


  section[class~="4-card"] .box-text p {
    font-size:
      11.5px !important;

    line-height:
      1.25 !important;

    letter-spacing:
      -0.2px;
  }

}


/* =========================================================
   19. MOBILE NHỎ
   <= 380PX
========================================================= */

@media screen and (max-width: 380px) {

  section[class~="4-card"]>.section-content>.row {
    width:
      calc(100% - 12px) !important;
  }


  section[class~="4-card"] .row>.col {
    padding:
      3px !important;
  }


  /* vẫn vuông */
  section[class~="4-card"] .box-image>div {
    aspect-ratio:
      1 / 1 !important;
  }


  section[class~="4-card"] .box-text {
    min-height:
      40px;

    padding:
      6px 3px !important;
  }


  section[class~="4-card"] .box-text p {
    font-size:
      10.5px !important;

    line-height:
      1.2 !important;
  }

}

















/* =========================================================
   NATIONLED
   SECTION: CAM KẾT TỪ NATIONLED

   HTML GIỮ NGUYÊN TRONG FLATSOME

   DESKTOP:
   [ CHẤT LƯỢNG ]      [ ĐỒNG HÀNH ]
   [ BẢO MẬT     ]      [ BỀN VỮNG  ]

   MOBILE:
   1 CỘT / 4 ITEM

   BRAND:
   #28cb8b
   #078563
========================================================= */


/* =========================================================
   01. SECTION
========================================================= */

.cam-ket-nationled {
  --ck-green: #28cb8b;
  --ck-dark: #078563;

  --ck-heading: #123f34;
  --ck-text: #435b54;

  --ck-line: rgba(7, 133, 99, 0.22);
  --ck-soft: rgba(40, 203, 139, 0.07);

  position: relative;

  padding-top: 58px !important;
  padding-bottom: 58px !important;

  background: #ffffff;

  overflow: hidden;
}


.cam-ket-nationled *,
.cam-ket-nationled *::before,
.cam-ket-nationled *::after {
  box-sizing: border-box;
}


/* =========================================================
   02. SECTION CONTENT
========================================================= */

.cam-ket-nationled>.section-content {
  position: relative;

  z-index: 2;

  width: 100% !important;
  max-width: none !important;
}


/* =========================================================
   03. CONTAINER
========================================================= */

.cam-ket-nationled .title,
.cam-ket-nationled .card-camket {
  width: calc(100% - 40px) !important;
  max-width: 1320px !important;

  margin-left: auto !important;
  margin-right: auto !important;
}


/* =========================================================
   04. TITLE
========================================================= */

.cam-ket-nationled .title {
  position: relative;

  z-index: 5;

  margin-top: 0 !important;
  margin-bottom: 34px !important;
}


.cam-ket-nationled .title>.col {
  width: 100% !important;
  max-width: 100% !important;

  padding: 0 !important;
}


.cam-ket-nationled .title .col-inner {
  display: flex !important;

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

  padding: 0 !important;

  text-align: center;
}


/* =========================================================
   05. TITLE TEXT
   ĐỒNG BỘ FONT SECTION PHÍA TRÊN
========================================================= */

.cam-ket-nationled .title p {
  position: relative;

  display: inline-flex;

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

  margin: 0 !important;

  padding:
    0 28px !important;

  color: var(--ck-heading);

  font-family: inherit !important;

  font-size: 30px !important;
  line-height: 1.25 !important;

  font-weight: 800 !important;

  letter-spacing: -0.7px !important;

  text-transform: uppercase;

  white-space: nowrap;
}


/* =========================================================
   06. LINE TRÁI TITLE
========================================================= */

.cam-ket-nationled .title p::before {
  content: "";

  position: absolute;

  top: 50%;
  right: 100%;

  width: 130px;
  height: 1px;

  transform: translateY(-50%);

  background:
    linear-gradient(90deg,
      transparent,
      rgba(7, 133, 99, 0.5));
}


/* =========================================================
   07. LINE PHẢI TITLE
========================================================= */

.cam-ket-nationled .title p::after {
  content: "";

  position: absolute;

  top: 50%;
  left: 100%;

  width: 130px;
  height: 1px;

  transform: translateY(-50%);

  background:
    linear-gradient(90deg,
      rgba(7, 133, 99, 0.5),
      transparent);
}


/* =========================================================
   08. GRID CAM KẾT

   QUAN TRỌNG:
   HTML HIỆN TẠI ĐANG LÀ:

   COL 1
      icon-box 1
      icon-box 2

   COL 2
      icon-box 3
      icon-box 4

   DÙNG display:contents ĐỂ 4 ICON-BOX
   TRỞ THÀNH 4 GRID ITEM ĐỘC LẬP
========================================================= */

.cam-ket-nationled .card-camket,
.cam-ket-nationled .card-camket.row-small {
  display: grid !important;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  column-gap: 70px;
  row-gap: 27px;

  padding: 0 !important;

  margin-top: 0 !important;
  margin-bottom: 0 !important;
}


/* =========================================================
   09. PHÁ WRAPPER COLUMN CỦA FLATSOME
========================================================= */

.cam-ket-nationled .card-camket>.col,
.cam-ket-nationled .card-camket>.col>.col-inner {
  display: contents !important;
}


/* =========================================================
   10. ICON BOX
========================================================= */

.cam-ket-nationled .card-camket .icon-box {
  position: relative;

  display: grid !important;

  grid-template-columns:
    72px minmax(0, 1fr);

  column-gap: 18px;

  align-items: center;

  width: 100% !important;

  min-height: 92px;

  margin: 0 !important;

  padding:
    8px 0 !important;

  text-align: left !important;
}


/* =========================================================
   11. ICON
========================================================= */

.cam-ket-nationled .card-camket .icon-box-img {
  position: relative;

  grid-column: 1;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  float: none !important;

  width: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;

  height: 64px !important;

  margin: 0 !important;

  padding: 10px !important;

  border:
    2px solid var(--ck-dark);

  border-radius: 50%;

  background:
    rgba(40, 203, 139, 0.035);

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


/* =========================================================
   12. RESET ICON FLATSOME
========================================================= */

.cam-ket-nationled .icon-box-img .icon,
.cam-ket-nationled .icon-box-img .icon-inner {
  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;
}


/* =========================================================
   13. CHUYỂN ICON PNG VỀ MÀU #078563
========================================================= */

.cam-ket-nationled .icon-box-img img {
  display: block !important;

  width: 100% !important;
  max-width: 100% !important;

  height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  object-fit: contain;

  filter:
    brightness(0) saturate(100%) invert(36%) sepia(76%) saturate(1017%) hue-rotate(118deg) brightness(83%) contrast(101%);

  transition:
    filter .3s ease,
    transform .3s ease;
}


/* =========================================================
   14. TEXT BOX
========================================================= */

.cam-ket-nationled .card-camket .icon-box-text {
  grid-column: 2;

  display: flex !important;

  flex-direction: column;

  justify-content: center;

  width: 100% !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  text-align: left !important;
}


/* =========================================================
   15. TITLE TỪNG CAM KẾT
========================================================= */

.cam-ket-nationled .card-camket .icon-box-text h3 {
  position: relative;

  margin:
    0 0 5px !important;

  padding: 0 !important;

  color: var(--ck-dark);

  font-family: inherit !important;

  font-size: 17px !important;
  line-height: 1.3 !important;

  font-weight: 800 !important;

  letter-spacing: -0.2px;

  text-transform: uppercase;

  text-align: left !important;
}


/* =========================================================
   16. DESCRIPTION
========================================================= */

.cam-ket-nationled .card-camket .icon-box-text p {
  margin: 0 !important;
  padding: 0 !important;

  color: var(--ck-text);

  font-family: inherit !important;

  font-size: 14px !important;
  line-height: 1.5 !important;

  font-weight: 500;

  text-align: left !important;
}


/* =========================================================
   17. ĐƯỜNG NGANG GIỮA HÀNG 1 / HÀNG 2

   ITEM 3 + 4 = HÀNG THỨ 2
========================================================= */

.cam-ket-nationled .card-camket .icon-box:nth-of-type(3)::before,

.cam-ket-nationled .card-camket .icon-box:nth-of-type(4)::before {
  content: "";

  position: absolute;

  top: -14px;
  left: 0;

  width: 100%;
  height: 1px;

  background:
    linear-gradient(90deg,
      transparent 0%,
      var(--ck-line) 12%,
      var(--ck-line) 88%,
      transparent 100%);
}


/* =========================================================
   18. HOVER
========================================================= */

@media (hover: hover) {

  .cam-ket-nationled .card-camket .icon-box:hover .icon-box-img {
    transform:
      translateY(-3px);

    border-color:
      var(--ck-green);

    background:
      rgba(40, 203, 139, 0.09);
  }


  .cam-ket-nationled .card-camket .icon-box:hover .icon-box-img img {
    transform:
      scale(1.06);

    filter:
      brightness(0) saturate(100%) invert(69%) sepia(70%) saturate(521%) hue-rotate(101deg) brightness(91%) contrast(92%);
  }


  .cam-ket-nationled .card-camket .icon-box-text h3 {
    transition:
      color .3s ease;
  }


  .cam-ket-nationled .card-camket .icon-box:hover .icon-box-text h3 {
    color:
      var(--ck-green);
  }

}


/* =========================================================
   19. LAPTOP
   <= 1199PX
========================================================= */

@media screen and (max-width: 1199px) {

  .cam-ket-nationled .title,
  .cam-ket-nationled .card-camket {
    width:
      calc(100% - 32px) !important;
  }


  .cam-ket-nationled .card-camket {
    column-gap:
      45px;

    row-gap:
      25px;
  }


  .cam-ket-nationled .card-camket .icon-box {
    grid-template-columns:
      64px minmax(0, 1fr);

    column-gap:
      16px;

    min-height:
      86px;
  }


  .cam-ket-nationled .card-camket .icon-box-img {
    width:
      58px !important;

    min-width:
      58px !important;

    max-width:
      58px !important;

    height:
      58px !important;

    padding:
      9px !important;
  }


  .cam-ket-nationled .card-camket .icon-box-text h3 {
    font-size:
      16px !important;
  }


  .cam-ket-nationled .card-camket .icon-box-text p {
    font-size:
      13.5px !important;
  }

}


/* =========================================================
   20. TABLET
   700 - 899PX
========================================================= */

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

  .cam-ket-nationled {
    padding-top:
      50px !important;

    padding-bottom:
      50px !important;
  }


  .cam-ket-nationled .title {
    margin-bottom:
      29px !important;
  }


  .cam-ket-nationled .title p {
    font-size:
      27px !important;
  }


  .cam-ket-nationled .title p::before,
  .cam-ket-nationled .title p::after {
    width:
      75px;
  }


  .cam-ket-nationled .card-camket {
    column-gap:
      30px;

    row-gap:
      24px;
  }


  .cam-ket-nationled .card-camket .icon-box {
    grid-template-columns:
      58px minmax(0, 1fr);

    column-gap:
      14px;
  }


  .cam-ket-nationled .card-camket .icon-box-img {
    width:
      54px !important;

    min-width:
      54px !important;

    max-width:
      54px !important;

    height:
      54px !important;

    padding:
      8px !important;
  }


  .cam-ket-nationled .card-camket .icon-box-text h3 {
    font-size:
      15px !important;
  }


  .cam-ket-nationled .card-camket .icon-box-text p {
    font-size:
      13px !important;
  }

}


/* =========================================================
   21. MOBILE
   <= 699PX

   CHUYỂN 1 CỘT
========================================================= */

@media screen and (max-width: 699px) {

  .cam-ket-nationled {
    padding-top:
      42px !important;

    padding-bottom:
      44px !important;
  }


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

  .cam-ket-nationled .title,
  .cam-ket-nationled .card-camket {
    width:
      calc(100% - 28px) !important;

    max-width:
      none !important;
  }


  /* =====================================================
       TITLE
    ===================================================== */

  .cam-ket-nationled .title {
    margin-bottom:
      27px !important;
  }


  .cam-ket-nationled .title p {
    padding:
      0 13px !important;

    font-size:
      22px !important;

    line-height:
      1.3 !important;

    letter-spacing:
      -0.4px !important;
  }


  .cam-ket-nationled .title p::before,
  .cam-ket-nationled .title p::after {
    width:
      32px;
  }


  /* =====================================================
       1 CỘT
    ===================================================== */

  .cam-ket-nationled .card-camket,
  .cam-ket-nationled .card-camket.row-small {
    grid-template-columns:
      minmax(0, 1fr);

    column-gap:
      0;

    row-gap:
      0;
  }


  /* =====================================================
       ITEM
    ===================================================== */

  .cam-ket-nationled .card-camket .icon-box {
    grid-template-columns:
      58px minmax(0, 1fr);

    column-gap:
      15px;

    min-height:
      0;

    padding:
      14px 0 !important;
  }


  /* =====================================================
       TẠO LINE GIỮA TẤT CẢ ITEM
    ===================================================== */

  .cam-ket-nationled .card-camket .icon-box::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 1px;

    background:
      linear-gradient(90deg,
        transparent,
        var(--ck-line) 10%,
        var(--ck-line) 90%,
        transparent);
  }


  .cam-ket-nationled .card-camket .icon-box:first-of-type::before {
    display:
      none;
  }


  /* =====================================================
       ICON
    ===================================================== */

  .cam-ket-nationled .card-camket .icon-box-img {
    width:
      54px !important;

    min-width:
      54px !important;

    max-width:
      54px !important;

    height:
      54px !important;

    padding:
      8px !important;

    border-width:
      1.5px;
  }


  /* =====================================================
       TITLE ITEM
    ===================================================== */

  .cam-ket-nationled .card-camket .icon-box-text h3 {
    margin-bottom:
      4px !important;

    font-size:
      14.5px !important;

    line-height:
      1.3 !important;
  }


  /* =====================================================
       DESCRIPTION
    ===================================================== */

  .cam-ket-nationled .card-camket .icon-box-text p {
    font-size:
      13px !important;

    line-height:
      1.45 !important;
  }

}


/* =========================================================
   22. MOBILE NHỎ
   <= 380PX
========================================================= */

@media screen and (max-width: 380px) {

  .cam-ket-nationled .title,
  .cam-ket-nationled .card-camket {
    width:
      calc(100% - 22px) !important;
  }


  .cam-ket-nationled .title p {
    padding:
      0 9px !important;

    font-size:
      19px !important;
  }


  .cam-ket-nationled .title p::before,
  .cam-ket-nationled .title p::after {
    width:
      20px;
  }


  .cam-ket-nationled .card-camket .icon-box {
    grid-template-columns:
      52px minmax(0, 1fr);

    column-gap:
      12px;

    padding:
      13px 0 !important;
  }


  .cam-ket-nationled .card-camket .icon-box-img {
    width:
      49px !important;

    min-width:
      49px !important;

    max-width:
      49px !important;

    height:
      49px !important;

    padding:
      7px !important;
  }


  .cam-ket-nationled .card-camket .icon-box-text h3 {
    font-size:
      13.5px !important;
  }


  .cam-ket-nationled .card-camket .icon-box-text p {
    font-size:
      12px !important;
  }

}