/* Tổng quát */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
    box-sizing: border-box;
    font-size: 16px; /* Cơ sở cho các giá trị rem */
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

/* Header */
.header {
    background-color: #000;
    padding: 1rem 0;
}

.header .container {
    max-width: 75rem; /* 1200px */
    margin: 0 auto;
 /*   padding: 0 1.25rem; /* 20px */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header .logo img {
    height: 3.125rem; /* 50px */
    max-width: 100%;
}

.header nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.header nav ul li {
    margin: 0 0.625rem; /* 10px */
    position: relative; /* Make sure the dropdown is positioned relative to its parent */    
}

.header nav ul li a {
    color: #fff;
    text-decoration: none;
    padding: 0.625rem; /* 10px */
    font-size: 1rem;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.header nav ul li a:hover {
    background-color: #007bff;
    border-radius: 0.3125rem; /* 5px */
}

/* Dropdown Menu */
.header nav ul li .dropdown-content {
    display: none; /* Hide the dropdown content initially */
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.header nav ul li .dropdown-content li {
    clear: both;
    color: black;
    text-align: left;
}

.header nav ul li .dropdown-content li a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 1rem;
}

.header nav ul li .dropdown-content li a:hover {
    background-color: #f1f1f1;
}

.header nav ul li:hover .dropdown-content {
    display: block; /* Show the dropdown content when hovering over the parent */
}

.header nav ul li.dropdown .dropbtn::after {
    content: ' ▼';
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Banner */
.responsive-banner {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Nội dung chính */
.content-container {
    max-width: 75rem; /* 1200px */
    margin: 1.25rem auto; /* 20px */
    padding: 1.25rem; /* 20px */
    background: #fff;
    border-radius: 0.625rem; /* 10px */
    box-shadow: 0 0.125rem 0.3125rem rgba(0, 0, 0, 0.1); /* 0 2px 5px */
}

/* Phần dịch vụ */
.section-title {
    text-align: center;
    font-size: 1.5rem; /* 24px */
    margin-bottom: 1.25rem; /* 20px */
}

.services-section {
    padding: 1.25rem 0; /* 20px */
}

.services-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem; /* 20px */
    justify-content: center;
}

.service-box-main{
    flex: 1;
    max-width: 33%;
 /*   min-width: 17.5rem;  280px */
    background: #090909;
    padding: 1.25rem; /* 20px */
    border-radius: 0.625rem; /* 10px */
    text-align: center;
    box-shadow: 0 0.125rem 0.3125rem rgba(0, 0, 0, 0.1); /* 0 2px 5px */
    transition: transform 0.2s ease;
}

.service-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 30px;
}

.service-icon {
  background: #ffffff;
/*  border: 2px solid #333333; */
  border-radius: 50%;
  color: #007bff;
  font-size: 32px;
  height: 50px;
  line-height: 50px;
  margin-right: 15px;
  text-align: center;
  width: 50px;
}

/* Gói dịch vụ IT chuyen nghiệp */
.service-box2 {
  display: flex;
  align-items: center;
  background-color: #f8f9fa;;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    height: 100%;
}

.service-icon2 {
  background: #ffffff;
/*  border: 2px solid #333333; */
  border-radius: 50%;
  color: #007bff;
  font-size: 32px;
  height: 50px;
  line-height: 50px;
  margin-right: 15px;
  text-align: center;
  width: 50px;
}

.service-column2 {
  flex: 1 1 30%;
  margin-bottom: 20px;
  padding: 0 5px;
  box-sizing: border-box;
}

.service-row2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 15px;
}

/* Các câu hỏi thường gặp */
.faq-section {
  display: flex;
  align-items: flex-start;
  padding: 20px;
  background-color: #f8f9fa;
}

.faq-image {
  max-width: 40%;
  margin-right: 20px;
}

.faq-content {
  max-width: 60%;
}

.faq-content h2 {
  font-size: 24px;
  margin-bottom: 20px;
}

.faq-item {
  margin-bottom: 20px;
}

.faq-question {
  font-weight: bold;
  margin-bottom: 5px;
}

.faq-answer {
  margin-bottom: 10px;
}

/*Số liệu */
.statistics {
  display: flex;
/*  flex-wrap: wrap; */
  justify-content: space-around;
  align-items: center;
  padding: 20px;
  background-color: #f8f9fa;
}

.stat-item {
  text-align: center;
  margin: 10px;
  flex: 1 1 25%;
  box-sizing: border-box;
}

.stat-icon {
  font-size: 3em; /* Kích thước icon */
  color: #007bff; /* Màu icon */
}

.stat-number {
  font-size: 1.0em;
  font-weight: bold;
  color: #343a40;
}

.stat-label {
  font-size: 1.0em;
  color: #6c757d;
}

  .service-column {
    flex: 1 1 100%;
    margin-bottom: 20px;
    padding: 0 10px;
  }
  
.service-box {
    flex: 1;
    max-width: 100%;
    min-width: 100%;
    background: #f9f9f9;
    padding: 1.25rem; /* 20px */
    border-radius: 0.625rem; /* 10px */
 /*   text-align: center; */
    box-shadow: 0 0.125rem 0.3125rem rgba(0, 0, 0, 0.1); /* 0 2px 5px */
    transition: transform 0.2s ease;
}

.service-box:hover {
    transform: translateY(-0.3125rem); /* -5px */
}

.service-icon {
    font-size: 3.125rem; /* 50px */
    color: #007bff;
    margin-bottom: 0.625rem; /* 10px */
}

.service-content h3 {
    font-size: 1.25rem; /* 20px */
    margin-bottom: 0.625rem; /* 10px */
    color: #007bff;
}

.service-content p {
    font-size: 0.875rem; /* 14px */
    color: #fff;
}

.service-link {
    display: inline-block;
    margin-top: 0.625rem; /* 10px */
    padding: 0.5rem 1rem; /* 8px 16px */
    background-color: #007bff;
    color: #fff;
    border-radius: 0.3125rem; /* 5px */
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.service-link:hover {
    background-color: #0056b3;
}

.service-box.it-outsourcing {
  display: flex;
  justify-content: space-between;
  width: 80%; /* Reduce width to 90% */
}

.service-box.it-outsourcing .service-content {
  display: flex;
  flex: 1;
  justify-content: space-between;
}

.service-box.it-outsourcing .service-content .it-services {
  width: 55%; /* Occupy 55% of the width */
  text-align: left; /* Align text to the left */
}


/* Phần dịch vụ IT Outsourcing */
.it-outsourcing .service-details {
    text-align: left;
 /*   margin-top: 0.9375rem; /* 15px */
}

.service-details {
    flex: 0 0 45%; /* Chiếm 45% không gian */
}

.it-services {
    flex: 0 0 45%; /* Chiếm 45% không gian */
    list-style: none;
    padding: 0;
}

.it-services li {
    display: flex;
/*    align-items: center; */
    margin-bottom: 0.625rem; /* 10px */
}

.it-services li i {
    font-size: 1.25rem; /* 20px */
    color: #007bff;
    margin-right: 0.625rem; /* 10px */
}

.it-services li div {
    font-size: 0.875rem; /* 14px */
    color: #333;
}

.it-services li div strong {
    display: block;
    font-weight: bold;
}

/* Footer */
footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 0.625rem 0; /* 10px */
}

footer p {
    margin: 0;
    font-size: 0.875rem; /* 14px */
}

/* Thiết kế đáp ứng (Responsive Design) */
@media (max-width: 75rem) { /* 1200px */
    .service-box {
        max-width: 45%;
    }
}

@media (max-width: 48rem) { /* 768px */
    .header .container {
        flex-direction: column;
        text-align: center;
    }

    .header nav ul {
        flex-direction: column;
        align-items: center;
    }

    .header nav ul li {
        margin-bottom: 0.625rem; /* 10px */
    position: relative; /* Make sure the dropdown is positioned relative to its parent */        
    }

    .services-grid {
        flex-direction: column;
        align-items: center;
    }

    .service-box {
        max-width: 90%;
    }
}


.phone-support {
  position: fixed;
  bottom: 10px;
  right: 10px;
  background-color: #28a745;
  color: white;
  padding: 5px 15px;
  border: 1px solid #28a745;
  border-radius: 5px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  z-index: 1000;
}

.phone-support img {
  margin-right: 10px;
}

.phone-support p {
  margin: 0;
}

.phone-support strong {
  font-size: 16px;
}

.contact-info {
  background-color: black;
  padding: 20px;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  color: #fff;
}

.company-name {
  font-size: 24px;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.address, .phone, .email {
  margin-bottom: 10px;
}

/*table*/


table {
  width: auto;
  border-collapse: collapse;
  margin-bottom: 2em;
  height: auto;
}

table, th, td {
  border: 1px solid #ddd;
}

th, td {
  padding: 8px;
  text-align: left;
  width: 50%;
  background-color: #f8f9fa;;  
}

th {
  background-color: #0aafff;
}