@charset "UTF-8";
/* layout general
 -----------------------------------------------------*/
/* general setting
 -----------------------------------------------------*/
* {
  outline: transparent;
}


body {
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: 'SVN-Gotham';
  font-size: calc(4px + 1vw);
  color: #000;
  line-height: 1.5;
  background: #FFF;
  cursor: url(../images/vien-thuoc-cursor.png) 16 16, auto !important;
}
@font-face {
  font-family: 'SVN-Gotham';
  src: url(../fonts/SVN-Gotham/SVN-Gotham.woff2) format("woff2"),
   url(../fonts/SVN-Gotham/SVN-Gotham.eot) format("eot"),
    url(../fonts/SVN-Gotham/SVN-Gotham.ttf) format("ttf"),
     url(../fonts/SVN-Gotham/SVN-Gotham.woff) format("woff"); }
@font-face {
  font-family: 'SVN-GothamLight';
  src: url(../fonts/SVN-GothamLight/SVN-GothamLight.woff2) format("woff2"),
   url(../fonts/SVN-GothamLight/SVN-GothamLight.eot) format("eot"),
    url(../fonts/SVN-GothamLight/SVN-GothamLight.ttf) format("ttf"),
     url(../fonts/SVN-GothamLight/SVN-GothamLight.woff) format("woff"); }

a {
  color: #0041d1;
  -webkit-transition-duration: 0.2s;
       -o-transition-duration: 0.2s;
          transition-duration: 0.2s;
           cursor: url(../images/vien-thuoc-cursor.png) 16 16, auto !important;
}
a:hover {
  text-decoration: none;
  color: #0041d1;
}
a:focus {
  outline: none;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
}
ul li {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.4;
  font-family: 'SVN-Gotham';
  font-size: calc(10px + 2vw);
  font-weight: 900;
}

p {
  margin-bottom: 15px;
}
p:last-child {
  margin-bottom: 0px;
}

input[type=submit] {
  border: none;
  -webkit-transition-duration: 0.2s;
       -o-transition-duration: 0.2s;
          transition-duration: 0.2s;
}
@media (min-width: 1600px){
  .container{
    max-width: 1400px !important;
  }
}
@media (min-width: 2000px){
  .container{
    max-width: 1800px !important;
  }
}

img{
  width: 100%;
}


  /* Style chung cho các khung chat */
  .ai-chat-container {
    display: none; /* Ẩn toàn bộ mặc định */
    width: 50%;
    height: 80%;
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden;
    margin-top: 15px;
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 9999;
  }
  .ai-chat-container iframe { width: 100%; height: 100%; border: none; }
  .close-all-ai{
       position: absolute;
    right: 0.5%;
    top: 0%;
    width: 3%;
    cursor: pointer;
  }
/* --- 1. SETUP KHUNG CHỨA (BANNER) --- */
.banner {
    
    margin: 0 auto; /* Hoặc flex/grid tùy layout lớn của bạn, giúp ôm sát kích thước ảnh */
    position: relative;
    width: 60%;
    /* Thiết lập môi trường 3D */
    perspective: 1600px; 
    transform-style: preserve-3d;
    
    /* Chạy animation tự động lật */
   
}
.section-1.active .banner{
  animation: autoFlipCard 10s ease-in-out infinite;
}

/* Giữ hiệu ứng rê chuột vào thì tạm dừng nếu muốn */


/* --- 2. ĐỊNH DẠNG CHUNG CHO CẢ 2 CARD --- */
.banner .md-card {
    /* Ẩn mặt đối diện khi lật ra sau */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    
    /* Đổ bóng mịn theo viền ảnh */
    filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.1));
}

.banner .md-card img {
    display: block;
    width: 100%;
    height: auto; /* Ảnh tự co giãn giữ đúng tỷ lệ gốc */
}

/* --- 3. ĐỊNH VỊ LAYER KHÔNG SET KÍCH THƯỚC --- */

/* CARD BACK: Để mặc định (relative) để tự banh kích thước chuẩn cho thẻ .banner */
.banner .card-back {
    position: relative;
    z-index: 2;
    transform: rotateY(0deg);
}

/* CARD FRONT: Ép tuyệt đối ăn theo chuẩn kích thước của card-back thông qua các góc top/left/right/bottom */
.banner .card-front {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: rotateY(180deg);
    width: 100%;
    height: auto;
}

/* --- 4. KEYFRAMES XOAY ĐỀU --- */
@keyframes autoFlipCard {
   0% {
    transform: rotateY(0deg);
  }
  40% {
    /* Lật sang mặt sau (180 độ) trong 0.5s đầu */
    transform: rotateY(0deg);
  }
  50% {
    /* Giữ nguyên mặt sau trong 1s tiếp theo */
    transform: rotateY(180deg);
  }
  90% {
    /* Lật ngược lại mặt trước (360 độ hoặc về 0deg) trong 0.5s */
    transform: rotateY(180deg);
  }
  /* --- GIAI ĐOẠN 2: NGHỈ (Chiếm 8 giây còn lại để đủ 10s) --- */
  100% {
    /* Giữ nguyên mặt trước cho đến hết giây thứ 10 rồi lặp lại */
    transform: rotateY(0deg);
  }
}
.banner .md-ico-1 .ico-1{
  position: absolute;
    left: 23%;
    top: 20%;
    width: 10.7%;
    transform: scale(0.0);
    
}
.banner .md-ico-1 .ico-2{
  position: absolute;
    left: 58.5%;
    top: 0%;
    width: 12.5%;
    transform: scale(0.0);

}
.banner .md-ico-1 .ico-3{
      position: absolute;
    left: 72%;
    top: 14%;
    width: 9%;
    transform: scale(0.0);

}
.banner .md-ico-1 .ico-4{
  position: absolute;
    left: 79%;
    top: 42%;
    width: 15%;
    transform: scale(0.0);

}
.banner .md-ico-1 .ico-5{
      position: absolute;
    left: 14%;
    top: 52%;
    width: 5.5%;
    transform: scale(0.0);
}
.banner .md-ico-1 .ico-6{
      position: absolute;
        left: 66.5%;
    top: 0%;
    width: 11%;
    transform: scale(0.0);
}
.banner .md-ico-1 .ico-7{
      position: absolute;
    left: 87%;
    top: 25%;
    width: 8.5%;
  transform: scale(0.0);
}
.banner .md-ico-1 .ico-8{
      position: absolute;
    left: 68%;
    top: 87%;
    width: 8%;
  transform: scale(0.0);
}
.banner .md-ico-1 .ico-9{
      position: absolute;
      left: 15%;
    top: 58%;
    width: 4.5%;
  transform: scale(0.0);
}
.section-1.active .banner .md-ico-1 .ico-1{
  animation: ico-1 10s infinite;
}
.section-1.active .banner .md-ico-1 .ico-2{
  animation: ico-2 10s infinite;
}
.section-1.active .banner .md-ico-1 .ico-3{
  animation: ico-3 10s infinite;
}
.section-1.active .banner .md-ico-1 .ico-4{
  animation: ico-4 10s infinite;
}
.section-1.active .banner .md-ico-1 .ico-5{
  animation: ico-5 10s infinite;
}
.section-1.active .banner .md-ico-1 .ico-6{
  animation: ico-6 10s infinite;
}
.section-1.active .banner .md-ico-1 .ico-7{
  animation: ico-7 10s infinite;
}
.section-1.active .banner .md-ico-1 .ico-8{
  animation: ico-8 10s infinite;
}
.section-1.active .banner .md-ico-1 .ico-9{
  animation: ico-9 10s infinite;
}
@keyframes ico-1{
  0%{
    transform: scale(0.0);
  }
  10%{
    transform: scale(1.0);
  }
  90%{
    transform: scale(1.0);
  }
  100%{
    transform: scale(0.0);
  }
}
@keyframes ico-2{
  0%{
    transform: scale(0.0);
  }
  10%{
    transform: scale(1.0);
  }
  90%{
    transform: scale(1.0);
  }
  100%{
    transform: scale(0.0);
  }
}
@keyframes ico-3{
  0%{
    transform: scale(0.0);
  }
  10%{
    transform: scale(1.0);
  }
  90%{
    transform: scale(1.0);
  }
  100%{
    transform: scale(0.0);
  }
}
@keyframes ico-4{
  0%{
    transform: scale(0.0);
  }
  10%{
    transform: scale(1.0);
  }
  90%{
    transform: scale(1.0);
  }
  100%{
    transform: scale(0.0);
  }
}
@keyframes ico-5{
  0%{
    transform: scale(0.0);
  }
  10%{
    transform: scale(1.0);
  }
  90%{
    transform: scale(1.0);
  }
  100%{
    transform: scale(0.0);
  }
}
@keyframes ico-6{
  0%, 10%{
    transform: scale(0.0);
  }
  50%{
    transform: scale(0.0);

  }
  60%{
    transform: scale(1.0);
  }
  100%{
    transform: scale(1.0);
  }
}
@keyframes ico-7{
  0%, 10%{
    transform: scale(0.0);
  }
  50%{
    transform: scale(0.0);

  }
  60%{
    transform: scale(1.0);
  }
  100%{
    transform: scale(1.0);
  }
}
@keyframes ico-8{
  0%, 10%{
    transform: scale(0.0);
  }
  50%{
    transform: scale(0.0);

  }
  60%{
    transform: scale(1.0);
  }
  100%{
    transform: scale(1.0);
  }
}
@keyframes ico-9{
  0%, 10%{
    transform: scale(0.0);
  }
  50%{
    transform: scale(0.0);

  }
  60%{
    transform: scale(1.0);
  }
  100%{
    transform: scale(1.0);
  }
}
.section-1.active .ctn-button-1{
  
  animation: ctn-button-1 4s ease-in-out forwards, ctn-button-4 1s infinite 3.5s;
}

@keyframes ctn-button-1{
  0%,50%{
    opacity: 0;
    transform: scale(0.0);
  }
  65%{
    opacity: 1;
    transform: scale(0.0);
  }
  85%{
    opacity: 1;
    transform: scale(1.0);
  }
  100%{
    opacity: 1;
    transform: scale(1.0);
  }
}
@keyframes ctn-button-4{
  0%, 100% { transform: scale(1.0); }
    50% { transform: scale(0.9);}
}

.section-1{
  padding: 50px 0px;
}

.section-5{
  position: relative;
}
.section-5 .img-banner{
      position: absolute;
    left: 47%;
    top: 7%;
    width: 24%;
}
.section-5 .ani-tiasang{
  position: absolute;
       position: absolute;
       left: 66.5%;
    top: 16%;
    width: 4%;
 
 transform: scale(0) rotate(0deg); 
}

@keyframes spin-flash {
  0% {
    transform: scale(0) rotate(0deg); /* Bắt đầu từ siêu nhỏ */
    filter: brightness(0.5) ;
  }
  35% {
    transform: scale(1.2) rotate(180deg); /* Phóng to cực đại, xoay mạnh và lóe sáng */
    filter: brightness(3) ;
  }
  45% {
    /* Giữ điểm nhấn lóe sáng và xoay thêm một chút để tạo độ mượt */
    transform: scale(1.1) rotate(210deg);
    filter: brightness(2.5) ;
  }
  100% {
    transform: scale(1.0) rotate(0deg); /* Trả về kích thước gốc và góc xoay ban đầu */
    filter: brightness(1) ; /* Trả về độ sáng gốc */
  }
}


.section-5 .text-3{
  position: absolute;
  left: 34%;
    top: 16%;
    width: 25%;
    transform: scale(0.0);
    
}
@keyframes pop-out{
  0%{
    opacity: 0;
    transform: translateY(20px);
  }
  100%{
    opacity: 1;
    transform: translateY(0);
  }
}
.section-5.active .ani-tiasang{
  animation: spin-flash 2.5s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
  animation-delay: 1s;
}
.section-5.active .text-3{
  animation: pop-out 1s ease-in-out forwards;
}
@keyframes pop-out-2{
  0%,6%,12%,18%,24%{
    opacity: 1;
  }
  3%,9%,15%,21%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
.section-5 .bot-content{
  display: flex;
  padding: 20px 10%;
  align-items: center;
}
.section-5 .bot-content .md-hop-thuoc{
      position: absolute;
        left: 31%;
    bottom: 9%;
    width: 30%;
}
.section-5 .bot-content .md-hop-thuoc .vien-thuoc{
  position: absolute;
  right: 0%;
    top: 0%;
    width: 50%;
    animation: pop-out-vienthuoc 1s infinite;
}
.section-5 .bot-content .md-hop-thuoc .ctn-popup{
  position: absolute;
      left: 95%;
    bottom: 7%;
    width: 40%;
    animation: ctn-button-5 1s infinite;
    z-index: 2;
}
.md-popup-1.fancybox-content{
  padding: 0;
  width: 30%;
}
.section-5 .bot-content .md-hop-thuoc .md-popup{
  display: none;
}
@keyframes pop-out-vienthuoc{
  0%,100%{
    transform: scale(1.0);
  }
  50%{
    transform: scale(1.1);
  }
}
.section-5 .bot-content .sc5-logo-1{
  width: 50%;
  padding: 0 5%;
}
.section-5 .bot-content .sc5-logo-2{
 padding: 0 5%;
  width: 50%;
}
@media screen and (max-width: 767px){
  
  .section-5 .bot-content .md-hop-thuoc .ctn-popup{
    left: 31%;
    top: 88%;
    width: 50%;
  }
  .md-popup-1.fancybox-content{
    width: 90%;
  }
  .section-5 .bot-content{
    padding: 50px 5%;
    gap: 10px;
  }
  .section-5 .bot-content .sc5-logo-1{
    padding: 0;
  }
  .section-5 .bot-content .sc5-logo-2{
    padding: 0;
  }
}
.section-2{
  position: relative;
}
.section-2 .img-duongruot{
  position: absolute;
  left: 12%;
  top: 17%;
  width: 40%;
}
.section-2 .img-title{
  position: absolute;
  left: 15%;
  top: 5%;
  width: 70%;
}
.section-2 .sc2-img-6{
  position: absolute;
  left: 37%;
    top: 5%;
    width: 18%;
    transform: scale(0.0);
}
.section-2 .sc2-img-6 .text6-img-1{
  position: absolute;
  left: -32%;
    top: 19%;
    width: 59%;
    transform: scale(0.0);
}
.section-2 .sc2-img-6 .text6-img-2{
  position: absolute;
  left: 72%;
    top: 74%;
    width: 42%;
    transform: scale(0.0);
}
.section-2.active .sc2-img-6{
  animation: sc6-img-1 2s ease-in-out forwards, sc6-pop-out 1s forwards 5s;
}
.section-2.active .sc2-img-6 .text6-img-1{
  animation: text6-img-1 1s ease-in-out forwards;
  animation-delay: 2.5s;
}
.section-2.active .sc2-img-6 .text6-img-2{
  animation: text6-img-1 2s ease-in-out forwards 0.5s;
}
@keyframes text6-img-1{
  0%{
    transform: scale(0.0);
  }
  30%{
    transform: scale(1.0);
  }
  100%{
    transform: scale(1.0);
  }
}
@keyframes sc6-img-1{
  0%{
    transform: scale(0.0) rotate(0deg);
  }
  50%{
    transform: scale(1.0) rotate(0deg);
  }
  100%{
    transform: scale(1.0) rotate(0deg);
  }
}
/*@keyframes sc6-pop-out{
  0%{
    opacity: 1;
  }
  100%{
    opacity: 0;
  }
}*/
.section-2 .sc2-img-1{
  position: absolute;
  left: 37%;
    top: 5%;
    width: 18%;
    position: absolute;
    opacity: 0;
    /* --- ĐÂY LÀ ĐOẠN QUAN TRỌNG NHẤT --- */
    /* Dán CHUỖI MÃ PATH MỚI bạn lấy được vào đây */
  /*  animation: moveAlongPath 4s ease-in-out forwards;*/

}
.section-2 .vien-thuoc-4{
  position: absolute;
  left: 37%;
  top: 5%;
  width: 15%;
   
   opacity: 0;
}
.section-2.active .vien-thuoc-4{
  animation: moveAlongPath 4s ease-in-out forwards;
   animation-delay: 4.5s;
}
.section-2 .ico-vien-thuoc{
  position: absolute;
      left: 43%;
    top: 66%;
    width: 5%;
      opacity: 0;
      
}
.section-2.active .ico-vien-thuoc{
  animation: ico-vien-thuoc 4s ease-in-out forwards;
  animation-delay: 4.7s;
}
@keyframes ico-vien-thuoc{
  0%{
    opacity: 0;
    transform: scale(0.0);
  }
  90%{
    opacity: 0;
    transform: scale(0.0);
  }
  100%{
    opacity: 1;
    transform: scale(1.0);
  }
}
@keyframes moveAlongPath {
    /* 1. Vị trí xuất phát ở đầu thực quản (Top: 15%, Left: 35%) */
    0% {
       left: 27%;
    top: 10%;
    width: 15%;
    opacity: 1;
    }
    15%{
      top: 30%;
        left: 27%;
        width: 10%;
        transform: rotate(-28deg);
    }
    /* 2. Chạy dọc xuống giữa ống thực quản */
    50% {
        top: 45%;
        left: 32%;
        width: 5%;
        transform: rotate(-28deg);
    }
    

    
    /* 4. Xuống đáy dạ dày và bắt đầu xoay đầu chuẩn bị rẽ trái */
    80% {
        top: 55%;
        left: 40%;
        width: 10%;
        transform: rotate(-50deg);
    }
    90%{
      left: 40%;
            top: 60%;
            width: 8%;
            opacity: 1;
      content: url("../images/vien-thuoc-4.png");
    }
    /* 5. Chạy hẳn sang khúc ruột non bên trái và ẩn đi */
    100% {
        left: 40%;
            top: 63%;
            width: 10%;
            opacity: 1;
            content: url("../images/vien-thuoc-2.png");
    }
}
.section-2 .sc2-img-3{
  position: absolute;
      left: 42%;
    top: 55%;
    width: 40%;
    clip-path: polygon(0 100%, 0 100%, 0 100%, 0 100%);
    animation: sc2-img-3 0.5s ease-in-out forwards;
    animation-delay: 4s;
}
@keyframes sc2-img-3{
  0%{
   clip-path: polygon(0 100%, 0 100%, 0 100%, 0 100%);
  }
  100%{
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}
.section-2 .sc2-img-4{
  position: absolute;
  left: 39%;
    top: 72%;
    width: 40%;
    clip-path: polygon(0 100%, 0 100%, 0 100%, 0 100%);
    animation: sc2-img-3 0.5s ease-in-out forwards;
    animation-delay: 6s;
}
.section-2 .sc2-img-5{
      position: absolute;
    left: 32%;
    top: 76.5%;
    width: 7%;
    clip-path: polygon(0 100%, 0 100%, 0 100%, 0 100%);
    animation: sc2-img-3 0.5s ease-in-out forwards;
    animation-delay: 5.5s;
}
.section-2 .btn-sc2-1{
  position: absolute;
  left: 50%;
    top: 62.5%;
    width: 13%;
    
           
    transform: scale(0.0);

}

@keyframes btn-sc2-1{
  0%{
    transform: scale(0.0);
  }
  100%{
    transform: scale(1.0);
  }
}
.share-btn {
      background: linear-gradient(to bottom, #e99696, #fb4f4f);
      text-align: center;
      box-shadow: inset 0 4px 6px rgba(255, 255, 255, 0.4), inset 0 -4px 6px rgba(0, 0, 0, 0.15), 0 6px 12px rgba(0, 0, 0, 0.15);
  border-radius: 20px;
  text-align: center;
  cursor: pointer;
  font-size: calc(2px + 0.8vw);
  padding: 20px 10px;
  overflow: hidden;
  outline: none;
  box-shadow: 0 10px 25px rgba(46, 49, 146, 0.2);
  transition: all 0.5s cubic-bezier(0.76, 0, 0.24, 1);
  box-shadow: 
        inset 0 4px 6px rgba(255, 255, 255, 0.4),  /* Hiệu ứng bóng sáng 3D bên trong */
        inset 0 -4px 6px rgba(255, 255, 255, 0.15),      /* Hiệu ứng bóng tối 3D bên trong */
        0 0 20px rgba(255, 255, 255, 0.25);
}

.text-share {
  color: #FFF;
  letter-spacing: 1px;
  display: inline-block;
  transition: transform 0.4s ease, opacity 0.3s ease;
}

.social-icons {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #FFF;
  color: #000;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding: 0 15px;
  box-sizing: border-box;
  transform: translateX(100%);
  transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}

@media screen and (min-width: 768px) {
  .section-2 .show-btn:hover .social-icons{
    transform: translateX(0%);
  }
}
.light-glow {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 25px;
  height: 45px;
  background-color: #ffffff;
  border-radius: 0 40px 40px 0;
  opacity: 0.9;
  transition: opacity 0.4s ease;
}

.social-icons .icon {
  color: #ffffff;
  width: 28px;
  height: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  opacity: 0;
  transform: translateX(30px);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
  transition-delay: calc(0.05s * var(--i));
}

.social-icons .icon svg {
  width: 100%;
  height: 100%;
  transition: transform 0.2s ease;
}

.social-icons .icon:hover svg {
  transform: scale(1.2);
}

.share-btn-2{
      background: linear-gradient(to bottom, #acc8f6, #3785f5);
      padding: 10px;
      
}
.share-btn .social-icons{
  font-size: calc(2px + 0.6vw) !important;
}
.share-btn-2 .social-icons{
  font-size: calc(2px + 0.5vw) !important;
}
/* ==================================================
   THAY ĐỔI TỪ :HOVER SANG .ACTIVE (DO JS KÍCH HOẠT)
   ================================================== */

/* Hiệu ứng bóng đổ khi đang ở trạng thái active */
.share-btn.active {
  box-shadow: -1px 3px 4px 0px rgba(0, 0, 0, 0.4);
}

/* Đẩy chữ SHARE ẩn đi */
.share-btn.active .text-share {
  transform: translateX(-100%);
  opacity: 0;
}

/* Kéo thanh menu mạng xã hội vào */
.share-btn.active .social-icons {
  transform: translateX(0%);
}

/* Hiển thị các icon so le trượt vào */
.share-btn.active .social-icons .icon {
  opacity: 1;
  transform: translateX(0);
  transition-delay: calc(0.1s + (0.06s * var(--i)));
}
.section-2 .btn-sc2-2{
  position: absolute;
  left: 69%;
    top: 62.5%;
    width: 13%;
    transform: scale(0.0);

}
.section-2 .btn-sc2-3{
  position: absolute;
  left: 59%;
    top: 65.5%;
    width: 13%;
    transform: scale(0.0);

}
.section-2 .btn-sc2-4{
  position: absolute;
  left: 49%;
    top: 78.5%;
    width: 13%;
    transform: scale(0.0);

}
.section-2 .btn-sc2-5{
  position: absolute;
  left: 66%;
    top: 78.5%;
    width: 13%;
    transform: scale(0.0);

}
.section-2 .img-vienthuoc-front {
    position: absolute;
    left: 31%;
    top: 31%;
    width: 40%;
    opacity: 0;
     
}
.section-2.active .img-vienthuoc-front{
  animation:  AlongPath-pop-in-2 2s ease-in-out forwards;
}
@keyframes AlongPath-pop-in-2{
  0%{
    opacity: 0;
    transform: scale(0.0);
  }
  30%{
    opacity: 1;
    transform: scale(1.0);
  }
  100%{
    opacity: 1;
    transform: scale(1.0);
  }
}
.section-2 .img-duongvien{
  transform: scale(0.0);
}
.section-2.active .img-duongvien{
  animation: img-duongvien 2s ease-in-out forwards;
}
@keyframes img-duongvien{
  0%{
    transform: rotate(-180deg) scale(0.0);
  }
  40%{
    transform: rotate(0deg) scale(1.0);
  }
  100%{
     transform: rotate(0deg) scale(1.0);
  }
}
/* --- 1. VIÊN THUỐC --- */
/*.section-2 .sc2-img-1 {
    position: absolute;
    left: 25%;
    top: 25%;
    width: 28%;
    opacity: 0;
}*/
/* Chỉ chạy khi .section-2 có class .active */
.section-2.active .sc2-img-1 {

    animation:  AlongPath-pop-in 2s ease-in-out forwards 0.5s;
}
@keyframes AlongPath-pop-in{
  0%{
    opacity: 0;
    transform: scale(0.0);
  }
  70%{
    
    opacity: 1;
    transform: scale(1.0);
  }
  80%{
    transform: scale(1.1);
  }
  90%{
    transform: scale(0.9);
  }
  100%{
    transform: scale(1.0);
    opacity: 1;
  }
}


/* --- 2. POPUP THÔNG TIN (Dùng chung 1 Animation) --- */
.section-2 .sc2-img-3,
.section-2 .sc2-img-4,
.section-2 .sc2-img-5 {
    position: absolute;
    clip-path: polygon(0 100%, 0 100%, 0 100%, 0 100%);
}

.section-2.active .sc2-img-3 { width: 40%;
    left: 48%;
    top: 50%; animation: sc2-reveal 0.5s ease-in-out forwards; animation-delay: 9s; }
.section-2.active .sc2-img-5 {     width: 8%;
    left: 38%;
    top: 85.5%;z-index: 2; animation: sc2-reveal 0.5s ease-in-out forwards; animation-delay: 10.5s; }
.section-2.active .sc2-img-4 {width: 47%;
    left: 43%;
    top: 72%;z-index: 2; animation: sc2-reveal 0.5s ease-in-out forwards; animation-delay: 11s; }

@keyframes sc2-reveal {
    0% { clip-path: polygon(0 100%, 0 100%, 0 100%, 0 100%); }
    100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}

/* --- 3. CÁC NÚT BẤM (Dùng chung 1 Animation) --- */
.section-2 [class^="btn-sc2-"] {
    position: absolute;
    width: 13%;
    transform: scale(0.0);
}

.section-2.active .btn-sc2-1 { left: 55.5%; top: 62.5%; animation: sc2-scale-1 0.7s ease-in-out 9.5s forwards, sc2-tranform 1s infinite 12.5s; }
.section-2.active .btn-sc2-2 { left: 73.5%; top: 62.5%; animation: sc2-scale-2 0.7s ease-in-out 9.7s forwards, sc2-tranform 1s infinite 12.7s; }
.section-2.active .btn-sc2-3 { left: 64%; top: 68%; animation: sc2-scale-3 0.7s ease-in-out 9.9s forwards, sc2-tranform 1s infinite 12.9s; }
.section-2.active .btn-sc2-4 {     left: 55.5%;
    top: 79.5%;z-index: 2; animation: sc2-scale-4 0.7s ease-in-out 11.5s forwards, sc2-tranform 1s infinite 13.1s;  }
.section-2.active .btn-sc2-5 { left: 73.5%;
    top: 79.5%;z-index: 2;  animation: sc2-scale-5 0.7s ease-in-out 11.7s forwards, sc2-tranform 1s infinite 13.3s;  }

@keyframes sc2-scale-1 {
    0% { transform: scale(0.0); top: 56%; }
    100% { transform: scale(1.0); top: 61.5%; }
}
@keyframes sc2-scale-2 {
    0% { transform: scale(0.0); top: 56%; }
    100% { transform: scale(1.0); top: 61.5%; }
}
@keyframes sc2-scale-3 {
    0% { transform: scale(0.0); top: 56%; }
    100% { transform: scale(1.0); top: 66.5%; }
}
@keyframes sc2-scale-4 {
    0% { transform: scale(0.0); top: 73.5%; }
    100% { transform: scale(1.0); top: 83.5%; }
}
@keyframes sc2-scale-5 {
    0% { transform: scale(0.0); top: 73.5%; }
    100% { transform: scale(1.0); top: 83.5%; }
}
@keyframes sc2-tranform{
  0%,100%{
    transform: scale(1.0);
  }
  50%{
    transform: scale(0.9);
  }
}
.section-2 .btn-sc2-6{
  position: absolute;
  left: 48%;
    top: 65%;
    width: 11%;
}
.section-2 .btn-sc2-7{
  position: absolute;
  left: 72%;
    top: 65%;
    width: 11%;
}
.section-2 .btn-sc2-8{
  position: absolute;
  left: 60%;
    top: 68%;
    width: 11%;
}
.section-2 .btn-sc2-9{
  position: absolute;
  left: 50%;
    top: 81.5%;
    width: 11%;
}
.section-2 .btn-sc2-10{
  position: absolute;
  left: 67%;
    top: 81.5%;
    width: 11%;
}
.col-img {
  transform: scale(0.0);
  width: 100%;
  margin-top: 10px;
  object-fit: cover;
  
}
.show-btn{
  cursor: pointer;
}

/* Hiển thị ảnh khi có class active */
@keyframes col-img{
  0%{
    transform: scale(0.0);
  }
  100%{
    transform: scale(1.0);
  }
}
.col-img.active {
  animation: col-img 0.5s ease-in-out forwards;
}

@media screen and (max-width: 767px){

  .share-btn{
    padding: 15px 10px;
  }
  .section-5 .bot-content .md-hop-thuoc{
        position: absolute;
    left: 7%;
    bottom: 11%;
    width: 80%;
  }
  .share-btn{
    font-size: calc(5px + 0.8vw);
  }
  .share-btn .social-icons{
    font-size: calc(5px + 0.8vw) !important;
  }
  .share-btn-2 .social-icons{
    font-size: calc(5px + 0.6vw) !important;
  }
  .share-btn-2{
    padding: 15px 5px;
  }
  .section-2 .sc2-img-6{
            left: 27%;
        top: 8%;
        width: 50%;
  }
  .section-2 .sc2-img-1{
       left: 27%;
        top: 8%;
        width: 50%;
       

  }
  @keyframes moveAlongPath {
    /* 1. Vị trí xuất phát ở đầu thực quản (Top: 15%, Left: 35%) */
    0% {
       left: 23%;
        top: 5%;
        width: 60%;
    opacity: 1;

    }
    15%{
      top: 35%;
        left: 35%;
        width: 15%;
        transform: rotate(-28deg);
    }
    /* 2. Chạy dọc xuống giữa ống thực quản */
    50% {
        top: 45%;
        left: 40%;
        width: 15%;
        transform: rotate(-28deg);
    }
    

    
    /* 4. Xuống đáy dạ dày và bắt đầu xoay đầu chuẩn bị rẽ trái */
    80% {
        top: 50%;
        left: 50%;
        width: 15%;
        transform: rotate(-50deg);
    }
    90%{
        left: 55%;
    top: 56%;
    width: 23%;
    opacity: 1;
      content: url("../images/vien-thuoc-4.png");
    }
    /* 5. Chạy hẳn sang khúc ruột non bên trái và ẩn đi */
    100% {
            left: 55%;
    top: 56%;
    width: 23%;
    opacity: 1;
    transform: rotate(0deg);
    content: url("../images/vien-thuoc-2.png");
    }

  }
  .section-2.active .sc2-img-3{
       width: 75%;
        left: 3%;
        top: 38.5%;
  }
  .section-2 [class^="btn-sc2-"]{
    width: 30%;
  }
  .section-2.active .btn-sc2-1{
    left: 13%;
    top: 48%;
    animation: sc2-scale-1 0.7s ease-in-out 9.5s forwards, sc2-tranform 1s infinite 12.5s;;
  }
  @keyframes sc2-scale-1{
    0% {
        transform: scale(0.0);
        top: 44%;
    }
    100% {
        transform: scale(1.0);
        top: 47%;
    }
  }
  .section-2 .btn-sc2-6{
    position: absolute;
    left: 24%;
    top: 54%;
    width: 30%;
  }
  .section-2.active .btn-sc2-2{
    left: 13%;
    top: 51%;
    animation: sc2-scale-2 0.7s ease-in-out 9.7s forwards, sc2-tranform 1s infinite 12.5s;;
  }
  @keyframes sc2-scale-2{
    0% {
        transform: scale(0.0);
        top: 44%;
    }
    100% {
        transform: scale(1.0);
        top: 51%;
    }
  }
  .section-2 .btn-sc2-7{
    left: 24%;
    top: 62.5%;
  }
  .section-2.active .btn-sc2-3{
        left: 13%;
        top: 54%;
    animation: sc2-scale-3 0.7s ease-in-out 9.9s forwards, sc2-tranform 1s infinite 12.5s;;
  }
  @keyframes sc2-scale-3{
    0% {
        transform: scale(0.0);
        top: 44%;
    }
    100% {
        transform: scale(1.0);
        top: 55%;
    }
  }
  .section-2 .btn-sc2-8{
        left: 68%;
    top: 67%;
  }
  .section-2.active .sc2-img-5{
            width: 17%;
        left: 50%;
        top: 73.5%;
  }
  .section-2.active .sc2-img-4{
      width: 75%;
        left: 11%;
        top: 75.3%;
  }
  .section-2.active .btn-sc2-4{
    left: 11%;
    top: 86.5%;
        animation: sc2-scale-4 0.7s ease-in-out 11.5s forwards, sc2-tranform 1s infinite 12.5s;;
  }
  @keyframes sc2-scale-4{
    0% {
        transform: scale(0.0);
        top: 79.5%;
    }
    100% {
        transform: scale(1.0);
        top: 87%;
    }
  }
  .section-2 .btn-sc2-9{
    left: 26%;
    top: 89%;
  }
  .section-2.active .btn-sc2-5{
    left: 50%;
    top: 86.5%;
    animation: sc2-scale-5 0.7s ease-in-out 11.7s forwards, sc2-tranform 1s infinite 12.5s;;
  }
  @keyframes sc2-scale-5{
    0% {
        transform: scale(0.0);
        top: 79.5%;
    }
    100% {
        transform: scale(1.0);
        top: 87%;
    }
  }
  .section-2 .btn-sc2-10{
    left: 62%;
    top: 89%;
  }
}
.section-3{
  background: #cfecfa;
  padding: 50px 0px 0px;
}

.section-3 .top-sc-3 .md-content a img:hover{
  transform: scale(1.1);
  transition-duration: 0.5s;
}
.section-3 .top-sc-3 .md-content .sc3-img-1{
  position: relative;
  width: 70%;
  margin: 0 auto;
}
.section-5.active .shine-sweep {
   content: "";
            position: absolute;
            bottom: 12%;
            left: -100%; /* Bắt đầu hoàn toàn bên trái, ngoài khung */
            width: 100%;
            height: 80%;
            
            /* Tạo dải sáng màu trắng mờ */
            background: linear-gradient(
                to right, 
                rgba(255, 255, 255, 0.02) 0%,
                rgba(255, 255, 255, 0.05) 30%, /* Độ sáng nhẹ ban đầu */
                rgba(255, 255, 255, 0.3) 50%, /* Phần sáng nhất ở giữa */
                rgba(255, 255, 255, 0.05) 70%, /* Giảm độ sáng */
                rgba(255, 255, 255, 0.02) 100%
            );
            
            /* Xoay chéo dải sáng */
            transform: skewX(-25deg);
            
            /* Định nghĩa animation */
            animation: shine-sweep 1s  linear; /* Chạy vô hạn */
            animation-delay: 1s;
            z-index: 1; /* Nằm trên hình ảnh */
}
@keyframes shine-sweep {
            0% {
                left: -100%; /* Bắt đầu bên trái */
            }
            30% {
                left: 50%; /* Chạy nhanh sang phải */
            }
            100% {
                left: 50%;
                opacity: 0; /* Giữ nguyên bên phải (tạo khoảng nghỉ) */
            }
        }
.section-6 .bot-sc-3 .md-content{
  padding: 0px 20%;
}
.section-6 .bot-sc-3 .md-col{
  display: flex;
  align-items: center;
  background: #f1f8ff;
  border-radius: 30px;
  padding: 50px 0px;
   box-shadow: 1px 1px 3px 2px rgb(0 0 0 / 20%);
}
.section-6 .bot-sc-3 .md-col-2{
  background: #feeaed;
  margin-top: 20px;
}
.section-6 .bot-sc-3 .md-col .left-col{
   text-align: center;
   width: 35%;
}
.section-6 .bot-sc-3 .md-col .left-col img{
  width: 50%;
 
}
.section-6 .bot-sc-3 .md-col .right-col{
  width: 65%;
}
.section-6 .bot-sc-3 .md-col-2 .right-col{
  order: -1;
}

.section-6 .bot-sc-3 .md-col .right-col .how-to-use{
  margin: 0px 10% 0 0;
  text-align: center;
  margin-bottom: 20px;
  padding-bottom: 20px;
}
.section-3 h6{
  font-size: calc(6px + 2vw);
  margin-bottom: 20px;
}
.section-6 .bot-sc-3 .md-col h6{
  color: #2E3690;
  font-size: calc(10px + 1vw);
  margin-bottom: 20px;
}
.section-6 .bot-sc-3 .md-col-2 h6{
  color: #FF0000;
}
.section-6 .bot-sc-3 .md-col-2 .right-col .how-to-use{
  margin: 0 0 0 10%;
}
.section-6 .bot-sc-3 .md-col .right-col .dosage span{
  color: #2E3690;
  font-weight: 700;
}
.section-6 .bot-sc-3 .md-col-2 .right-col .dosage span{
  color: #FF0000;
  font-weight: 700;
}

.section-6 .bot-sc-3 .md-col .right-col .dosage{
  padding: 0px 10%;
}
.section-6 .bot-sc-3 .md-col .right-col .dosage img{
  width: 10%;
  float: left;
}
.section-6 .bot-sc-3 .md-col .right-col .dosage p{
  float: right;
  width: 85%;
}

.section-3 p{
  font-weight: 400;
}
.section-6{
      background: #cfecfa;
      padding: 50px 0px 10px;
}

@media screen and (max-width: 767px){
  .section-6 .bot-sc-3 .md-col{
    display: block;
  }
  .section-6 .bot-sc-3 .md-col .right-col{
    padding: 20px 0px 40px;
  }
  .section-3 h6{
    font-size: calc(10px + 2vw);
  }
  .section-2 .ico-vien-thuoc{
    left: 63%;
    top: 58%;
    width: 12%;
  }
}

.md-anq{
  background: #cfecfa;
  padding: 50px 0px;
}
.md-title{
  margin-bottom: 50px;
  text-align: center;
}
.md-title h2{
  color: #2E3690;
  font-weight: 700;
}
.md-title h2 span{
  color: #FF0000;
}
.faq-wrapper {
    display: flex;
    width: 60%;
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
}

/* CỘT TRÁI: DANH SÁCH CÂU HỎI */
.faq-questions-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 2;
}
.faq-item{
  padding: 10px 25px;
  border-radius: 16px 0px 0px 16px;
  
}
.faq-item.active{
  background: #FFF;
}

.faq-title {
    margin-bottom: 10px;
    color: #111827;
}

/* Nút câu hỏi */
.faq-button {
    padding: 16px 20px;
    border-radius: 20px;
    color: #4b5563;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #FFF;
        color: #000;
        border: 1px solid #6a9ef8;
        display: flex;
            align-items: center;
}
.faq-button span{
  color: #999;
  font-size: calc(15px + 2vw);
   font-family: "Inter", sans-serif;
   font-weight: 900;
   margin-right: 10px;
   letter-spacing: 5px;

}

/* Ẩn các câu hỏi thêm */
.faq-item.is-hidden {
    display: none;
}

/* Nút Xem Thêm */
.show-more-btn {
  border: none;
  background: linear-gradient(to bottom, transparent 0%, #E9F5FF 70%);
    cursor: pointer;
  margin-top: -20%;
  padding: 10% 0px;
}
.show-more-btn img{
  width: 10%;
}


/* CỘT PHẢI: BOX CHỨA CÂU TRẢ LỜI */
.faq-answers-side {
    flex: 1;
    background: #FFF;
    padding: 35px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    min-height: 420px;
}

/* Dòng chữ gợi ý mặc định (Chỉ hiện khi KHÔNG CÓ item nào active/hover) */
.placeholder-text {
    color: #9ca3af;
    text-align: center;
    font-style: italic;
}

/* BOX NỘI DUNG TRẢ LỜI */
.answer-box {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    padding: 35px;
    background: #FFF;
    display: flex;
    flex-direction: column;
    justify-content: center;
    
    /* Mặc định ẩn hẳn đi */
    opacity: 0;
    visibility: hidden;
    transform: translateX(15px);
    transition: all 0.3s ease;
    z-index: 1;
}

.answer-title {
    color: #111827;
    margin-bottom: 12px;
    font-weight: 700;
    font-size: calc(6px + 1vw);
}

.answer-box p {
    color: #4b5563;
    line-height: 1.7;
}


/* =================================================== */
/* LOGIC HOVER VÀ CLASS ACTIVE (QUAN TRỌNG)           */
/* =================================================== */

/* 1. Trạng thái ACTIVE (Mặc định hiển thị ban đầu) */
.faq-item.active .faq-button {
  background: url(../images/bg-qna.png) no-repeat;
    background-size: 100% 100%;
    color: #FFF;
    border: 1px solid transparent;
}
.faq-item.active .faq-button span{
  color: #317bc4;
  font-size: calc(30px + 2vw);
  text-html-trim: both;
            cap-height: 1;
            line-height: 0.8;
            letter-spacing: -1px;
}
.faq-item.active .answer-box {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    z-index: 3;
}

/* 2. Trạng thái HOVER (Khi rê chuột vào bất kỳ mục nào) */
.faq-item:hover .faq-button {
    background: url(../images/bg-qna.png) no-repeat;
    background-size: 100% 100%;
    color: #ffffff !important;
   transition-duration: 0.5s;
}
.faq-item:hover .answer-box {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0) !important;
    z-index: 4; /* Đẩy z-index cao hơn để đè lên item đang active */
    transition-duration: 0.5s;
}

/* 3. Khi ĐANG HOVER vào một item KHÁC, tạm thời ẩn item active cũ đi */
/*.faq-wrapper:hover .faq-item.active:not(:hover) .faq-button {
    background: #f9fafb;
    color: #4b5563;
    border-color: #e5e7eb;
}
.faq-wrapper:hover .faq-item.active:not(:hover) .answer-box {
    opacity: 0;
    visibility: hidden;
    transform: translateX(15px);
}*/

/* 4. Ẩn dòng chữ gợi ý vì lúc này luôn có câu trả lời 1 hiển thị */
.faq-wrapper .placeholder-text {
    display: none;
}
button:focus{
  outline: none;
}
.ctn-button{
  cursor: pointer;
}
.ctn-button-1, .ctn-button-2, .ctn-button-3{
  animation: ctn-button-5 1s infinite;
}
.ctn-button-2{
  animation-delay: 0.2s;
}
.ctn-button-3{
  animation-delay: 0.4s;
}
@keyframes ctn-button-5{
  0%,100%{
    transform: scale(1.0);
  }
  50%{
    transform: scale(0.9);
  }
}

@media (max-width: 768px) {
  .faq-wrapper { flex-direction: column; width: 90%; }
  .faq-questions-side { border-right: none; border-bottom: 1px solid #e5e7eb; }
  .faq-answers-side { display: none; }
  .answer-box { position: relative; display: none; padding: 15px 0 0 0; background: transparent;}
  .faq-item.active .answer-box { display: block !important; }
  .answer-box{
    width: 100%;
    padding: 0px 10%;
    margin-top: 10px;
  }
  .answer-title{
    font-size: calc(6px + 2vw);
  }
  .faq-item{
    padding: 10px;
  }
  .faq-questions-side{
    gap: 0px;
  }
  
  .section-3 .ctn-button{
    width: 47%;
  }
  .faq-button span{
    font-size: calc(20px + 2vw);
  }
}
.md-title h2 span.md-enter{
  color: currentColor;
}

@media screen and (max-width: 767px){
  .md-title h2 span.md-enter{
    display: block;
    color: currentColor;
  }
}
.top-footer .bg-footer{
  position: relative;
}
.top-footer p{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  text-align: center;
  width: 80%;
}
.top-footer .md-title{
  margin-bottom: 50px;
}
.footer-container{
  background: #2f388d;
  padding: 100px 0px 150px;
  margin-top: -40px;
}
.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    color: #FFF;
}
.footer-content a{
  color: #FFF;
}
.social-links{
  flex: 0 0 30%;
}
.company-info{
  flex: 0 0 40%;
}
.logo-area{
  flex: 0 0 25%;
}
.social-links a{
  display: block;
  margin-bottom: 15px;
}
.footer-container p{
  font-size: calc(2px + 0.8vw);
  font-family: 'SVN-GothamLight';
}
.footer-container a{
  font-size: calc(2px + 0.8vw);
  font-family: 'SVN-GothamLight';
  
}
.footer-container .social-links a{
  display: flex;
  justify-items: center;
  align-items: center;
  gap: 5px;
}
.footer-container .social-links a span{
  
}

.footer-container .social-links a img{
  width: 10%;
}
.footer-container span{
  font-size: calc(2px + 0.8vw);
  font-family: 'SVN-GothamLight';
}
.footer-container h6{
  font-size: calc(3px + 0.8vw);
  font-weight: 500;
}

@media screen and (max-width: 767px){
  .section-3 .top-sc-3 .md-content .sc3-img-1{
    width: 100%;
  }
  .footer-container{
    text-align: center;
    padding: 50px 0px 100px;
    margin-top: -20px;
  }
  .top-footer img{
    width: 100%;
  }
  .footer-content{
    display: block;
  }
  .social-links a{
    display: inline-block;
  }
  .footer-container p{
    font-size: calc(4px + 1vw);
    font-family: 'SVN-GothamLight';
  }
  .footer-container a{
    font-size: calc(4px + 1vw);
    font-family: 'SVN-GothamLight';
  }
  .footer-container .social-links a img{
    width: 20%;
  }
  .footer-container span{
    font-size: calc(4px + 1vw);
    font-family: 'SVN-GothamLight';
  }
  .footer-container h6{
    font-size: calc(6px + 1vw);
  }
  .logo-area img{
    width: 40%;
    display: table;
    margin: 0 auto;
  }
  .social-links{
    margin-bottom: 30px;
    display: flex;
  }
  .social-links a{
    flex: 1;
  }
  .company-info{
    margin-bottom: 30px;
  }
}
@media screen and (min-width: 1900px){
  .share-btn{
    padding: 30px 10px;
  }
  .share-btn-2{
    padding: 15px 10px;
  }
  .share-btn .social-icons{
    font-size: calc(4px + 0.7vw) !important;
  }
 .share-btn-2 .social-icons{
    font-size: calc(4px + 0.5vw) !important;
  }
   
}
@media screen and (min-width: 2000px){
  .share-btn{
    padding: 40px 10px;
  }
  .share-btn-2{
    padding: 20px 10px;
  }
  .share-btn .social-icons{
    font-size: calc(4px + 0.7vw) !important;
  }
 .share-btn-2 .social-icons{
    font-size: calc(4px + 0.5vw) !important;
  }
   
}

.main-menu{
 
 
}
.main-menu ul{
   background: #2E3690;
  display: flex;
  width: 100%;
  justify-content: center;  /* Căn giữa toàn bộ menu theo chiều ngang */
  align-items: center;
   padding: 20px 0px;

}
.main-menu ul li{
  display: flex;
  align-items: center;
}
.main-menu ul li a{
  padding: 0 25px;
  color: #FFF;
}
.main-menu ul li a.active{
  color: #FF0000;
}
.main-menu ul li:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 1px;               /* Độ dày của vạch dọc */
  height: 15px;             /* Chiều cao của vạch dọc */
  background-color: rgba(255, 255, 255); /* Màu trắng mờ cho vạch ngăn cách */
}
.main-menu.active{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 9999;
}
.md-ai-bot{
  position: fixed;
  right: 0;
  bottom: 0;
  width: 12%;
  z-index: 9998;
}
@media screen and (max-width: 767px){
  .md-ai-bot{
    width: 15%;
  }
  .ai-chat-container{
    width: 100%;
    height: 80%;
  }
  .close-all-ai{
    width: 6%;
    right: 0;
    top: 0;
  }
  .main-menu{
    position: relative;
    background: #FFF;
    padding: 10px 0px;
    
  }
  .main-menu.active{
    border-bottom: 1px solid #2E3690;
  }
  .main-menu ul{
    display: block;
    height: 100vh;
    position: absolute;
    left: -100%;
    top: 100%;
    width: 100%;
    z-index: 9999;
    padding: 30px 0px;
  }
  .main-menu ul.active{
    left: 0%;
    transition-duration: 0.5s;
  }
  .main-menu ul li:not(:last-child)::after{
    display: none;
  }
  .main-menu ul li{
    margin-bottom: 30px;
  }
  .logo-mb{
    width: 15%;
    display: table;
    margin: 0 auto;
  }
  .toggle-menu{
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
  }
  .toggle-menu span{
    background: #2E3690;
    width: 30px;
    height: 4px;
    margin-bottom: 5px;
    display: block;
  }
  .section-5 .text-3{
    left: 14%;
    top: 2%;
    width: 75%;
  }
  .section-5 .ani-tiasang{
    left: 71.5%;
    top: 22%;
    width: 13%;
  }
  .section-6 .bot-sc-3 .md-col .left-col{
    text-align: center;
    margin: 0 auto;
    width: 40%;
  }
  .section-6 .bot-sc-3 .md-col .right-col{
    text-align: center;
    margin: 0 auto;
    width: 80%;
  }
  .section-6 .bot-sc-3 .md-col .right-col .how-to-use{
    margin: 0px;
  }
  .section-6 .bot-sc-3 .md-content{
    padding: 0px;
  }
  .section-6 .bot-sc-3 .md-col h6{
    font-size: calc(15px + 1vw);
  }
  .section-1 .banner{
    margin: 0px;
    width: 100%;
  }
  .banner .md-ico-1 .ico-2{
    left: 65.5%;
    top: 0%;
    width: 21.5%;
  }
  .banner .md-ico-1 .ico-1{
    left: 23%;
    top: 23%;
    width: 13.7%;
  }
  .banner .md-ico-1 .ico-3{
    left: 72%;
    top: 24%;
    width: 12%;
  }
  .banner .md-ico-1 .ico-5{
        left: 14%;
    top: 46%;
    width: 8.5%;
  }
  .banner .md-ico-1 .ico-4{
    left: 79%;
        top: 56%;
        width: 18%;
  }
  .banner .md-ico-1 .ico-6{
    left: 67.5%;
        top: 4%;
        width: 22%;
  }
  .banner .md-ico-1 .ico-9{
    left: 26%;
    top: 46%;
    width: 7.5%;
  }
  .banner .md-ico-1 .ico-7{
    left: 78%;
    top: 39%;
    width: 10.5%;
  }
  .banner .md-ico-1 .ico-8{
    left: 66%;
        top: 47%;
        width: 10%;
  }
}
.md-popup-2 {
  background: linear-gradient(90deg,#bae3f8  0%,#FFF 50%, #bae3f8  100%);
  display: none;
}
.md-popup-2 .md-col{
  margin-bottom: 20px;
}
.md-popup-2 .md-col ul{
  padding-left: 20px;
  margin-bottom: 10px;
}
.md-popup-2 .md-col ul li{
  list-style: disc;
}
.md-desktop{
    display: block !important;
}
.md-mobile{
    display: none !important;
}

@media screen and (max-width: 767px){
    .md-desktop{
        display: none !important;
    }
    .md-mobile{
        display: block !important;
    }
    body{
        font-size: calc(8px + 1vw);
    }
    h1,h2,h3,h4,h5,h6{
      font-size: calc(15px + 2vw);
    }
}