@charset "utf-8";
/* CSS Document */
*{
	margin: 0;padding: 0;box-sizing: border-box
}
body{
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";background-color: antiquewhite;width: 100%;height: 100%
}
h2{
	font-weight: bold
}

header{
	width: 100%;height: 70px;position: absolute;left: 0;top: 0;z-index: 10
}
.small{
	width: 40px
}
.logo-container{
	display: flex;align-items: center
}
.logo-text{
	font-size: 18px;font-weight: bold;color: white;display: flex;line-height: 1;flex-direction: column;justify-content: center
}
.menu ul{
	margin: 0;padding: 0;list-style: none;display: flex
}
.menu ul li {
	position: relative
}
.menu ul li a{
	padding: 10px 20px; text-decoration: none; font-size: 17px;display: block
}
.menu ul li a:hover{
	color: white
}
.menu .dropdown{
	position: absolute;left: 0;top: 100%;display: flex;flex-direction: column;width: 230px
}
.banner{
	width: 100%;min-height: 600px;position: relative
}
footer{
	width: 100%;min-height: 200px;background-color: brown
}
.icon i{
	color: white; font-size: 18px; padding: 10px
}
.icon a{
	color: white;font-size: 14px; text-decoration: none
}
.address{
			color: white
	}
.address a{
	text-decoration: none; color: white
}
.real{
	align-content: center;background-color: rgba(0,0,0,0.60);align-items: center;display: flex;justify-content: center
}
.banner .cover{
	width: 100%;height: 100%;position: absolute;left: 0;top: 0;background-color: rgba(0,0,0,0.50);z-index: 2;pointer-events: none
}
.caption{
	position: absolute;width: 30%
}
.caption h1{
	line-height: 80px
}
/* ========== RESPONSIVE ========== */

@media (max-width: 768px) {
  /* Header */
  header {
    height: auto;
    position: static;
  }

  .logo-container {
    flex-direction: row;
    justify-content: space-between;
    padding: 10px;
  }

  .logo-text {
    font-size: 16px;
    text-align: right;
  }

  .menu {
    display: none;
    flex-direction: column;
    width: 100%;
    background: white;
  }

  .menu ul {
    flex-direction: column;
    width: 100%;
  }

  .menu ul li a {
    padding: 12px;
    border-top: 1px solid #eee;
    font-size: 16px;
  }

  .menu ul li {
    width: 100%;
  }

  .menu .dropdown {
    position: static;
    display: none;
    width: 100%;
    background: #f7f7f7;
  }

  .menu ul li:hover .dropdown {
    display: block;
  }

  .menu-toggle {
    display: block;
    padding: 10px;
    font-size: 24px;
    color: white;
    cursor: pointer;
  }

  /* Banner */
  .caption {
    width: 90%;
    left: 5%;
    text-align: center;
    top: 20%;
    transform: translateY(0);
	 position: absolute
  }

  .caption h1 {
    font-size: 2rem;
    line-height: 1.4;
  }

  .caption p {
    font-size: 1.1rem;
    line-height: 1.6;
  }

  /* Hình ảnh */
  .img-100 {
    width: 100%;
    height: auto;
  }

  /* Footer */
  footer .row {
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }

  footer .col-2,
  footer .col-3,
  footer .col-7 {
    width: 100%;
  }

  .icon i {
    font-size: 16px;
  }

  .icon a {
    font-size: 14px;
  }

  .real {
    font-size: 12px;
    padding: 10px;
    text-align: center;
  }
}
$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);
.btn-danger{
	background-color: rgba(165,42,42,1.00)
}
section{
	min-height: 200px
}
.grid-container {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      border-top: 1px solid #666;
      border-left: 1px solid #666;
    }

    .grid-item {
      border-right: 1px solid #666;
      border-bottom: 1px solid #666;
      padding: 40px 20px;
      text-align: center;
    }

    .grid-item b {
      margin-bottom: 10px;
      display: block;
    }

    .highlight {
      color: #fff;
      font-weight: bold;
    }

    .subtext {
      font-weight: normal;
    }
.border-box{
	border: 1px solid; height: 100%;text-align: center
}
.navbar.nav-link:hover{
	color: white
}
/* Khung dịch vụ */
.service-box {
  background-color: #fcebd3;
  overflow: hidden;
  border: 1px solid #734322;
  transition: all 0.3s;
}

/* Tiêu đề khung */
.service-header {
  padding: 20px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.3s;
}

.service-header:hover {
  background-color: #f0d8b4;
}

/* Mũi tên */
.service-header .arrow {
  transition: transform 0.3s;
}

.service-header.active .arrow {
  transform: rotate(180deg);
}

/* Nội dung xổ xuống */
.service-content {
  display: none;
  padding: 15px;
  border-top: 1px solid #e0c49a;
  animation: fadeIn 0.3s ease-in-out;
  text-align: left
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Responsive dưới 768px: xếp dọc */
@media (max-width: 768px) {
  .col-lg-3 {
    width: 100%;
  }
}
.navbar.bg-dark {
  background-color:transparent !important;
}
.sp:hover{
	color: blue
}
/* Kiểu dáng chung cho các nút */
.contact-buttons-fixed {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 15px; /* Khoảng cách giữa các nút */
}

.contact-button {
    width: 50px;
    height: 50px;
    border-radius: 50%; /* Hình tròn */
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

/* Hiệu ứng khi di chuột qua */
.contact-button:hover {
    transform: scale(1.1);
}

/* Kiểu dáng riêng cho từng nút */
.zalo-button {
    background-color:  #FFFFFF;
}
.messenger-button {
    background-color: #0078ff;
}
.phone-button {
    background-color: #3cb46a;
}