/*
 * Flatsome grid compatibility shim.
 *
 * Nội dung cũ được soạn bằng lưới của Flatsome (.container / .row / .col /
 * .medium-*). Theme mới không có lưới đó, nên phần này cấp lại vừa đủ các lớp
 * mà markup cũ thực sự dùng. Breakpoint theo Flatsome: small < 550, medium >= 550,
 * large >= 850.
 */

.vgh-legacy-scope,
.container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}

.row {
    display: flex;
    flex-flow: row wrap;
    margin-left: -15px;
    margin-right: -15px;
    width: auto;
}

.col {
    position: relative;
    width: 100%;
    max-width: 100%;
    flex: 0 0 auto;
    padding: 0 15px 30px;
    box-sizing: border-box;
}

/* Biến thể khoảng cách dùng trong markup cũ */
.row-0 { margin-left: 0; margin-right: 0; }
.row-0 > .col { padding: 0; }

.row-5 { margin-left: -5px; margin-right: -5px; }
.row-5 > .col { padding: 0 5px 10px; }

.noPadding { padding-left: 0 !important; padding-right: 0 !important; }
.pd-0  { padding: 0 !important; }
.pd-5  { padding: 5px !important; }
.pd-10 { padding: 10px !important; }

/* Cột: mobile-first, mặc định full width */
.small-1  { width: 8.3333%; }  .small-2  { width: 16.6667%; }
.small-3  { width: 25%; }      .small-4  { width: 33.3333%; }
.small-5  { width: 41.6667%; } .small-6  { width: 50%; }
.small-7  { width: 58.3333%; } .small-8  { width: 66.6667%; }
.small-9  { width: 75%; }      .small-10 { width: 83.3333%; }
.small-11 { width: 91.6667%; } .small-12 { width: 100%; }

@media (min-width: 550px) {
    .medium-1  { width: 8.3333%; }  .medium-2  { width: 16.6667%; }
    .medium-3  { width: 25%; }      .medium-4  { width: 33.3333%; }
    .medium-5  { width: 41.6667%; } .medium-6  { width: 50%; }
    .medium-7  { width: 58.3333%; } .medium-8  { width: 66.6667%; }
    .medium-9  { width: 75%; }      .medium-10 { width: 83.3333%; }
    .medium-11 { width: 91.6667%; } .medium-12 { width: 100%; }
}

@media (min-width: 850px) {
    .large-1  { width: 8.3333%; }  .large-2  { width: 16.6667%; }
    .large-3  { width: 25%; }      .large-4  { width: 33.3333%; }
    .large-5  { width: 41.6667%; } .large-6  { width: 50%; }
    .large-7  { width: 58.3333%; } .large-8  { width: 66.6667%; }
    .large-9  { width: 75%; }      .large-10 { width: 83.3333%; }
    .large-11 { width: 91.6667%; } .large-12 { width: 100%; }
}

/* Kiểu "columns-N": con tự chia đều, không cần class trên từng cột */
.small-columns-2 > .col { width: 50%; }
.small-columns-3 > .col { width: 33.3333%; }
.small-columns-4 > .col { width: 25%; }

@media (min-width: 550px) {
    .medium-columns-2 > .col { width: 50%; }
    .medium-columns-3 > .col { width: 33.3333%; }
    .medium-columns-4 > .col { width: 25%; }
}

@media (min-width: 850px) {
    .large-columns-2 > .col { width: 50%; }
    .large-columns-3 > .col { width: 33.3333%; }
    .large-columns-4 > .col { width: 25%; }
}

/* Ảnh trong lưới cũ không được tràn khung của theme mới */
.row img,
.container img {
    max-width: 100%;
    height: auto;
}