/* =========================================================
   ABOUT PAGE ONLY (Giới thiệu)
   File: assets/css/about.css
========================================================= */

/* Ẩn title mặc định của theme/plugin trên trang about */
body.about-page .entry-title,
body.about-page .page-title{ 
  display:none !important; 
}

/* Bỏ khung entry-content chỉ trên about */
body.about-page .entry-content{
  background:transparent;
  border:none;
  box-shadow:none;
  padding:0;
}

/* Bỏ khoảng trống trên cùng của nội dung trang about */
body.about-page .sl-content{ 
  padding-top:0; 
}

/* Banner gọn như trang chủ */
body.about-page .sl-hero-about .sl-hero-inner{ 
  padding-top:14px; 
  padding-bottom:14px; 
}

/* Layout about */
body.about-page .about-grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
body.about-page .about-grid-4{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
body.about-page .about-align-start{ 
  align-items:start; 
}

@media (max-width:1020px){
  body.about-page .about-grid-4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:980px){
  body.about-page .about-grid-2{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  body.about-page .about-grid-4{ grid-template-columns:1fr; }
}

/* ===== ABOUT HERO: image as background ===== */
body.about-page .sl-hero-about{
  position:relative;
  background-image:url("http://localhost/wordpress/wp-content/uploads/2025/12/banner-about.png");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  color:#fff;
}

/* Overlay */
body.about-page .sl-hero-about::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(10,63,134,.65);
  z-index:0;
}

/* Nội dung nằm trên overlay */
body.about-page .sl-hero-about .sl-hero-inner{
  position:relative;
  z-index:1;
  min-height:320px;
  align-items:center;
}

body.about-page .about-justify{
  text-align:justify;
}

/* ===== gird ảnh ===== */

 .life-block{
    padding: 24px 0;
    background:#fff;
  }

  .life-wrap{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    display: grid;
    grid-template-columns: 1.05fr 1.25fr;
    gap: 22px;
    align-items: start;
  }

  /* LEFT */
  .life-title{
    margin: 0 0 10px;
    font-size: 28px;
    font-weight: 900;
    color:#064db1;
    letter-spacing: .2px;
  }
  .life-desc{
    margin: 0 0 16px;
    color:#444;
    line-height: 1.55;
    font-size: 14px;
    max-width: 520px;
  }

  .life-left-media{
    border-radius: 2px;
    overflow: hidden;
  }
  .life-left-media img{
    width: 100%;
    height: 360px;
    object-fit: cover;
    display:block;
  }

  /*bo viền*/
.value-block{
  background:#fff;
  border:1px solid #e7ebf3;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:14px;
  row-gap:12px;
  margin-top:10px;
}

  /* RIGHT header */
  .life-right-head{
    display:flex;
    align-items:flex-start;
    justify-content: space-between;
    margin-bottom: 10px;
    gap: 12px;
  }
  .life-right-kicker{
    font-size: 12px;
    color:#222;
    line-height: 1.2;
    font-weight: 600;
    margin-left: auto;   
    text-align: right;
  }

  .life-play{
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: #e53935;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    flex: 0 0 auto;
  }
  .life-play-icon{
    width: 0;
    height: 0;
    border-left: 10px solid #fff;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    margin-left: 2px;
  }

  /* GALLERY */
  .life-gallery{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .life-col{
    display:grid;
    gap: 12px;
  }

  /* Chiều cao để giống bố cục ảnh mẫu */
  .life-col-a{ grid-auto-rows: 120px; }
  .life-col-b{ grid-auto-rows: 186px; }

  .life-card{
    margin:0;
    border-radius: 2px;
    overflow:hidden;
    background:#f2f2f2;
  }
  .life-card img{
    width:100%;
    height:100%;
    object-fit: cover;
    display:block;
  }

  /* Responsive */
  @media (max-width: 980px){
    .life-wrap{ grid-template-columns: 1fr; }
    .life-left-media img{ height: 300px; }
    .life-col-a{ grid-auto-rows: 140px; }
    .life-col-b{ grid-auto-rows: 160px; }
  }

  @media (max-width: 520px){
    .life-gallery{ grid-template-columns: 1fr; }
    .life-col-a, .life-col-b{ grid-auto-rows: 180px; }
  }