/*body {*/
/*    font-family: "Libre Baskerville", serif;*/
/*}*/

.cms-blog-list .blog-card .card-img-top {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 6px 6px 0 0;
    cursor: pointer;
}
.card h-100 blog-card:hover{
    overflow: hidden;
    transform: scale(1);
    border: solid #6b5e2e;
}

.bouton .btn {
    color: #8c7a3f;
    border-bottom: 1px solid #6b5e2e;
    letter-spacing: 1px;
    font-size: 12px;
}
.bouton .btn:hover{
    border-bottom: 1px solid #8c7a3f;
    color: #666666;
}
@layer bs-base {
    a {
        color: #A47B37;
    }
}

/* ถ้าสีไม่เปลี่ยนใส่ !important*/
@layer utilities {
    .text-dark {
        font-size: 26px;
        font-family: "Libre Baskerville", serif;
        font-weight: 450;
        letter-spacing: 0.2px;
        color: #720000 !important;
    }

    .text-muted {
        font-size: 13px;
        color: ghostwhite;
        --bs-text-opacity: 1;
        color: #535252 !important;
    }

    .h-100 {
        background-color: white;
        border: 1.5px solid rgba(0,0,0,0.06);
    }
}
@layer utilities {
    .h-100 {
        transition: all 0.35s ease;
    }
    .h-100:hover {
        transform: translateY(-8px) scale(1.02);
    }
}

.ps-shoppingcart,
#ps_searchbar{
    display: none;
}
.material-icons{
     color: white;
}

.topic{
    font-family: "Libre Baskerville", serif;
    font-weight: 500;
}

.name-title{
    font-family: "Libre Baskerville", serif !important;
}

.title{
    font-family: "Libre Baskerville", serif !important;
}
.header-top {
    background: #090703;
    color: white;
    padding-top: 24px;
    padding-bottom: 24px;
}
.navbar-brand {
    width: 100%;
    text-align: center;
}
.navbar-brand .logo {
    max-width: 300px;
}
#header .header-bottom,
#header #_desktop_ps_contactinfo {
    display: none;
}

.d-block w-100 background{
    height: 300px;
}

@layer ps-components {
    .page-title-section {
        line-height: 1.6;
        padding-top: 15px;
    }
}

@layer bs-base {
    p {
        margin-bottom: 1rem;
        margin-top: 0;
        font-weight: 400;
        color: #4f4f4f;
        font-family: "DM Sans",sans-serif;
        text-align: justify;
        padding-left: calc(var(--bs-gutter-x)*.2);
        padding-right: calc(var(--bs-gutter-x)*.2);
    }
}

@layer bs-custom-components {
    @media (min-width: 768px) {
        .breadcrumb__wrapper {
            margin-bottom: 0;
        }
    }
}

@media (min-width: 992px) {
    body:not(.cms-id-2) .container {
        max-width: 800px;
    }
}

@media (max-width: 767px) {
    #cms,
    #index{
        display: block;
    }
    .item{
        text-align: center;
    }
}

.bc-youtube-bg{
    display: none;
}

.blog-card__avatar{
    display: none;
}
.blog-card__link{
    font-family: "DM Sans",sans-serif;
    font-size: 13px;
    text-align: right !important;
    display: block;
}

.blog-card__footer {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid #eee;
    font-size: 12px;
    justify-content: space-between;
}

.cms-blog-list .blog-card .card-img-top {
    font-family: "DM Sans",sans-serif;
    display: block;
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 6px 6px 0 0;
    cursor: pointer;
}
.blog-card__author {
    font-weight: 600;
    letter-spacing: 0.2px;
}

.blog-card__link {
    margin-left: auto;
    white-space: nowrap;
    font-weight: bold;
}

.d-block.w-100.background{
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

#bccustomcms-banner img.img-fluid {
    display: none !important;
}

.bccustomcms-meta{
    text-decoration: underline #6c757d 1px;
    margin-left:-10px ;
    border-bottom: solid #6c757d 1px;
    padding-bottom: 20px;
}

.cms-other-pages {
    font-family: "DM Sans",sans-serif;
    font-size: 15px;
}

.bandeau.type_1 .table-cell:first-child {
    padding: 0;
}

#header .header-top {
    background-color: transparent !important;
    background-image: linear-gradient(rgb(202 201 201 / 0), rgb(0 0 0)), url("../img/blog(2).png") ;
    background-size: cover;
    background-position: center ;
    background-repeat: no-repeat ;
    width: 100vw ;
    height: 220px ;
}

body {
    overflow-x: hidden;
}

.header-top {
    position: relative;
}

.header-top:before {
    content: "";
    display: block;
    background-image:  url("../img/logo.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 110px;
    position: absolute;
    margin: 25px 0;
}

#header .header-top > * {
    position: relative;
    z-index: 1;
}

/* can logo */
.navbar-brand .logo {
    max-width: 300px;
    display: none;
}

div.table div.d-block.w-100 .title {
    display: none !important;
}

#bcitem_5 .d-block.w-100.background {
    display: none !important;
}

/*-----catagory menu----*/
.cms-blog-categories__inner {
    font-family: "DM Sans",sans-serif;
    font-size: 13px;
    font-weight: bold;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding-left: 10px;
    padding-right: 10px;
}
.cms-blog-category {
    display: flex;
    position: relative;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
}
.cms-blog-categories mb-5{
    display: block;
}
.page-header {
    text-align: center;
}
.page-header__description {
    max-width: 650px;
    margin: auto;
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
}

@layer bs-components {
    .card-title {
        font-size: clamp(16px, 4vw, 20px);
        margin-bottom: 1rem;
    }
}

@layer ps-pages {
    .page-header {
        margin-bottom: 2rem;
    }
}

.bottom-t p{
    text-align: center;
    color: #666666;
    font-size: 13px;
}

body.cms-id-3 .columns-container.container,
body.cms-id-4 .columns-container.container,
body.cms-id-5 .columns-container.container,
body.cms-id-6 .columns-container.container,
body.cms-id-7 .columns-container.container,
body.cms-id-8 .columns-container.container,
body.cms-id-9 .columns-container.container,
body.cms-id-10 .columns-container.container,
body.cms-id-11 .columns-container.container {
    max-width: 1300px !important;
}

.bccmsblog-archive-widget .block-title{
    font-size: 24px;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 10px;
}

.bccmsblog-archive-list a{
    font-size: 12px;
}
.bccmsblog-archive-count{
    font-size: 12px;
}

.cms-card-placeholder.card-img-top {
    position: relative;
    align-items: center;
    padding: 20px;
    border-radius: 12px;
    border: 1px ;
}

.cms-card-placeholder__initial{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 14px;
    font-size: 19px;
    box-shadow:
            0 4px 10px rgba(0, 0, 0, 0.08),
            0 1px 3px rgba(0, 0, 0, 0.06);
    margin-left: 75%;
    font-weight: 700;
}
.card-body {
    padding-block-start: 1.25rem;
    padding-block-end: 1.25rem;
}
.card-title a {
    font-weight: 400;
    color: #191919;
    line-height: 1.1;
}
.card-text {
    color: #666;
    font-size: 12px;
    margin-bottom: 1rem;
}
.page-title-section {
    font-family: serif;
    font-size: clamp(1.6rem, 4vw, 2rem);
    font-weight: 600;
    color: #191919;
    line-height: 1.2;
    margin-bottom: 24px;
}

body.cms-id-3 .breadcrumb__wrapper .container,
body.cms-id-4 .breadcrumb__wrapper .container,
body.cms-id-5 .breadcrumb__wrapper .container,
body.cms-id-6 .breadcrumb__wrapper .container,
body.cms-id-7 .breadcrumb__wrapper .container,
body.cms-id-8 .breadcrumb__wrapper .container,
body.cms-id-9 .breadcrumb__wrapper .container,
body.cms-id-10 .breadcrumb__wrapper .container,
body.cms-id-11 .breadcrumb__wrapper .container {
    max-width: 1140px;
    margin-right: auto;
    padding-left: 0;
}

@layer ps-base {
    @media (min-width: 768px) {
        .layout-left-column .columns-container,
        .layout-left-column .columns-container > .row,
        .layout-right-column .columns-container,
        .layout-right-column .columns-container > .row {
            --bs-gutter-x: 1.5rem;
        }
    }
}

/*==========================
 Blog Categories
==========================*/
.cms-blog-categories {
    margin: 3rem 0;
    border-bottom: 1px solid #ece8e2;
}
.cms-blog-categories__scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.cms-blog-categories__scroll::-webkit-scrollbar {
    display: none;
}
.cms-blog-categories__inner {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 2rem;
    min-width: max-content;
    padding: 0;
}
.cms-blog-category {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    position: relative;
    padding: 0 0 1rem;
    white-space: nowrap;
    text-decoration: none;
    color: #555;
    font-weight: 500;
    transition: .25s;
}

.cms-blog-category:hover {
    color: #111;
}
.cms-blog-category:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 2px;
    background: #C99D5C;
    transform: scaleX(0);
    transform-origin: left;
    transition: .25s;
}

.cms-blog-category:hover:after,
.cms-blog-category.is-active:after {
    transform: scaleX(1);
}

.cms-blog-category.is-active {
    color: #111;
    font-weight: 700;
}
.cms-blog-category__title {
    font-size: 15px;
}
.cms-blog-categories {
    position: relative;
}

.cms-blog-categories__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, .12);
    cursor: pointer;
    z-index: 10;
    transition: .25s;
}
.cms-blog-categories__arrow:hover {
    background: #111;
    color: #fff;
}
.cms-blog-categories__arrow.prev {
    left: -20px;
}
.cms-blog-categories__arrow.next {
    right: -20px;
}
.cms-blog-categories__arrow.is-hidden {
    opacity: 0;
    pointer-events: none;
}
.columns-container {
    padding-top: 40px;
}

@media (max-width: 767px) {
    .cms-blog-categories {
        margin: 2rem 0;
    }
    .cms-blog-categories__inner {
        gap: 1.5rem;
    }
    .cms-blog-category {
        padding-bottom: .85rem;
    }
}

@media (min-width:992px) {
    #right-column {
        width: 35%;
        margin-left: 25px;
        margin-right: 25px;
    }
    /*------content center column------*/
    #center-column{
        /*flex: 0 0 100% !important;*/
        max-width: 100% !important;
    }
}

.bccmsblog-other-item a{
    display:block;
    width:100%;
    white-space:normal;
    word-break:break-word;
    overflow:visible;
    text-overflow:unset;
    line-height:1.5;
}

.bccmsblog-other-link{
    display:flex;
    gap:12px;
    width:100%;
}

/*.bccmsblog-other-thumb{*/
/*    flex:0 0 100px !important;*/
/*}*/

.bccmsblog-other-pages-title{
    font-size: 1rem;
    margin-bottom: 22px;
    text-align: center;
    margin-top: 22px;
}

.bccmsblog-other-pages-list .bccmsblog-other-title {
    font-size: 12px !important;
}

.bccmsblog-other-pages-list .bccmsblog-other-date {
    font-size: 11px !important;
    color: #666 !important;
}

.bccmsblog-other-pages {
    margin-top: 20px;
    margin-bottom: 20px;
    max-width: 100%;
}

@layer bs-base {
    .row > * {
        padding-left: calc(var(--bs-gutter-x)*.2);
        padding-right: calc(var(--bs-gutter-x)*.2);
    }
}

/*-------*/
body.cms-id-2 #right-column,
body.cms-id-3 #right-column,
body.cms-id-4 #right-column,
body.cms-id-5 #right-column,
body.cms-id-6 #right-column,
body.cms-id-7 #right-column,
body.cms-id-8 #right-column,
body.cms-id-9 #right-column,
body.cms-id-10 #right-column,
body.cms-id-11 #right-column{
    display: none !important;
}

@media (min-width: 992px) {
    body.cms-id-2 #center-column,
    body.cms-id-3 #center-column,
    body.cms-id-4 #center-column,
    body.cms-id-5 #center-column,
    body.cms-id-6 #center-column,
    body.cms-id-7 #center-column,
    body.cms-id-8 #center-column,
    body.cms-id-9 #center-column,
    body.cms-id-10 #center-column,
    body.cms-id-11 #center-column{
        flex: 0 0 80% !important;
        max-width: 100% !important;
    }
}

@media (min-width: 768px){
    body.cms-id-2 #center-column.col-md-8,
    body.cms-id-3 #center-column.col-md-8,
    body.cms-id-4 #center-column.col-md-8,
    body.cms-id-5 #center-column.col-md-8,
    body.cms-id-6 #center-column.col-md-8,
    body.cms-id-7 #center-column.col-md-8,
    body.cms-id-8 #center-column.col-md-8,
    body.cms-id-9 #center-column.col-md-8,
    body.cms-id-10 #center-column.col-md-8,
    body.cms-id-11 #center-column.col-md-8{
        flex: 0 0 80% !important;
        max-width: 100% !important;
    }
}
/*============
==============*/
@media (max-width: 767px) {
    .cms-blog-list .row.g-4 {
        flex-direction: column;
        width: 70%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding-left: 0;
        padding-right: 0;
        box-sizing: border-box;
    }

    .cms-blog-list .row.g-4 > [class*="col-"] {
        width: 100%;
        max-width: 100%;
        flex: 0 0 auto;
        padding-left: 0;
        padding-right: 0;
        box-sizing: border-box;
    }

    .cms-blog-list .row.g-4 > [class*="col-"] img {
        max-width: 100%;
        height: auto;
    }
}

@layer bs-base {
    p{
        font-size: clamp(13px, 1.2vw, 16px);
    }
}

/*-------*/
.row:has(#right-column) {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
}

#center-column.center-column {
    float: none;
    margin: 0 auto;
}

.row:has(#right-column){
    justify-content: center;
}

@media (max-width: 767px) {
    .row:has(#right-column) {
        flex-wrap: wrap;
        justify-content: center;
    }

    .row:has(#right-column) #center-column,
    .row:has(#right-column) #right-column {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

@media (max-width: 576px) {
    .row {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@layer utilities {
    .my-5 {
        margin-bottom: 0rem !important;
        margin-top: 0rem !important;
    }
}

@media (max-width: 1084px) {
    .row{
        padding-left: 20px;
        padding-right: 20px;
    }
}
/*====*/
@media (max-width: 1042px) {
    .row{
        padding-left: 20px;
        padding-right: 20px;
    }
}

.img-responsive{
    max-width: 100%;
    display: block;
    margin: 15px auto;
    height: 350px;
    object-fit: cover;
    object-position: center;
}

/*=====*/
.breadcrumb_wrapper {
    width: 100%;
}

.breadcrumb {
    font-size: clamp(10px, 2vw, 14px);
    /*padding-left: 45px;*/
}

@media (max-width: 991px) {
    .breadcrumb {
        padding-left: 20px;
        font-size: 14px;
    }
}

@media (max-width: 767px) {
    .breadcrumb_wrapper {
        padding: 0 15px;
    }

    .breadcrumb {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        font-size: 12px;
        line-height: 1.8;
        padding-left: 20px;
        padding-right: 20px;
    }

    .breadcrumb-item {
        white-space: normal;
    }
}