/* =========================================
   Biến màu sắc chủ đạo của HT Gas
========================================= */
:root {
    --primary-color: #0056b3; /* Xanh ngọc - Công nghiệp/An toàn */
    --secondary-color: #fd7e14; /* Cam - Năng lượng/Gas */
}

body { 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    background-color: #f8f9fa; 
}

/* =========================================
   Header & Navbar
========================================= */
.topbar { 
    background-color: #212529; 
    color: #fff; 
    font-size: 0.85rem; 
    padding: 5px 0; 
}
.topbar a { color: #fff; text-decoration: none; margin-right: 15px; }

.navbar-brand { font-weight: 700; color: var(--primary-color) !important; font-size: 1.5rem; }
.nav-link { font-weight: 500; text-transform: uppercase; margin-right: 10px; }
.nav-link:hover { color: var(--secondary-color) !important; }

.btn-quote { background-color: var(--secondary-color); color: #fff; font-weight: bold; }
.btn-quote:hover { background-color: #e86b0c; color: #fff; }

/* =========================================
   Trang chủ (Home)
========================================= */
.hero-section {
    background: linear-gradient(rgba(0, 43, 94, 0.8), rgba(0, 43, 94, 0.8)), url('https://gascongnghiephanoi.com/slider/2940/Slide%201f.jpg') center/cover;
    color: white;
    padding: 100px 0;
}

.product-card { 
    transition: transform 0.3s; 
    border: none; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); 
}
.product-card:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); 
}
.product-img { height: 250px; object-fit: cover; }

.section-title { 
    position: relative; 
    padding-bottom: 15px; 
    margin-bottom: 40px; 
    font-weight: 700; 
    color: var(--primary-color); 
}
.section-title::after { 
    content: ""; 
    position: absolute; 
    left: 50%; 
    bottom: 0; 
    transform: translateX(-50%); 
    width: 60px; 
    height: 3px; 
    background-color: var(--secondary-color); 
}

/* =========================================
   Hiệu ứng Hover & Animations
========================================= */
.product-card { 
    transition: all 0.4s ease; 
    border: none; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    overflow: hidden; /* Để ảnh không tràn ra ngoài khi phóng to */
}

.product-card:hover { 
    transform: translateY(-10px); 
    box-shadow: 0 15px 30px rgba(0,0,0,0.15); 
}

/* Hiệu ứng phóng to ảnh mượt mà */
.product-img { 
    height: 250px; 
    object-fit: cover; 
    transition: transform 0.5s ease; 
}
.product-card:hover .product-img {
    transform: scale(1.1); /* Phóng to ảnh lên 10% */
}

/* Hiệu ứng rung nhẹ icon năng lực (Icon Box) */
.icon-box i {
    transition: transform 0.3s ease, color 0.3s ease;
}
.icon-box:hover i {
    transform: scale(1.2) rotate(5deg);
    color: var(--secondary-color) !important;
}