/*

===========================

[IMPORT FONTS]

===========================

*/

@import url('https://fonts.googleapis.com/css2?family=ZCOOL+QingKe+HuangYou&display=swap');

/*

===========================

[BACKGROUND]

===========================

*/

* 

{

  margin: 0;

  padding: 0;

  box-sizing: border-box;

  font-family: 'ZCOOL QingKe HuangYou';

}

body 

{

  background-color: #222; 

}

html 

{ 

  scroll-behavior: smooth; 

}

@keyframes blur {

  from {

    opacity: 0;

    filter: blur(10px);

  }

  to {

    opacity: 1;

    filter: blur(0px);

  }

}

.bodystyle

{

  background-color: #333333;

  padding: 0px;

  margin: 8px;

  border-style: double;

  border-radius: 20px;

  border-color: #ccc;

  border-width: 2px;

  animation-name: bodyborder;

  animation-iteration-count: infinite;

  animation-duration: 1s;

  animation-direction: right;

  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none

}

@keyframes bodyborder {

  30% {

        border-color: cyan

      }

  60% {

        border-color: lime

      }

  90% {

        border-color: magenta

      }

    }

/*

===========================

[SOCIAL BUTTONS]

===========================

*/

.worker

{

	 display: flex; 

	 flex: 1;

   flex-wrap: wrap;

   justify-content:left;

	 align-items: left;

	 padding: 20px;

	 animation: blur 3s linear 1 0s forwards;

}

.btn-social div 

{

  border: none;

  border-radius: 5px; 

  color: white; 

  padding: 10px 24px; 

  cursor: pointer;  

  width: 45%;

  margin: auto 29%;

  transition: 0.5s;

  animation: blur 3s linear 1 0s forwards;

}

.btn-social:after 

{

  content: "";

  clear: both;

  display: table;

}

.btn-social div:not(:last-child) 

{

  border-right: none; 

}

.btn-social div:hover 

{

  transform: translateY(-3px);

  transition: 0.5s;

}

/*

===========================

[PHOTO ANIMATION]

===========================

*/

.blob

{

  background: black;

  border-radius: 50%;

  margin: 10px;

  height: 150px;

  width: 150px; 

  box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);

  transform: scale(1);

  animation: blur 3s linear 1 0s forwards;

  animation: pulse 3s infinite;

}

@keyframes pulse 

{

  0% { transform: scale(0.99); }

  50% { transform: scale(1.1);  }

  100% { transform: scale(0.99); }

}

/*

===========================

[TEXT STYLES]

===========================

*/

.name 

{

  animation: blur 3s linear 1 0s forwards;

  color: #FFFFFF;

  padding: 0;

  font-size: 22px;

  line-height: 1.8;

  margin-bottom: 0;

}

.desc 

{

  animation: blur 3s linear 1 0s forwards;

  color: #FFFFFF;

  padding: 0;

  list-style: none;

  text-align: center;

  font-size: 20px;

  line-height: 1.6;

  margin-bottom: 0;

}

.bg-text 

{

  animation: blur 3s linear 1 0s forwards;

  background-color: rgb(0,0,0);

  background-color: rgba(0,0,0, 0.4);

  color: white;

  font-weight: bold;

  width: 100%;

  padding: 20px;

  text-align: center;

}

hr.new { border: 0.5px solid #FFFFFF; }

h1

{

  animation: blur 3s linear 1 0s forwards;

  font-size: 80px;

  color: #00FFBC;

  text-shadow: 1px 1px 0px grey,

             2px 2px 0px grey,

             3px 3px 0px grey,

             4px 4px 0px grey,

             5px 5px 0px grey;

}

h2

{

  text-align: center;

  color: #f37388;

  font-size: 44px;

  font-weight: bold;

  text-shadow: -1px 0 5px #00f4ff, 0 1px 5px #00f4ff, 1px 0 5px #00f4ff, 0 -1px 5px #00f4ff;

}

/*

===========================

[FOOTER]

===========================

*/

.footer-basic 

{

 animation: blur 3s linear 1 0s forwards;

  padding: 40px 0;

  color: #4b4c4d;

}

.footer-basic .copyright 

{

  margin-top: 15px;

  text-align: center;

  font-size: 13px;

  color: #aaa;

  margin-bottom: 0;

}

/*

===========================

[NAV BAR]

===========================

*/

.topnav { overflow: hidden; }

.topnav a 

{

  animation: blur 3s linear 1 0s forwards;

  font-family: 'ZCOOL QingKe HuangYou';

  float: left;

  display: block;

  color: white;

  text-align: center;

  padding: 12px 14px;

  text-decoration: none;

  font-size: 17px;

  border-bottom: 3px solid transparent;

}

.topnav a:hover 

{

  border-bottom: 3px solid white;

  transition: 0.3s;

}

.topnav a.active 

{ 

  border-bottom: 3px solid white;

}

/*

===========================

[SCROLL BAR]

===========================

*/

::-webkit-scrollbar 

{

  width: 8px;

  height: 15px;

}

::-webkit-scrollbar-track 

{

  box-shadow: inset 0 0 5px grey; 

  border-radius: 10px;

}

::-webkit-scrollbar-thumb 

{

  background: #00ffbc; 

  border-radius: 10px;

}

::-webkit-scrollbar-thumb:hover 

{

  background: #00ffbc; 

}

/*

===========================

[PRE LOADER]

===========================

*/

.loader 

{

  position: fixed;

  z-index: 999999;

  text-align: center;

  background: #111;

  height: 100%;

  width: 100%;

  overflow: auto;

}

.loader:before 

{

  content: "";

  height: 100%;

  display: inline-block;

  vertical-align: middle;

}

.loader .spinner-frame 

{

  display: inline-block;

  vertical-align: middle;

  width: 100px;

  height: 100px;

  border-radius: 50%;

  position: relative;

  overflow: hidden;

  border: 5px solid #fff;

  padding: 10px;

}

.loader .spinner-frame .spinner-cover 

{

  background: #fff;

  width: 100%;

  height: 100%;

  border-radius: 50%;

  position: relative;

  z-index: 2;

}

.loader .spinner-frame .spinner-bar {

  background: #00ffbc;

  width: 50%;

  height: 50%;

  position: absolute;

  top: 0;

  left: 0;

  border-radius: 100% 0 0 0;

  -webkit-animation: spinny 0.5s linear infinite;

  transform-origin: 100% 100%;

}

@-webkit-keyframes spinny 

{

  0% 

    {

        transform: rotate(0deg);

        background: #00ffbc;

    }

    100% 

    {

        transform: rotate(360deg);

        background: #00ffbc;

    }

}

/*

===========================

[DOWNLOAD CARDS]

===========================

*/

.wrapper

{

  animation: blur 3s linear 1 0s forwards;

  max-width: 1080px;

  margin: 50px auto;

  padding: 0 20px;

  position: relative;

}

.wrapper .row 

{ 

  display: flex; 

}

.wrapper .row-1 

{ 

  justify-content: flex-start; 

}

.wrapper .row-2 

{ 

  justify-content: flex-end; 

}

.wrapper .row section 

{

  background: #eee;

  border-radius: 5px;

  width: calc(50% - 40px);

  padding: 20px;

  position: relative;

}

.row-1 section::before 

{ 

  right: -7px; 

}

.row-2 section::before 

{ 

  left: -7px; 

}

.row-1 section .icon 

{ 

  top: 15px; right: -60px; 

}

.row-2 section .icon 

{ 

  top: 15px; left: -60px; 

}

.row section .details, .row section .bottom 

{

  display: flex;

  align-items: center;

  justify-content: space-between;

}

.row section .details .title 

{

  font-size: 22px;

  font-weight: 600;

}

.row section .bottom a 

{

  text-decoration: none;

  background: #222;

  color: #fff;

  padding: 7px 15px;

  border-radius: 5px;

  font-weight: 400;

  transition: all 0.3s ease;

}

.row section .bottom a:hover 

{

  transform: scale(0.97);

}

@media(max-width: 790px) 

{

  .wrapper .center-line { left: 40px; }

  .wrapper .row{ margin: 30px 0 3px 3px; }

  .wrapper .row section{ width: 100%; }

  .row-1 section::before{ left: -7px; }

  .row-1 section .icon{ left: -60px; }

}

.cs

{

  margin-bottom:5px;

  border-radius:8px;

  border-style:outset;

  border:1px solid #d3d3d3;

  border-color:#000;

  background-color:#fff;

  display:inline-block;

  width:51px;

  height:51px;

  font-size:30px;

  line-height:51px;

  text-align:center;

  cursor:pointer;

}

.cs:hover 

{

  background-color:#ccf5ff

}

.cs

{

  width:98%;

  height:73px;

  font-size:47px;

  line-height:73px

}

iframe

{

  vertical-align: middle;

  border: 2px solid #fff;

}

.vihungload {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  cursor: pointer; /* Thêm con trỏ khi di chuột vào hộp thông báo */
  opacity: 0; /* Đặt độ mờ ban đầu là 0 */
  transition: opacity 0.2s; /* Thời gian mờ dần lên là 0.5 giây */
  z-index: 9999; /* Đặt z-index cao hơn các phần tử khác trên trang */
}

.vihungmes {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 30px;
  border-radius: 18px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  font-size: 22px;
  font-weight: bold;
}