*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Segoe UI,Arial,sans-serif;
}

body{
    background:#eef3f8;
    color:#222;
}

/* HEADER */

header{
    height:75px;
    background:#ffffff;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 30px;
    box-shadow:0 3px 12px rgba(0,0,0,.12);
}

.logo h1{
    font-size:26px;
    color:#1565c0;
}

.logo span{
    color:#666;
    font-size:14px;
}

#clock{
    font-size:17px;
    font-weight:bold;
    color:#444;
}

/* PLAYER */

.player-section{
    width:95%;
    max-width:1500px;
    margin:25px auto;
}

.player-card{
    background:#fff;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 5px 18px rgba(0,0,0,.15);
}

.player-header{
    background:#1565c0;
    color:white;
    height:60px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 20px;
}

.player-header h2{
    font-size:22px;
}

.live-dot{
    display:inline-block;
    width:10px;
    height:10px;
    border-radius:50%;
    background:red;
    margin-right:8px;
    animation:blink 1s infinite;
}

@keyframes blink{

0%{opacity:1;}

50%{opacity:.2;}

100%{opacity:1;}

}

#fullscreenBtn{

border:none;

background:white;

padding:10px 18px;

border-radius:8px;

cursor:pointer;

font-weight:bold;

}

#fullscreenBtn:hover{

background:#ececec;

}

#mainPlayer{

width:100%;

background:black;

aspect-ratio:16/9;

display:block;

}

/* LIST CCTV */

.camera-section{

width:95%;

max-width:1500px;

margin:30px auto;

}

.camera-section h2{

margin-bottom:20px;

font-size:26px;

color:#1565c0;

}

.camera-grid{

display:grid;

grid-template-columns:repeat(auto-fill,minmax(240px,1fr));

gap:18px;

}

.camera-card{

background:white;

border-radius:12px;

overflow:hidden;

cursor:pointer;

transition:.25s;

box-shadow:0 4px 12px rgba(0,0,0,.15);

}

.camera-card:hover{

transform:translateY(-6px);

box-shadow:0 12px 20px rgba(0,0,0,.18);

}

.camera-thumb{

height:150px;

background:#d9d9d9;

display:flex;

justify-content:center;

align-items:center;

font-size:45px;

color:#888;

}

.camera-info{

padding:15px;

}

.camera-name{

font-size:17px;

font-weight:bold;

margin-bottom:8px;

}

.camera-status{

color:#00a651;

font-size:14px;

font-weight:bold;

}

.camera-card.active{

border:3px solid #1565c0;

}

/* FOOTER */

footer{

margin-top:40px;

padding:20px;

text-align:center;

color:#777;

font-size:14px;

}

/* RESPONSIVE */

@media(max-width:900px){

header{

height:auto;

padding:15px;

flex-direction:column;

text-align:center;

gap:10px;

}

.player-header{

flex-direction:column;

height:auto;

padding:15px;

gap:10px;

}

.camera-grid{

grid-template-columns:repeat(auto-fill,minmax(180px,1fr));

}

.camera-thumb{

height:120px;

}

}