/* GomSuViet_Project/grid.css */
/* --- Cài đặt cơ bản và box-sizing --- */
/* *, *::before, *::after {  Bỏ đi vì đã có trong styles.css
    box-sizing: border-box;
    margin: 0;
    padding: 0;
} */

/* --- Container cho các cột (Row) --- */
.row::after {
    content: "";
    clear: both;
    display: table;
}

/* --- Kiểu chung cho tất cả các cột --- */
[class*="col-"] {
    float: left;
    padding: 15px; /* Bạn có thể giữ hoặc bỏ padding này và xử lý ở từng component */
    min-height: 1px;
}

/* --- Định nghĩa cột cho MÀN HÌNH MẶC ĐỊNH --- */
.col-1 { width: 8.33%; }
.col-2 { width: 16.66%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33%; }
.col-5 { width: 41.66%; }
.col-6 { width: 50%; }
.col-7 { width: 58.33%; }
.col-8 { width: 66.66%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33%; }
.col-11 { width: 91.66%; }
.col-12 { width: 100%; }

/* --- Định nghĩa cột cho MÀN HÌNH NHỎ (<= 768px) --- */
@media only screen and (max-width: 768px) {
    /* Mặc định các .col-* sẽ giữ nguyên width nếu không có .col-s-*
       Nếu muốn tất cả các .col-* thành 100% khi không có .col-s-*, thì thêm:
    .col-1, .col-2, ..., .col-12 { width: 100%; }
    */
    .col-s-1 { width: 8.33%; }
    .col-s-2 { width: 16.66%; }
    .col-s-3 { width: 25%; }
    .col-s-4 { width: 33.33%; }
    .col-s-5 { width: 41.66%; }
    .col-s-6 { width: 50%; }
    .col-s-7 { width: 58.33%; }
    .col-s-8 { width: 66.66%; }
    .col-s-9 { width: 75%; }
    .col-s-10 { width: 83.33%; }
    .col-s-11 { width: 91.66%; }
    .col-s-12 { width: 100%; }
}

/* --- Định nghĩa cột cho MÀN HÌNH TABLET (>=769px and <=1023px) --- */
/* (Tùy chọn, nếu bạn muốn có breakpoint riêng cho tablet) */
@media only screen and (min-width: 769px) and (max-width: 1023px) {
    .col-m-1 { width: 8.33%; }
    .col-m-2 { width: 16.66%; }
    .col-m-3 { width: 25%; }
    .col-m-4 { width: 33.33%; }
    .col-m-5 { width: 41.66%; }
    .col-m-6 { width: 50%; }
    .col-m-7 { width: 58.33%; }
    .col-m-8 { width: 66.66%; }
    .col-m-9 { width: 75%; }
    .col-m-10 { width: 83.33%; }
    .col-m-11 { width: 91.66%; }
    .col-m-12 { width: 100%; }
}

/* --- Định nghĩa cột cho MÀN HÌNH RẤT LỚN (>= 1024px, thường là desktop) --- */
/* Class .col-x-* có thể không cần thiết nếu .col-* đã xử lý cho desktop lớn.
   Chỉ thêm nếu bạn muốn style riêng cho màn hình cực lớn. */
@media only screen and (min-width: 1024px) { /* Hoặc một breakpoint lớn hơn nếu cần */
    /* .col-x-1 { width: 8.33%; } ... */
}