/*==============================================
BASE.CSS - CÀI ĐẶT NỀN TẢNG VÀ BIẾN MÀU SẮC
==============================================*/
/* Định nghĩa biến màu sắc (CSS variable) để udngf chung cho toàn bộ dự án */
:root {
    --primary-blue: #0033a1; /* Màu xanh lam chủ đạo biểu thị cho dự án công nghiệp */
    --secondary-blue: #2980b9; /* Tương tự màu xanh trên nhưng nhạt hơn */
    --success-green: #27ae60; /* Màu xanh lá biểu thị cho hoàn thành/tốt */
    --warning-yellow: #f39c12; /* Màu vàng hiển thị cho cảnh báo vàng/ trung bình */
    --danger-red: #e74c3c; /* Màu đỏ hiển thị cho cảnh báo vi phạm lỗi */
    --bg-light: #f4f6f9; /* Màu nền xám nhạt cho các khu vực xen kẽ */
    --bg-dark: #1a1a1a; /* Màu nền tối (cho footer, news ticker) */
    --text-main: #2c3e50; /* Màu chữ chính (Đen xám, không dùng đen tuyền) */
    --text-muted: #7f8c8d; /* Màu chữ phụ, chú thích */
    --white: #ffffff; /* Màu nền trắng */
    --border-color: #ecf0f1; /* Màu đường viền nhạt */
    --coal-consumeCcd: #a40db8; /* Màu tiêu hao than ccd */
    --coal-consumeNhietri: #ed5126;/* màu tiêu hao than nhiệt trị */
}
/* Reset CSS, xóa các khoảng trắng thừa trên nền tảng html ban đầu */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Đảm bảo padding không làm phình to kíc thước thẻ */
}

/* Cài đặt body */
body {
    font-family: 'Roboto', sans-serif; /* Dùng font roboto đã khai báo ở thẻ html */
    color: var(--text-main); /* Sử dụng chung màu sắc với biến text-main đã khai báo */
    background-color: var(--white); /* Sử dụng chung màu sắc với biến white */
    line-height: 1.6;
    overflow-x: hidden; /* Chặn cuộn ngang làm vỡ trang web */
}

/* Định dạng chung cho các thẻ header và links */
h1,h2,h3,h4,h5,h6 {
    font-weight: 700;
    line-height: 1.3;
}

a {
    text-decoration: none; /* Bỏ các dấu gạch chân của link */
    color: var(--primary-blue); /* Dùng biến màu xanh đã khai báo */
}

.bg-gray {
    background-color: var(--bg-light); /* Dùng khung nền sáng */ 
}

.text-center {
    text-align: center; /* Căn giữa chữ trong trang web */
}

.text-primary { color: var(--primary-blue); }
.text-success { color: var(--success-green); }
.text-warning { color: var(--warning-yellow); }
.text-danger { color: var(--danger-red); }

.font-bold { font-weight: 700; }
.text-uppercase { text-transform: uppercase;}

.mt-20 { margin-top: 20px; }
.mb-20 { margin-bottom: 20px; }
.mb-40 { margin-bottom: 40px; }

.shadow-box {
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    border-radius: 4px;
    background-color: var(--white);
}

@media screen and (max-width: 1080px){
    body {
        zoom: 0.9;
    }
}