*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
}
html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.section-1{
    width: 100%;
}

.section-1-img img{
  width: 100%;
  height: 70vh;
}

@media (max-width: 768px) {
  .section-1-img img{
    width: 100%;
    height: 50vh;
  }
}

@media (max-width: 480px) {
  .section-1{
      height: auto;
  }
  .section-1-img img{
    width: 100%;
    height: auto;
  }
}
.section-2 {
    display: block;
    padding: 80px 0;
    background-color: #f8f9fa; 
}

.info-project-title {
    opacity: 1;
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
    font-weight: 600; 
    line-height: 1.2;
    font-size: 36px; 
    text-align: center;
    letter-spacing: -0.5px; 
    margin-bottom: 1.5rem;
    transition: color 0.3s ease;
}

.info-project-title:hover {
    color: #27ae60; 
}

.info-project-description {
    opacity: 1;
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #6c757d;
    line-height: 1.7; 
    font-size: 16px;
    text-align: justify;
    width: 100% !important;
    margin-bottom: 1rem;
}

.info-project-description:last-of-type {
    margin-bottom: 0; 
}
.section-2 img{
  width: 26%;
  height: 26%;
  border-radius: 12px;
}

@media (max-width: 768px) {
    .info-project-title {
        font-size: 28px;
        line-height: 1.3;
    }
    
    .info-project-description {
        font-size: 15px; 
        padding: 0 1rem; 
    }
    
    .section-2 {
        padding: 60px 0;
    }
    .section-2 img{
      float: right;
      width: 50%;
      height: 50%;
    }
}
@media (max-width: 480px) {
    .info-project-title {
        font-size: 24px;
    }
    .info-project-description {
        font-size: 14px; 
        padding: 0;
    }
    .section-2 {
        padding: 40px 0;
    }
    .section-2 img{
      float: none;
      display: block;
      margin: 1rem auto;
      width: 70%;
      height: auto;
    }
}
.section-3 img{
  height: 350px;
  object-fit: cover;
}
.number-highlight {
  color: #ffc21a;
  transition: transform 0.3s ease, text-shadow 0.3s ease;
}

.number-highlight:hover {
  transform: scale(1.1);
  text-shadow: 0 0 10px rgba(255, 194, 26, 0.7);
  cursor: pointer;
}

.section-4 {
    color: #363636;
}

.section-4 .card-img-top {
    height: 250px; 
    object-fit: cover; 
    border-radius: 8px 8px 0 0;
}

.section-4 .card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
}

.section-4 .text-success {
    color: #28a745 !important; 
}

@media (max-width: 768px) {
    .section-4 .card-body {
        padding: 1.5rem;
    }
    
    .section-4 .card-text {
        font-size: 0.95rem;
    }
}
.section-5{
    background: linear-gradient(90deg, #f8f9fa 0%, #ffffff 100%);
}
.section-5__image{
  min-height: 420px;          
  background-size: cover;
  background-position: center;
  background-repeat:no-repeat;
}
.nho_sua_1{
  background-image:url(img/avatar2.jpg);
}
.nho_ha_den_1{
  background-image:url(img/nho_ha_den_1.jpg);
}
.section-5__overlay{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.35) 100%);
}

.feature-item .fi-icon{
  width: 44px; height: 44px;
  flex: 0 0 44px;
  display:grid; place-items:center;
  border:1px solid #2fab55;
  color: #2fab55;
  border-radius: 12px;
  background: #f7fff9;
  transition: all .2s ease;
}
.feature-item:hover .fi-icon{
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(47,171,85,.18);
  background:#fff;
}

.verify-badge{
  width:34px;height:34px;border-radius:10px;
  border:2px solid var(--pn-green);
  color:var(--pn-green);
  background:#f7fff9;
  font-size:14px;
}

@media (min-width: 992px){
  .section-5 .col-lg-6.bg-white{
    position:relative;
  }
  .section-5 .col-lg-6.bg-white::after{
    content:"";
    position:absolute; top:0; right:-1px; bottom:0; width:1px;
    background:linear-gradient(to bottom,transparent, #e9ecef 20%, #e9ecef 80%, transparent);
  }
}
.section-5__image {
  position: relative;
  overflow: hidden;
}

.section-5__image:hover::after {
  opacity: 1;
}

.section-6{
    background: url(img/section6.jpg);
}
.btn-register{
  display:inline-block;
  padding: 8px 32px;
  background: #CBB26A;
  font-weight: 600;
  font-size: 14px;
  color: #ffffff;
  cursor:pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
  border: none;
  transition: all 0.3s ease;
}

.btn-register:hover{
  background: linear-gradient(90deg, #ffcf3d, #f7c100);
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 10px 20px rgba(255, 194, 26, 0.4);
}

.btn-register:active{
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(0,0,0,.12) inset;
}

.btn-register:focus-visible{
  outline: 3px solid rgba(255,255,255,.9);
  outline-offset: 2px;
}
.section-7 .heading-underline{
  width: 80px;
  height: 3px;
  background: #ffffff;
  margin: 0 auto;
  border-radius: 999px;
}

.section-7 .avatar-lg{
  width: 78px;
  height: 78px;
  object-fit: cover;
}

@media (max-width: 767.98px){
  .section-7 .display-6{ font-size: 1.75rem; }
}
.section-8{
  background-color: #6f8e05;
}
@media (max-width: 991.98px){
  .section-8 .text-lg-end{ text-align:left !important; }
}

img {
  transition: transform 0.4s ease, filter 0.4s ease;
}
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.footer-img img{
    transform: none;
    filter: none;
}
.reveal {
  opacity: 0;
  animation: fadeUp 0.8s ease forwards;
}
#registerModal .btn-warning{
  background: #ffc21a;
  border: none;
}
#registerModal .btn-warning:hover{
  filter: brightness(1.03);
  box-shadow: 0 8px 18px rgba(255,194,26,.35);
}
/* ===== Modal polish ===== */
.pn-modal{
  border: 0;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,.18);
  overflow: hidden;
}
.pn-modal .modal-header{ padding: 20px 24px 0; }
.pn-modal .modal-body{ padding: 20px 24px 8px; }
.pn-modal .modal-footer{ padding: 0 24px 24px; }

.modal-backdrop.show{ opacity: .35; }
.modal-backdrop{ backdrop-filter: blur(2px); }
#registerModalLabel{
  letter-spacing: -.2px;
}
.pn-label{
  font-weight: 600;
  font-family: "Inter", sans-serif;
  color: #2b2b2b;
  margin-bottom: 6px;
}

.pn-input{
  position: relative;
}
.pn-input.has-icon .pn-icon{
  position: absolute;
  left: 12px; top: 50%; transform: translateY(-50%);
  font-size: 14px; color: #8a9199; pointer-events: none;
}
.pn-input.has-icon .form-control,
.pn-input.has-icon textarea.form-control{
  padding-left: 38px;
}

.pn-input .form-control{
  border: 1px solid #e6e9ef;
  border-radius: 12px;
  padding: 0.8rem 0.95rem;
  font-size: 15px;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
  background-color: #fff;
}
.pn-input textarea.form-control{ padding-top: 0.8rem; padding-bottom: 0.8rem; }

.pn-input .form-control:focus{
  border-color: #ffc21a;
  box-shadow: 0 0 0 .25rem rgba(255, 194, 26, .25);
}

.was-validated .form-control:invalid,
.form-control.is-invalid{
  border-color: #e74c3c;
  box-shadow: 0 0 0 .15rem rgba(231,76,60,.12);
}

.pn-input .form-text{
  color: #8a9199;
  margin-top: 6px;
}
#registerModal .btn-warning{
  background: #ffc21a;
  border: none;
  border-radius: 12px;
  box-shadow: 0 10px 22px rgba(255,194,26,.28);
}
#registerModal .btn-warning:hover{
  filter: brightness(1.03);
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(255,194,26,.34);
}
#registerModal .btn-outline-secondary{
  border-radius: 12px;
  border-color: #e6e9ef;
  color: #4b5563;
}
#registerModal .btn-outline-secondary:hover{
  background-color: #f7f7f9;
  color: #111827;
}

.pn-modal .btn-close{
  filter: grayscale(1) opacity(.6);
}
.pn-modal .btn-close:hover{ filter: none; }

@media (max-width: 575.98px){
  #registerModal .modal-footer{
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  }
  #registerModal .btn{ width: 100%; }
}

.footer{
    width: 100%;
    min-height: 350px;
    display: flex;
    flex: 1;
    background-color: #111827;
    justify-content: space-around;
}