/* ==========================================================================
   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} hero cao 480px, breadcrumb→title gap ~24px
        #__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%;
  height: 480px;             /* v1.1: hero fixed 480px (đo Docker :8081) */
  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: 320px;        /* v1.1 #Background_Image_1 padding:320px 48px 60px */
  padding-bottom: 60px;
  display: flex;
  flex-direction: column;
  gap: 24px;                 /* v1.1: breadcrumb→title gap ~24px trong hero cao 480 (đo Docker :8081) */
}

.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;
  }
  /* title GIỮ 46px mọi breakpoint (v1.1) */
}
@media (max-width: 575.98px) {
  .competence-hero { min-height: 600px; }   /* đồng bộ hero mobile mọi page: cao 600, title sát đáy */
  .competence-hero__inner { padding-top: 120px; padding-bottom: 36px; }
  /* title GIỮ 46px (v1.1 base, không co) */
}

/* --------------------------------------------------------------------------
   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;                 /* v1.1 #Connect_Desktop/#Connect_Mobile_Tablet row-gap:24px (gap GIỮA card; 60px là header→list = header margin-bottom) */
  width: 100%;
  max-width: 1170px;
}

/* --- Connect card ---------------------------------------------------------- */
.connect-card {
  position: relative;
  width: 100%;
  max-width: 1004px;
  display: flex;
  align-items: flex-start;
  padding: 118px 14px 14px;  /* v1.1 #Case_1 (đo Docker :8081) — cao tự nhiên theo panel, không min-height */
  /* viền/bo/shadow chuyển xuống lớp ảnh (__bg) để răng cưa không bị clip */
}

.connect-card__bg {
  /* RĂNG CƯA (torn paper) như reference — filter trên lớp ảnh, panel chữ giữ sắc nét */
  filter: url(#torn-paper) drop-shadow(0 1px 4px rgba(12, 12, 13, 0.08));
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.connect-card__bg-img {
  border: 4px solid var(--color-white);
  border-radius: 26px;
  background-color: #d0d5e0;
}

/* 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 > .connect-card__bg-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  filter: drop-shadow(0 1px 4px rgba(12, 12, 13, 0.08));
}

.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 0;      /* v1.1 inner panel padding 22px 22px 0 (đo Docker :8081) */
  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;
}

/* --- Connect Tablet + Mobile (≤991.98px) ---------------------------------- */
/* v1.1 frame Mobile (#Case_1) + Tablet (#Case_1_1) — KHÁC desktop:            */
/*   card padding 198px 14px 14px (panel đè sâu hơn vào ảnh — không phải 118), */
/*   card KHÔNG có max-width (full-width), KHÔNG bậc thang (Container_*=pad 0), */
/*   panel #Container_5/_28 padding 22px (4 cạnh, không phải 22px 22px 0)       */
/*   + KHÔNG align-self:stretch (chỉ desktop #Container_50 có).                 */
@media (max-width: 991.98px) {
  .competence-connect { padding-top: 80px; padding-bottom: 80px; }
  .competence-connect__header { margin-bottom: 40px; }
  /* v1.1: title GIỮ 46px mọi breakpoint */

  /* card: panel đè sâu hơn (v1.1 #Case_1/#Case_1_1: padding-top 198px) +
     full-width (mobile/tablet không có max-width:1004px) */
  .connect-card {
    max-width: none;
    padding-top: 198px;   /* v1.1 #Case_1{padding:198px 14px 14px} */
  }
  /* reference tablet/mobile: KHÔNG bậc thang — 4 card thẳng mép trái */
  .connect-card--step-1,
  .connect-card--step-2,
  .connect-card--step-3 { margin-left: 0; }

  /* panel: padding đều 22px (v1.1 #Container_5/#Container_28{padding:22px}) */
  .connect-card__panel { padding: 22px; }
}
@media (max-width: 575.98px) {
  .competence-connect { padding-top: 56px; padding-bottom: 56px; }
  /* v1.1 mobile (#Case_1): padding 198/14, full-width, viền trắng 4 + răng cưa,
     panel 22px radius 16, title section 46px, panel title 20px, desc 18px. */
  .connect-card--step-0,
  .connect-card--step-1,
  .connect-card--step-2,
  .connect-card--step-3 { margin-left: 0; }
}

/* --------------------------------------------------------------------------
   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(12, 12, 13, 0.05);  /* v1.1 #Case_1_4 drop-shadow */
}

.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; }
  /* v1.1: title GIỮ 46px mọi breakpoint */
}
@media (max-width: 575.98px) {
  .competence-exploration { padding-top: 56px; padding-bottom: 56px; }
  .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) */