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

/* HEADER FIXED */

.header{
    position:fixed;
    top:0;
    width:100%;
    z-index:1000;
    background:white;
}

/* TOP HEADER */

.top-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 40px;
}

.logo-area{
    display:flex;
    align-items:center;
    gap:10px;
}

.logo-area img{
    height:60px;
}

.company-name h2{
    margin:0;
    color:#c40000;
    font-size:26px;
}

.company-name p{
    margin:0;
    font-size:14px;
    color:#555;
}
/* SEARCH */

.search-box{
    display:flex;
    width:40%;
}

.search-box input{
    flex:1;
    padding:8px;
    border:1px solid #ccc;
}

.search-box button{
    background:#c40000;
    color:white;
    border:none;
    padding:8px 15px;
}

/* USER */

.user-box{
    display:flex;
    align-items:center;
    gap:10px;
}

.login{
    background:#c40000;
    color:white;
    border:none;
    padding:6px 10px;
}

/* MENU */

.menu{
    display:flex;
    align-items:center;
    background:#1f2d3d;
    color:white;
    padding:10px 40px;
}

/* CATEGORY */

.category{
    background:#c40000;
    padding:10px;
    margin-right:20px;
}

/* MENU LIST */

.menu ul{
    list-style:none;
    display:flex;
    gap:20px;
    margin:0;
    padding:0;
}

.menu li{
    cursor:pointer;
}

/* LOCATION */

.location{
    margin-left:auto;
}

.location button{
    background:#2d6cdf;
    border:none;
    color:white;
    margin-left:5px;
    padding:5px 10px;
}
body{
    padding-top:120px;
}
.sidebar{
    position:fixed;
    top:140px;   /* cách header */
    left:0px;
    width:280px;
    background:#f2f2f2;
    border:1px solid #ccc;
    height:calc(100vh - 120px); /* kéo dài gần cuối màn hình */
    overflow-y:auto;            /* nếu dài sẽ cuộn */
}


/* menu */

.menu-category{
    list-style:none;
    margin:0;
    padding:0;
}

.menu-category li{
    padding:10px 15px;
    border-bottom:1px solid #ddd;
    cursor:pointer;
}

.menu-category li:hover{
    background:#e3e3e3;
}
.menu-category li::after{
    content: "›";
    float:right;
    color:#999;
}