body {
  background: url(../images/bg_pc.png) top center no-repeat;
	width: 100%;
  min-height: 2974px;
	background-size: cover;
}
.frame1 {  
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: center;
  height: 900px;    
}
.frame2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 1100px;     
}
.frame3 {
  display: flex;
  flex-direction: column;  
  justify-content: center;
  align-items: center;
  height: 974px;        
} 
.title_monphai {
  background: url(../images/title_monphai.png) center no-repeat;
  width: 100%;
  height: 100px;
  margin-top: 200px;
  margin-bottom: 10px;  
  }
.title_tinhnang {
  background: url(../images/title_tinhnang.png) center no-repeat;
  width: 100%;
  height: 100px;
  margin-bottom: 30px;
  }
.slogan {
  background: url(../images/slogan.png);
  width: 900px;
  height: 300px;  
}
.bg-menu {
    background: url(../images/bg_menu.png);
    width: 725px;
    height: 169px;    
    display: flex;
    justify-content: center;
    align-items: center;
}
.menu {  
    display: flex;
    gap: 10px;
}
.column {
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1;
}
.column a:hover {
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
  filter: brightness(1.2);
  transition: all 0.3s ease;
}



.list_animation-wrap{position:absolute;width:80%;height: 100%;top:0;left:10%;-webkit-animation:thuongminh 2s steps(24,end) infinite;-o-animation:thuongminh 2s steps(24,end) infinite;animation:thuongminh 2s steps(24,end) infinite;background:url("../images/animation_tula.png") no-repeat}
@keyframes thuongminh{0%{background-position:0 0}100%{background-position:0 -17952px}}

/*****************************************/

.header {
  display: block;
  position: fixed;
  z-index: 999;
  top: 0;
  background:url(../images/bg_header.png) top center no-repeat;  
  width: 100%;
  height: 120px;  
}
.nav_header {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 100%;
  height: 60px;
}
.nav_header a:hover {
  filter: brightness(1.2);
  transition: all 0.3s ease;
}
.nav_header-mobile {display: none;}
.nav_right {
    display: block;
    position: fixed;
    z-index: 999;
    right: -170px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 187px;
    height:289px;
    background-image:url(../images/sprite.png);
    background-position:0 0px;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }
  .nav_right.open {
    right: 0;
  }
  .nav_right ul.buttai {
      width: 122px;
      height: auto;
      position: relative;
      margin: 30px 0 0 33px;
  }
  .nav_right ul.buttai li {
      float: left;
      margin: 15px 0 0 0;
  }
  .nav_right ul.buttai .app-info__install--pc>a {
      display: block;
      text-indent: -9999px;
  }
  .nav_right ul.buttai .app-info__install--pc>a {
      height: 33px;
      width: 122px;
  }
  .button-fanpage a {
      background-image: url("../images/sprite.png") !important;
      background-position: -187px 0 !important;
  }
  .button-fanpage:hover a {
      background-image: url("../images/sprite.png") !important;
      background-position: -187px -33px !important;      
  }
  .button-group a {
      background-image: url("../images/sprite.png") !important;
      background-position: -187px  -66px!important;
  }
  .button-group:hover a {
      background-image: url("../images/sprite.png") !important;
      background-position: -187px -99px !important;
  }
  .nav_right .top{
    width: 56px;
    height: 56px;
    top: 10px;
    margin: 0 0 0 63px;
    position: relative;
  }
  .nav_right .top:hover{
    filter: brightness(1.6);
  }
  .nav_right .i_control {
    width: 28px;
    height: 85px;
    background: url(../images/i_close_nav_right.png) no-repeat center center;
    background-size: 100%;
    position: absolute;
    top: 80px;
    left: -5px;
    cursor: pointer;
  }
  .nav_right .i_control:hover{
    filter: brightness(1.6);
  }

/* SlideShow */
  .frame-slide{
    background: url(../images/frame.png) no-repeat;
    width: 1250px;
    height: 650px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;    
  }
  .slideshow-container {
    width: 1200px;
    height: 600px;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
  }

  .slides-wrapper {
    display: flex;        
    height: 100%;    
    transition: transform 0.5s ease;
  }    
  .slide {
    min-width: 100%;
    height: 100%;
    flex-shrink: 0;
    position: relative;
  }

  .slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .arrow{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    background: none;
    border: none;
    cursor: pointer;
  }
  .arrow.left { left: 10px; }
  .arrow.right { right: 10px; }

  .arrow:hover
    {      
      filter: brightness(1.5);
      transition: all 0.3s ease;
    }
  

  .dots {
    margin-top: 20px;
  }

  .dot {    
    display: inline-block;
    background: url(../images/btn_disable.png) no-repeat;
    width: 35px;
    height: 35px;    
    margin: 0 15px;
    cursor: pointer;
  }
  .dot.active {    
    background: url(../images/btn_active.png) no-repeat;
  }
  .productButtons {  
    display: flex;  
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    }
  .productBtn {
    width: 104px;
    height: 104px;    
    border: none;
    background: none;
    cursor: pointer;
    transition: background 0.3s;
    }    
  .productContainer {
    position: relative;
    width: 1200px;
    height: 600px;
    overflow: hidden;
    padding: 0;  
    }    
  .productBox {
    position: absolute;            
    opacity: 0;
    transform: scale(0.90);
    transition: opacity 0.5s ease, transform 0.5s ease;    
    pointer-events: none;  
    }  
  .productBox.active {
    opacity: 1;
    transform: scale(1);
    z-index: 1;
    pointer-events: none;
    }
  .productBox img {
    width: 100%;
    height: 100%;    
    }  
  .gif_skill{  
    position: absolute;
    right: 3%;
    bottom: 10%;
    width: 450px;
    height: 225px;
  }
  .frame_skill {
    position: absolute;
  }
  .gif{
    position: absolute;
    width: 450px;
    height: 225px;
    padding: 10px;
  }
  .gif img{
    width: 94%;
    height: 94%;
  }  
    #btn_thieulam{background: url(../images/class/button/thieulam.png);}
    #btn_thienvuong{background: url(../images/class/button/thienvuong.png);}
    #btn_caibang{background: url(../images/class/button/caibang.png);}
    #btn_thiennhan{background: url(../images/class/button/thiennhan.png);}
    #btn_minhgiao{background: url(../images/class/button/minhgiao.png);}
    #btn_ngudoc{background: url(../images/class/button/ngudoc.png);}
    #btn_duongmon{background: url(../images/class/button/duongmon.png);}
    #btn_ngamy{background: url(../images/class/button/ngamy.png);}
    #btn_thuyyen{background: url(../images/class/button/thuyyen.png);}
    #btn_doanthi{background: url(../images/class/button/doanthi.png);}
    #btn_vodang{background: url(../images/class/button/vodang.png);}
    #btn_conlon{background: url(../images/class/button/conlon.png);}
    
    #btn_thieulam.active{background: url(../images/class/button/thieulam_active.png);}
    #btn_thienvuong.active{background: url(../images/class/button/thienvuong_active.png);}
    #btn_caibang.active{background: url(../images/class/button/caibang_active.png);}
    #btn_thiennhan.active{background: url(../images/class/button/thiennhan_active.png);}
    #btn_minhgiao.active{background: url(../images/class/button/minhgiao_active.png);}
    #btn_ngudoc.active{background: url(../images/class/button/ngudoc_active.png);}
    #btn_duongmon.active{background: url(../images/class/button/duongmon_active.png);}
    #btn_ngamy.active{background: url(../images/class/button/ngamy_active.png);}
    #btn_thuyyen.active{background: url(../images/class/button/thuyyen_active.png);}
    #btn_doanthi.active{background: url(../images/class/button/doanthi_active.png);}
    #btn_vodang.active{background: url(../images/class/button/vodang_active.png);}
    #btn_conlon.active{background: url(../images/class/button/conlon_active.png);}

/* Tablet Rotate */
@media (max-width: 1650px) and (min-width: 1025px) {
    .nav_right {display: none;} 
}
  /* Tablet Portrait */
@media (max-width: 1024px) and (min-width: 768px) {      
  .nav_right {display: none;}   
  .nav_header img {
    width: 100%;
    height: 70%;
  }
  .slogan {transform: scale(0.8);}
  .frame1 {height: 1000px;}  
  .frame3 {height: 600px;}
  .title_monphai {
    transform: scale(0.8);
    margin-top: 100px;
    margin-bottom: 0;
  }
  .title_tinhnang {
    transform: scale(0.6);    
    margin: 0;
  }
  .productContainer {
    transform: scale(0.6);  
  }  
  .productButtons {
    transform: scale(0.9); 
  }
  .title_tinhnang {
    transform: scale(0.9);    
    margin: 0;
  }
  .slideshow-container {    
    width: 600px;
    height: 300px; 
  }
}

/* Smartphone: dưới 768px */
@media only screen and  (max-width: 767px) {
  body {
    background: url(../images/bg-m.jpg) top center no-repeat;
    width: 100%;
    min-height: 1500px;;
    background-size: cover;
  }
  .nav_right {display: none;}   
  .frame1 {height: 550px;}
  .frame2 {height: 400px;}
  .frame3 {height: 400px;} 
  .slogan {
    background: url(../images/slogan_m.png);
    width: 390px;
    height: 130px;  
    margin: 0;    
  }
  .bg-menu {
    transform: scale(0.50);     
    margin: 0;  
  }  
  .header {
    display: block;
    position: absolute;
    z-index: 999;
    top: 0;
    background:url(../images/bg_header_m.png) top center no-repeat;  
    background-size: cover;
    width: 100%;
    height: 100px;  
  }
  .nav_header{display: none;}   
  .nav_header-mobile {
    display: flex;
    justify-content: center;
    align-items: center;    
    padding-left: 10px;
    gap: 5px;
    width: 100%;
    height: 40px;    
  }
  .productContainer{
    width: 380px;
    height: 180px;
    
  }
  .gif_skill{  
    position: absolute;
    right: 2%;
    bottom: 10%;
    width: 150px;
    height: 75px;
  }
  .frame_skill {
    position: absolute;
  }
  .gif{
    position: absolute;
    width: 150px;
    height: 75px;
    padding: 5px;
  }
  .gif img{
    width: 95%;
    height: 92%;
  } 

  .slideshow-container {
    width: 380px;
    height: 180px;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
  }

  .slides-wrapper {
    display: flex;        
    height: 100%;    
    transition: transform 0.5s ease;
  }    
  .slide {
    min-width: 100%;
    height: 100%;
    flex-shrink: 0;
    position: relative;
  }

  .slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .arrow{display: none;}


  .title_monphai {    
    background:url(../images/title_monphai_m.png) center no-repeat;    
    margin: 0 0 10px 0;
    width: 100%;    
    height: 50px;        
  }
  .title_tinhnang {    
    background:url(../images/title_tinhnang_m.png) center no-repeat;    
    margin: 0 0 10px 0;
    width: 100%;    
    height: 50px;        
  }  
  .productButtons {  
    gap: 15px;
  }
  .productBtn {
    width: 50px;
    height: 50px;
  }
  .list_animation-wrap{display: none;}

  #btn_thieulam{background: url(../images/class/button/mobile/thieulam_m.png);}
  #btn_thienvuong{background: url(../images/class/button/mobile/thienvuong_m.png);}
  #btn_caibang{background: url(../images/class/button/mobile/caibang_m.png);}
  #btn_thiennhan{background: url(../images/class/button/mobile/thiennhan_m.png);}
  #btn_minhgiao{background: url(../images/class/button/mobile/minhgiao_m.png);}
  #btn_ngudoc{background: url(../images/class/button/mobile/ngudoc_m.png);}
  #btn_duongmon{background: url(../images/class/button/mobile/duongmon_m.png);}
  #btn_ngamy{background: url(../images/class/button/mobile/ngamy_m.png);}
  #btn_thuyyen{background: url(../images/class/button/mobile/thuyyen_m.png);}
  #btn_doanthi{background: url(../images/class/button/mobile/doanthi_m.png);}
  #btn_vodang{background: url(../images/class/button/mobile/vodang_m.png);}
  #btn_conlon{background: url(../images/class/button/mobile/conlon_m.png);}
  
  
  #btn_thieulam.active{background: url(../images/class/button/mobile/thieulam_active_m.png);}
  #btn_thienvuong.active{background: url(../images/class/button/mobile/thienvuong_active_m.png);}
  #btn_caibang.active{background: url(../images/class/button/mobile/caibang_active_m.png);}
  #btn_thiennhan.active{background: url(../images/class/button/mobile/thiennhan_active_m.png);}
  #btn_minhgiao.active{background: url(../images/class/button/mobile/minhgiao_active_m.png);}
  #btn_ngudoc.active{background: url(../images/class/button/mobile/ngudoc_active_m.png);}
  #btn_duongmon.active{background: url(../images/class/button/mobile/duongmon_active_m.png);}
  #btn_ngamy.active{background: url(../images/class/button/mobile/ngamy_active_m.png);}
  #btn_thuyyen.active{background: url(../images/class/button/mobile/thuyyen_active_m.png);}
  #btn_doanthi.active{background: url(../images/class/button/mobile/doanthi_active_m.png);}
  #btn_vodang.active{background: url(../images/class/button/mobile/vodang_active_m.png);}
  #btn_conlon.active{background: url(../images/class/button/mobile/conlon_active_m.png);}
   
  
}