.wrapper {
  display: flex;
  /* kich hoat flex box*/
  flex-flow: row wrap;
  font-weight: bold;
  text-align: center;
}

.wrapper > * {
  padding: 10px;
  flex: 1 100%;
  /* cho tất cả phần tử bên trong có độ dài 100% và tỉ lệ chiếm không gian trống là như nhau*/
}

.header-flex-2 {
  background: tomato;
}

.footer-flex-2 {
  background: lightgreen;
  order: 4;
}

.main {
  text-align: left;
  background: deepskyblue;
  height: 400px;
  /* cho phần nội dung main ở giữa chiếm 3 phần không gian trống so với 2 phần aside bên cạnh */
  flex: 3 0px;
  order: 2;
}
/* 2 phần aside sẽ chỉ chiếm 1 phần không gian */
.aside {
  flex: 1 0 0;
}
.aside-1 {
  background: gold;
  height: 400px;
  order: 1;
}

.aside-2 {
  background: hotpink;
  height: 400px;
  order: 3;
}
.img {
  width: 100%;  
  height: 300px;    
  overflow: hidden; 
  border: 2px solid #ccc; /
}
@media screen and (max-width: 1200px) {
  .main {
    flex: 1 100%;
    order: 1;
  }

  .aside-1 {
    flex: 1; /* Aside 1 nằm bên phải Main */
    order: 2;
  }

  .aside-2 {
    flex: 1;
    order: 3;
  }
   .img img {
    width: 100%;
	height: 100%;   
	object-fit: cover; 
	display: block;
  }
}
@media screen and (max-width: 600px) {
  .main,
  .aside-1,
  .aside-2 {
    flex: 1 100%;
    order: unset; /* Trở về thứ tự mặc định hoặc tự sắp xếp lại */
  }

  .main {
    order: 1;
  }
  .aside-1 {
    order: 2;
  }
  .aside-2 {
    order: 3;
  }

  .img img {
    width: 100%;
	height: 100%;   
	object-fit: cover; 
	display: block;
  }
  .main-desc {
    font-size: 16px;
  }
}