:root {
  --indigo: #2C3E50;
  --white: #F8F5F0;
  --wood: #8B5A2B;
  --wine: #7B2C2C;
  --earth: #D8C7B6;
  --yellow:#ffdc8e;
}


.btn {font-weight: bold; text-transform: uppercase; padding:15px 30px; border-radius:30px; margin:10px}
.btn-contact {background: var(--wine); color:white; }
.btn-contact:hover {color:white}
.btn:hover {transform:scale(1.1);}
.container.text-center {z-index: 99}
/* ========== GENERAL ========== */
body, .landing-b2b {
  font-family: 'Mulish', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  background-color: var(--white);
  color: var(--indigo);
}
.visible {z-index: 2}
.section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}
.section .container {z-index: 1; position: relative;}
.section .img-responsive {max-height: 700px; object-fit: contain;}

h1, h2, h3, h4 {
  font-weight: 700;
}

a, a:hover {
  text-decoration: none;
}

/* ========== HERO ========== */
.hero {
  position: relative;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  text-align: center;
  color: #fff;
  min-height: 100vh;
}
.hero .logo {filter:invert(1) brightness(100) drop-shadow(0 0 50px black); width:300px;   }
 
.hero h1 {
  font-size: 50px;
  margin-bottom: 15px; margin:0;
  font-weight: 800; text-shadow: 0 0 50px black;
}
.hero h2 {text-shadow: 0 0 50px black; margin:0}
.hero .sub {
  font-size: 16px;
  margin-bottom: 30px;
  opacity: 0.95;
}
.btn-login {
  background: var(--wood);
  color: #fff;
  position: fixed;
  bottom: 20px; right: 20px;
  padding: 14px 38px;
  border-radius: 30px;
  font-weight: 600;
  transition: all 0.3s ease;
  z-index: 9999;
}
.btn-login:hover {
  background: var(--wine);
}

/* ========== INTRO ========== */
.section-intro {background: var(--white)}
.section-intro .text-col {font-size: 18px; letter-spacing: 2px; line-height: 1.8; text-align: justify; }
.section-intro img {
  border-radius: 8px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}
.heading {
  text-transform: uppercase;
  font-size: 30px; line-height: 1.5;
  margin-bottom: 20px;
}
.text-wood { color: var(--wood); }
.text-indigo { color: var(--indigo); }
.text-white {color:var(--white)}
.text-wine {color:var(--wine)}

.text-black {color:#333 !important}
.text-black .highlight {color:var(--wine); font-weight: bold}

.bg-wood {background: var(--wood) !important; color:white !important}
.bg-wine {background: var(--wine) !important; color:white !important}

.bg-indigo {background: var(--indigo) !important; color:white !important}


/* ========== STATS ========== */
.section-stats {
  text-align: center;
}
.section-stats h3 {
  color: var(--earth);
  font-size: 28px;
  font-weight: 800;
}
.section-stats strong {
  color: var(--indigo);
  font-size: 18px;
}

/* ========== PARALLAX SECTIONS ========== */
.parallax {
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  color: #fff;
}
 

/* ========== OFFER PANELS ========== */
.offer-panel {
  padding: 35px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}
.offer-panel.green h4 { color: #2E8B57; }
.offer-panel.brown h4 { color: var(--wood); }
.offer-panel:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}

/* ========== SERVICE BOXES ========== */
.services-section {
background-color: var(--wood);
    position: relative;
    background-image: url(https://slategrey-cormorant-969191.hostingersite.com/templates/images/pattern/pattern2.webp);
    background-size: contain;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
}
 
.timeline-section {
background-color: var(--indigo);
    position: relative;
    background-image: url(https://slategrey-cormorant-969191.hostingersite.com/templates/images/pattern/pattern2.webp);
    background-size: contain;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
}

/* ========== DIFFERENT SECTION ========== */
.different .diff-box {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
  padding: 10px;
  transition: all 0.3s ease;
}
.different .diff-box img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 10px;
  transition: transform 0.7s ease;
}
.different .diff-box:hover img {
  transform: scale(1.05);
}
.different .diff-box h4 {
  color: var(--indigo);
  font-size: 16px;
  font-weight: 600;
}
 
/* ========== CONTACT ========== */
.contact {
  background: var(--wood);
  color: #fff;
  text-align: center;
}
.contact a {
  color: #fff;
  font-weight: 600;
}
.contact h3 {
  font-size: 26px;
  margin-bottom: 10px;
}

/* ========== FADE-UP / ZOOM-IN ANIMATION ========== */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-up.visible {
  opacity: 1;
  transform: none;
}
.zoom {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.zoom.visible {
  opacity: 1;
  transform: scale(1);
}


/* ========== OFFER SECTION NEW STYLE ========== */
.offer-section {
  background: var(--white);
  color: var(--indigo);
  min-height: 100vh;
}
 
.offer-text {
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: left;
}
.offer-text .inner {
  padding: 0;
  max-width: 600px;
}
 
.offer-text p {
  font-size: 16px;
  margin-bottom: 20px;
  color: var(--indigo);
}
.offer-text hr {
  border-top: 1px solid var(--earth);
  margin: 25px 0;
}
.offer-text .sub-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .3px;
  margin-bottom: 18px;
}

.offer-box {
  margin-bottom: 20px;
}
.offer-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #E6DAD0;
  border-radius: 25px;
  padding: 12px 25px;
  font-size: 16px;
  font-weight: 600;
  color: var(--indigo);
  margin-bottom: 14px;
}
.offer-line strong {
  color: var(--wine);
}
.offer-line .arrow {
  font-size: 20px;
  font-weight: 700;
  color: var(--wood);
  margin: 0 10px;
}
.offer-text .note {
  font-size: 14px;
  margin-top: 15px;
  font-style: italic;
  color: var(--indigo);
  opacity: 0.9;
}

.offer-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100vh;
}


/* ===== FOOTER — PDF STYLE ===== */
.contact-footer {
  color:#fff; min-height:100vh; position:relative;
}
.contact-footer .overlay-dark{
  position:absolute; inset:0; background:rgba(0,0,0,.55);
  display:flex; align-items:center; justify-content:center; text-align:center; padding:40px 20px;
}

.footer-logo{
  width:300px; height:auto; margin-bottom:22px; opacity:.95; filter:invert(1) brightness(100);
}
.footer-title{
  font-size:48px; font-weight:800; letter-spacing:.6px;
  margin:0 0 30px; text-transform:uppercase;
}
.footer-contacts{ margin-top:10px; }
.footer-col{ margin-top:10px; }
.footer-col h4{
  font-size:22px; font-weight:700; letter-spacing:.4px; margin-bottom:6px;
}
.foot-sub{
  font-size:16px; margin-bottom:14px;  margin-top:0; height: 50px;
}
.foot-sub a{
  color:#fff; text-decoration:underline; text-underline-offset:3px; word-break: break-all;
}
.qr{
  width:160px;  object-fit:contain; background:#fff; padding:8px; border-radius:6px;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}

 

/* =====================================================
   SECTION-HALF (2 cột ảnh + chữ, căn giữa dọc)
   ===================================================== */
.section-half {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  overflow: hidden;
}

.section-half .row {
  display: flex;
  align-items: stretch;
  width: 100%;
  margin: 0;
}

.section-half div[class^=col-md] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 50px 30px;
}

.section-half div[class^=col-md]>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Khi muốn đảo vị trí (ảnh trái, chữ phải) */
.section-half.reverse .row {
  flex-direction: row-reverse;
}

/* ===================================================
   TOP 1 VỀ SPA CHĂM SÓC SỨC KHỎE SECTION
   =================================================== */
.top1-section {
  color: #fff;
  text-align: center;
  position: relative;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  min-height: 100vh;
}
.top1-section .overlay-dark {
  background: rgba(0,0,0,0.55);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 60px 20px;
  z-index: 0;
}
 
.top1-title .highlight {
  color: #ffc107; /* vàng nổi bật */
}
.desc {
  font-size: 15px;
  max-width: 750px;
  margin: 0 auto 50px;
  color: #f8f5f0; text-align: center;
  opacity: 0.95;
}

/* BOXES */
.top1-cards {
  max-width: 900px;
  margin: 0 auto; text-align: center;
}
.rating-box {
  background: var(--indigo); color:white;
  border-radius: 12px;
  padding: 10px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0,0,0,0.3);
  transition: transform 0.4s ease;
  margin: 15px 0;
}
.rating-box:hover {
  transform: translateY(-6px);
}
.platform {font-weight: bold; margin-bottom: 10px}
.platform-logo {
  width: 90px !important;
  height: auto;
  position: relative;
  z-index: 1;
}
.rating-box h3 {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  position: relative;
  z-index: 1;
}
.rating-box h3 small {
  font-size: 20px;
  font-weight: 400;
}
.stars {
  color: #ffc107;
  font-size: 20px;
  letter-spacing: 2px;
  position: relative;
  z-index: 1;
}
.rating-box p {
  font-size: 12px;
  position: relative;
  z-index: 1; margin:0;
}

 
.discount-section {background: #ede6df}

.discount-section .desc {width: 100%; text-align: left; margin:0 0 25px 0}

.profit-section {
  background: var(--white);
  color: var(--indigo);
  position: relative;
  overflow: hidden;
  padding: 120px 15px 100px;
}
 
/* Tiêu đề & mô tả */
.profit-title {
  font-size: 40px;
  font-weight: 800;
  color: var(--wood);
  margin-bottom: 15px;
}
.profit-sub {
  font-size: 18px;
  margin-bottom: 60px;
}
.profit-sub .highlight {
  color: var(--wine);
  font-weight: 700;
}

/* 2 box doanh thu */
.profit-boxes {
  max-width: 900px; display: flex; justify-content: space-between; gap:20px;
}
.profit-card {
  background: var(--wood);
  color: #fff; width: 50%;
  border-radius: 25px;
  padding: 40px 20px 35px;
  margin-bottom: 25px; text-align: center;
  box-shadow: 0 6px 25px rgba(0,0,0,0.15);
  transition: transform .3s ease;
}
.profit-card:hover {
  transform: translateY(-6px);
}
.profit-card h4 {
  font-size: 17px;
  font-weight: 700;
  margin:0 0 10px 0;
}
.profit-card p {
  font-size: 22px;
  margin:0;
  font-weight: 300;
  letter-spacing: .5px;
  color: var(--white);
}

/* Ghi chú + hình trang trí */
.profit-note {
  font-size: 14px;
  margin-top: 10px;
  color: var(--indigo);
}
 

/* ===================================================
   DỊCH VỤ NỔI BẬT TẠI HERBAL SPA
   =================================================== */
 
.services-section .overlay-dark {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 40px 0;
}
.services-title {
  font-size: 42px;
  font-weight: 800;
  margin-bottom: 60px;
  color: #fff;
  letter-spacing: .5px;
}

/* Card layout */
.service-cards {
  padding:0 20px;
  position: relative;
  z-index: 2;
}
.service-box {
  background: var(--earth);
  border-radius: 30px;
  margin-bottom: 30px;
  color: var(--wood);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
  transition: all .4s ease;
  height: 100%; overflow: hidden;
}
.service-box .des {line-height: 20px; color:#333;height: 200px; overflow: hidden; text-align: justify;}
.service-box:hover {
  transform: translateY(-8px);
}

.service-box .img {
  width: 100%;
  height: 0;
  padding-bottom: 80%;
  position: relative;
  overflow: hidden;
}
.service-box .img img {
  position: absolute; left:0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Text */
.service-box .info {width: 100%; padding:20px 15px; }
.service-box h4 {
  font-size: 16px;
  line-height: 20px; height: 40px;
  font-weight: 700;
  margin:0; color:var(--indigo);
  margin-bottom: 15px;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.service-box p {
  font-size: 14px;
  min-height: 120px;

  margin-bottom: 15px;
}
.price {
  font-weight: 700;
  font-size: 15px;
  color: var(--wine);
}




/* ===================================================
   ĐIỂM MẠNH TẠO NÊN SỰ KHÁC BIỆT
   =================================================== */
.strengths-section {
  background: url('../images/bg.webp');
  color: var(--indigo);
  text-align: center;
  position: relative;
}

.strengths-logo {
  width: 120px;
  margin-bottom: 15px;
  opacity: 0.9;
}

.strengths-title {
  font-size: 42px;
  font-weight: 800;
  color: var(--wood);
  margin-bottom: 15px;
  letter-spacing: 1px;
}

.strengths-desc {
  font-size: 16px;
  max-width: 850px;
  margin: 0 auto 60px;
  line-height: 1.6;
  color: var(--indigo);
}

/* Hình và khung */
.strengths-list {
  max-width: 1100px;
  margin: 0 auto;
}

.strength-item {
  margin-bottom: 40px;
  position: relative;
}

.img-frame {
  border: 6px solid #e6d8c8;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  transition: transform 0.4s ease;
}
.img-frame:hover {
  transform: translateY(-8px);
}

.img-frame img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  display: block;
}

.caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 16px;
  padding: 12px 8px;
  font-weight: 500;
  letter-spacing: 0.4px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.4);
}


.branches-section {background:black; display: block; min-height: auto}
.branches-section .heading {margin-bottom: 40px}
#branches {float: left; width: 100%; }
#branches .swiper-wrapper {float: left; width: 100%}
.branch-card {float: left; width: 100%; aspect-ratio: 3/2}
.branch-card .img {float: left; width: 100%; position: relative; overflow: hidden; aspect-ratio: 3/2}
.branch-card .img img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16/9; border-radius: 20px}
.branch-card .title {float:left; width: 100%; font-size: 20px; padding-top:20px; color:white }
 
#branches .swiper-slide {max-width: 50%}
 




/* ========== RESPONSIVE ========== */
@media(min-width:1200px){
  .footer-title{ font-size:56px; margin-bottom:36px; }
  .footer-col h4{ font-size:24px; }
  .foot-sub{ font-size:16px; }
}

@media (max-width: 991px) {
  .services-title { font-size: 34px; margin-bottom: 40px; }
  .profit-title { font-size: 34px; }
  .profit-sub { font-size: 16px; margin-bottom: 40px; }
  .profit-card { padding: 30px 15px; }

  .strengths-title { font-size: 34px; }
  .strengths-desc { font-size: 16px; margin-bottom: 40px; }
  .img-frame img { height: 300px; }

  .section { padding: 80px 10px; }
  .hero h1 { font-size: 29px; margin:0}
  .hero h2 {font-size: 18px;margin:0}

  .heading { font-size: 28px; }
  .footer-title{ font-size:40px; }
  .section-half div[class^=col-md] {
    padding: 30px;
  }
}
@media (max-width: 767px) {
  .profit-section { padding: 80px 15px; }
  .profit-title { font-size: 28px; }
  .profit-sub { font-size: 15px; }
  .profit-card h4 { font-size: 18px; }
  .profit-card p { font-size: 20px; }

  .platform-logo { width: 70px; }

  .strengths-desc { font-size: 15px; }
  .img-frame img { height: 240px; }
  .section { padding: 60px 10px; }
  .different .diff-box img { height: 200px; }
  .hero { background-attachment: scroll; }
  .footer-title{ font-size:30px; }
  .qr{ width:100%; height:auto; margin-bottom:20px; }

  .footer-col h4 {font-size: 18px}
  .heading {font-size: 25px; text-align: center}
  .offer-section {
    display: block;
    min-height: auto;
  }
  .offer-image {
    min-height: 300px;
  }

  .section-half {
    display: block;
    min-height: auto;
  }
  .section-half .row {
    display: block;
  }
  .section-half div[class^=col-md] {
    padding: 10px;
  }
  .section-half div[class^=col-md]>img {
    height: 320px;
  }

  .service-cards {padding:0}
  .service-box .des {height:auto}
  .services-title { font-size: 28px; }
  .service-box p { min-height: auto; }
  .service-box { margin-bottom: 25px; }
}

@media (max-width: 459px) {
  .branches-section {min-height: auto}
  .service-cards {padding:0}
  .service-box .img {padding-bottom: 60%}
  .service-box .info {height: auto}
  .section-half .col-md-6 {padding:0 20px}
  .section-intro .text-col {line-height: 30px; letter-spacing: 1px; font-size: 15px}
  .profit-card {padding:15px}
  #branches .swiper-slide {max-width: 70%;}
}
 
            .timeline {
                padding-top: 150px; float:left; width: 100%; position: relative;
            }

            .timeline::before {
                content: '';
                position: absolute;
                width: 3px;
                background: var(--yellow);
                top: 0;
                bottom: 0;
                left: 50%;
                margin-left: -2px;
            }

            .timeline-item {
                margin-top: -150px;
                padding: 0 40px;
                position: relative;
                background-color: inherit;
                width: 100%;
                float: left;
                box-sizing: border-box;
            }

            .timeline-item .content {
                float: left;
                width: 50%;
                position: relative;
            }

            .timeline-item .content .content-inside img {
                margin-top: 20px;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            .timeline-item .year {
                position: absolute;
                top: 50%;
                z-index: 1;
                left: 50%;
                transform: translate(-50%, -50%);
                color: #fff;
                background: #000;
                border: 3px solid var(--yellow);
                padding: 17px 0;
                font-weight: 700;
                height: 60px;
                width: 60px;
                text-align: center;
                border-radius: 50%;
                animation: 2s infinite pulse;
            }

            .timeline-item .year:after {
                content: "";
                top: 27px;
                position: absolute;
                width: 70px;
                border-top: 3px solid var(--yellow);
            }

            .content-inside {
                padding: 20px;
                z-index: 2;
                backdrop-filter: blur(20px);
                background-color: rgba(0, 0, 0, .1);
                position: relative;
                border-radius: 15px;
                box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
            }

            .content-inside h2 {
                margin: 0 0 10px;
                color: var(--orange);
                font-weight: 700;
                font-size: 20px;
                display: none;
            }

            
            .content-inside h3 {
                margin: 0 0 10px;
                font-size: 20px; color:var(--yellow);
            }

            .content-inside p {
                margin: 0;
                color: #fff;
                font-size: 14px;
            }

            .timeline .timeline-item:nth-child(odd) .content {
                padding-right: 100px;
            }

            .timeline .timeline-item:nth-child(odd) .year:after {
                right: 100%
            }

            .timeline .timeline-item:nth-child(2n) .content {
                float: right;
                padding-left: 100px;
            }

            .timeline .timeline-item:nth-child(2n) .content:after {
                left: 0;
            }

            .timeline .timeline-item:nth-child(2n) .year:after {
                left: 100%
            }
 
            @media screen and (max-width:991px) {
                .timeline .timeline-item {
                    padding: 20px 0;
                }
                .timeline .timeline-item:nth-child(odd) .content {
                    padding-right: 50px;
                }
                .timeline .timeline-item:nth-child(2n) .content {
                    padding-left: 50px;
                }
            }

            @media screen and (max-width:767px) {
 
                .timeline .timeline-item {
                    padding: 20px 0;
                }
                .timeline .timeline-item:nth-child(odd) .content {
                    padding-right: 50px;
                }
                .timeline .timeline-item:nth-child(2n) .content {
                    padding-left: 50px;
                }
            }

            @media screen and (max-width:459px) {
               
                .timeline .timeline-item .year,
                .timeline::before {
                    left: 10%
                }
                .timeline {
                    padding-top: 0;
                }
                .timeline .timeline-item {
                    margin-top: 0;
                }
                .timeline .timeline-item .year:after {
                    left: 100%;
                    right: auto;
                    position: absolute;
                    width: 70px;
                }
                .timeline .timeline-item .content {
                    width: 100%;
                    padding-left: 90px !important;
                    padding-right: 0 !important;
                }
                .content-inside {
                    padding: 10px;
                }
                
            }
          .home-photo {float: left; width:100%; height: 0; padding-bottom: 60%; position: relative; border-radius: 15px; overflow: hidden; margin-bottom: 20px}
.home-photo img {position: absolute; left:0; top:0; width: 100%; height: 100%; object-fit: cover; z-index:1; }
.home-photo .info {position: absolute;top: 0; left: 0; width: 100%; height: 100%; z-index: 3;
  text-align: center; opacity: 0; transition: all .5s; background: rgba(0,0,0,.5);}

.home-photo .info .view-button {width:100%; text-align: center; top:50%; transform: translateY(-50%); position: absolute;}
.home-photo .info .view-button i {color:var(--yellow); width: 30px; font-size: 13px; height: 30px; border:1px solid #E5CFBD; text-align: center; line-height: 30px;  border-radius: 50%}

.home-photo:hover .info {opacity: 1; transition: all .5s}