```css
/* =========================================================
   GRID SYSTEM CSS
   DÙNG THAY BOOTSTRAP GRID
========================================================= */

*{
    box-sizing:border-box;
}
body {
    margin: 0;
    font-family: roboto;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: #000;
    text-align: left;
    background-color: #fff;
}
.container{
    width:100%;
    max-width:1490px;
    margin:auto;
    padding-left:15px;
    padding-right:15px;
}

.container-fluid{
    width:100%;
    padding-left:15px;
    padding-right:15px;
}

/* =========================================================
   ROW
========================================================= */
.row{
    display:flex;
    flex-wrap:wrap;
    margin-left:-15px;
    margin-right:-15px;
}

/* =========================================================
   COLUMN BASE
========================================================= */
.col,
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12,

.col-sm,
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12,

.col-md,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12,

.col-lg,
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12,

.col-xl,
.col-xl-1,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-10,
.col-xl-11,
.col-xl-12{
    position:relative;
    width:100%;
    padding-left:15px;
    padding-right:15px;
}

/* =========================================================
   AUTO COLUMN
========================================================= */
.col{
    flex:1 0 0%;
}

/* =========================================================
   COL WIDTH
========================================================= */

.col-1{flex:0 0 8.333333%;max-width:8.333333%;}
.col-2{flex:0 0 16.666667%;max-width:16.666667%;}
.col-3{flex:0 0 25%;max-width:25%;}
.col-4{flex:0 0 33.333333%;max-width:33.333333%;}
.col-5{flex:0 0 41.666667%;max-width:41.666667%;}
.col-6{flex:0 0 50%;max-width:50%;}
.col-7{flex:0 0 58.333333%;max-width:58.333333%;}
.col-8{flex:0 0 66.666667%;max-width:66.666667%;}
.col-9{flex:0 0 75%;max-width:75%;}
.col-10{flex:0 0 83.333333%;max-width:83.333333%;}
.col-11{flex:0 0 91.666667%;max-width:91.666667%;}
.col-12{flex:0 0 100%;max-width:100%;}

/* =========================================================
   SMALL ≥576px
========================================================= */
@media(min-width:576px){

.col-sm{flex:1 0 0%;}

.col-sm-1{flex:0 0 8.333333%;max-width:8.333333%;}
.col-sm-2{flex:0 0 16.666667%;max-width:16.666667%;}
.col-sm-3{flex:0 0 25%;max-width:25%;}
.col-sm-4{flex:0 0 33.333333%;max-width:33.333333%;}
.col-sm-5{flex:0 0 41.666667%;max-width:41.666667%;}
.col-sm-6{flex:0 0 50%;max-width:50%;}
.col-sm-7{flex:0 0 58.333333%;max-width:58.333333%;}
.col-sm-8{flex:0 0 66.666667%;max-width:66.666667%;}
.col-sm-9{flex:0 0 75%;max-width:75%;}
.col-sm-10{flex:0 0 83.333333%;max-width:83.333333%;}
.col-sm-11{flex:0 0 91.666667%;max-width:91.666667%;}
.col-sm-12{flex:0 0 100%;max-width:100%;}

}

/* =========================================================
   MEDIUM ≥768px
========================================================= */
@media(min-width:768px){

.col-md{flex:1 0 0%;}

.col-md-1{flex:0 0 8.333333%;max-width:8.333333%;}
.col-md-2{flex:0 0 16.666667%;max-width:16.666667%;}
.col-md-3{flex:0 0 25%;max-width:25%;}
.col-md-4{flex:0 0 33.333333%;max-width:33.333333%;}
.col-md-5{flex:0 0 41.666667%;max-width:41.666667%;}
.col-md-6{flex:0 0 50%;max-width:50%;}
.col-md-7{flex:0 0 58.333333%;max-width:58.333333%;}
.col-md-8{flex:0 0 66.666667%;max-width:66.666667%;}
.col-md-9{flex:0 0 75%;max-width:75%;}
.col-md-10{flex:0 0 83.333333%;max-width:83.333333%;}
.col-md-11{flex:0 0 91.666667%;max-width:91.666667%;}
.col-md-12{flex:0 0 100%;max-width:100%;}

}

/* =========================================================
   LARGE ≥992px
========================================================= */
@media(min-width:992px){

.col-lg{flex:1 0 0%;}

.col-lg-1{flex:0 0 8.333333%;max-width:8.333333%;}
.col-lg-2{flex:0 0 16.666667%;max-width:16.666667%;}
.col-lg-3{flex:0 0 25%;max-width:25%;}
.col-lg-4{flex:0 0 33.333333%;max-width:33.333333%;}
.col-lg-5{flex:0 0 41.666667%;max-width:41.666667%;}
.col-lg-6{flex:0 0 50%;max-width:50%;}
.col-lg-7{flex:0 0 58.333333%;max-width:58.333333%;}
.col-lg-8{flex:0 0 66.666667%;max-width:66.666667%;}
.col-lg-9{flex:0 0 75%;max-width:75%;}
.col-lg-10{flex:0 0 83.333333%;max-width:83.333333%;}
.col-lg-11{flex:0 0 91.666667%;max-width:91.666667%;}
.col-lg-12{flex:0 0 100%;max-width:100%;}

}

/* =========================================================
   EXTRA LARGE ≥1200px
========================================================= */
@media(min-width:1200px){

.col-xl{flex:1 0 0%;}

.col-xl-1{flex:0 0 8.333333%;max-width:8.333333%;}
.col-xl-2{flex:0 0 16.666667%;max-width:16.666667%;}
.col-xl-3{flex:0 0 25%;max-width:25%;}
.col-xl-4{flex:0 0 33.333333%;max-width:33.333333%;}
.col-xl-5{flex:0 0 41.666667%;max-width:41.666667%;}
.col-xl-6{flex:0 0 50%;max-width:50%;}
.col-xl-7{flex:0 0 58.333333%;max-width:58.333333%;}
.col-xl-8{flex:0 0 66.666667%;max-width:66.666667%;}
.col-xl-9{flex:0 0 75%;max-width:75%;}
.col-xl-10{flex:0 0 83.333333%;max-width:83.333333%;}
.col-xl-11{flex:0 0 91.666667%;max-width:91.666667%;}
.col-xl-12{flex:0 0 100%;max-width:100%;}

}

/* =========================================================
   GAP SYSTEM
========================================================= */
.g-0{gap:0;}
.g-1{gap:5px;}
.g-2{gap:10px;}
.g-3{gap:15px;}
.g-4{gap:20px;}
.g-5{gap:30px;}

/* =========================================================
   ALIGNMENT
========================================================= */
.justify-content-start{justify-content:flex-start;}
.justify-content-center{justify-content:center;}
.justify-content-end{justify-content:flex-end;}
.justify-content-between{justify-content:space-between;}

.align-items-start{align-items:flex-start;}
.align-items-center{align-items:center;}
.align-items-end{align-items:flex-end;}

/* =========================================================
   DISPLAY
========================================================= */
.d-none{display:none;}
.d-block{display:block;}
.d-flex{display:flex;}

/* =========================================================
   RESPONSIVE DISPLAY
========================================================= */
@media(max-width:991px){

.d-lg-none{
    display:none!important;
}

.d-lg-block{
    display:block!important;
}

}

/* =========================================================
   TEXT
========================================================= */
.text-center{text-align:center;}
.text-left{text-align:left;}
.text-right{text-align:right;}

/* =========================================================
   WIDTH
========================================================= */
.w-100{width:100%;}
.h-100{height:100%;}

/* =========================================================
   SPACING
========================================================= */

.mt-1{margin-top:5px;}
.mt-2{margin-top:10px;}
.mt-3{margin-top:15px;}
.mt-4{margin-top:20px;}
.mt-5{margin-top:30px;}

.mb-1{margin-bottom:5px;}
.mb-2{margin-bottom:10px;}
.mb-3{margin-bottom:15px;}
.mb-4{margin-bottom:20px;}
.mb-5{margin-bottom:30px;}

.pt-1{padding-top:5px;}
.pt-2{padding-top:10px;}
.pt-3{padding-top:15px;}
.pt-4{padding-top:20px;}
.pt-5{padding-top:30px;}

.pb-1{padding-bottom:5px;}
.pb-2{padding-bottom:10px;}
.pb-3{padding-bottom:15px;}
.pb-4{padding-bottom:20px;}
.pb-5{padding-bottom:30px;}
```