@charset "utf-8";
/* Google fonts */
@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');
/* bootstrap added */
@import url('bootstrap.min.css');

/* CUSTOM */
.ds{-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.cursor-pointer{cursor: pointer;}
.cursor-default{cursor: default;}

/* SPRITE */
html, body{font-size: 15px; font-family: "Varela Round", "Helvetica", "Arial"; color: #191919; background-color: #fff;}
a, a:hover, a:focus{color: inherit; text-decoration: none;}
label{font-weight: 400;}
.noPadding > [class*="col-"] {padding-right: 0; padding-left: 0;}
.smallPadding > [class*="col-"] {padding-right: 10px; padding-left: 10px;}
h1, h2, h3, h4, h5, h6{margin: 0; padding: 0; color: inherit; font-size: inherit;}
blockquote{font-size: inherit;}
textarea{resize: vertical;}
.borderless th, .borderless td {border-top: none !important;}
.borderless tr:first-child th, .borderless tr:first-child td {padding-top: 0;}
ul{margin: 0; padding: 0; list-style-type: none;}
.text-shadow{text-shadow: 2px 1px 5px rgba(0, 0, 0, 1);}
.alert-success{background-color: #cfffce;}

.wysiwyg{line-height: 24px;}
.wysiwyg img, .wysiwyg media, .wysiwyg iframe, .wysiwyg object, .wysiwyg video{max-width: 100%;}
.wysiwyg img, .wysiwyg media, .wysiwyg object, .wysiwyg video{height: auto;}

.wrapper{position: relative; z-index: 2; margin: 0 auto; width: 1200px; max-width: 100%;}
.homepage{margin-bottom: 125px;}

html{position: relative; min-height: 100%;}
#main-background{position: absolute; z-index: 1; top: 0; left: 0; width: 100%;}

#header{min-height: 410px; color: #e8d085; font-size: 18px;}
#header .logo{height: 150px;}
#header .menu{padding-top: 10px;}
#header .menu a{display: inline-block; margin: 0 25px; padding: 4px 18px;}
#header .menu a:hover, #header .menu .active{background: rgba(136, 20, 4, 0.55); border-radius: 6px;}

.download-section{z-index: 2; margin-top: -100px;}

.category-posts{width: 800px; max-width: 95%; margin-top: 65px; margin-left: auto; margin-right: auto; border: 1px solid #000; border-radius: 5px; overflow: hidden;     box-shadow: 0 5px 10px 3px rgba(0, 0, 0, 0.2);}
.category-posts.register{width: 680px; max-width: 95%;}
.category-posts .nav-tabs{height: 53px; background: url('../images/bg-category.jpg') no-repeat; background-size: 100% 100%;}
.category-posts .nav-item{margin: 0; height: 100%; border-radius: 0; background: transparent; color: #e8d085; font-size: 16px; border: 0;}
.category-posts .nav-item.active, .category-posts .nav-item:hover{background: url('../images/bg-category-active.png') no-repeat; background-size: 100% 100%; color: #e8d085;}
.category-posts .tab-content{padding: 10px 15px; background: #dde1e2;}
.tab-content table, .tab-content table td, .tab-content table th{border-color: #520909;}
.category-posts .post-item{margin: 5px 0; padding: 0; color: inherit; background: transparent; border: 0;}
.category-posts .post-item .bullet{margin-right: 8px; color: green;}
.category-posts .post-item[href]:hover{color: #d63c00;}
.category-posts .time{font-size: 14px; color: #934f3d;}
.category-posts .table-warning{background: #fff8e4;}
.category-posts .wysiwyg .link{color: #c73212;}
.category-posts .wysiwyg .link:hover{text-decoration: underline;}
.category-posts .wysiwyg code{color: #ff0000; font-size: inherit;}
.category-posts .link-download{padding: 8px 15px; background-color: #c73212; color: #fff; border-radius: 6px;}
.category-posts .link-download:hover{background-color: #a9290c;}
.nav-tabs-scroll { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; /* giúp scroll mượt trên iOS */}
.nav-tabs-scroll .nav-link {white-space: nowrap; /* ngăn text xuống dòng */}
.nav-tabs-scroll::-webkit-scrollbar {display: none;}

.flex-item{flex: 1 0 25%;}
.flex-item .card{border-radius: 6px; border: 1px solid #565656; background: #2f3136; box-shadow: 0px 2px 2px 2px rgba(0, 0, 0, 0.1);}
.flex-item .link-item{background: #fff;}
.link-item:hover{background: #fff9c5; font-weight: 600;}
.flex-item .card-body{padding: 12px 12px;}
.coin-value{color: #fff200;}
.box-heading{color: #e8d085;}
@media (max-width: 768px) {
    .flex-item {flex: 1 0 100%; max-width: 100%;}
    .flex-item .card{margin-left: 0 !important; margin-right: 0 !important;}
}
.pages{top: -290px; margin-bottom: 80px;}

.my-form label{font-weight: 600;}
.my-form label.error{margin-top: 8px; font-weight: 400; color: #af2a0d;}
.my-form .form-control{background-color: #fffef9; border: 1px solid #5e5e5e;}
.my-form .form-control[disabled], .my-form .form-control[readonly]{background-color: #dbdbdb;}
.my-form .btn-submit{padding: 0.475rem 1.5rem; background-color: #af2a0d; border-color: #5c1202;}
.my-form .btn-submit:hover{background-color: #90250d;}

#footer{position: absolute; z-index: 0; left: 0; bottom: 0; width: 100%; color: #e8d085; text-shadow: 0 1px 8px rgba(255, 255, 255, 0.65);}
#footer .content{position: absolute; bottom: 0; left: 0; width: 100%;}

.spinner{display: inline-block; width: 35px; height: 35px;}
.spinner.block-ui{margin-top: -17px; margin-left: -17px;}
.spinner:after{content: " "; display: block; width: 35px; height: 35px; border-radius: 50%; border: 4px solid #5f5f5f; border-color: #5f5f5f transparent #5f5f5f transparent; animation: spinner 0.59s linear infinite;}
@keyframes spinner {0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);}}

/* RESPONSIVE */
@media screen and (max-width: 1024px) {
    input[type], textarea, select{font-size: 16px !important;}
    #header{min-height: auto;}
    #header .menu{padding-top: 0px;}
    #header .logo{height: 100px;}
    .download-image{height: 60px;}
    .download-section{margin-top: 30px;}
    .category-posts{margin-top: 35px;}
    .pages{top: 0;}
    #footer p{margin: 0; padding-bottom: 0 !important; margin-bottom: 10px !important;}
}

@media screen and (max-width: 860px) {
    #header .menu{padding-top: 5px;}
    #header .menu a{background: rgba(136, 20, 4, 0.85); border-radius: 6px;}
    #header .center-section{display: none;}
}

@media screen and (max-width: 750px) {
    #header .menu a{margin: 0 5px; padding: 4px 5px;}
    #header .menu.left-section{margin-right: 0 !important;}
    #header .menu.right-section {margin-left: 0 !important;}
    #footer img{height: 115px;}
}

@media screen and (max-width: 400px) {
    #header .wrapper{justify-content: flex-start !important; -ms-flex-pack: start!important;}
}

@media screen and (max-width: 380px) {
    #header .menu a{font-size: 14px;}
    .category-posts .nav-item{font-size: 14px;}
}