@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@300;400;700&display=swap");
@font-face {
    font-family: fz-font-pixel;
    src: url(../font/font-zf.ttf);
}
.text-black{
    color: #000!important;
}
body{
    font-family: "Noto Sans Thai", sans-serif;
}
.font-mc{
    font-family: "fz-font-pixel";
}
.font-thai,
.carousel-header,
.navbar-main,
.featured-section,
h1,
h2 {
    /* font-family: "fz-font-pixel" */
  font-family: "Noto Sans Thai", sans-serif;
}
.btn-circle {
  width: 40px;
  height: 40px;
  text-align: center;
  padding: 6px 0;
  font-size: 19px;
  line-height: 1.6;
    border-radius: 25px;
}
.pointer {
  cursor: pointer;
}
.footer-nav a.nav-link{
    color: #fff!important;
    /* border-right: 1px solid #fff; */
}
.footer-nav .nav-item{
    position: relative;
}
.footer-nav .nav-item::after{
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 40%;
    content: "";
    color: #fff;
    padding-left: 1rem;
    padding-right: 1rem;
    border-right: 2px solid #fff;
}

.footer-nav .nav-item:last-child::after{
    border-right: none;
}
.carousel-header {
  background-color: #000;
  color: #fff;
}
.carousel-header .carousel-inner {
  height: 100vh;
}
.carousel-header img {
  height: 100vh;
  opacity: 0.5;
  object-fit: cover;
}
.navbar-main {
  background-color: #000;
  /* color: #fff; */
}
.navbar-main .nav-item .nav-link {
  color: #fff;
  padding-left: 1.7rem;

  padding-right: 1.7rem;
}
.navbar-main .nav-item{
    border-bottom: 3px solid transparent;
}
.navbar-main .nav-item.active {

  border-color: goldenrod;
}
.navbar-main .nav-item:hover {

    border-color: #ffc10794;
}
.featurette-heading{
    color: goldenrod;
}
.lead{
    color:#e5d4ab
}
.post-list .list-group-item{
    color: inherit !important;
    border-left: none;
    border-right: none;
}
.post-list>.list-group-item:first-child{
    border-top: none;
}
.post-list>.list-group-item:last-child{
    border-bottom: none;
}
.posts-thumbnail{
    padding-top: 10px;
    padding-bottom: 10px;
}
.posts-thumbnail img{
    width: 300px;
    height: 168px;
    object-fit: cover;
}
.title{
    font-size: 50px;
    font-weight: 600;
    color: #000;
    margin-top:80px;
    margin-bottom:50px;
}
.posts-title{
    font-size: 1.5rem;
    font-weight: 700;
    color: #000;
}

.featurette a{
    color:inherit;
    text-decoration: none!important;
}
.featured-section {
  text-align: center;
  /* position: relative; */
}

.featured-section h2 {
  color: #000;
}
.featured-section p {
  color: #000;
  font-weight: 300;
}
.featured-section img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.news-section {
  background-color: #000;
  background-image: url(../img/bg-test.jpg);
  /* background-size: contain; */
  background-position: right;
  /* background-c */
  color: #fff;
  position: relative;
  
}
.news-section .container{
    position: relative;
    z-index: 20;
}
.news-section img {
  object-fit: cover;
  /* min-width:100%;
    height:100%; */
  height: 500px;
  width: 500px;
  max-width:100%;
}
.news-detail-section{
    padding-top: 5rem;
    padding-bottom: 5rem;
    background-color: #ffffffe0;
    background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='29' height='50.115' patternTransform='scale(2) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='hsla(0,0%,100%,1)'/><path d='M14.498 16.858L0 8.488.002-8.257l14.5-8.374L29-8.26l-.002 16.745zm0 50.06L0 58.548l.002-16.745 14.5-8.373L29 41.8l-.002 16.744zM28.996 41.8l-14.498-8.37.002-16.744L29 8.312l14.498 8.37-.002 16.745zm-29 0l-14.498-8.37.002-16.744L0 8.312l14.498 8.37-.002 16.745z'  stroke-width='1' stroke='hsla(43, 74%, 49%, 1)' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");    
    /* background-image: url(../img/bg-test.jpg); */

    min-height: 77vh;
    position: relative;
}
.news-detail-section::before{
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 350px;
    top: 0;
    left: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 5; 
}
.news-detail-section::after{
    content: "";
    position: absolute;
    /* display: block; */
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #ffffffeb;
    z-index: 5;
    border-bottom: 1px solid #6c757d;

}
.news-detail-section .container{
    position: relative;
    z-index: 20;
}
.news-detail-section>.container>.card, .page-detail-section>.container>.card{
    border:7px solid ;
}
.news-detail-section .breadcrumb-item a{
    color: #000;
}
.page-detail-section{
    padding-top: 5rem;
    padding-bottom: 5rem;
    background-color: #ffffffe0;
    /* background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='29' height='50.115' patternTransform='scale(2) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='hsla(0,0%,100%,1)'/><path d='M14.498 16.858L0 8.488.002-8.257l14.5-8.374L29-8.26l-.002 16.745zm0 50.06L0 58.548l.002-16.745 14.5-8.373L29 41.8l-.002 16.744zM28.996 41.8l-14.498-8.37.002-16.744L29 8.312l14.498 8.37-.002 16.745zm-29 0l-14.498-8.37.002-16.744L0 8.312l14.498 8.37-.002 16.745z'  stroke-width='1' stroke='hsla(43, 74%, 49%, 1)' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");     */
    background-image: url(../img/bg-1.jpg);

    min-height: 77vh;
    position: relative;
}
.page-detail-section .title{
    color:#fff
}
.page-detail-section::before{
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 350px;
    top: 0;
    left: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 5; 
}
.page-detail-section::after{
    content: "";
    position: absolute;
    /* display: block; */
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #000000e6;
    z-index: 5;
    border-bottom: 1px solid #6c757d;

}
.page-detail-section .container{
    position: relative;
    z-index: 20;
}
.page-detail-section .breadcrumb-item a{
    color: #000;
}
.post-body img, .post-body iframe{
    max-width: 100%;
}
.post-thumbnail img{
    /* width: 100%;
    height: 100%; */

    object-fit: cover;
}
/* .news-section {} */
.shadow-inner-white {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: linear-gradient(to bottom,transparent,rgba(0,0,0,0.7));
    z-index: 5;
}
.shadow-inner-black {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: linear-gradient(to bottom,rgba(0,0,0,0.7), #fff);
    z-index: 5;
}

.shadow-inner-bottom-black {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: linear-gradient(to bottom,rgba(0,0,0,0.7), #fff);
    z-index: 5;
}

.news-section{
    padding-bottom: 5rem;
}

.craft-section{
    background: url(../img/bg-craft.png);
    padding-top: 4rem;
    padding-bottom: 4rem;
}
.card-craft{
    border-radius: 10px;
    padding: 1rem;
    background-color: #ffffffeb;
}

.craft-items{
    border:2px solid #000;
    border-radius: 15px;
    padding: .5rem;
    background-color: #c6c6c6;

}
#craft-slots{
    width:188px;
    height:188px;
}
/* #craft-slots>.row{
    height: 33%;
} */
.item-craft{
    padding: .5rem;
    background-color: #8b8b8b;
    border:3px inset  #000;
    height: 100%;
}
.item-craft img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.monster-list{
    border:2px solid #000;
    border-radius: 15px;
    padding: .5rem;
    background-color: #c6c6c6;

}

.monster{
    padding: .5rem;
    background-color: #8b8b8b;
    border:3px inset  #000;
    height: 100%;
}
.monster img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.zoom:hover{
    /* zoom: 1.2; */
    transform: scale(1.1);
}

footer{
    border-top:3px solid #000;
    position: relative;
    padding-top:3rem;
    padding-bottom:3rem;
    background-color: #222;
    /* background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%); */
    /* background: linear-gradient(to bottom, #383636, #121314); */

    color: #fff;
}