<style>
@font-face {
font-family: 'Trirong';
src: url('../fonts/Trirong-Bold.woff2') format('woff2'),
     url('../fonts/Trirong-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Trirong';
src: url('../fonts/Trirong-Regular.woff2') format('woff2'),
     url('../fonts/Trirong-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
a, p {
color: black;
text-decoration: none;
text-align: center;
font-size: 14px;
}
strong, b {
font-weight: 700;
}

body {
font-family: 'Trirong', sans-serif;
background-color: black;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 0px;
box-sizing: border-box;
}

.container {
text-align: center;
}
.table-container {
width: 320px;
border: 5px solid red;
border-radius: 15px 15px 0 0;
overflow: hidden;
transition: all 0.3s ease;
margin: 0 auto;
}
.table-monitor {
width: 100%;
border-collapse: separate;
border-spacing: 0;
table-layout: fixed;
}
.table-monitor th, 
.table-monitor td {
padding: 10px;
text-align: center;
}
.table-monitor th {
color: #fff;
font-size: 18px;
}
.table-monitor td {
background-color: white;
font-size: 36px;
color: black;
}
.status {
font-size: 24px;
padding: 10px;
text-align: center;
margin-top: 0px;
border-radius: 0 0 15px 15px;
color: white;
transition: all 0.3s ease;
}
.fan-on {
background-color: #FF5722;
border-color: #FF5722;
}
.fan-off {
background-color: #008CBA;
border-color: #008CBA;
}
.comfortable {
background-color: #4CAF50;
border-color: #4CAF50;
}
.unknown {
background-color: gray;
border-color: gray;
color: black;
}
.table-container.fan-on {
border-color: #FF5722;
}
.table-container.fan-off {
border-color: #008CBA;
}
.table-container.comfortable {
border-color: #4CAF50;
}
.table-container.unknown {
border-color: gray;
}
.table-monitor.fan-on th {
background-color: #FF5722;
}
.table-monitor.fan-off th {
background-color: #008CBA;
}
.table-monitor.comfortable th {
background-color: #4CAF50;
}
.table-monitor.unknown th {
background-color: gray;
color: black;
}
</style>
