@import url('https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merienda&display=swap');

html, body{
  height: 100%;
  width: 100%;
  font-family: 'Gloria Hallelujah', cursive;
}

a{
  color: rgb(255, 231, 204) ;
}

a:hover{
  color: #fff;
}

body{
    /*background-color: antiquewhite;*/
    font-family: 'Merienda', cursive;
    padding-top:65px;
}


#coffee-nav-item:hover{
    margin-left: 10px !important;
    margin-right: 10px !important;
}


#coffee-nav-item{
  background-color:#5A020Cce;
  border-radius: 25px;
}

@media (min-width: 100px) {
    .animate {
      animation-duration: 0.3s;
      -webkit-animation-duration: 0.3s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both;
    }
}
  
@keyframes slideIn {
    0% {
      transform: translateY(1rem);
      opacity: 0;
    }
    100% {
      transform:translateY(0rem);
      opacity: 1;
    }
    0% {
      transform: translateY(1rem);
      opacity: 0;
    }
}
  
@-webkit-keyframes slideIn {
    0% {
      -webkit-transform: transform;
      -webkit-opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
      -webkit-opacity: 1;
    }
    0% {
      -webkit-transform: translateY(1rem);
      -webkit-opacity: 0;
    }
}
 


.slideIn {
    -webkit-animation-name: slideIn;
    animation-name: slideIn;
}

textarea:focus, 
select:focus, 
select.custom-select:focus, 
textarea.form-control:focus, 
input.form-control:focus, 
input[type=text]:focus, 
input[type=password]:focus, 
input[type=email]:focus, 
input[type=number]:focus, 
[type=text].form-control:focus, 
[type=password].form-control:focus, 
[type=email].form-control:focus, 
[type=tel].form-control:focus, 
[contenteditable].form-control:focus {
  box-shadow: inset 0 -1px 0 #dddddd00,
             1px 1px 6px #ffc107,
             -1px -1px 6px #ffc107;
}

.carousel-inner img{
  width: 100%;
  height: 100%;
}


.jumbotron{
  background-color: antiquewhite;
  color: #71131E;
}

.rounded-bottom{
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

.mycoffee-svg{
  width: 100%;
  padding-left: 50px;
  opacity: 0.8;
  transition: 0.5s;
}

.mycoffee-svg:hover{
  opacity: 1;
  transform: rotate(-60deg);
}

.about-img{
  background-color: #71131E55;
}

.about-img:hover{
  background-color: #71131E77;
}

.my-form{
  background-color: antiquewhite;
}

.my-content{
  background-color: antiquewhite;
}

.my-content h1,
.my-content h2,
.my-content h3{
  color: #71131E;
}

.my-content p{
  transition: 0.5s;
}

.my-content p:before{
  color: #71131E;
  content: '► ';
}

#price{
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: bold;
}

.Item
 {
   margin-top:50px;
   height: 50px;

  }
   .m-banner
   {
      border: none;
   }




   .container_maintenance {
    margin: auto;
    max-width: 1024px;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 1.6;
    position: relative;
    color: #616161 /*#757575*/;
    background-color: #eeeeee;
  }
  
  .container_maintenance .box {
    width: auto;
    height:0px;
    background: #fff;
    margin-top:-100px;
    margin-left: 100px;
    margin-right: 100px;
    border-radius: 5px;
    box-shadow: 6px 18px 18px rgba(0, 0, 0, 0.08),
      -6px 18px 18px rgba(0, 0, 0, 0.08);
  }
  
  .container_maintenance .animation {
    margin-top: 30%;
    display: inline-block;
    margin-bottom: 5%;
  }
  
  .container_maintenance h1 {
    font-size: 32px;
    font-weight: 400;
    text-transform: uppercase;
    margin: 0;
  }
  .container_maintenance p {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
  }
  
  .container_maintenance a {
    color: #009cdd;
    font-weight: bold;
    text-decoration: none;
    margin-left: 5px;
  }
  
  .container_maintenance .one,
  .container_maintenance .two,
  .container_maintenance .three {
    display: block;
    float: left;
  }
  
  .container_maintenance .one {
    background: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%0A%09%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xmlns%3Aa%3D%22http%3A%2F%2Fns.adobe.com%2FAdobeSVGViewerExtensions%2F3.0%2F%22%0A%09%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2281px%22%20height%3D%2280.5px%22%20viewBox%3D%220%200%2081%2080.5%22%20style%3D%22overflow%3Ascroll%3Benable-background%3Anew%200%200%2081%2080.5%3B%22%0A%09%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%09.st0%7Bfill%3A%23d6171b%3B%7D%0A%3C%2Fstyle%3E%0A%3Cdefs%3E%0A%3C%2Fdefs%3E%0A%3Cpath%20class%3D%22st0%22%20d%3D%22M30.3%2C68.2c1.2%2C0.2%2C2.3%2C0.9%2C3.8%2C1.2c1.6%2C0.3%2C2.7%2C0.6%2C4%2C0.4l4.9%2C9.6c0.6%2C0.9%2C1.4%2C1.1%2C2.3%2C0.9l15.3-4.9%0A%09c0.5-0.3%2C1-1%2C0.9-2.3l-1.8-10.6c2-1.6%2C3.6-3.7%2C5.3-5.8l10.5%2C0.6c1.1%2C0.6%2C2.1-0.4%2C2.3-1.1L81%2C40.7c0.2-0.8-0.4-2.1-1.1-2.3l-10.2-3.8%0A%09c-0.3-2.5-1.4-4.8-2.5-7.5l5.9-8.5c0.6-1.1%2C0.4-1.9-0.2-2.9l-12-10.7c-0.3-0.5-1.6-0.3-2.5%2C0.3l-8%2C6.9c-1.2-0.2-2.3-0.9-3.8-1.2%0A%09c-1.6-0.3-2.7-0.6-4-0.4L37.7%2C1c-0.6-0.9-1.4-1.1-2.3-0.9L20.1%2C5c-0.5%2C0.3-1%2C1-0.9%2C2.3l1.8%2C10.6c-2%2C1.6-3.6%2C3.7-5.3%2C5.8L5.3%2C23%0A%09c-0.8-0.2-1.7%2C0.4-2%2C1.6L0%2C40.2c-0.2%2C0.8%2C0.4%2C2.1%2C1.1%2C2.3l9.8%2C3.7c0.7%2C2.6%2C1.4%2C5.2%2C2.5%2C7.5l-6%2C8.9c-0.6%2C0.7-0.4%2C2%2C0.3%2C2.5l12%2C10.7%0A%09c0.7%2C0.5%2C1.9%2C0.8%2C2.4%2C0.1L30.3%2C68.2z%20M26.7%2C37.3c1.6-7.4%2C9.1-12.3%2C16.5-10.8S55.6%2C35.7%2C54%2C43.1c-1.6%2C7.4-9.1%2C12.3-16.5%2C10.7%0A%09C30.1%2C52.3%2C25.1%2C44.7%2C26.7%2C37.3L26.7%2C37.3z%22%2F%3E%0A%3C%2Fsvg%3E");
    width: 80px;
    height: 80px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-top: 20px;
    margin-right: 8px;
  }
  
  .container_maintenance .two {
    background: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%0A%09%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xmlns%3Aa%3D%22http%3A%2F%2Fns.adobe.com%2FAdobeSVGViewerExtensions%2F3.0%2F%22%0A%09%20x%3D%220px%22%20y%3D%220px%22%20width%3D%22103px%22%20height%3D%22103.7px%22%20viewBox%3D%220%200%20103%20103.7%22%0A%09%20style%3D%22overflow%3Ascroll%3Benable-background%3Anew%200%200%20103%20103.7%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%09.st0%7Bfill%3A%23009cdd%3B%7D%0A%3C%2Fstyle%3E%0A%3Cdefs%3E%0A%3C%2Fdefs%3E%0A%3Cpath%20class%3D%22st0%22%20d%3D%22M87.3%2C64.8c0.3-1.5%2C1.1-2.9%2C1.6-4.9c0.4-2%2C0.7-3.5%2C0.5-5.1l12.3-6.3c1.2-0.8%2C1.4-1.8%2C1.1-2.9l-6.3-19.6%0A%09c-0.4-0.6-1.3-1.3-2.9-1.1l-13.5%2C2.3c-2.1-2.5-4.7-4.7-7.4-6.8l0.8-13.4C74.3%2C5.8%2C73%2C4.5%2C72%2C4.3L52.1%2C0c-1-0.2-2.7%2C0.5-2.9%2C1.5%0A%09l-4.8%2C13c-3.2%2C0.4-6.1%2C1.8-9.5%2C3.2l-10.9-7.5c-1.4-0.8-2.5-0.5-3.7%2C0.3L6.5%2C25.8c-0.6%2C0.4-0.4%2C2%2C0.4%2C3.2l8.8%2C10.2%0A%09c-0.3%2C1.5-1.1%2C2.9-1.5%2C4.9c-0.4%2C2-0.7%2C3.5-0.6%2C5.1L1.2%2C55.4c-1.2%2C0.8-1.4%2C1.8-1.1%2C2.9l6.3%2C19.6c0.4%2C0.6%2C1.3%2C1.3%2C2.9%2C1.1l13.5-2.3%0A%09c2.1%2C2.5%2C4.7%2C4.7%2C7.4%2C6.8l-0.8%2C13.4c-0.2%2C1%2C0.6%2C2.2%2C2.1%2C2.5l20%2C4.2c1%2C0.2%2C2.7-0.5%2C2.9-1.5l4.7-12.6c3.3-0.9%2C6.6-1.7%2C9.5-3.2L80.1%2C94%0A%09c0.9%2C0.7%2C2.5%2C0.5%2C3.2-0.4L97%2C78.3c0.7-0.9%2C1-2.4%2C0.1-3.1L87.3%2C64.8z%20M47.8%2C69.5C38.3%2C67.5%2C32%2C57.8%2C34%2C48.3%0A%09c2-9.5%2C11.7-15.8%2C21.2-13.8c9.5%2C2%2C15.7%2C11.7%2C13.7%2C21.2C66.9%2C65.2%2C57.3%2C71.5%2C47.8%2C69.5L47.8%2C69.5z%22%2F%3E%0A%3C%2Fsvg%3E");
    width: 100px;
    height: 100px;
    margin-top: 50px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .container_maintenance .three {
    background: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:a='http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/' x='0px' y='0px' width='81px' height='80.5px' viewBox='0 0 81 80.5' style='overflow:scroll;enable-background:new 0 0 81 80.5;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23d6171b;%7D%0A%3C/style%3E%3Cdefs%3E%3C/defs%3E%3Cpath class='st0' d='M30.3,68.2c1.2,0.2,2.3,0.9,3.8,1.2c1.6,0.3,2.7,0.6,4,0.4l4.9,9.6c0.6,0.9,1.4,1.1,2.3,0.9l15.3-4.9 c0.5-0.3,1-1,0.9-2.3l-1.8-10.6c2-1.6,3.6-3.7,5.3-5.8l10.5,0.6c1.1,0.6,2.1-0.4,2.3-1.1L81,40.7c0.2-0.8-0.4-2.1-1.1-2.3l-10.2-3.8 c-0.3-2.5-1.4-4.8-2.5-7.5l5.9-8.5c0.6-1.1,0.4-1.9-0.2-2.9l-12-10.7c-0.3-0.5-1.6-0.3-2.5,0.3l-8,6.9c-1.2-0.2-2.3-0.9-3.8-1.2 c-1.6-0.3-2.7-0.6-4-0.4L37.7,1c-0.6-0.9-1.4-1.1-2.3-0.9L20.1,5c-0.5,0.3-1,1-0.9,2.3l1.8,10.6c-2,1.6-3.6,3.7-5.3,5.8L5.3,23 c-0.8-0.2-1.7,0.4-2,1.6L0,40.2c-0.2,0.8,0.4,2.1,1.1,2.3l9.8,3.7c0.7,2.6,1.4,5.2,2.5,7.5l-6,8.9c-0.6,0.7-0.4,2,0.3,2.5l12,10.7 c0.7,0.5,1.9,0.8,2.4,0.1L30.3,68.2z M26.7,37.3c1.6-7.4,9.1-12.3,16.5-10.8S55.6,35.7,54,43.1c-1.6,7.4-9.1,12.3-16.5,10.7 C30.1,52.3,25.1,44.7,26.7,37.3L26.7,37.3z'/%3E%3C/svg%3E");
    width: 80px;
    height: 80px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-top: 0px;
    margin-left: -10px;
  }
  
  .container_maintenance .logo {
    background-image: url("https://apps.symper.vn/img/symper-short-logo.4e42aed8.png");
  width: 150px;
    
      height: 150px;
    background-size: contain;
      background-repeat: no-repeat;
      margin-top: -174px;
    
      
  }
  
  @keyframes spin-one {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(-359deg);
      transform: rotate(-359deg);
    }
  }
  
  .spin-one {
    -webkit-animation: spin-one 4.5s infinite linear;
    animation: spin-one 4.5s infinite linear;
  }
  
  @keyframes spin-two {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(-359deg);
      transform: rotate(359deg);
    }
  }
  
  .spin-two {
    -webkit-animation: spin-two 4s infinite linear;
    animation: spin-two 4s infinite linear;
  }




  /*Client**********************************************/
  /* Base Styles */
/*body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f5f5f5;
}*/

.container-fluid {
  padding: 20px;
}

.card {
  margin-bottom: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.card-header {
  background-color: #343a40;
  color: white;
  border-radius: 5px 5px 0 0 !important;
}

.card-header h2 {
  margin: 0;
  font-size: 1.5rem;
}
/* Table Styles */

table.custom-table,
table.location-table {
  width: 95%;
  margin: 20px auto;
  border-collapse: collapse;
}

.custom-table th,
.custom-table td,
.location-table th,
.location-table td,
.systemview-table th,
.systemview-table td
.partsview-table th,
.partsview-table td

{
  border: 1px solid brown; /* ✅ black border for all columns */
  text-align: center;
  padding: 8px;
}

.custom-table thead,
.location-table thead

 {
  background-color: #5A020Cce;   /* dark brown header */
  color: white;
}

.custom-table th:first-child,
.custom-table td:first-child,
.location-table th:first-child,
.location-table td:first-child,
.partsview-table th:first-child,
.partsview-table td:first-child

 {
  background-color: #f5deb3;   /* ✅ light brown first column */
  color: black;
}

table.systemview-table,
table.locationview-table,
table.partsview-table {
  width: 80%;
  margin: 15px auto; /* centers horizontally */
  border-collapse: collapse;
  border: 2px solid brown; /* outside border */
  text-align: center; /* optional: centers text inside cells */
}

.systemview-table th,
.locationview-table th,
.partsview-table th{
  background-color: #c4a367;
  border: 1px solid brown;

}

.systemview-table td,
.locationview-table td {
text-align: justify;
  
}



/* Button Styles */
.btn {
  margin-right: 5px;
  margin-bottom: 5px;
}

.btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}

/* Form Styles */
.form-control {
  margin-bottom: 10px;
}

/* Modal Styles */
.modal-header {
  background-color: #343a40;
  color: white;
}

.modal-title {
  font-weight: 600;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .card-body .row > div {
      margin-bottom: 10px;
  }
  
  .btn {
      width: 100%;
      margin-right: 0;
  }
}




/*system table*/
    .custom-table th,
    .custom-table td {
        border: 1px solid rgb(43, 10, 10);   /* Border for all cells */
        text-align: center;
        vertical-align: middle;
    }

    .custom-table thead th {
        background-color: #8b6a3e !important; /* Header background */
        color: white;
    }

    .custom-table tbody th {
        background-color: #deb887; /* Light brown for first column */
    }




 /* Change text color of pagination links */
    .pagination .page-link {
        color:#443522;
    }

  /* Active page background & text */
    .pagination .page-item.active .page-link {
        background-color: #413220;
        border-color: #443522;
        color: white;
    }

  /* Optional: Hover effect */
    .pagination .page-link:hover {
        color: #5A020C; /* darker brown */
    }   






    
        /* Custom style to remove the default outline and border-right on focus */
        .remove-outline:focus {
          box-shadow: none !important;
          border-color: #ced4da;
          /* Keep the default border color */
        }
    




         /* Remove the default vertical padding from the navbar container */
    .navbar-custom {
        padding-top: 0.25rem; /* Reduced top padding */
        padding-bottom: 0.25rem; /* Reduced bottom padding */
    }

    /* Reduce vertical padding on all the main links */
    .navbar-custom .nav-link {
        padding-top: 0.3rem; /* Reduced top padding for links */
        padding-bottom: 0.3rem; /* Reduced bottom padding for links */
    }

    /* Reduce vertical padding on the brand/logo area */
    .navbar-custom .navbar-brand {
        padding-top: 0.3rem; /* Reduced top padding for brand */
        padding-bottom: 0.3rem; /* Reduced bottom padding for brand */
    }
    
    /* Ensure your logo image is small enough */
    .img-brand {
        height: 1.5rem; /* Example: Set a specific small height for the logo */
        width: auto;
    }

    /* Adjust the search form alignment to ensure it sits nicely at the new height */
    .navbar-collapse .d-flex {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* Custom styles from previous request (included for completeness) */
    .remove-outline:focus {
        box-shadow: none !important;
        border-color: #ced4da;
    }



        html {
          scroll-behavior: smooth;
        }