/* ==========================================================================
   Page: Competence — Năng Lực Dự Án
   Sections: Hero · Connect · Exploration
   Values extracted from src/Wihub-v1.1/src/competence.html (Desktop frame ≥1280)
   ========================================================================== */

/* --------------------------------------------------------------------------
   SECTION: Hero — Năng lực triển khai dự án
   v1.1 #Background_Image_1{padding:320px 48px 60px; row-gap:170px}
        #__158 gradient overlay linear-gradient(88deg,#17144db3 35.7%,#11054300 99.3%)
        #Highlight_Title_1 font:46px/130%/800 white
        #Breadcrumb_Link_1 font:14px/150%/500 white
   -------------------------------------------------------------------------- */
.competence-hero {
  position: relative;
  width: 100%;
  min-height: 560px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.competence-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.competence-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: linear-gradient(88deg,
                    rgba(23, 20, 77, 0.70) 35.7%,
                    rgba(17, 5, 67, 0.00) 99.3%);
  pointer-events: none;
}

.competence-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: 220px;
  padding-bottom: 60px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.competence-hero__breadcrumb {
  display: flex;
  align-items: center;
}

.competence-hero__breadcrumb-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-white);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  transition: opacity var(--transition-base);
  &:hover { opacity: 0.85; }
}

.competence-hero__breadcrumb-icon {
  display: block;
  flex-shrink: 0;
}

.competence-hero__title {
  color: var(--color-white);
  font-family: var(--font-family);
  font-size: 46px;
  font-weight: 800;
  line-height: 1.3;
  margin: 0;
  max-width: 1170px;
}

@media (max-width: 991.98px) {
  .competence-hero { min-height: 420px; }
  .competence-hero__inner {
    padding-top: 160px;
    padding-bottom: 40px;
    gap: 20px;
  }
  .competence-hero__title { font-size: 38px; }
}
@media (max-width: 575.98px) {
  .competence-hero { min-height: 340px; }
  .competence-hero__inner { padding-top: 120px; padding-bottom: 32px; }
  .competence-hero__title { font-size: 28px; }
}

/* --------------------------------------------------------------------------
   SECTION: Connect — Năng Lực Kết Nối
   v1.1 #_Competence_Connect_1{ bg #f6f9fc, padding 120px 48px, row-gap 60px }
        #N_ng_L_c_K_t_N_i_1 max-width 1170px
        #Title_31 46px/130%/800
        #__166 gradient text linear-gradient(98.5deg,#6598ea 29.5%,#1b5bd2 70.7%)
        #Description_11 18px/160%/400 var(--Text-Secondary)
        4 cards staircase: padding-left 0/40/80/120 px
        Each card: border 4px white, border-radius 26px, bg img cover,
                   max-width 1004px, padding 118px 14px 14px
        Inner panel: backdrop-filter blur(25px), bg #ffffffe6, border 2px white,
                     border-radius 16px, padding 22px 22px 0, row-gap 16px
   -------------------------------------------------------------------------- */
.competence-connect {
  background-color: #f6f9fc;
  padding-top: 120px;
  padding-bottom: 120px;
  overflow: hidden;
}

.competence-connect__header {
  max-width: 1170px;
  margin-bottom: 60px;
  padding-bottom: 0;
}

.competence-connect__title {
  font-family: var(--font-family);
  font-size: 46px;
  font-weight: 800;
  line-height: 1.3;
  margin: 0 0 16px;
}
.competence-connect__title-main { color: var(--color-text-main); }
.competence-connect__title-accent {
  background-image: linear-gradient(98.5deg, #6598ea 29.5%, #1b5bd2 70.7%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.competence-connect__desc {
  color: var(--color-text-secondary);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  margin: 0;
  max-width: 800px;
}

.competence-connect__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 1170px;
}

/* --- Connect card ---------------------------------------------------------- */
.connect-card {
  position: relative;
  width: 100%;
  max-width: 1004px;
  min-height: 400px;
  border: 4px solid var(--color-white);
  border-radius: 26px;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  padding: 118px 14px 14px;
  background-color: #d0d5e0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04), 0 8px 28px rgba(20, 18, 64, 0.10);
}

/* Staircase indent — matches v1.1 Container_49/51/53/55 padding-left 0/40/80/120 */
.connect-card--step-0 { margin-left: 0; }
.connect-card--step-1 { margin-left: 40px; }
.connect-card--step-2 { margin-left: 80px; }
.connect-card--step-3 { margin-left: 120px; }

.connect-card__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
}

.connect-card__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.connect-card__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 550px;
  background-color: rgba(255, 255, 255, 0.9);
  border: 2px solid #ffffff;
  border-radius: 16px;
  padding: 22px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  -webkit-backdrop-filter: blur(25px);
          backdrop-filter: blur(25px);
}

.connect-card__title {
  color: var(--color-text-main);
  font-family: var(--font-family);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
}

.connect-card__desc {
  color: var(--color-text-secondary);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 991.98px) {
  .competence-connect { padding-top: 80px; padding-bottom: 80px; }
  .competence-connect__header { margin-bottom: 40px; }
  .competence-connect__title { font-size: 36px; }
  .connect-card { padding: 90px 12px 12px; min-height: 340px; }
  .connect-card--step-1 { margin-left: 20px; }
  .connect-card--step-2 { margin-left: 40px; }
  .connect-card--step-3 { margin-left: 60px; }
  .connect-card__panel { max-width: 100%; padding: 18px 18px 18px; }
}
@media (max-width: 575.98px) {
  .competence-connect { padding-top: 56px; padding-bottom: 56px; }
  .competence-connect__title { font-size: 28px; }
  .competence-connect__desc { font-size: 16px; }
  .connect-card {
    padding: 0;
    border-width: 0;
    border-radius: 16px;
    min-height: 0;
    background-color: transparent;
    box-shadow: none;
  }
  .connect-card--step-0,
  .connect-card--step-1,
  .connect-card--step-2,
  .connect-card--step-3 { margin-left: 0; }
  .connect-card__bg {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: 16px 16px 0 0;
    overflow: hidden;
  }
  .connect-card__panel {
    border-radius: 0 0 16px 16px;
    padding: 16px;
    max-width: 100%;
  }
  .connect-card__title { font-size: 18px; }
  .connect-card__desc { font-size: 15px; }
}

/* --------------------------------------------------------------------------
   SECTION: Exploration — Năng Lực Kiến Tạo Giá Trị
   v1.1 #_Competence_Exploration_1{ bg #fff, padding 120px 48px, row-gap 60px }
        #Title_36 46px/130%/800; accent gradient same as Connect
        #Subtitle_1 18px/160%
        Card #Case_1_4: border 1px var(--Border-Divider-Border), border-radius 24px,
                        bg linear-gradient(138.2deg,#d8e9fa 0%,#f8f8f8 92.5%),
                        padding 7px, flex-col, row-gap 24px
        Image: aspect-ratio 1.74, border-radius 16px
        Text section: padding 0 16px 16px, row-gap 16px
        Title 20px/700, Desc 18px/400
        Card 4 has WiHub logo watermark (opacity 0.4, height 34px)
   -------------------------------------------------------------------------- */
.competence-exploration {
  background-color: var(--color-white);
  padding-top: 120px;
  padding-bottom: 120px;
}

.competence-exploration__header {
  max-width: 1170px;
  margin-bottom: 40px;
}

.competence-exploration__title {
  font-family: var(--font-family);
  font-size: 46px;
  font-weight: 800;
  line-height: 1.3;
  margin: 0 0 16px;
}
.competence-exploration__title-main { color: var(--color-text-main); }
.competence-exploration__title-accent {
  background-image: linear-gradient(98.5deg, #6598ea 29.5%, #1b5bd2 70.7%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.competence-exploration__desc {
  color: var(--color-text-secondary);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  margin: 0;
  max-width: 800px;
}

/* --- Exploration card ------------------------------------------------------ */
.exploration-card {
  position: relative;
  border: 1px solid var(--color-border-divider);
  border-radius: 24px;
  background-image: linear-gradient(138.2deg, #d8e9fa 0%, #f8f8f8 92.5%);
  padding: 7px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  height: 100%;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(20, 18, 64, 0.04), 0 6px 18px rgba(20, 18, 64, 0.06);
}

.exploration-card__image {
  width: 100%;
  height: auto;
  aspect-ratio: 1.74;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}

.exploration-card__body {
  padding: 0 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.exploration-card__title {
  color: var(--color-text-main);
  font-family: var(--font-family);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
}

.exploration-card__desc {
  color: var(--color-text-secondary);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  margin: 0;
}

/* Card 4 has watermark WiHub logo */
.exploration-card--with-logo .exploration-card__watermark {
  position: absolute;
  bottom: 24px;
  right: 24px;
  opacity: 0.4;
  height: 34px;
  width: auto;
  pointer-events: none;
}

@media (max-width: 991.98px) {
  .competence-exploration { padding-top: 80px; padding-bottom: 80px; }
  .competence-exploration__header { margin-bottom: 32px; }
  .competence-exploration__title { font-size: 36px; }
}
@media (max-width: 575.98px) {
  .competence-exploration { padding-top: 56px; padding-bottom: 56px; }
  .competence-exploration__title { font-size: 28px; }
  .competence-exploration__desc { font-size: 16px; }
  .exploration-card__title { font-size: 18px; }
  .exploration-card__desc { font-size: 15px; }
}


/* Contact section CSS → main.css (shared, 1 nguồn) */