:root {
      --primary-color: #EF1917; /* Nâu 8B4513*/
      --secondary-color: #D4AF37; /* Vàng DAEC4A*/
      --accent-color: #800000; /* Đỏ sẫm EF1917*/ 
      --light-color: #F5F5F5; /* Trắng nhẹ */
      --dark-color: #333333; /* Đen nhẹ */
      --gray-color: #E0E0E0; /* Xám nhẹ */
    }
    
    body {
      font-family: 'Roboto', sans-serif;
      color: var(--dark-color);
      background-color: var(--light-color);
    }
    
    .navbar {
      background-color: var(--primary-color);
    }
    
    .navbar-brand {
      font-weight: 700;
      color: white !important;
    }
    
    .hero-section {
      background: linear-gradient(rgba(139, 69, 19, 0.8), rgba(139, 69, 19, 0.8)), url('images/main-visual.jpg') no-repeat center center;
      background-size: cover;
      color: white;
      padding: 5rem 0;
      position: relative;
    }
    
    .hero-content {
      z-index: 1;
      position: relative;
    }
    
    .lawyer-profile {
      border: 3px solid var(--secondary-color);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    
    .section-title {
      color: var(--primary-color);
      border-bottom: 2px solid var(--secondary-color);
      padding-bottom: 0.5rem;
      margin-bottom: 2rem;
    }
    
    .service-card {
      background-color: white;
      border-radius: 5px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      margin-bottom: 1.5rem;
      height: 100%;
    }
    
    .service-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    }
    
    .service-icon {
      font-size: 2.5rem;
      color: var(--secondary-color);
      margin-bottom: 1rem;
    }
    
    .service-card h3 {
      color: var(--accent-color);
      font-size: 1.25rem;
      margin-bottom: 1rem;
    }
    
    .contact-info {
      background-color: var(--primary-color);
      color: white;
      padding: 2rem;
      border-radius: 5px;
    }
    
    .contact-info a {
      color: var(--secondary-color);
      text-decoration: none;
    }
    
    .contact-info a:hover {
      text-decoration: underline;
    }
    
    .footer {
      background-color: var(--dark-color);
      color: white;
      padding: 2rem 0;
    }
    
    .map-container {
      height: 350px;
      border-radius: 5px;
      overflow: hidden;
    }
    
    .service-list li {
      margin-bottom: 0.5rem;
    }
    
    @media (max-width: 768px) {
      .hero-section {padding: 3rem 0; }
      .hero-content h3.text-white-50 {font-size: 1.2rem; }
      
      .map-container {
        height: 250px;
        margin-top: 1.5rem;
      }
    }