*{
box-sizing:border-box;
}

body{
margin:0;
font-family:Arial;
display:flex;
}

/* sidebar */

.sidebar{
width:220px;
background:#2c3e50;
height:100vh;
color:white;
position:fixed;
}

.sidebar h2{
text-align:center;
padding:15px;
border-bottom:1px solid #444;
}

.sidebar a{
display:block;
padding:12px 20px;
color:white;
text-decoration:none;
}

.sidebar a:hover{
background:#34495e;
}

/* topbar */

.topbar{
height:50px;
background:#1976d2;
color:white;
display:flex;
align-items:center;
padding-left:20px;
}

/* content */

.main{
margin-left:220px;
width:100%;
}

.content{
padding:20px;
}

/* form */

input,select{
width:100%;
padding:10px;
margin:5px 0;
border:1px solid #ccc;
border-radius:6px;
}

button{
padding:8px 14px;
border:none;
border-radius:6px;
cursor:pointer;
margin:5px;
}

.add{background:#28a745;color:white}
.update{background:#007bff;color:white}
.clear{background:#6c757d;color:white}
.delete{background:#dc3545;color:white}

/* table */

table{
width:100%;
border-collapse:collapse;
margin-top:10px;
background:white;
}

th,td{
padding:10px;
border-bottom:1px solid #ddd;
text-align:center;
}

th{
background:#1976d2;
color:white;
}


/* mobile */

@media (max-width:768px){

body{
display:block;
}

/* sidebar thu gọn */

.sidebar{
width:100%;
height:auto;
position:relative;
display:flex;
overflow-x:auto;
}

.sidebar h2{
display:none;
}

.sidebar a{
padding:10px;
white-space:nowrap;
}

/* content */

.main{
margin-left:0;
}

.topbar{
padding-left:10px;
}

/* table scroll */

table{
font-size:14px;
}

}