@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;
         src:url('fonts/montserrat-v14-latin-regular.eot');
         src:local('Montserrat Regular'),local('Montserrat-Regular'),
         url('fonts/montserrat-v14-latin-regular.eot?#iefix') format('embedded-opentype'),
         url('fonts/montserrat-v14-latin-regular.woff2') format('woff2'),
         url('fonts/montserrat-v14-latin-regular.woff') format('woff'),
         url('fonts/montserrat-v14-latin-regular.ttf') format('truetype'),
         url('fonts/montserrat-v14-latin-regular.svg#Montserrat') format('svg');
}
body{margin:0;background:#f9fafc;color:#1a2330;font-family:'Inter',sans-serif;}
a{text-decoration:none;color:inherit;}
.header{background:#233040;color:#fff;padding:1em 0;box-shadow:0 2px 10px #0002}
.header-flex{display:flex;align-items:center;justify-content:space-between}
.logo-blk{display:flex;align-items:center;gap:15px}.logo-img{height:56px;}.brand{margin:0;font-size:2em;font-weight:700}.slogan{font-size:.9em;color:#b7bfd0;}
.nav{display:flex;gap:20px;align-items:center}.nav a{color:#fff;font-weight:600;position:relative;padding:7px 15px}.nav a.hotline{background:#e94848;color:#fff;border-radius:8px;padding:7px 20px}
.hero{background:linear-gradient(90deg,#233040,#3a4b5c);color:#fff;padding:2.8em 0 2.2em;text-align:center;}
.hero h2{font-size:2em;font-weight:700;margin:0 0 10px}
.container{max-width:1140px;margin:0 auto;padding:0 15px;}
.main-section{padding:30px 0 40px}
.controls{display:flex;gap:16px;margin:0 0 24px;align-items:flex-end}
.search{padding:10px 14px;border-radius:6px;border:1px solid #c4ccd6;flex:1 1 280px;}
select{padding:9px 11px;border-radius:6px;border:1px solid #c4ccd6;}
table{border-collapse:collapse;width:100%;margin:25px 0 40px;box-shadow:0 1px 6px #23304020;border-radius:10px;overflow:hidden;font-size:1em;background:#fff}
th,td{padding:13px 12px;}
th{background:#233040;color:#fff;text-align:left;font-weight:700;font-size:1.03em;}
tbody tr:nth-child(odd){background:#f6f7fc}tbody tr:nth-child(even){background:#f0f2f8}
tbody tr:hover{background:#eceffc}
.status-act{background:#38b97e;color:#fff;padding:2px 11px;border-radius:999px;font-size:.92em}
.status-inact{background:#e94848;color:#fff;padding:2px 11px;border-radius:999px;font-size:.92em}
.price{color:#e94848;font-weight:700;}
.color-dot{display:inline-block;width:15px;height:15px;border-radius:100%;margin-right:7px;vertical-align:middle;border:1.5px solid #dfdfdf}

/* Màu Sắc Cơ Bản */
.color-dot.black { background: #000000; }
.color-dot.white { background: #FFFFFF; }
.color-dot.silver { background: #E5E4E2; }
.color-dot.gold { background: #FCD698; }
.color-dot.gray { background: #808080; }
.color-dot.yellow { background: #FFEB3B; }
.color-dot.sage { background: #A8B3A7; }

/* Màu Xanh Lam */
.color-dot.blue { background: #276C75; }
.color-dot.deepblue { background: #004F78; }
.color-dot.mistblue { background: #A7C1D1; }
.color-dot.skyblue { background: #89CFF0; }

/* Màu Tím và Tím Đậm */
.color-dot.deeppurple { background: #514364; }
.color-dot.lavender { background: #E1CCF1; }

/* Màu Đặc Biệt */
.color-dot.cosorange { background: #C75F00; }
.color-dot.cloudwhite { background: #F7F7F7; }
.color-dot.desert { background: #D4A77D; }
.color-dot.lightgold { background: #FDF7E0; }
.color-dot.natural { background: #C9C5C0; }
.color-dot.spaceblack { background: #222222; }

.footer{padding:35px 0 10px;background:#233040;color:#f7f9fc;}
.fgrid{display:grid;grid-template-columns:1fr 1fr 1fr 2fr;gap:18px;margin-bottom:18px;font-size:1em;}
.logo-img-sm{height:38px;vertical-align:middle;margin-right:40px;margin-top: 40px;}
.footer-copy{text-align:center;color:#96a2b7;font-size:.98em}
@media(max-width:900px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.header-flex,.fgrid{flex-direction:column;display:flex;gap:10px}.nav{gap:7px}.nav a{font-size:.95em;padding:6px 7px}.logo-img{height:42px}.brand{font-size:1.23em}}
footer h3 {margin:0;}
footer p {
	margin-top: 0;
    margin-bottom: 5px;
}
footer .fgrid {
    grid-template-columns: 2fr 1fr 1fr 2fr;
    gap: 40px;
	margin-bottom: 30px;
}
.footer {
    padding-top: 10px;	
    padding-bottom: 0;
}
.footer-copy {
    padding: 10px;
    border-top: 1px solid #96a2b7;
}
.social {
    margin-top: 15px;
}
.social-item img {
    width: 30px;
    height: 30px;
    border-radius: 5px;
}
.social-item {
    display: inline-block;
    margin-right: 20px;
    position: relative;
}