@font-face {
  font-family: 'tahoma';
  src: url("./assets/fonts/tahoma.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'tahomabold';
  src: url("./assets/fonts/tahomabold.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'uvnlaclongquanr';
  src: url("./assets/fonts/uvnlaclongquanr.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'uvnlaclongquanbold';
  src: url("./assets/fonts/uvnlaclongquanbold.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }

.f-tahoma {
  font-family: 'tahoma'; }

.f-tahomabold {
  font-family: 'tahomabold'; }

.f-uvnlaclongquanr {
  font-family: 'uvnlaclongquanr'; }

.f-uvnlaclongquanbold {
  font-family: 'uvnlaclongquanbold'; }

/* =Reset default browser CSS.
-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
  border: 0;
  font-family: inherit;
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline; }

:focus {
  outline: 0; }

ol, ul {
  list-style: none; }

table {
  border-collapse: separate;
  border-spacing: 0; }

caption, th, td {
  font-weight: normal;
  text-align: left; }

blockquote:before, blockquote:after, q:before, q:after {
  content: ""; }

blockquote, q {
  quotes: "" ""; }

a img {
  border: 0; }

figure {
  margin: 0; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

/* -------------------------------------------------------------- */
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

a:hover, a:focus, a:hover p, select:hover, select:focus, select:active {
  text-decoration: none;
  outline: none !important; }

a, a:link, a:active {
  text-decoration: none;
  outline: none !important; }

.clearfix:after {
  content: "";
  visibility: hidden;
  display: table;
  clear: both; }

.box_sizing_border_box {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.a100 {
  width: 100%;
  height: 100%;
  display: block; }

.w95_auto {
  width: 95%;
  margin: 0 auto; }

.d-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

.flex-center {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }

.m-auto {
  margin-left: auto;
  margin-right: auto; }

.t-upper {
  text-transform: uppercase; }

.t-center {
  text-align: center; }

.img_responsive {
  max-width: 100%;
  width: auto;
  height: auto; }

@-webkit-keyframes zoomIcon {
  0% {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1); }
  50% {
    -webkit-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1); }
  100% {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1); } }

@keyframes zoomIcon {
  0% {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1); }
  50% {
    -webkit-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1); }
  100% {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1); } }

@-webkit-keyframes tada {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  10%, 20% {
    -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -3deg); }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

@keyframes tada {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  10%, 20% {
    -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -3deg); }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

@-webkit-keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

@keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

@-webkit-keyframes zoomTxt_btn {
  0% {
    opacity: 1.0;
    -webkit-transform: scale(1);
    transform: scale(1); }
  50% {
    opacity: 0.8;
    -webkit-transform: scale(1.1);
    transform: scale(1.1); }
  75% {
    opacity: 1.2;
    -webkit-transform: scale(0.9);
    transform: scale(0.9); }
  100% {
    opacity: 1.0;
    -webkit-transform: scale(1);
    transform: scale(1); } }

@keyframes zoomTxt_btn {
  0% {
    opacity: 1.0;
    -webkit-transform: scale(1);
    transform: scale(1); }
  50% {
    opacity: 0.8;
    -webkit-transform: scale(1.1);
    transform: scale(1.1); }
  75% {
    opacity: 1.2;
    -webkit-transform: scale(0.9);
    transform: scale(0.9); }
  100% {
    opacity: 1.0;
    -webkit-transform: scale(1);
    transform: scale(1); } }

@-webkit-keyframes scaleImg {
  0% {
    -webkit-transform: scale(30);
    transform: scale(30);
    opacity: 0; }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1; } }

@keyframes scaleImg {
  0% {
    -webkit-transform: scale(30);
    transform: scale(30);
    opacity: 0; }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1; } }

body {
  font-family: 'uvnlaclongquanr';
  line-height: 1.2;
  font-size: 13px;
  padding: 0px;
  color: #FDF65E;
  margin: 0px auto;
  width: 100%;
  overflow-x: hidden !important;
  background-color: #c3d5e5;
  background: url(../images/bg.jpg) no-repeat center top; }

.container {
  width: 1003px;
  margin: 0 auto;
  position: relative; }

.p-relative {
  position: relative; }

@media only screen and (min-width: 1000px) {
  .hidden_1000 {
    display: none; } }

.color_orange {
  color: #f88218; }

.text-shadow {
  text-shadow: 2px 2px 5px #000000; }

.title_frame {
  font-family: 'umtgodswordr';
  font-size: 35px;
  color: #fffbde;
  padding-top: 40px; }

button, select {
  border: none; }

.header {
  width: 302px; }
  .header ul {
    text-align: center;
    margin-top: 5px;
margin-left: -100px	}
    .header ul li {
      display: inline-block;
      margin: 0 6px;
      position: relative; }
      .header ul li a {
        color: #FDF65E; }
        .header ul li a:hover {
          color: #FDF65E; }
      .header ul li:nth-child(n+2):before {
        position: absolute;
        content: '';
        width: 1px;
        height: 12px;
        background: #243c6b;
        top: 1px;
        left: -8px; }

.bg-video video {
  position: absolute;
  left: 50%;
  top: 0;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%); }
  @media only screen and (min-width: 1024px) {
    .bg-video video {
      display: block; } }
  @media (min-aspect-ratio: 16 / 9) {
    .bg-video video {
      width: 100%;
      height: auto; } }
  @media (max-aspect-ratio: 16 / 9) {
    .bg-video video {
      width: auto;
      height: 100%; } }

.main-content {
  position: relative;
  width: 660px;
  margin-left: 25%;
  margin-top: 10px; }
  @media only screen and (min-width: 1360px) {
    .main-content {
      margin-top: 30px; } }
  @media only screen and (min-width: 1600px) {
    .main-content {
      margin-top: 30px;
      width: 832px; } }
  @media only screen and (min-width: 1920px) {
    .main-content {
      margin-top: 120px;
      margin-left: 8%; } }

.slogan-button .slogan {
  width: 600px;
  -webkit-animation: scaleImg .8s ease;
  animation: scaleImg .8s ease; }
  @media only screen and (min-width: 1600px) {
    .slogan-button .slogan {
      width: auto; } }

.slogan-button a {
  color: #243c6b; }

.slogan-img .slogan-ani {
  position: absolute;
  left: 45%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  display: inline-block;
  width: 480px;
  height: 183.125px;
  background: url(../images/slogan-ani-small.png) no-repeat left top;
  -webkit-animation: moveYAniSmall 1.4s steps(16) infinite;
  animation: moveYAniSmall 1.4s steps(16) infinite;
  top: -15px; }
  @media only screen and (min-width: 1600px) {
    .slogan-img .slogan-ani {
      width: 860px;
      height: 250px;
      background: url(../images/slogan-ani.png) no-repeat left top;
      -webkit-animation: moveYAni 1.4s steps(16) infinite;
      animation: moveYAni 1.4s steps(16) infinite;
      top: -30px; } }

.box-text {
  margin-top: -10px;
  width: 600px;
  height: 50px;
  line-height: 50px;
  background: url(../images/bg-text.png) no-repeat center top;
  background-size: 100% 100%;
  font-size: 14.4px; }
  @media only screen and (min-width: 1600px) {
    .box-text {
      width: 838px;
      height: 59px;
      line-height: 55px;
      font-size: 21.4px; } }
  .box-text span {
    font-size: 26px;
    color: #a81630;
    font-family: 'uvnlaclongquanbold'; }
    @media only screen and (min-width: 1600px) {
      .box-text span {
        font-size: 33px; } }

.btn-register {
     width: 250px;
    height: 86px;
    background: url(../images/bg-btn.png) no-repeat center top;
    background-size: cover;   /* đảm bảo nền full */
	margin-top: -150px;
}
  @media only screen and (min-width: 1600px) {
    .btn-register {
      margin-top: 135px; } }
  .btn-register .txt-btn-register {
    font-size: 19px;
    color: #410304;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    text-shadow: 1px 2px 3px #000;
    margin-left: 3px;
    -webkit-animation: zoomTxt_btn 1.5s linear 0.5s infinite;
    animation: zoomTxt_btn 1.5s linear 0.5s infinite; }
  .btn-register .text-code {
    color: #ff1502; }

@-webkit-keyframes moveYAniSmall {
  0% {
    background-position-y: 0px; }
  100% {
    background-position-y: -2930px; } }

@keyframes moveYAniSmall {
  0% {
    background-position-y: 0px; }
  100% {
    background-position-y: -2930px; } }

@-webkit-keyframes moveYAni {
  0% {
    background-position-y: 0px; }
  100% {
    background-position-y: -4000px; } }

@keyframes moveYAni {
  0% {
    background-position-y: 0px; }
  100% {
    background-position-y: -4000px; } }

/*# sourceMappingURL=style.css.map */

/* Nhóm 2 nút */
.buttons-group {
    width: 615px;          /* 300 + 300 + 15 = 615px */
}

/* Nút Tải game - copy style từ .btn-register */
.btn-download {
    width: 250px;
    height: 86px;
    background: url(../images/bg-btn.png) no-repeat center top;
    background-size: cover;   /* đảm bảo nền full */
	margin-top: -150px;
	margin-left : -100px;
}

/* Style cho Popup Download */
.popup-download-container {
    padding: 30px;
    background: #1a1a1a; /* Màu tối huyền bí cho game */
    border: 2px solid #fdf65e;
    text-align: center;
    border-radius: 10px;
    color: #fff;
}

.popup-title {
    font-size: 24px;
    color: #fdf65e;
    margin-bottom: 25px;
    text-shadow: 0 0 10px rgba(253, 246, 94, 0.5);
}

.download-links {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.dl-item {
    display: block;
    padding: 12px;
    background: linear-gradient(to right, #410304, #8b0000);
    color: #fff !important;
    text-decoration: none;
    border: 1px solid #f98508;
    border-radius: 5px;
    font-size: 18px;
    transition: all 0.3s;
}

.dl-item:hover {
    transform: scale(1.05);
    background: linear-gradient(to right, #f98508, #410304);
    box-shadow: 0 0 15px #f98508;
}

/* Fix nút đóng của GosuPopup nếu bị lệch */
.gosu-popup-close {
    background: #fdf65e !important;
    color: #000 !important;
    border-radius: 50%;
}
/* Đảm bảo popup luôn nổi lên trên cùng */
.gosu-popup-wrapper {
    z-index: 9999 !important;
}
.gosu-popup-overlay {
    z-index: 9998 !important;
}
/* Style bổ sung để popup đẹp hơn */
#download-popup {
    background: #1a1a1a;
    padding: 20px;
    border-radius: 10px;
}

/* Container chính của Popup */
.modal-content {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 700px; /* Độ rộng theo ảnh mẫu */
    background: rgba(20, 15, 10, 0.95); /* Màu tối nâu đặc trưng */
    border: 1px solid #4a3a2a;
    padding: 40px;
    box-shadow: 0 0 50px rgba(0,0,0,0.8);
    color: #ccc;
    font-family: Arial, sans-serif;
}
/* Container cho nút cố định */
.fixed-side-button {
    position: fixed;
    right: 0;
    top: 10%; /* Vị trí 1/3 chiều cao màn hình */
    z-index: 999; /* Đảm bảo luôn nằm trên video và content */
}

/* Style nút vuông */
.btn-side-square {
    width: 80px;
    height: 80px;
    background: linear-gradient(145deg, #410304, #8b0000);
    border: 2px solid #e8d5b5;
    border-right: none; /* Bỏ viền phải để dính sát mép màn hình */
    border-radius: 8px 0 0 8px; /* Bo góc bên trái */
    color: #e8d5b5 !important;
    text-align: center;
    font-size: 14px;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: -2px 2px 10px rgba(0,0,0,0.5);
    transition: all 0.3s ease;
}

/* Hiệu ứng khi di chuột vào */
.btn-side-square:hover {
    width: 95px; /* Hơi dài ra một chút khi hover */
    background: linear-gradient(145deg, #8b0000, #410304);
    color: #fff !important;
    box-shadow: -5px 5px 15px rgba(232, 213, 181, 0.3);
}

/* Tùy chỉnh cho màn hình nhỏ/Mobile */
@media (max-width: 768px) {
    .btn-side-square {
        width: 60px;
        height: 60px;
        font-size: 11px;
    }
}

/* Tiêu đề GAME FILES */
.popup-header h2 {
    color: #e8d5b5; /* Màu vàng cát */
    font-size: 32px;
    letter-spacing: 2px;
    margin-bottom: 5px;
}

.header-line {
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, #e8d5b5 0%, transparent 70%);
    margin-bottom: 30px;
    position: relative;
}

.header-line::before {
    content: '◈'; /* Icon nhỏ ở đầu dòng kẻ */
    position: absolute;
    top: -8px; left: 0;
    color: #e8d5b5;
}

/* Danh sách các link tải */
.dl-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #444; /* Đường kẻ ngang */
}

.dl-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.dl-icon { width: 50px; height: 50px; object-fit: contain; }

.dl-name {
    display: block;
    color: #fff;
    font-weight: bold;
    font-size: 18px;
}

.dl-desc {
    display: block;
    color: #888;
    font-size: 13px;
}

/* Nút Coming Soon */
.btn-coming {
    background: #c5a677; /* Màu vàng đồng của button */
    color: #000 !important;
    padding: 12px 25px;
    font-weight: bold;
    font-size: 16px;
    border-radius: 4px;
    text-transform: uppercase;
  
	cursor: not-allowed; /* Thay 'not-allowed' thành 'pointer' */
    box-shadow: inset 0 0 10px rgba(255,255,255,0.3);
}

/* Footer Popup */
.popup-footer { margin-top: 30px; }

.footer-title {
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 10px;
}

.footer-desc {
    color: #666;
    font-size: 13px;
    line-height: 1.5;
}

/* Nút đóng (X) */
.modal-close {
    position: absolute;
    right: 20px; top: 15px;
    color: #c5a677;
    font-size: 30px;
    cursor: pointer;
}

/* Text bên trong nút tải game -  */
.btn-download .txt-btn-register {
    font-size: 19px;
    color: #410304;
    flex-direction: column;
    text-shadow: 1px 2px 3px #000;
    margin-left: 3px;
    animation: zoomTxt_btn 1.5s linear 0.5s infinite;
}
/* Style riêng cho nội dung About */
.about-server-content {
    text-align: left;
    color: #e8d5b5;
    line-height: 1.6;
    max-height: 400px;
    overflow-y: auto; /* Thêm thanh cuộn nếu bài viết quá dài */
    padding-right: 10px;
}

/* Tùy chỉnh thanh cuộn cho cổ điển */
.about-server-content::-webkit-scrollbar { width: 5px; }
.about-server-content::-webkit-scrollbar-track { background: #1a1a1a; }
.about-server-content::-webkit-scrollbar-thumb { background: #c5a677; border-radius: 10px; }

.server-intro {
    font-size: 18px;
    margin-bottom: 20px;
    color: #fff;
    border-left: 3px solid #c5a677;
    padding-left: 15px;
}

.server-features ul {
    margin: 15px 0;
    list-style: none;
}

.server-features ul li {
    margin-bottom: 10px;
    position: relative;
    padding-left: 25px;
}

.server-features ul li::before {
    content: '✦';
    position: absolute;
    left: 0;
    color: #c5a677;
}

.server-history {
    font-style: italic;
    font-size: 14px;
    color: #888;
    margin-top: 20px;
}
/* Responsive cho màn hình lớn hơn (giữ nguyên logic cũ) */
@media only screen and (min-width: 1600px) {
    .buttons-group {
        margin-top: 135px !important;
        width: 855px;          /* 420 + 420 + 15 nếu bạn scale to hơn */
    }
    
    .btn-download,
    .btn-register {
        width: 420px;
        height: 142px;         /* scale lên nếu muốn to hơn */
    }
    
    .btn-download .txt-btn-register,
    .btn-register .txt-btn-register {
        font-size: 32px;
    }
}