.wrapper {
    display: flex;
    flex-flow: row wrap;
    font-weight: bold;
    text-align: center;
}

.wrapper>* {
    padding: 10px;
    flex: 1 100%;
}

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

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

.main {
    text-align: left;
    background: deepskyblue;
    min-height: 400px;
    flex: 3 0px;
    order: 3;       /* main ở giữa 2 aside */
}

.aside-1 {
    background: gold;
    min-height: 400px;
    flex: 1 0 0;
    order: 2;       /* aside-1 trái */
}

.aside-2 {
    background: hotpink;
    min-height: 400px;
    flex: 1 0 0;
    order: 4;       /* aside-2 phải */
}

@media only screen and (min-width: 600px) and (max-width: 1199px) {
    .main {
        flex: 100%;
        order: 2;
    }

    .aside-1 {
        flex: 0 0 50%;
        box-sizing: border-box;  /* padding tính vào trong 50% */
        order: 3;
    }

    .aside-2 {
        flex: 0 0 50%;
        box-sizing: border-box;  /* padding tính vào trong 50% */
        order: 3;
    }
}

/* ===== 1 cột: nhỏ hơn 600px ===== */
@media only screen and (max-width: 599px) {
    .main,
    .aside-1,
    .aside-2 {
        flex: 100%;
    }

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

    body {
        font-size: 20px;   /* Tăng font khi 1 cột */
    }

    .main img {
        width: 100%;       /* Ảnh co theo chiều rộng màn hình */
        height: auto;      /* Giữ tỉ lệ ảnh */
    }
}

.main img{
	width: 100%;
	height: auto;
	display: block;
	max-width: 100%;
}

body {
    font-size: 16px;
}