.container1{
    width: 1200px;
    margin:  0 auto;
}

.row1{
    float: left;
    width: 100%;
}
*{
    box-sizing: border-box;
}
.col1
{
    width: 8.33%;
}
.col2
{
    width: 16.66%;
}
.col3
{
    float: left;
    width: calc(25% - 10px);
    margin: 5px;
    min-height: 400px;
    padding: 8px;
}
.col4
{
    width: 33.33%;
    background-color: bisque;
    border: 1px solid rgb(0, 255, 30);
    height: 250px;
}
.col5
{
    width: 41.66%;
}
.col6
{
    width: 50%;
} .col7
{
    width: 58.33%;
}
.col8
{
    width: 66.66%;
}
.col9
{
    width: 75%;
}
.col10
{
    width: 83.33%;
}
.col11
{
    width: 91.66%;
}
.col12
{
    width: 100%;
}

/* Desktop rất lớn (Extra large desktops) - <= 1400px */
@media screen and (max-width: 1400px) {
  .container1 {
    width: 1140px;
  }
}

/* Desktop & Laptop vừa (Large devices) - <= 1200px */
@media screen and (max-width: 1200px) {
  .container1 {
    width: 960px;
  }
}

/* Tablet ngang & Laptop nhỏ (Medium devices) - <= 992px */
@media screen and (max-width: 992px) {
  .container1 {
    width: 720px;
  }
  .col3 {
    width: calc(50% - 10px);
  }
}

/* Tablet dọc & Điện thoại lớn (Small devices) - <= 768px */
@media screen and (max-width: 768px) {
  .container1 {
    width: 540px;
  }
  .col3 {
    width: calc(100% - 10px);
  }
  .navbar{
    z-index: 10;
    
 }
}

/* Điện thoại nhỏ (Extra small devices) - <= 576px */
@media screen and (max-width: 576px) {
  .container1 {
    width: 100%;
  }
  .col3 {
    width: 100%;
  }
.navbar{
    z-index: 10;

 }
}