body{
margin:0;
font-family:Segoe UI;
background:#f2f4f8;
}

/* LAYOUT */

.layout{
display:flex;
height:100vh;
overflow:hidden;
}

/* SIDEBAR */

.sidebar{

width:240px;

background:rgba(255,255,255,0.85);
backdrop-filter:blur(10px);

box-shadow:0 0 20px rgba(0,0,0,0.1);

padding:20px;

transition:0.3s;

border-top-right-radius:20px;
border-bottom-right-radius:20px;

}

/* ẩn sidebar */

.sidebar.hide{
transform:translateX(-260px);
}

/* MENU */

.menu h4{

margin:20px 0 10px 0;

color:#666;
font-size:14px;

}

/* BUTTON MENU */

.sidebar button{

display:block;

width:100%;

padding:12px;

margin:6px 0;

border:none;

border-radius:12px;

background:white;

box-shadow:0 2px 8px rgba(0,0,0,0.08);

cursor:pointer;

transition:0.2s;

font-size:14px;

text-align:center;

}

.sidebar button:hover{

background:#f0f3f7;

transform:scale(1.03);

}

/* TOGGLE BUTTON */

.toggle{

position:fixed;

top:10px;
left:10px;

width:36px;
height:36px;

border:none;

border-radius:8px;

background:white;

box-shadow:0 3px 10px rgba(0,0,0,0.2);

cursor:pointer;

font-size:18px;

z-index:2000;

}

/* CONTENT */

.content{

flex:1;

padding:40px;

overflow:auto;

}

/* HOME */

.home{
text-align:center;
}

.title{

font-size:48px;
font-weight:bold;

margin-bottom:30px;

}

/* KHUNG ẢNH */

.cloud-frame{

max-width:900px;
margin:auto;

padding:12px;

border-radius:22px;

background:white;

box-shadow:
0 0 0 6px rgba(255,255,255,0.8),
0 10px 35px rgba(0,0,0,0.2);

overflow:hidden;

}

.cloud-frame img{

width:100%;
height:400px;

object-fit:cover;

display:block;

}

/* TABLE */

.search{

width:100%;
max-width:400px;

padding:10px;

border-radius:10px;

border:1px solid #ccc;

margin-bottom:15px;

}

table{

width:100%;
max-width:700px;

border-collapse:collapse;

background:white;

border-radius:15px;

overflow:hidden;

box-shadow:0 5px 20px rgba(0,0,0,0.08);

}

th,td{

padding:12px;

border-bottom:1px solid #eee;

text-align:left;

}

th{
background:#f5f7fb;
}

/* MOBILE */

@media(max-width:800px){

.sidebar{

position:fixed;

left:0;
top:0;

height:100%;

width:240px;

background:rgba(255,255,255,0.9);
backdrop-filter:blur(8px);

box-shadow:0 0 20px rgba(0,0,0,0.1);

padding:20px;

transition:0.3s;

z-index:1000;

}

.content{
padding:20px;
}

.title{
font-size:32px;
}

.cloud-frame img{
height:220px;
}
/* CHUẨN SIZE ẢNH */

img{

width:100%;

max-width:900px;

height:auto;

max-height:400px;

object-fit:contain;

border-radius:16px;

display:block;

margin:auto;

background:#000;

}.image-box{

max-width:900px;

margin:auto;

padding:10px;

background:white;

border-radius:18px;

box-shadow:0 10px 30px rgba(0,0,0,0.15);

}
@media(max-width:800px){

img{

max-height:250px;

}

}

}