@font-face {
    font-family: 'SVN-Dancing script', sans-serif;
    src: url("/frontend/fonts/SVN-Dancing script.ttf");
}
.main {
    padding-top: 80px;
    min-height: 70vh;
}
.content-container{
    max-width: 996px;
    margin: 0 auto;
}
.title-content {
    text-align: center;
    font-size: 60px;
    font-family: 'SVN-Dancing script', sans-serif;
    color: #712c00;
    text-shadow: rgb(57, 22, 0) 2px 0px 0px, rgb(57, 22, 0) 1.75517px 0.958851px 0px, rgb(57, 22, 0) 1.0806px 1.68294px 0px, rgb(57, 22, 0) 0.141474px 1.99499px 0px, rgb(57, 22, 0) -0.832294px 1.81859px 0px, rgb(57, 22, 0) -1.60229px 1.19694px 0px, rgb(57, 22, 0) -1.97998px 0.28224px 0px, rgb(57, 22, 0) -1.87291px -0.701566px 0px, rgb(57, 22, 0) -1.30729px -1.5136px 0px, rgb(57, 22, 0) -0.421592px -1.95506px 0px, rgb(57, 22, 0) 0.567324px -1.91785px 0px, rgb(57, 22, 0) 1.41734px -1.41108px 0px, rgb(57, 22, 0) 1.92034px -0.558831px 0px;
}

.content-detail img{
    max-width: 100%!important;
    height: auto!important;
}
.content-detail iframe{
    max-width: 100%!important;
}
.content-detail blockquote {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 40px;
    margin-inline-end: 40px;
}
.content-detail blockquote {
    font-style: italic;
    font-family: Georgia, Times, "Times New Roman", serif;
    padding: 2px 0;
    border-style: solid;
    border-color: #ccc;
    border-width: 0;
}
.content-detail blockquote {
    padding-left: 20px;
    padding-right: 8px;
    border-left-width: 5px;
    clear: both;
}

.content-detail ol ol {
    margin-block-start: 0px;
    margin-block-end: 0px;
}
.content-detail ol,.content-detail ul,.content-detail dl {
    margin-right: 0px;
    padding: 0 40px;
}
.content-detail ol li{
    list-style: decimal;
}
.content-detail ul li{
    list-style: disc;
}
.content-main{
    padding: 0 9%;
    min-height: 300px;
    background: url("/frontend/images/article/bg-main.png");
    background-size: 100% 100%;
}
.article-content{
    max-height: 800px;
    overflow: auto;
}
.list-article{
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 15px;
    grid-row-gap: 10px;
    margin-bottom: 20px;
}
.list-article__item{
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    padding: 5px 10px;
    color: white;
    border: 2px solid white;
    border-radius: 25px;
    background: url("/frontend/images/article/bg-title.png");
    background-size: 100% 100%;
    text-shadow: rgb(22, 21, 18) 2px 0px 0px, rgb(22, 21, 18) 1.75517px 0.958851px 0px, rgb(22, 21, 18) 1.0806px 1.68294px 0px, rgb(22, 21, 18) 0.141474px 1.99499px 0px, rgb(22, 21, 18) -0.832294px 1.81859px 0px, rgb(22, 21, 18) -1.60229px 1.19694px 0px, rgb(22, 21, 18) -1.97998px 0.28224px 0px, rgb(22, 21, 18) -1.87291px -0.701566px 0px, rgb(22, 21, 18) -1.30729px -1.5136px 0px, rgb(22, 21, 18) -0.421592px -1.95506px 0px, rgb(22, 21, 18) 0.567324px -1.91785px 0px, rgb(22, 21, 18) 1.41734px -1.41108px 0px, rgb(22, 21, 18) 1.92034px -0.558831px 0px;
}
.list-article__item:hover{
    background: url("/frontend/images/article/bg-title-active.png");
    background-size: 100% 100%;
    color: white;
}
.list-article__item.active{
    background: url("/frontend/images/article/bg-title-active.png");
    background-size: 100% 100%;
}
/*desktop*/
@media only screen and (max-width: 1200px) {
}

/*Ipad pro*/
@media only screen and (max-width: 1024px) {
}

/*Ipad*/
@media only screen and (max-width: 768px) {
    .main {
        padding-top: 40px;
        min-height: 70vh;
    }
    .list-article{
        grid-template-columns: repeat(2, 1fr);
    }
    .title-content {
        text-align: center;
        font-size: 50px;
    }
    .article-content{
        max-height: 500px;
    }
}

/*Mobile*/
@media only screen and (max-width: 500px) {
    .list-article__item {
        font-size: 16px;
    }
    .title-content {
        text-align: center;
        font-size: 40px;
    }
}