.section-about-us {
  background-color: #f5f5f5;
  height: 100vh;
  max-height: 700px;
  display: flex;
  align-items: stretch;        /* 2 cột full height */
  padding: 0;
  overflow: hidden;
}
.section-about-us .container-fluid {
  padding: 0;                  /* bỏ padding container để ảnh sát mép */
  width: 100%;
  max-width: none;
  margin: 0;
}
.section-about-us .container-fluid .row {
  margin: 0;
  width: 100%;
  align-items: stretch;
  flex: 1;
}
.section-about-us .container-fluid .row .col-5 {
  padding: 50px 40px 50px 60px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* text nâng lên top thay vì center */
}

.section-about-us .container-fluid {
}

.section-about-us .container-fluid .row {
}

.section-about-us .container-fluid .row .col {
}

.section-about-us .container-fluid .row .col .section-title {
  margin-right: 15px;
  text-transform: none;
  line-height: 1.2em;
  color: #121212;
  font-size: 2.1642em;
  margin-bottom: 30px;
}

.section-about-us .container-fluid .row .col .section-title div {
}

.section-about-us
  .container-fluid
  .row
  .col
  .section-title
  div
  .section-title-main {
}

.section-about-us .container-fluid .row .col .description {
  font-size: 16px;
  color: #555555;
  margin-bottom: 30px;
  text-align: justify;
}

.section-about-us .container-fluid .row .col .short-description {
}

.section-about-us .container-fluid .row .col .short-description ul {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.section-about-us .container-fluid .row .col .short-description ul li {
  list-style: none;
}

.section-about-us .container-fluid .row .col .short-description ul li img {
  width: 35px;
  height: 35px;
}

.section-about-us .container-fluid .row .col .short-description ul li span {
  margin-left: 24px;
  font-size: 18px;
  color: #555555;
}

.section-about-us .container-fluid .row .col-7 {
  display: flex;
  padding: 0;
  gap: 16px;
  height: 100%;                /* full section height */
  align-items: flex-start;     /* không stretch — control bằng align-self */
}

.section-about-us .container-fluid .row .col-7 div {
  width: calc(50% - 8px);
  height: calc(100% - 60px);   /* 2 ảnh cùng height, dành 60px cho stagger */
  overflow: hidden;
  text-align: end;
}

/* Stagger so le theo mẫu autobike-light:
   - ảnh TRÁI (first-child) thấp hơn — sát BOTTOM section
   - ảnh PHẢI (last-child) cao hơn — sát TOP section */
.section-about-us .container-fluid .row .col-7 div:first-child {
  align-self: flex-end;
}

.section-about-us .container-fluid .row .col-7 div:last-child {
  align-self: flex-start;
}

.section-about-us .container-fluid .row .col-7 div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Crop pixel-exact via clip-path. Áp dụng cho cả div wrapper + img để chắc cắt
   bất kể overflow nằm ở wrapper hay img. */
.section-about-us .container-fluid .row .col-7 div:first-child,
.section-about-us .container-fluid .row .col-7 div:first-child img {
  clip-path: inset(80px 0 0 0) !important;   /* ẨN 80px phía TRÊN ảnh trái */
}
.section-about-us .container-fluid .row .col-7 div:last-child,
.section-about-us .container-fluid .row .col-7 div:last-child img {
  clip-path: inset(0 0 300px 0) !important;  /* ẨN 300px phía DƯỚI ảnh phải */
}