/* ===== HERO ===== */
:root{
  --header-h: 72px; /* chiều cao header của site */
}
.ob-hero{ 
    position:relative;
    padding:24px 0;
    overflow:hidden;
    min-height: calc(100svh - var(--header-h) - env(safe-area-inset-top, 0px));
    display:grid;
    align-items:center;
}
.ob-hero__bg{
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 400px at 15% 15%, rgba(10,91,211,.15), transparent 60%),
    radial-gradient(900px 420px at 70% 0%, rgba(10,91,211,.12), transparent 60%),
    #f5f8ff url('../img/background-ourbrand.webp') center/cover no-repeat;
  filter:saturate(1.02);
}
.ob-hero__inner{ position:relative; }
.ob-hero__title{
  margin:0; 
  text-align:center; 
  font-weight:800;
  font-size:54px;
  line-height:1.5;
  padding: 0 100px;
}
.ob-hero__title span{ 
    color:var(--color-primary); 
}

/* ===== INTRO ===== */
.ob-body{ 
    text-align:center;
    padding-bottom: 80px;
 }
.ob-intro__text{
    margin-top: 80px;
    margin-bottom:24px;
    font-size:16px;
 }
.ob-intro__logo{ 
    margin:14px 
    auto 8px; 
}
.ob-intro__logo img{ 
    display:block; 
    margin:0 auto; 
    height:auto; 
}
.section-title{ 
    font-size:clamp(18px,2.6vw,32px);
    font-weight:700;
}
.ob-intro__lead{ 
    margin-bottom:80px;    
}
/* ===== VALUES ART ===== */
.ob-values{ padding:40px 0 8px; }
.ob-values__art{
  margin:18px auto 80px; 
  max-width:1000px;
}
.ob-values__art img{ 
    width:100%; height:auto; display:block; border-radius:20px; }

/* ===== DELIVER CARDS ===== */
.ob-deliver{ padding:34px 0 18px; }
.ob-cards{
  display:grid; 
  grid-template-columns: repeat(4, 1fr);
  gap:16px; 
  margin-top:10px;
}
.ob-card{
  background:#fff; 
  border:1px solid var(--color-primary); 
  border-radius:4px;
  padding:18px; 
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, .06);
}
.ob-integrated { background: var(--color-bg-soft); }
.ob-card__hd{ margin:0 0 6px; font-weight:700; font-size:16px; }
.ob-card__desc{ margin:0; color:var(--ob-muted); font-size:14px; }

/* ===== JOIN US BANNER ===== */
.ob-join{
  margin: 80px 0 0;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;                  /* căn giữa theo chiều dọc */
  gap: 24px;
  background: #fff;
  box-shadow: 0 0 10px 2px rgba(0,0,0,.06);
  overflow: hidden;
  border-radius: 4px;
  min-height: 420px;                    /* chiều cao tối thiểu cho cân đối */
}


.ob-join__media{ height: 100%; }
.ob-join__media img{
  width: 100%;
  height: 100%;                          /* ảnh phủ toàn chiều cao khối */
  object-fit: cover;
  display: block;
}

.ob-join__content{
  display: flex;
  flex-direction: column;
  justify-content: center;               /* căn giữa dọc nội dung */
  align-items: flex-start;               /* căn trái */
  padding: 20px 40px;
  gap: 12px;
  text-align: left;
}

.ob-join__title{
  margin: 0 0 8px;
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 800;
  text-align: left;
}
.ob-join__desc{
  margin: 0 0 18px;
  color: var(--color-muted);
  padding-top: 8px;
  text-align: left;
}

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
}
.btn-primary{
  background: var(--color-primary); color: #fff;
  transition: filter .2s ease, transform .02s ease;
  margin-bottom: 12px;
}
.btn-primary:hover{
    background: var(--color-primary-hover);
 }

/* ===== Responsive ===== */
@media (max-width: 1024px){
  .ob-join{
    grid-template-columns: 1fr;
    min-height: unset;
  }
  .ob-join__media img{
    height: auto;                        /* tránh ảnh bị kéo dãn */
  }
}

@media (max-width: 560px){
  .ob-join__content{ padding: 24px; }
  .ob-join__title{ font-size: clamp(18px, 6vw, 24px); }
}

@media (max-width: 560px){
    .ob-hero{ 
        min-height: calc(100svh - var(--header-h) - env(safe-area-inset-top, 0px));
        padding:18px 0 24px;
    }
    .ob-hero__title{ 
        font-size:34px; 
    }
    .ob-cards{ 
        grid-template-columns: 1fr;
}
}