/* ============ LỊCH SỬ HÌNH THÀNH (timeline zigzag) ============ */
.history{background:#fcf7f6;padding:80px var(--gutter);display:flex;flex-direction:column;gap:44px;align-items:flex-start;}
.history__head{display:flex;flex-direction:column;gap:14px;align-items:flex-start;}
.history__sub{font-size:24px;font-weight:700;line-height:32px;color:var(--ink);text-transform:uppercase;}

/* 2 cột 600px + trục dọc ở giữa; space-between đặt trục đúng x=620 như Figma */
.timeline{position:relative;display:flex;justify-content:space-between;align-items:flex-start;width:100%;}
.timeline__col{width:600px;flex:none;display:flex;flex-direction:column;gap:80px;}
.timeline__col--left{padding-right:40px;}
.timeline__col--right{padding-left:40px;padding-top:140px;}  /* lệch nửa nhịp -> zigzag */
.timeline__line{
  align-self:stretch;flex:none;width:1.5px;
  background:repeating-linear-gradient(to bottom, var(--brand) 0 2px, transparent 2px 4px);
}

.tl-row{position:relative;display:flex;gap:12px;align-items:center;width:100%;}
/* đường nối ngang nét đứt: bám giữa thẻ nên tự khớp mọi chiều cao nội dung */
.tl-row::before{
  content:"";position:absolute;top:50%;width:60px;height:1.5px;
  background:repeating-linear-gradient(to right, var(--brand) 0 2px, transparent 2px 4px);
}
/* chấm tròn trên trục: lõi trắng - vòng đỏ - quầng hồng */
.tl-row::after{
  content:"";position:absolute;top:50%;width:19px;height:19px;border-radius:50%;
  background:radial-gradient(circle at center,
    #fff 0 3.42px, var(--brand-deep) 3.42px 6.42px, var(--brand-soft) 6.42px 9.5px);
  box-shadow:0 0 4px rgba(93,29,29,.25);
}
.timeline__col--left  .tl-row::before{left:100%;}
.timeline__col--left  .tl-row::after {left:calc(100% + 60px);transform:translate(-50%,-50%);}
.timeline__col--right .tl-row::before{right:100%;}
.timeline__col--right .tl-row::after {right:calc(100% + 60px);transform:translate(50%,-50%);}

.tl-year{
  flex:none;font-family:"Bebas Neue",var(--font);
  font-size:70px;line-height:normal;letter-spacing:-3.5px;
  color:var(--brand-soft);text-align:center;
}
.tl-card{
  flex:1;min-width:0;display:flex;gap:20px;align-items:center;
  padding:22px 20px;background:var(--bg);border-radius:12px;overflow:hidden;
}
.tl-badge{
  width:104px;flex:none;display:flex;flex-direction:column;gap:10px;
  align-items:center;justify-content:center;padding:14px;
  background:var(--muted);border-radius:12px;
}
.tl-badge img{width:50px;height:50px;}
.tl-badge span{font-size:12px;font-weight:700;line-height:1.65;color:#fff;text-align:center;text-transform:uppercase;}
.tl-entries{flex:1;min-width:0;display:flex;flex-direction:column;gap:14px;align-items:flex-start;}
.tl-entry{display:flex;flex-direction:column;gap:6px;align-items:flex-start;width:100%;}
.tl-date{font-size:18px;font-weight:700;line-height:1.65;color:var(--brand);}
.tl-text{font-size:15px;line-height:1.65;color:var(--ink);}
.tl-sep{width:100%;height:1px;margin:0;border:0;background:var(--line);}

/* ============ ĐỊNH HƯỚNG PHÁT TRIỂN (Tầm nhìn & Sứ mệnh) ============ */
.vision{background:var(--bg);padding:80px var(--gutter);display:flex;flex-direction:column;gap:44px;align-items:flex-start;}
.vision__cards{display:flex;gap:28px;align-items:stretch;width:100%;}
.vision-card{
  flex:1;min-width:0;display:flex;flex-direction:column;gap:18px;align-items:flex-start;
  padding:36px;background:var(--bg-alt);border:1px solid var(--line);border-radius:16px;
}
.vision-card__icon{
  width:56px;height:56px;border-radius:28px;background:var(--brand-soft);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.vision-card__icon img{width:26px;height:26px;}
.vision-card__title{font-size:22px;font-weight:700;color:var(--ink);}
.vision-card__text{font-size:16px;line-height:1.7;color:var(--muted);}

/* ============ GIÁ TRỊ CỐT LÕI ============ */
.values{background:var(--bg-alt);padding:80px var(--gutter);display:flex;flex-direction:column;gap:44px;align-items:flex-start;}
.values__cards{display:flex;gap:28px;align-items:stretch;width:100%;}
.value-card{
  flex:1;min-width:0;display:flex;flex-direction:column;
  background:var(--bg);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  box-shadow:0 4px 16px rgba(0,0,0,.3);
}
.value-card__img{width:100%;aspect-ratio:1536/1024;object-fit:cover;flex:none;}
.value-card__body{
  position:relative;flex:1;overflow:hidden;
  display:flex;flex-direction:column;gap:12px;align-items:flex-start;
  padding:40px 32px 32px;color:#fff;
  background:linear-gradient(-90deg,#b3171d 0%,#771519 100%);
}
.value-card__key{font-size:24px;font-weight:700;letter-spacing:.96px;}
.value-card__text{font-size:16px;line-height:1.7;}
.value-card__num{
  position:absolute;left:242px;top:8px;
  font-size:90px;font-weight:700;opacity:.2;line-height:normal;pointer-events:none;
}

/* ============ HỒ SƠ CÔNG TY ============ */
.profile{background:var(--bg);padding:80px var(--gutter);display:flex;flex-direction:column;gap:44px;align-items:flex-start;}
/* items-start để bảng ôm sát nội dung; chỉ sơ đồ mới stretch cho bằng chiều cao bảng */
.profile__body{display:flex;gap:40px;align-items:flex-start;width:100%;}

.profile-table{
  width:633px;flex:none;
  display:flex;flex-direction:column;align-items:stretch;
  background:var(--bg);border:1px solid var(--line);border-radius:14px;overflow:hidden;
}
.profile-table__row{display:flex;gap:20px;align-items:flex-start;padding:18px 24px;}
.profile-table__row:nth-child(even){background:var(--bg-alt);}
.profile-table__key{width:150px;flex:none;font-size:14px;font-weight:500;color:var(--muted);}
.profile-table__val{flex:1;min-width:0;font-size:15px;font-weight:700;line-height:1.55;color:var(--ink-soft);}

/* Sơ đồ tổ chức: ảnh thông tin -> contain (không cắt), bấm xem full-size.
   Ảnh đặt absolute để không tự sinh chiều cao -> khung chỉ cao bằng bảng bên trái. */
.profile__chart{
  position:relative;flex:1;min-width:0;align-self:stretch;
  border:1px dashed var(--brand-deep);border-radius:14px;background:var(--bg);
  cursor:zoom-in;transition:background-color .18s ease;
}
.profile__chart:hover{background:var(--bg-alt);}
.profile__chart img{
  position:absolute;inset:16px;
  width:calc(100% - 32px);height:calc(100% - 32px);object-fit:contain;
}

/* ============ NHÀ MÁY SẢN XUẤT ============ */
.factory{background:var(--bg-alt);padding:80px var(--gutter);display:flex;flex-direction:column;gap:44px;align-items:flex-start;}
.factory__body{display:flex;gap:44px;align-items:center;width:100%;}
.factory__photo{
  flex:1;min-width:0;height:440px;
  border-radius:16px;object-fit:cover;box-shadow:0 4px 16px rgba(0,0,0,.3);
}
.factory__specs{flex:1;min-width:0;display:flex;flex-direction:column;gap:24px;align-items:flex-start;}
.spec{display:flex;flex-direction:column;gap:4px;align-items:flex-start;width:100%;}
.spec--chips{gap:12px;}
.spec__label{font-size:13.5px;font-weight:500;letter-spacing:.135px;color:var(--muted);text-transform:uppercase;}
.spec__value{font-size:16.5px;font-weight:700;line-height:1.5;color:var(--ink);}
.chips{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start;width:100%;}
.chip{
  display:flex;align-items:center;padding:8px 16px;border-radius:999px;
  font-size:14px;font-weight:700;white-space:nowrap;
  background:var(--bg);border:1px solid var(--line);color:var(--ink-soft);
}
.chip--brand{background:var(--brand);border-color:var(--brand);color:#fff;}

/* === RESP-PAGE (auto) === */
@media (max-width:1024px){
  .vision__cards{flex-direction:column;}
  .values__cards{flex-wrap:wrap;}
  .value-card{flex:1 1 100%;}
  .profile__body{flex-direction:column;}
  .profile-table{width:100%;}
  .profile__chart{width:100%;align-self:auto;min-height:320px;}
  .profile__chart img{position:static;width:100%;height:100%;inset:auto;}
  .factory__body{flex-direction:column;}
  .factory__photo{width:100%;height:300px;}
  .timeline{flex-direction:column;gap:0;}
  .timeline__line{display:none;}
  .timeline__col{width:100%;padding:0;gap:24px;}
  .timeline__col--right{padding-top:24px;}
  .tl-row::before,.tl-row::after{display:none;}
  .tl-card{flex-wrap:wrap;}
}
@media (max-width:640px){
  .tl-year{font-size:52px;}
  .tl-card{flex-direction:column;align-items:stretch;gap:14px;}
  .tl-badge{width:100%;flex-direction:row;justify-content:flex-start;gap:14px;}
  .tl-badge span{text-align:left;}
  .value-card__num{left:auto;right:20px;}
  .history__sub{font-size:20px;line-height:1.3;}
}
/* === END RESP-PAGE === */