/* =========================================================
   CSS BỔ SUNG CHO TRANG GIỚI THIỆU ĐẠI PHÁT
   - Không chỉnh sửa style.css gốc
   - Ưu tiên class tiền tố .gi- để tránh xung đột
   - Responsive theo layout đã cung cấp
========================================================= */

:root{
  --gi-primary: var(--color-primary, #558179);
  --gi-accent: #ca3605;
  --gi-black: #0b0f14;
  --gi-dark: #0f172a;
  --gi-muted: #6b7280;
  --gi-radius: 14px;
  --gi-shadow: 0 8px 24px rgba(2,6,23,0.08);
}

/* Utility */
.sr-skip{
  position:absolute; left:8px; top:-40px; background:#111; color:#fff;
  padding:8px 12px; border-radius:8px; z-index:9999; transition:top .2s;
}
.sr-skip:focus{ top:8px; }

/* 1) Banner */
.gi-hero{ position:relative; isolation:isolate; }
.gi-hero picture, .gi-hero img{ width:100%; object-fit:cover; display:block; }
.gi-hero__overlay{
  position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:16px;
  background:linear-gradient(180deg, rgba(11,15,20,.15), rgba(11,15,20,.55));
}
.gi-hero__overlay h1{ color:#fff; font-size:clamp(24px, 4vw, 42px); margin:0 0 6px; text-shadow:0 12px 28px rgba(0,0,0,.25); }
.gi-hero__overlay p{ color:#e5e7eb; font-size:clamp(14px, 2vw, 18px); margin:0; }

/* 2) Số liệu: block .number có sẵn trong style.css
   Bổ sung margin trên/dưới để đúng layout */
.gi-stats .number{ padding-top:22px; padding-bottom:12px; }

/* 3) Đoạn giới thiệu full width (green band) */
.gi-intro{ padding:18px 0; }
.gi-intro .container{
  /* background:#e7f2ef; border:1px solid #d0e7e2; border-radius:var(--gi-radius); */
  /* padding:clamp(14px, 3vw, 26px); */
  /* box-shadow:0 2px 8px rgba(16,24,40,.04); */
}
.tit-h2,
.gi-intro h2{
  color:var(--gi-primary); font-weight:600; font-size:clamp(18px, 2.2vw, 26px); margin:0 0 6px;
}
.gi-intro p{ color:#1f2937; margin:0; }

/* 4) Hình ảnh công ty: full width inside container */
.gi-company-band{ padding:8px 0 0; }
.gi-company-band .container picture{
  display:block; overflow:hidden; border-radius:12px; box-shadow:0 2px 8px rgba(2,6,23,0.06);
}
.gi-company-band img{ width:100%; aspect-ratio:16/5; object-fit:cover; }

/* 5) Đoạn text (dải đen) */
.gi-highlight{ padding:12px 0; }
.gi-highlight .container{
  /* background:var(--gi-black); color:#e5e7eb; border-radius:12px; padding:16px 18px; */
}
/* .gi-highlight h2{ color:#fff; margin:0 0 4px; font-size:clamp(16px, 2vw, 22px); } */
.gi-highlight p{ margin:0; }

/* 6) Hình ảnh + text (text vertical middle) */
.gi-grid-2{
  display:grid; gap:clamp(12px, 3vw, 24px);
  grid-template-columns:1.1fr 1fr;
}
.gi-image-text{ padding:clamp(16px, 4vw, 28px) 0; padding-bottom: 0px;}
.gi-image{
  overflow:hidden; border-radius:12px; background:#eef2f7; box-shadow:0 2px 8px rgba(2,6,23,0.06);
}
.gi-image img{ width:100%; height:100%; object-fit:cover; display:block; }
.gi-text{
  display:flex; flex-direction:column; justify-content:center; gap:8px;
  /* background:#fff; border:1px solid #e5e7eb; border-radius:12px;  */
  padding:clamp(14px, 3vw, 22px);
  /* box-shadow:0 2px 8px rgba(2,6,23,0.04); */
}
.gi-text h3{ color:#0f4c45; margin:0 0 2px; }
.gi-text ul{ margin:0 0 0 1.1rem; color:#334155; }

/* 7) Cam kết (text band) */
.gi-commit-band{ padding:6px 0; }
.gi-commit-band .container{
padding:clamp(12px, 2.6vw, 20px);
}
.gi-commit-band .txt-camket{
  background:#fff7c2; border:1px solid #f5d34f; border-radius:12px; 
padding:clamp(12px, 2.6vw, 20px);
  color:#5b4305; font-weight:600;
}

/* 8) Hàng 2 cột: Text cam kết + Hình ảnh 123 */
.gi-row-split{ padding:clamp(16px, 4vw, 28px) 0; }
.gi-split-text{
  padding:clamp(14px, 3vw, 22px);
    display: flex;
  flex-direction: column;
  justify-content: center;
}
.gi-split-text h3{ color:var(--gi-accent); margin:0 0 6px; }
.gi-split-text ul{ margin:0 0 0 1.1rem; }
.gi-split-image{
  overflow:hidden;
}
.gi-split-image img{ width:100%; height:100%; object-fit:cover; display:block; }

/* 9) Tabs: Tầm nhìn - Sứ mệnh - Giá trị */
.section-vision{display: flex;}
.section-vision .gi-tabs {
  order: 2;
  width: 50%;
}
.section-vision .gi-vm-image {
  order: 1;
  width: 50%;
}
@media (max-width:720px){
  .section-vision {
  display: grid;
}
  .section-vision .gi-tabs,
.section-vision .gi-vm-image {
  width: 100%;
}
}
.gi-vm{ padding:6px 0 24px; }
.gi-vm-grid{ align-items:center; }
.gi-tabs{
  background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:12px; box-shadow:0 2px 8px rgba(2,6,23,0.04);
}
.gi-tabs input[type="radio"]{ display:none; }
.gi-tab-labels{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:10px;
}
.gi-tab-labels label{
  background:#f1f5f9; border:1px solid #e2e8f0; color:#0f172a; font-weight:700;
  padding:10px 12px; text-align:center; border-radius:10px; cursor:pointer; transition:.2s;
}
.gi-tab-labels label:hover{ background:#e2e8f0; }
.gi-tab-panels .gi-tab-panel{
  display:none; background:#fff; 
  /* border:1px solid #e5e7eb; */
  border-radius:10px; padding:12px; color:#334155;
}
#gi-tab-vision:checked ~ .gi-tab-labels label[for="gi-tab-vision"],
#gi-tab-mission:checked ~ .gi-tab-labels label[for="gi-tab-mission"],
#gi-tab-values:checked ~ .gi-tab-labels label[for="gi-tab-values"]{
  background:var(--gi-primary); color:#fff; border-color:var(--gi-primary);
}
#gi-tab-vision:checked ~ .gi-tab-panels #gi-panel-vision{ display:block; }
#gi-tab-mission:checked ~ .gi-tab-panels #gi-panel-mission{ display:block; }
#gi-tab-values:checked ~ .gi-tab-panels #gi-panel-values{ display:block; }

.gi-vm-image{
  border-radius:12px; overflow:hidden; background:#eef2f7; box-shadow:0 2px 8px rgba(2,6,23,0.06);
}
.gi-vm-image img{ width:100%; height:100%; object-fit:cover; display:block; }

/* 10) Video */
.gi-video{ padding:6px 0 28px; }
.gi-video h2{ color:#0f4c45; margin:0 0 8px; }
.gi-video__frame{text-align: center;}
.gi-video__frame iframe{
  /* background:#0f172a; */
   border-radius:12px; overflow:hidden; box-shadow:0 2px 8px rgba(2,6,23,0.06);
  /* aspect-ratio:16/9; */
}
.gi-video__frame iframe{ 
  /* width:100%; height:100%; border:0; */
 }

/* Responsive */
@media (max-width: 1200px){
  .gi-grid-2{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 991px){
  .gi-grid-2, .gi-vm-grid{ grid-template-columns:1fr; }
  .gi-vm-image{ max-height:380px; }
}
@media (max-width: 640px){
  /* .gi-tab-labels{ grid-template-columns:1fr; } */
}