.ks-top-nav .submenu--content {
    height: 65px;
    position: absolute;
    width: 100%;
    left: 0;
    display: flex;
    z-index: -1;
    background: #fff;
    box-shadow: 0 1px 6px 0 rgba(90,90,90,.2)
}

.navbottom {
    width: 1170px;
    margin: 0 auto;
    min-height: 65px;
    line-height: 65px
}

.ks-top-nav .submenu--content .group.active {
    display: flex;
    padding-left: 190px
}

.ks-top-nav .submenu--content .group .item {
    flex: 0 0 auto;
    cursor: pointer;
    margin: auto;
    font-family: Krungsri-Condensed-Medium;
    color: #5a5a5a;
    text-decoration: none;
    outline: none;
    position: initial;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    bottom: 0;
    top: 0
}

.ks-top-nav .submenu--content .group .item {
    padding: 0 0;
    margin: 0
}
 

.submenu {
    width: 100%;
    background: #f3f3f3;
    padding: 40px 0;
    border-top: 1px solid #eee;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.1);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.1);
    box-shadow: 0 1px 2px rgba(0,0,0,.1);
    line-height: 1.5;
    position: absolute;
    left: 0;
    top: 65px;
    z-index: 9999;
    filter: Alpha(opacity=0);
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateZ(0)
}

    .submenu.active {
        display: block;
        opacity: 1;
        visibility: visible
    }

    .submenu .submenu--container {
        max-width: 1170px;
        margin: 0 auto
    }

#navmain .item.active .submenu {
    display: block;
    filter: Alpha(opacity=100%);
    opacity: 1;
    visibility: visible
}

.ks-top-nav .submenu--content .group .item hr {
    display: none;
    width: 100%;
    margin-top: 0;
    margin-bottom: 0;
    border-top: 3px solid #ffd400;
    width: 100%
}

.ks-top-nav .submenu--content .group .item:hover hr, .ks-top-nav .submenu--content .group .item.active hr {
    position: initial;
    display: block;
    bottom: -15px
}

.submenu .heading {
    font-size: 16px;
    line-height: 30px;
    color: #545454;
    font-family: Krungsri-Condensed-Bold;
    margin-bottom: 12px;
    margin-bottom: 10px
}

.submenu .submenu-inner ul {
    padding: 0;
    list-style-type: none;
    margin-bottom: 0
}

    .submenu .submenu-inner ul li {
        color: #545454;
        font-family: Thongterm-Roman;
        font-size: 14px;
        line-height: 26px;
        font-weight: normal;
        padding-bottom: 8px
    }

        .submenu .submenu-inner ul li a {
            color: #545454
        }

        .submenu .submenu-inner ul li:hover {
            font-family: Thongterm-Bold
        }

        .submenu .submenu-inner ul li:last-child {
            padding-bottom: 0
        }

.menu--bars div.btn.btn-primary.btn-xs {
    font-family: Krungsri-Condensed-Bold;
    font-weight: normal
}

.ks-top-nav .menu--content .menu--logo img {
    height: 111px;
    width: auto
}

.ks-top-nav .submenu--content .group.active {
    padding-left: 100px
}

.submenu .submenu--container .submenu-inner {
    padding-left: 117px !important
}

@media screen and (max-width:1199px) {
    .ks-top-nav .menu--content .menu--logo img {
        height: 48px
    }
}

.hwc-pdpa #cookieSettingModal .modal-content {
    max-height: none;
    background-color: #fff
}

.pt-content-footer .footer-content-card-f {
    height: 340px
}

.pt-8px-all {
    padding-top: 8px;
}

.justify-content-between {
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
}

.box-add-line.add-line {
    position: relative;
    color: #fff;
    background: #4cb234;
    padding: 0 16px;
    border-radius: 15px;
    margin-left: auto;
    cursor: pointer;
    margin-top: 3px;
    float: right !important;
    font-size: 14px;
    font-family: 'Krungsri-Condensed-Medium';
    margin-left: 8px;
    line-height: 28px
}

@media(max-width:767px) {
    .pt-content-footer .footer-content-card-f {
        height: 270px
    }

    .ar-pull-share {
        text-align: left !important;
        margin-top: 32px
    }

    .box-add-line.add-line {
        margin-left: 0
    }
}

.ar-tag-footer {
    cursor: auto !important
}

.container--breadcrumb {
    position: relative;
    margin-bottom: -37px
}

@media(max-width:767px) {
    .container--breadcrumb {
        margin-bottom: -59px
    }
}

.ar-header-img {
    height: 420px;
    width: 100%;
    object-fit: cover
}

@media(max-width:768px) {
    .ar-header-img {
        height: 360px;
        width: 100%;
        object-fit: cover
    } 

}

.zone-breadcrumb {
    background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%) !important;
}

.zone-breadcrumb {
    height: 100%;
    position: relative;
    background: linear-gradient(0deg,rgba(90,90,90,0) 0%,rgba(0,0,0,.35) 100%);
    margin-left: -15px;
    margin-right: -15px
}

.container--breadcrumb {
    position: relative;
    margin-bottom: -90px;
    min-height: 90px
}

.CMSBreadCrumbsLink, .CMSBreadCrumbsLink:hover {
    color: #222
}

.CMSBreadCrumbsCurrentItem {
    color: #222
}

.CMSBreadCrumbsSeparator:before {
    color: #222
}

@media(max-width:767px) {
    .container--breadcrumb {
        margin-bottom: -82px;
        margin-left: 15px;
        margin-right: 15px
    }
}

.text-color {
    color: #ff8c00 !important
}

.bullet-color ul {
    list-style: none
}

    .bullet-color ul li::before {
        content: "•";
        color: #fd0;
        font-weight: bold;
        font-size: 20px;
        display: inline-block;
        width: 1.3em
    }

.ab-text {
    color: #5a5a5a;
    font-family: "Thongterm-Roman";
    font-size: 16px;
    letter-spacing: 0;
    line-height: 34px
}

.ab-title-footer {
    color: #5a5a5a;
    font-family: "Krungsri-Condensed-Bold";
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 30px
}

.ab-sub-title {
    margin-top: 40px;
    color: #222;
    font-family: "Krungsri-Condensed-Bold";
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 30px;
    padding-left: 16px;
    border-left: 10px solid #ffd400
}

.ab-mt-box {
    margin-top: 24px
}

.ab-content {
    margin-top: 40px
}

.ab-content-box {
    margin-top: 24px
}

.ab-text-footer1 {
    display: inline-flex;
    margin-left: 50px
}

.ab-text-footer2 {
    display: inline-flex;
    margin-left: 40px
}

.ab-li-text {
    color: #6f5f5e;
    font-family: "Krungsri-Condensed-Bold";
    font-size: 16px;
    font-weight: bold
}

.ab-li-text2 {
    color: #5a5a5a;
    font-family: "Thongterm-Roman";
    font-size: 16px;
    letter-spacing: 0;
    font-weight: normal
}

.ab-title-text {
    color: #6f5f5e;
    font-family: "Krungsri-Condensed-Bold";
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 30px;
    text-align: center;
    width: 100%
}

.ab-box {
    width: 196px;
    height: 198px
}

.box-top {
    height: 108px;
    width: 196px;
    background-color: #ffd400;
    border-radius: 3px 3px 0 0;
    align-items: center
}

.ab-text-boxT {
    color: #554242;
    font-family: "Krungsri-Condensed-Bold";
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 30px;
    text-align: center
}

.ab-text-boxB {
    height: 58px;
    width: 170px;
    color: #5a5a5a;
    font-family: "Thongterm-Roman";
    font-size: 16px;
    letter-spacing: 0;
    line-height: 34px;
    text-align: center
}

.box-bottom {
    height: 90px;
    width: 196px;
    background-color: #f3f3f3;
    align-items: center
}

.btn-link:hover, .btn-link:focus {
    color: #ff6700 !important;
    text-decoration: underline;
    background-color: transparent
}

.bottom-line {
    border-bottom: 2px solid #ffda00;
    line-height: 35px
}

.hry1 {
    border: 1px solid #fed403;
    margin-top: 10px;
    margin-bottom: 15px
}

@media(max-width:992px) {
    .ab-text-footer1 {
        margin: 9px 0
    }

    .ab-text-footer2 {
        margin: 9px 0
    }
}

.ar-content-img-f {
    width: 100%;
    max-height: 255px;
    object-fit: cover
}

.ar-content-img-f2 {
    width: 100%;
    height: 245px;
    object-fit: cover
}

.footer-content-card-f {
    height: 428px;
    border-radius: 3px;
    background-color: #fff;
    box-shadow: 1px 2px 20px 0 rgba(35,19,18,.05)
}

@media(max-width:767px) {
    .ar-content-img-f {
        width: 100%;
        max-height: 152px;
        object-fit: cover
    }

    .ar-content-img-f2 {
        width: 100%;
        height: 152px;
        object-fit: cover
    }

    .footer-content-card-f {
        height: 306px;
        border-radius: 3px;
        background-color: #fff;
        box-shadow: 1px 2px 20px 0 rgba(35,19,18,.05)
    }

    .ab-content {
        margin-top: 24px
    }

    .ab-title-footer {
        font-size: 18px
    }

    .ab-text-footer1 {
        margin: 9px 0
    }

    .ab-text-footer2 {
        margin: 9px 0
    }

    .ab-sub-title {
        margin-top: 24px;
        font-size: 18px;
        line-height: 28px;
        padding-left: 16px;
        border-left: 10px solid #ffd400
    }

    .ab-title-text {
        font-size: 18px;
        width: 320px
    }

    .ab-content-box {
        margin-top: 16px
    }

    .table-responsive {
        width: 100%;
        margin-bottom: 15px;
        overflow-y: hidden;
        overflow-x: scroll;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        -webkit-overflow-scrolling: touch
    }

        .table-responsive > .table {
            margin-bottom: 0
        }

            .table-responsive > .table > thead > tr > th, .table-responsive > .table > tbody > tr > th, .table-responsive > .table > tfoot > tr > th, .table-responsive > .table > thead > tr > td, .table-responsive > .table > tbody > tr > td, .table-responsive > .table > tfoot > tr > td {
                white-space: nowrap;
                font-size: 12px
            }

        .table-responsive > .table-bordered {
            border: 0
        }

            .table-responsive > .table-bordered > thead > tr > th:first-child, .table-responsive > .table-bordered > tbody > tr > th:first-child, .table-responsive > .table-bordered > tfoot > tr > th:first-child, .table-responsive > .table-bordered > thead > tr > td:first-child, .table-responsive > .table-bordered > tbody > tr > td:first-child, .table-responsive > .table-bordered > tfoot > tr > td:first-child {
                border-left: 0
            }

            .table-responsive > .table-bordered > thead > tr > th:last-child, .table-responsive > .table-bordered > tbody > tr > th:last-child, .table-responsive > .table-bordered > tfoot > tr > th:last-child, .table-responsive > .table-bordered > thead > tr > td:last-child, .table-responsive > .table-bordered > tbody > tr > td:last-child, .table-responsive > .table-bordered > tfoot > tr > td:last-child {
                border-right: 0
            }

            .table-responsive > .table-bordered > tbody > tr:last-child > th, .table-responsive > .table-bordered > tfoot > tr:last-child > th, .table-responsive > .table-bordered > tbody > tr:last-child > td, .table-responsive > .table-bordered > tfoot > tr:last-child > td {
                border-bottom: 0
            }
}

.ar-header-img {
    width: 100%
}

.bg-hg-card {
    background: linear-gradient(#ffd400 0%,#ffd400 1.2%,#fff 1.2%,#fff 100%)
}

.hg-height-top {
    height: 510px
}

.hg-title-article {
    color: #222;
    font-family: "Krungsri-Condensed-Bold";
    font-size: 40px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 64px;
    width: 436px;
    height: 128px;
    margin-top: 99px;
    white-space: break-spaces;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.hg-img-article {
    width: 100%;
    height: 438px
}

.ar-content-img {
    width: 100%;
    min-height: 255px;
    object-fit: cover
}

.ar-pd-rm {
    padding-right: 15px;
    padding-left: 15px;
}

.ar-pd-l-rm {
    padding-left: unset
}

.ar-pd-r-rm {
    padding-right: unset
}

.ar-mg-rm {
    margin-right: unset;
    margin-left: unset
}

.ar-card {
    background-color: #fff
}

.ar-top {
    margin-top: -40px
}

.ar-card {
    padding: 40px
}

.ar-box-title {
    line-height: 48px;
    border-left: 10px solid #ffd400
}

.ar-text-title {
    color: #222;
    font-family: "Krungsri-Condensed-Bold";
    font-size: 32px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 48px;
    padding-left: 16px;
    border-left: 10px solid #ffd400
}

.ar-text-sub-title {
    font-family: "Krungsri-Condensed-Bold";
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 48px;
    padding-left: 16px;
    border-left: 10px solid #ffd400
}

.ar-bullet-decimal {
    list-style: decimal
}

.ar-bullet-circle {
    list-style: circle
}

.ar-profile-img {
    height: 48px;
    width: 48px;
    border-radius: 25px
}

.ar-profile-name {
    color: #222;
    font-family: "Thongterm-Roman";
    font-size: 16px;
    vertical-align: middle;
    margin-left: 24px;
    font-style: italic
}

.ar-pull-right {
    text-align: right
}

.ar-share-img {
    height: 38px;
    width: 38px;
    cursor: pointer
}

.ar-text-content {
    color: #5a5a5a;
    font-family: "Thongterm-Roman";
    font-size: 16px
}

.ar-sub-title {
    font-family: "Krungsri-Condensed-Bold";
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 0;
    margin-left: 16px
}

.ar-content-img {
    width: 100%
}

.ar-text-credit {
    color: #5a5a5a;
    font-family: "Thongterm-Roman";
    font-size: 16px;
    letter-spacing: 0
}

    .ar-text-credit a {
        color: #f76f00;
        cursor: pointer
    }

        .ar-text-credit a:hover, .ar-text-credit a:focus {
            color: #f76f00
        }

.ar-tag {
    color: #5a5a5a;
    font-family: "Thongterm-Bold";
    font-size: 16px;
    font-weight: bold
}

.ar-tag-name {
    color: #545454;
    font-family: "Thongterm Roman";
    font-size: 14px
}

.ar-tag-footer {
    height: 34px;
    border: 1px solid #e8e8e8;
    color: #545454;
    font-family: "Thongterm-Roman";
    font-size: 14px;
    text-align: center;
    border-radius: 4px;
    padding: 2px 8px;
    cursor: pointer
}

.ar-display-table {
    display: table
}

.ar-display-table-cell {
    display: table-cell;
    vertical-align: middle
}

.ar-box-back {
    width: 96px;
    cursor: pointer
}

.ar-text-back {
    color: #5a5a5a;
    font-family: "Thongterm-Roman";
    font-size: 16px;
    padding-left: 17px
}

.ar-text-content2 {
    color: #222;
    font-family: "Krungsri-Condensed-Bold";
    font-size: 24px;
    font-weight: bold;
    padding-left: 15px;
    padding-right: 15px;
    text-align: left
}

.ar-content2 {
    padding: 40px 65px
}

.pt-content-footer {
    margin-top: 40px
}

.pt-content-footer2 {
    margin-top: 80px
}

.footer-content-card {
    min-height: 428px;
    border-radius: 3px;
    background-color: #fff;
    box-shadow: 1px 2px 20px 0 rgba(35,19,18,.05)
}

.footer-content-all {
    color: #f76f00 !important;
    font-family: "Thongterm-Roman";
    font-size: 14px;
    font-weight: normal
}

.footer-content-card-content {
    min-height: 508px;
    border-radius: 3px;
    background-color: #fff;
    box-shadow: 1px 2px 20px 0 rgba(35,19,18,.05);
    border-top: 7px solid #ffd400
}

.footer-content-card-content-f {
    max-height: 508px;
    border-radius: 3px;
    background-color: #fff;
    box-shadow: 1px 2px 20px 0 rgba(35,19,18,.05);
    border-top: 7px solid #ffd400
}

.footer-content-type {
    color: #5a5a5a;
    font-family: "Krungsri-Condensed-Bold";
    font-size: 16px;
    font-weight: bold;
    padding: 16px 16px 8px 16px;
    text-align: left
}

.footer-content-title {
    color: #222;
    font-family: "Krungsri-Condensed-Bold";
    font-size: 18px;
    font-weight: bold;
    height: 60px;
    padding: 0 16px;
    white-space: break-spaces;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-align: left
}

.footer-content-name {
    padding: 45px 16px 9px 16px;
    color: #000;
    font-family: Thongterm-Roman;
    font-size: 14px;
    white-space: break-spaces;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-align: left
}

.footer-content-div-read {
    padding: 9px 16px
}

.footer-content-read {
    color: #5a5a5a;
    font-family: Thongterm-Roman;
    font-size: 14px
}

.img-content-footer {
    width: 100%
}

.mt-footer {
    margin-bottom: 40px
}

.ar-footer-center {
    text-align: unset
}

.mt-ar-text1 {
    margin-top: 24px
}

.footer-content-card .text-title, .footer-content-card-f .text-title {
    color: #222;
    font-family: "Krungsri-Condensed-Bold";
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 0;
    padding: 16px 16px 8px 16px;
    white-space: break-spaces;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-align: left
}

.footer-content-card .text-detail, .footer-content-card-f .text-detail {
    color: #5a5a5a;
    height: 58px;
    font-size: 16px;
    letter-spacing: 0;
    padding: 0 16px 16px 16px;
    overflow: hidden;
    white-space: break-spaces;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-align: left
}

@media(max-width:768px) {
    .footer-content-card-content-f {
        max-height: 350px;
        border-radius: 3px;
        background-color: #fff;
        box-shadow: 1px 2px 20px 0 rgba(35,19,18,.05);
        border-top: 7px solid #ffd400
    }

    .footer-content-name {
        padding: 0 16px;
        color: #000;
        font-family: Thongterm-Roman;
        font-size: 14px;
        white-space: break-spaces;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        text-align: left
    }

    .bg-hg-card {
        background: unset
    }

    .hg-height-top {
        height: unset
    }

    .hg-title-article {
        width: 100%;
        height: unset;
        margin-top: unset;
        font-size: 26px;
        letter-spacing: 0;
        line-height: 38px
    }

    .footer-content-card .text-title, .footer-content-card-f .text-title {
        font-size: 18px
    }

    .ar-text-title {
        font-size: 26px
    }

    .ar-card {
        padding: 24px 16px
    }

    .ar-top {
        margin-top: unset
    }

    .pt-content-footer {
        margin-top: 16px
    }

    .pt-content-footer2 {
        margin-top: 32px
    }

    .mt-footer {
        margin-bottom: 16px
    }

    .ar-header-img {
        height: 360px;
        width: 100%;
        object-fit: cover
    }

    .ar-footer-center {
        text-align: center
    }

    .mt-24px-xs {
        margin-top: 24px
    }

    .mt-ar-text1 {
        margin-top: 16px
    }

    .ar-text-title {
        border: unset;
        padding-left: 0;
    }

    .ar-text-title {
        color: #222;
        font-family: "Krungsri-Condensed-Bold";
        font-size: 26px;
        font-weight: bold;
        line-height: 48px;
        padding-left: 8px;
        margin-left: unset;
        border-left: 10px solid #ffd400
    }

    .ar-share-img {
        height: 32px;
        width: 32px;
        cursor: pointer;
    }

    .title-type {
        font-size: 12px;
        line-height: 26px;
    }
}


.hwc-pdpa .switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px
}

    .hwc-pdpa .switch input {
        opacity: 0;
        width: 0;
        height: 0
    }

.hwc-pdpa .accordion-right label {
    width: 50px;
    height: 45px;
    float: right;
    top: -8px;
    position: relative
}

    .hwc-pdpa .accordion-right label i {
        font-size: 44px;
        color: #d8d8d8;
        -webkit-transition: .4s;
        transition: .4s
    }

        .hwc-pdpa .accordion-right label i.rotate-180 {
            -webkit-transition: .4s;
            transition: .4s;
            transform: rotate(180deg)
        }

.hwc-pdpa .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #d8d8d8;
    -webkit-transition: .4s;
    transition: .4s
}

    .hwc-pdpa .slider:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s
    }

.hwc-pdpa input:checked + .slider {
    background-color: #4ddbb8
}

.hwc-pdpa input + .far.fa-toggle-on {
    display: none
}

.hwc-pdpa input:checked + .far.fa-toggle-on {
    color: #4ddbb8;
    display: inline-block
}

.hwc-pdpa input:checked ~ .far.fa-toggle-on.rotate-180 {
    display: none
}

.hwc-pdpa input:focus + .slider {
    box-shadow: 0 0 1px #2196f3
}

.hwc-pdpa input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px)
}

.hwc-pdpa .slider.round {
    border-radius: 34px
}

    .hwc-pdpa .slider.round:before {
        border-radius: 50%
    }

.hwc-pdpa input.btn, .hwc-pdpa button.btn {
    width: auto;
    min-width: 170px;
    height: 44px;
    border-radius: 5px;
    background-color: #fff;
    border: solid 1px #e8e8e8;
    font-family: 'Krungsri-Condensed-Bold';
    font-size: 16px;
    font-weight: bold;
    font-style: normal;
    font-stretch: normal;
    line-height: 2.14;
    letter-spacing: normal;
    text-align: center;
    color: #554242;
    outline: none !important;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: .35rem;
    padding-bottom: .35rem
}

.hwc-pdpa .z-99 {
    z-index: 99 !important
}

.hwc-pdpa span, .hwc-pdpa a {
    font-family: "Thongterm-Roman"
}

.hwc-pdpa input.btn.btn-primary, .hwc-pdpa button.btn.btn-primary {
    margin-left: 75px;
    color: #554242;
    background-color: #ffd400;
    border: solid 0 #e8e8e8 !important;
    font-family: "Krungsri-Condensed-Bold","Thonhterm-Roman",sans-serif
}

.hwc-pdpa button.btn.btn-cookie-setting {
    margin-right: 75px;
    background-color: #fff;
    color: #554242;
    border: solid 1px #e8e8e8;
    font-family: 'Krungsri-Condensed-Bold'
}

.hwc-pdpa input.btn.btn-primary, .hwc-pdpa #btnSaveCookieSetting {
    margin-left: 0 !important;
    color: #554242;
    background-color: #ffd400;
    border: solid 0 #e8e8e8 !important;
    font-family: "Krungsri-Condensed-Bold","Thonhterm-Roman",sans-serif
}

.hwc-pdpa button.btn.btn-cookie-setting:hover {
    border: solid 1px #c7c7c7 !important
}

.hwc-pdpa button.btn.btn-cookie-setting:focus {
    border-color: #e8e8e8;
    box-shadow: inset 1px 2px 1px rgba(0,0,0,.1)
}

.hwc-pdpa button.btn.btn-primary:hover, .hwc-pdpa input.btn.btn-primary:hover {
    background-color: #ffc800
}

.hwc-pdpa input.btn.btn-primary-brown, .hwc-pdpa button.btn.btn-primary-brown {
    background-color: #554242 !important;
    color: #ffd400 !important
}

    .hwc-pdpa input.btn.btn-primary-brown:hover, .hwc-pdpa button.btn.btn-primary-brown:hover {
        background-color: #463737 !important
    }

    .hwc-pdpa input.btn.btn-primary-brown:focus, .hwc-pdpa button.btn.btn-primary-brown:focus {
        background-color: #463737 !important;
        box-shadow: inset 1px 2px 1px rgba(0,0,0,.1)
    }

.hwc-pdpa .btn-secondary {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: .375rem !important;
    padding-bottom: .375rem !important
}

.hwc-pdpa .footer_policy {
    background-color: #fff;
    padding: 25px 0;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 99999;
    display: none;
    box-shadow: 1px 2px 15px 5px rgba(35,19,18,.05);
    background: rgba(0,0,0,.75)
}

    .hwc-pdpa .footer_policy.cookiealert.show {
        transform: translateY(0%);
        transition-delay: 1000ms;
        display: block
    }

    .hwc-pdpa .footer_policy .close_cookie {
        font-size: 16px;
        width: 100%
    }

    .hwc-pdpa .footer_policy h3.footer-header {
        color: #fff;
        font-size: 20px
    }

    .hwc-pdpa .footer_policy .txt-detail {
        color: #fff !important
    }

        .hwc-pdpa .footer_policy .txt-detail .more_cookie {
            color: #fff !important
        }

        .hwc-pdpa .footer_policy .txt-detail span:first-child {
            display: block;
            margin-top: 8px;
            margin-bottom: 8px;
            font-size: 14px
        }

        .hwc-pdpa .footer_policy .txt-detail > a {
            font-size: 14px
        }

.hwc-pdpa .policy-link {
    color: #f76f00 !important
}

.hwc-pdpa .footer_policy .txt-detail .policy-link:first-of-type::after {
    content: " | "
}

.hwc-pdpa .footer_policy .close_cookie {
    margin-top: 8px
}

.hwc-pdpa #cookieSettingModal {
    z-index: 99999
}

    .hwc-pdpa #cookieSettingModal.modal.show .modal-dialog {
        max-width: 570px
    }

    .hwc-pdpa #cookieSettingModal .modal-content {
        padding-left: 20px;
        padding-right: 20px;
        width: 570px;
        height: auto
    }

        .hwc-pdpa #cookieSettingModal .modal-content .modal-header {
            padding-right: 0
        }

    .hwc-pdpa #cookieSettingModal .modal-body {
        padding-top: 20px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 20px
    }

        .hwc-pdpa #cookieSettingModal .modal-body #settingHeaderDestop {
            display: block
        }

    .hwc-pdpa #cookieSettingModal .modal-header #settingHeaderMobile {
        display: none
    }

    .hwc-pdpa #cookieSettingModal .modal-body .modal-title {
        margin-bottom: 8px;
        font-size: 24px;
        font-family: 'Krungsri-Condensed-Bold';
        color: #222
    }

    .hwc-pdpa #cookieSettingModal .modal-body .cookie-modal-content {
        margin-bottom: 25px
    }

        .hwc-pdpa #cookieSettingModal .modal-body .cookie-modal-content span {
            color: #5a5a5a
        }

    .hwc-pdpa #cookieSettingModal .modal-content .cookie-footer {
        --padding: 15px;
        padding-top: 82px;
        padding-bottom: 40px
    }

    .hwc-pdpa #cookieSettingModal .modal-content {
        padding-left: 20px;
        padding-right: 20px;
        width: 570px;
        height: auto
    }

        .hwc-pdpa #cookieSettingModal .modal-content .modal-header {
            padding-right: 0
        }

.hwc-pdpa #cookieModal .modal-content {
    padding-left: 20px;
    padding-right: 20px;
    width: 570px;
    height: auto;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.2)
}

    .hwc-pdpa #cookieModal .modal-content .modal-header {
        padding-right: 0;
        padding-top: 28px
    }

.hwc-pdpa #cookieModal .modal-body {
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px
}

    .hwc-pdpa #cookieModal .modal-body .modal-title {
        margin-bottom: 8px;
        font-size: 24px;
        font-family: 'Krungsri-Condensed-Bold';
        color: #222
    }

    .hwc-pdpa #cookieModal .modal-body .cookie-modal-content span {
        color: #5a5a5a
    }

.hwc-pdpa #cookieModal .modal-content .cookie-footer {
    padding-top: 60px;
    padding-bottom: 78px
}

.hwc-pdpa #cookieModal .modal-content cookie-footer > div {
    margin-bottom: 25px
}

.hwc-pdpa .modal-body .cookie-accordion {
    padding: 0;
    padding-top: 8px;
    --padding-bottom: 17px;
    border-bottom: solid 1px #d8d8d8;
    margin-bottom: 8px
}

    .hwc-pdpa .modal-body .cookie-accordion.toogle-switch {
        padding-bottom: 9px
    }

    .hwc-pdpa .modal-body .cookie-accordion .cookie-accordion-header span {
        color: #5a5a5a
    }

    .hwc-pdpa .modal-body .cookie-accordion .cookie-accordion-header .far.fa-times {
        width: 12px
    }

    .hwc-pdpa .modal-body .cookie-accordion .cookie-accordion-header .far.fa-times, .hwc-pdpa .modal-body .cookie-accordion .cookie-accordion-header.active .far.fa-plus {
        display: none
    }

    .hwc-pdpa .modal-body .cookie-accordion .cookie-accordion-header .far.fa-plus, .hwc-pdpa .modal-body .cookie-accordion .cookie-accordion-header.active .far.fa-times {
        display: inline-block
    }

    .hwc-pdpa .modal-body .cookie-accordion .cookie-accordion-header .accordion-left {
        cursor: pointer
    }

    .hwc-pdpa .modal-body .cookie-accordion .cookie-accordion-header .accordion-right .switch {
        margin-bottom: 0
    }

    .hwc-pdpa .modal-body .cookie-accordion .cookie-accordion-header .accordion-left i {
        color: #5b5b5b;
        margin-right: 18px
    }

    .hwc-pdpa .modal-body .cookie-accordion .cookie-accordion-content {
        margin-left: 35px;
        font-size: 14px;
        color: #949494
    }

.hwc-pdpa #clearCookieModal .modal-content {
    padding: 40px
}

.hwc-pdpa #clearCookieModal .clear-cookie-icon {
    margin-bottom: 40px
}

    .hwc-pdpa #clearCookieModal .clear-cookie-icon i {
        font-size: 88px;
        color: #fdd200
    }

.hwc-pdpa #clearCookieModal .clear-cookie-msg {
    margin-bottom: 40px
}

    .hwc-pdpa #clearCookieModal .clear-cookie-msg h3 {
        font-size: 18px
    }

.hwc-pdpa #clearCookieModal .clear-cookie-modal-footer .btn {
    width: 170px
}

@media(min-width:1200px) {
    .hwc-pdpa .footer_policy .container {
        width: 1170px
    }

    .hwc-pdpa .footer_policy .close_cookie {
        width: 170px
    }
}

@media(min-width:576px) {
    .hwc-pdpa .modal-dialog {
        max-width: 570px !important
    }

    .hwc-pdpa #clearCookieModal .modal-dialog {
        max-width: 570px
    }
}

@media(max-width:576px) {
    .hwc-pdpa #cookieSettingModal .modal-dialog, .hwc-pdpa #clearCookieModal .modal-dialog {
        margin-left: 0;
        margin-right: 0
    }
}

@media(max-width:767px) {
    .hwc-pdpa .modal-dialog {
        margin: 0 !important
    }

    .hwc-pdpa .modal-body {
        flex: none
    }

    .hwc-pdpa .modal.show .modal-dialog {
        height: 100%
    }

    .modal-open .modal {
        padding-right: 0 !important
    }

    .hwc-pdpa .hwc-pdpa .footer_policy {
        padding: 20px 0
    }

    .hwc-pdpa .hwc-pdpa .d-flex {
        display: -ms-flexbox !important;
        display: flex;
        flex-direction: column-reverse;
        align-items: center
    }

    .hwc-pdpa #cookieSettingModal .modal-body #settingHeaderDestop {
        display: none
    }

    .hwc-pdpa #cookieSettingModal .modal-header #settingHeaderMobile {
        display: block
    }

    .hwc-pdpa #cookieSettingModal .modal-content {
        padding-left: 0 !important;
        padding-right: 0 !important
    }

    .hwc-pdpa #cookieSettingModal .modal-body {
        padding-top: 0 !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-bottom: 20px !important
    }

    .hwc-pdpa #cookieSettingModal .modal-content .cookie-footer {
        padding-top: 20px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 40px
    }

    .hwc-pdpa #clearCookieModal .modal-content {
        padding: 0 !important
    }

    .hwc-pdpa .footer_policy h3.footer-header {
        font-size: 18px
    }

    .hwc-pdpa .footer_policy .txt-detail {
        line-height: 20px;
        font-size: 14px
    }

        .hwc-pdpa .footer_policy .txt-detail span:first-child {
            display: inline
        }

        .hwc-pdpa .footer_policy .txt-detail .policy-link:first-of-type::after {
            content: ""
        }

    .hwc-pdpa .footer_policy .text-left {
        margin-top: 8px
    }

    .hwc-pdpa .footer_policy .text-right {
        margin-top: 22px
    }

    .hwc-pdpa .cookie-footer .d-md-block {
        align-items: center !important;
        flex-direction: column-reverse
    }

    .hwc-pdpa .footer_policy .close_cookie {
        max-width: 170px !important;
        height: 30px !important;
        line-height: 19px !important;
        margin-top: 0
    }

        .hwc-pdpa .footer_policy .close_cookie.btn-primary {
            margin-left: 7.5px
        }

    .hwc-pdpa #cookieSettingModal .modal-content .modal-header {
        padding-right: 15px;
        font-size: 24px;
        font-family: 'Krungsri-Condensed-Bold';
        color: #222
    }

    .hwc-pdpa #cookieSettingModal .modal-content {
        width: 100%;
        height: auto;
        min-height: -webkit-fill-available
    }

    .hwc-pdpa #cookieModal .modal-content .modal-header {
        padding-right: 15px
    }

    .hwc-pdpa #cookieModal .modal-content {
        width: 100%;
        height: 100%;
        border: 0;
        border-radius: 0
    }

        .hwc-pdpa #cookieModal .modal-content > div {
            padding-left: 0;
            padding-right: 0
        }

        .hwc-pdpa #cookieModal .modal-content .cookie-footer {
            padding-left: 0;
            padding-right: 0;
            padding-bottom: 40px
        }

            .hwc-pdpa #cookieModal .modal-content .cookie-footer .btn {
                width: 270px;
                max-width: 270px !important;
                height: 44px !important;
                --line-height: 19px !important;
                --min-width: 150px
            }

                .hwc-pdpa #cookieModal .modal-content .cookie-footer .btn + .btn {
                    margin-left: 0
                }

    .hwc-pdpa #cookieModal .modal-content {
        padding-left: 16px;
        padding-right: 16px
    }

        .hwc-pdpa #cookieModal .modal-content .cookie-footer {
            padding-top: 20px
        }

    .hwc-pdpa button.btn.btn-cookie-setting {
        margin-right: 0;
        margin-top: 24px
    }

    .hwc-pdpa #clearCookieModal .modal-dialog {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        height: auto
    }

    .hwc-pdpa #cookieSettingModal .modal-content .cookie-footer .btn-primary {
        width: 270px
    }

    .hwc-pdpa #clearCookieModal .clear-cookie-modal-footer .btn {
        width: 270px
    }

    .hwc-pdpa #clearCookieModal .clear-cookie-modal-footer #confirmClearCookie {
        margin-bottom: 25px
    }

    .hwc-pdpa #clearCookieModal .modal-content {
        height: auto
    }
}

@media only screen and (max-width:767px) {
    .hwc-pdpa .vertical-center {
        padding: 40% 20px 0 20px
    }

    .hwc-pdpa .clear-cookie-modal-footer {
        padding: 0 40px 40px 40px
    }
}

@media only screen and (min-width:768px) {
    .hwc-pdpa .modal-content {
        height: auto;
        width: 570px;
        border-radius: 3px;
        background-color: #fff;
        box-shadow: 1px 2px 20px 0 rgba(35,19,18,.05)
    }

    .hwc-pdpa #clearCookieModal .modal-content {
        padding: 0 !important
    }

    .hwc-pdpa .clear-cookie-modal-footer {
        padding: 0 40px 40px 40px
    }

    .hwc-pdpa .modal-body {
        padding: 0 50px 0 50px
    }
}


body {
    background-color: #fff !important
}

.mt-30 {
    margin-top: 30px !important
}

.word-break {
    word-break: break-word
}

.ss-img {
    height: 75px
}

.hide-mobile {
    display: inherit
}

.ui-autocomplete {
    position: absolute;
    cursor: default;
    height: 200px;
    overflow-y: scroll;
    overflow-x: hidden;
    font-size: 30px
}

.hwcCustomization .bg-bm-main {
    background: none repeat scroll 0 0 #ffda00;
    border: 10px solid #f6f6f6;
    color: #554242;
    font-size: 22px;
    padding: 30px
}

    .hwcCustomization .bg-bm-main:hover {
        background: none repeat scroll 0 0 #fedd50;
        border: 10px solid #f6f6f6;
        color: #554242;
        font-size: 22px;
        padding: 30px;
        text-decoration: none
    }

    .hwcCustomization .bg-bm-main:focus {
        background: none repeat scroll 0 0 #ffda00;
        border: 10px solid #f6f6f6;
        color: #554242;
        font-size: 22px;
        padding: 30px;
        text-decoration: none
    }

.hwcCustomization .bg-bm-main1 {
    background: none repeat scroll 0 0 #ffda00;
    border: 3px solid #f6f6f6;
    color: #554242;
    font-size: 14px;
    padding: 5px
}

    .hwcCustomization .bg-bm-main1:hover {
        background: none repeat scroll 0 0 #fedd50;
        border: 3px solid #f6f6f6;
        color: #554242;
        font-size: 14px;
        padding: 5px;
        text-decoration: none
    }

    .hwcCustomization .bg-bm-main1:focus {
        background: none repeat scroll 0 0 #ffda00;
        border: 3px solid #f6f6f6;
        color: #554242;
        font-size: 14px;
        padding: 5px;
        text-decoration: none
    }

.hwcCustomization .bg-bm-main2 {
    background: none repeat scroll 0 0 #ece9e9;
    border: 3px solid #f6f6f6;
    color: #554242;
    font-size: 14px;
    padding: 5px
}

    .hwcCustomization .bg-bm-main2:hover {
        background: none repeat scroll 0 0 #fedd50;
        border: 3px solid #f6f6f6;
        color: #554242;
        font-size: 14px;
        padding: 5px;
        text-decoration: none
    }

    .hwcCustomization .bg-bm-main2:focus {
        background: none repeat scroll 0 0 #ffda00;
        border: 3px solid #f6f6f6;
        color: #554242;
        font-size: 14px;
        padding: 5px;
        text-decoration: none
    }

.hwcCustomization a.bg-bm-wlink {
    color: #554242;
    text-decoration: none
}

    .hwcCustomization a.bg-bm-wlink:hover {
        color: #554242;
        text-decoration: none
    }

.hwcCustomization .height60pxForSearch {
    height: 60px
}

.hwcCustomization .txtSearchWidth {
    width: 94%
}

.hwcCustomization .myBox {
    width: auto
}

.control-label {
    width: 0
}

@media screen and (max-width:320px) {
    .width80per {
        width: 100% !important
    }
}

@media screen and (max-width:640px) {
    .width30per {
        width: 100% !important
    }
}

@media screen and (max-width:767px) {
    .m-ml-0 {
        margin-left: 0 !important
    }

    .m-plr-1 {
        padding-left: 1px !important;
        padding-right: 1px !important
    }

    .m-plr-0 {
        padding-left: 0 !important;
        padding-right: 0 !important
    }

    .hwcCustomization .height60pxForSearch {
        height: 110px !important
    }

    .hide-mobile {
        display: none
    }
}

@media screen and (max-width:1029px) {
    .hwcCustomization .txtSearchWidth {
        width: 90%
    }
}

@media screen and (max-width:529px) {
    .hwcCustomization .txtSearchWidth {
        width: 80%
    }
}

@media(max-device-width:767px) and (min-device-width:320px) {
    .control-label {
        width: 0
    }
}

.hwcCustomization .txtSearch {
    font-size: 48px;
    height: 72px;
    line-height: normal !important;
    border: none
}

    .hwcCustomization .txtSearch:focus {
        border: none
    }

::placeholder {
    color: #d9d9db
}

.search-container {
    margin-top: 40px
}

@media screen and (max-width:576px) {
    .search-container {
        min-height: 224px
    }
}

@media screen and (min-width:768px) {
    .search-container {
        min-height: 464px
    }
}

.hwcCustomization .input-group .form-control.search-input {
    height: 44px;
    border-radius: 3px 0 0 3px;
    padding-left: 18px;
    padding-top: 8px;
    padding-bottom: 7px;
    border: solid #e8e8e8 1px;
    box-shadow: none;
    font-weight: bold
}

    .hwcCustomization .input-group .form-control.search-input:focus {
        border-color: #c7c7c7
    }

    .hwcCustomization .input-group .form-control.search-input::-webkit-input-placeholder {
        font-weight: 400 !important
    }

.hwcCustomization .input-group .input-group-append .btnYellowForSearch {
    background: none;
    border-radius: 0 3px 3px 0;
    background: #ffd400 !important;
    width: 52px !important;
    height: 44px;
    min-width: auto
}

    .hwcCustomization .input-group .input-group-append .btnYellowForSearch:focus {
        outline: none
    }

.hwcCustomization .myContent .wrapper .waterMarkNoBor.hwcBar {
    border-bottom: solid 1px #f3f3f3;
    margin-bottom: 8px
}

.hwcCustomization .myBox .myContent span.header-font {
    color: #545454;
    font-size: 14px
}

@media screen and (max-width:640px) {
    .hwcCustomization .wrapper table {
        width: 100%
    }
}

.result-store .result-item:not(:first-child) {
    margin-top: 40px
}

.result-store .result-item {
    word-break: break-all
}

    .result-store .result-item a {
        text-decoration: none
    }

    .result-store .result-item .result-item-title {
        font-size: 24px;
        line-height: 36px;
        font-weight: normal;
        color: #222
    }

        .result-store .result-item .result-item-title .hwcCustomization_a {
            color: #222;
            font-weight: normal;
            font-family: "Krungsri-Condensed-Bold"
        }

    .result-store .result-item .result-item-content, .result-store .result-item .result-item-link a {
        font-size: 16px;
        font-weight: normal
    }

        .result-store .result-item .result-item-link a:hover {
            color: #de6400
        }

    .result-store .result-item .result-item-content {
        color: #5a5a5a
    }

    .result-store .result-item .result-item-link a {
        color: #f76f00;
        word-wrap: break-word
    }

    .result-store .result-item .result-item-sublink {
        margin-right: 16px;
        font-size: 14px;
        border: solid 1px #e8e8e8;
        border-radius: 4px;
        padding: 4px 8px;
        float: left;
        margin-top: 5px
    }

        .result-store .result-item .result-item-sublink:hover {
            background-color: #ffd400;
            border-color: transparent
        }

    .result-store .result-item .nonhover:hover {
        background-color: unset;
        border: solid 1px #e8e8e8
    }

.result-pagination-store {
    margin-bottom: 40px
}

    .result-pagination-store .result-page {
        width: 24px;
        display: inline-block
    }

    .result-pagination-store a {
        text-decoration: none !important
    }

    .result-pagination-store .result-current-page {
        width: 24px;
        display: inline-block;
        background-color: #ffd400;
        border-radius: 24px;
        line-height: 24px
    }

.predictiveSearchHolder {
    margin-top: -12px
}

    .predictiveSearchHolder .predictiveSearchResults {
        background-color: white;
        border-radius: 4px;
        box-shadow: rgba(35,19,18,.2) 1px 2px 4px
    }

        .predictiveSearchHolder .predictiveSearchResults span {
            padding: 4px 16px;
            display: block
        }

            .predictiveSearchHolder .predictiveSearchResults span:first-child {
                padding-top: 12px
            }

            .predictiveSearchHolder .predictiveSearchResults span:last-child {
                padding-bottom: 12px
            }

            .predictiveSearchHolder .predictiveSearchResults span:hover {
                background-color: #f3f3f3;
                cursor: pointer
            }

@media screen and (max-width:767px) {
    .hwcCustomization .result-store .result-item table {
        margin-left: 0
    }

        .hwcCustomization .result-store .result-item table > tbody > tr > td {
            padding: 10px 0 !important
        }

    .result-store .result-item .result-item-sublink {
        margin-right: 8px;
        margin-bottom: 8px;
        float: left
    }
}


#reading-progress {
    position: fixed;
    position: relative;
    width: 100%;
    height: 5px;
    z-index: 20;
    top: 56px;
    top: 0;
    left: 0;
}

#reading-progress-fill {
    height: 5px;
    width: 0;
}

#reading-progress-fill {
    -webkit-transition: width 100ms ease;
    -o-transition: width 100ms ease;
    transition: width 100ms ease;
    background-color: #ff0000;
    background-color: #FDD200;
}


.container--content {
    max-width: 1170px;
    margin: auto;
    /*margin-top: 40px;
    margin-bottom: 80px;*/
}

.container--content#content-thecoach {
    margin-top: 20px;
    margin-bottom: 40px;
}

.ar-text-post {
    font-size: 14px;
    color: #949494;
    font-family: 'Thongterm';
}

img.icon-access-time {
    position: relative;
    bottom: 3px;
}
 
    @media screen and (max-width:768px) {
        .background-light-gray-xs {
            background: #F9F9F9;
        }

        .container--content#content-thecoach {
            margin-bottom: 0px;
            margin-top: 24px;
        }

        .container--content#content-relatedarticle {
            margin-bottom: 80px;
            margin-top: 8px;
        }

        .title-type {
            font-size: 12px;
            line-height: 26px;
        }

        .ar-text-post {
            font-size: 12px;
            color: #949494;
        }

        .ar-profile-name {
            color: #F76F00;
            font-size: 12px;
        }

        .text-right.tag-footer {
            padding-top: 24px;
            padding-bottom: 24px;
        }

        .ar-text-title {
            line-height: 38px;
        }

        .ar-pd-rm {
            padding-right: 16px;
            padding-left: 16px;
        }

        .ar-box-title {
            margin-top: 24px;
            margin-bottom: 16px;
        }

        #rcm-product .card-content {
            border-top: none;
            min-height: unset;
            height: 110px;
            display: flex;
            border-radius: 3px;
            background-color: #fff;
            border: 1px solid #F3F3F3;
            filter: drop-shadow(1px 2px 10px rgba(35, 19, 18, 0.1));
            width: 100%;
        }

        #rcm-product img.card-content-img {
            width: 110px;
            height: 110px;
            object-fit: cover;
            min-height: unset;
            border-radius: 3px 0px 0px 3px;
        }

        #rcm-product .card-content a {
            display: flex;
        }

        #rcm-product .box-text {
            padding: padding: 15px 8px 14px 8px;
            border-bottom: 3px solid #FDD200;
            height: 110px;
        }

        #rcm-product.open-bar .box-text {
            padding: 8px 15px 15px 8px;
            border-bottom: unset;
        }
        /*rcm-article*/
        #rcm-article .card-content {
            display: flex;
            border-radius: 3px;
            background-color: #fff;
        }

        #rcm-article .card-readmore a#btnShare {
            bottom: 6px;
        }

        #rcm-article .box-img img.card-content-img {
            width: 110px;
            height: 110px;
            object-fit: cover;
            min-height: unset;
            border-radius: 3px 0px 0px 3px;
        }

        #rcm-article .box-text {
            border-top: unset;
            max-width: unset;
            position: relative;
            padding: 5px 8px 0px 8px;
        }

        #rcm-article .card-content-type {
            font-size: 12px;
            line-height: 26px;
        }

        #rcm-article .card-content-title h4 {
            min-height: 46px;
            margin-bottom: 0;
            line-height: 24px;
        }

        #rcm-article .card-content-readmore {
            font-size: 12px;
            line-height: 26px;
            height: 26px;
        }

        #rcm-product .card-content-text {
            font-size: 18px;
            line-height: 30px;
        }

        div#ar-drop {
            padding-bottom: 24px;
        }

        div#heading26012 {
            padding: 10px 16px 10px 16px;
            max-height: 50px;
            min-height: unset;
            border-left: unset;
        }

        #ar-category .card-body {
            font-family: 'Thongterm';
            font-style: normal;
            font-weight: 700;
            font-size: 16px;
            line-height: 30px;
            color: #222222;
            padding-inline-start: 8px;
        }

        ul.ar-ul {
            font-family: 'Thongterm';
            font-style: normal;
            font-weight: 400;
            font-size: 16px;
            line-height: 30px;
            color: #222222;
            padding-inline-start: 10px;
        }

        #content-right {
            z-index: 10;
        }

        #content-left {
            z-index: 11;
        }
    }

.fix-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 20px;
    z-index: 10;
}

.search-area {
    padding: 0 !important;
}

.input-group .input-group-append .input-group-text {
    border-color: #ffd400;
}

.input-group .input-group-append .input-group-text {
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;
}

.input-group .input-group-prepend .input-group-text, .input-group .input-group-append .input-group-text {
    background-color: #ffd400;
    border-radius: 5px;
    padding-left: 16px;
    padding-right: 16px;
}

.input-group > .input-group-append > .input-group-text {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group-text {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding: .375rem .75rem;
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    text-align: center;
    white-space: nowrap;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    border-radius: .25rem;
}

span.input-group-text {
    padding-left: 15px !important;
    width: auto;
    cursor: pointer;
}

.title-type {
    background: #FDD200;
    border-radius: 3px;
    padding: 0px 10px;
    font-family: 'Thongterm-roman';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 30px;
    color: #222;
}

.text-left {
    text-align: left !important;
}

.align-self-center {
    -ms-flex-item-align: center !important;
    align-self: center !important;
}


.reading-progress {
    position: fixed;
    width: 100%;
    height: 5px;
    z-index: 20;
    top: 0;
    left: 0;
}

.reading-progress-fill {
    height: 5px;
    width: 0;
    background-color: #FDD200;
    transition: width 100ms ease;
}


.background-light-gray {
    background: #F9F9F9;
}

.container--content#content-relatedarticle {
    margin-bottom: 40px;
}

.container--content {
    max-width: 1170px;
    margin: auto;
    margin-top: 40px;
    margin-bottom: 80px;
}


.container--header {
    margin-bottom: 16px;
}

.content-header {
    margin-bottom: 40px;
}

.recommend-zone-custom {
    margin-bottom: 50px;
}
/*1910*/
.container--content .image {
    position: relative;
    overflow: hidden;
    height: 270px;
}

    .container--content .image img {
        height: 270px;
        width: auto;
        position: absolute;
        margin: auto;
        min-height: 100%;
        min-width: 100%;
        left: -100%;
        right: -100%;
        top: -100%;
        bottom: -100%;
    }
/*1910*/
@media screen and (max-width:768px) {
    .description {
        /*position:absolute;*/
        bottom: 0;
        font-size: 14px;
    }
    /*1910*/
    .container--content .image {
        position: relative;
        overflow: hidden;
        height: 110px;
    }

        .container--content .image img {
            height: 110px;
            width: auto;
            position: absolute;
            margin: auto;
            min-height: 100%;
            min-width: 100%;
            left: -100%;
            right: -100%;
            top: -100%;
            bottom: -100%;
        }
    /*1910*/
    .text-ellipsis-1line {
        display: -webkit-box;
        overflow: hidden;
        white-space: normal;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
    }

    .recommend-zone-custom {
        margin-bottom: 24px;
    }

    .container--header-custom {
        margin-bottom: 32px;
    }

    .content-header {
        margin-bottom: 24px;
    }

    .container--content {
        padding-top: 0px;
    }

    .px-m-0 {
        padding-left: 0px;
        padding-right: 0px;
    }

    .card-info .header {
        padding-bottom: 8px;
    }
}


.container--breadcrumb {
    /*position: relative;
    margin-bottom: 0px;
    min-height: 90px;*/
}

.container--content#content-thecoach {
    margin-top: 20px;
    margin-bottom: 40px;
}

.container--content#content-relatedarticle {
    margin-bottom: 40px;
}

.background-light-gray {
    background: #F9F9F9;
}

.ar-top {
    margin-top: 0px;
}

.title-type {
    background: #FDD200;
    border-radius: 3px;
    padding: 0px 10px;
    font-family: 'Thongterm-roman';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 30px;
    color: #222;
}

.ar-share-img {
    height: 32px;
    width: 32px;
    cursor: pointer;
}
/*.ar-share-img.icon-line {
  height: auto;
  width: 38px;
  cursor: pointer;
}*/
.ar-card {
    padding: 0px;
}

.ar-text-title {
    border: unset;
    padding-left: 0;
}

.ar-text-post {
    font-size: 14px;
    color: #949494;
    font-family: 'Thongterm';
}

.ar-profile-name {
    color: #F76F00;
    font-family: "Thongterm-Roman";
    font-family: 'Thongterm';
    font-size: 14px;
    vertical-align: middle;
    margin-left: 8px;
    font-weight: 700;
    font-style: normal;
}

img.icon-access-time {
    position: relative;
    bottom: 3px;
}

.ar-pd-rm {
    padding-right: 15px;
    padding-left: 15px;
}

.ar-tag-footer {
    padding: 4px 8px;
}

.ar-box-title {
    line-height: 48px;
    border-left: 6px solid #fdd200;
    margin-top: 27px;
    margin-bottom: 18px;
    padding-left: 10px;
}

.accordion .collapsing {
    padding-left: 16px;
    padding-right: 16px;
}
/* rcm-product */
#rcm-product .card-content {
    display: inline-block;
    border-radius: 3px;
    box-shadow: 1px 2px 20px 0 rgba(35,19,18,0.05);
    background-color: #FFFFFF;
    width: 100%;
}

#rcm-product img.card-content-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    min-height: unset;
}

#rcm-product .box-text {
    padding: 14px 16px 16px 16px;
}

#rcm-product .card-content-text {
    font-family: "Krungsri-Condensed-Bold";
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 30px;
    white-space: break-spaces;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 60px;
}
/* end #rcm-product */
.text-right.tag-footer {
    display: flex;
    justify-content: space-between !important;
    position: relative;
    padding-top: 12px;
    width:100%;
}

#rcm-article .card-content {
    border-top: none;
    min-height: unset;
    height: auto;
    display: block;
    border-radius: 3px;
    background-color: #fff;
    filter: drop-shadow(1px 2px 10px rgba(35, 19, 18, 0.1));
}

#rcm-article .box-img img.card-content-img {
    width: 100%;
    height: auto;
    height: 270px;
    object-fit: cover;
    min-height: unset;
    border-radius: 3px 0px 0px 3px;
}

#rcm-article .box-text {
    border-top: unset;
    max-width: unset;
    position: relative;
    padding: 10px 20px 10px 20px;
}

#rcm-article .card-content-type {
    font-family: 'Thongterm';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 30px;
    color: #5A5A5A;
}

#rcm-article .card-content-title h4 {
    white-space: break-spaces;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 60px;
    margin-bottom: 16px;
}

#rcm-article .card-content-detail {
    display: none;
}

#rcm-article .card-content-name {
    display: none;
}

#rcm-article .web-analytic .card-content-name {
    display: block;
}

#rcm-article .card-content-readmore {
    font-family: 'Thongterm';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 30px;
    width: 100%;
    position: relative;
}

#rcm-article .card-readmore img.icon-clock {
    margin-right: 0px;
    position: relative;
    width: 14px;
    height: 14px;
    bottom: 3px;
}

#rcm-article .card-readmore a#btnShare {
    position: relative;
    right: unset;
    bottom: 4px;
}

#rcm-article .card-readmore img#shareImageIcon {
    width: 11px;
    height: 12px;
}

div#content-right {
    z-index: 9;
}

@media screen and (min-width:1199.5px) {
    div#content-right.fixbox .box-product {
        position: fixed;
        float: right;
        top: 24px;
        right: unset;
        max-width: 270px;
    }
}

@media screen and (max-width:1198.9px) and (min-width:767.9px) {
    div#content-right.fixbox .box-product {
        position: fixed;
        float: right;
        top: 24px;
        right: 0px;
    }
}

.fix-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 20px;
    z-index: 10;
}

.zone-breadcrumb {
    background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%);
}

.container--breadcrumb {
    min-height: 64px;
}

button.btn.btn-link.btn-ar-drop {
    padding: 0;
}

div#heading26012 {
    padding: 10px 0px 10px 20px;
    max-height: 50px;
    min-height: unset;
    border-left: unset;
}

#ar-category .accordion .card {
    border-color: transparent;
}

div#ar-category {
    border-radius: 3px;
    background-color: rgb(253,210,0,0.3);
}

.accordion #ar-category .card .collapse, .accordion #ar-category .card .collapsing {
    border-left: unset;
}

#ar-category .btn-link:hover, #ar-category .btn-link:focus {
    color: #222222 !important;
}

.accordion #ar-category .card .card-header.arrow.collapsed:after, .accordion #ar-category .card .card-header.arrow:not(.collapsed):after {
    top: 14px;
}

#ar-category .card-body {
    font-family: 'Thongterm';
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 30px;
    color: #222222;
    padding-inline-start: 30px;
}

ul.ar-ul {
    font-family: 'Thongterm';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 30px;
    color: #222222;
}

    ul.ar-ul li {
        list-style: none;
    }

.accordion #ar-category .collapse {
    padding-bottom: 30px;
}

div#ar-drop {
    padding-top: 24px;
    padding-bottom: 26px;
}

.accordion #ar-category .card {
    border-color: transparent;
}


@media screen and (max-width:768px) {
    .background-light-gray-xs {
        background: #F9F9F9;
    }

    .container--content#content-thecoach {
        margin-bottom: 0px;
        margin-top: 24px;
    }

    .container--content#content-relatedarticle {
        margin-bottom: 80px;
        margin-top: 8px;
    }

    .title-type {
        font-size: 12px;
        line-height: 26px;
    }

    .ar-text-post {
        font-size: 12px;
        color: #949494;
    }

    .ar-profile-name {
        color: #F76F00;
        font-size: 12px;
    }

    .text-right.tag-footer {
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .ar-text-title {
        line-height: 38px;
    }

    .ar-pd-rm {
        padding-right: 16px;
        padding-left: 16px;
    }

    .ar-box-title {
        margin-top: 24px;
        margin-bottom: 16px;
    }

    #rcm-product .card-content {
        border-top: none;
        min-height: unset;
        height: 110px;
        display: flex;
        border-radius: 3px;
        background-color: #fff;
        border: 1px solid #F3F3F3;
        filter: drop-shadow(1px 2px 10px rgba(35, 19, 18, 0.1));
        width: 100%;
    }

    #rcm-product img.card-content-img {
        width: 110px;
        height: 110px;
        object-fit: cover;
        min-height: unset;
        border-radius: 3px 0px 0px 3px;
    }

    #rcm-product .card-content a {
        display: flex;
    }

    #rcm-product .box-text {
        padding: padding: 15px 8px 14px 8px;
        border-bottom: 3px solid #FDD200;
        height: 110px;
    }

    #rcm-product.open-bar .box-text {
        padding: 8px 15px 15px 8px;
        border-bottom: unset;
    }
    /*rcm-article*/
    #rcm-article .card-content {
        display: flex;
        border-radius: 3px;
        background-color: #fff;
    }

    #rcm-article .card-readmore a#btnShare {
        bottom: 6px;
    }

    #rcm-article .box-img img.card-content-img {
        width: 110px;
        height: 110px;
        object-fit: cover;
        min-height: unset;
        border-radius: 3px 0px 0px 3px;
    }

    #rcm-article .box-text {
        border-top: unset;
        max-width: unset;
        position: relative;
        padding: 5px 8px 0px 8px;
    }

    #rcm-article .card-content-type {
        font-size: 12px;
        line-height: 26px;
    }

    #rcm-article .card-content-title h4 {
        min-height: 46px;
        margin-bottom: 0;
        line-height: 24px;
    }

    #rcm-article .card-content-readmore {
        font-size: 12px;
        line-height: 26px;
        height: 26px;
    }

    #rcm-product .card-content-text {
        font-size: 18px;
        line-height: 30px;
    }

    div#ar-drop {
        padding-bottom: 24px;
    }

    div#heading26012 {
        padding: 10px 16px 10px 16px;
        max-height: 50px;
        min-height: unset;
        border-left: unset;
    }

    #ar-category .card-body {
        font-family: 'Thongterm';
        font-style: normal;
        font-weight: 700;
        font-size: 16px;
        line-height: 30px;
        color: #222222;
        padding-inline-start: 8px;
    }

    ul.ar-ul {
        font-family: 'Thongterm';
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 30px;
        color: #222222;
        padding-inline-start: 10px;
    }

    #content-right {
        z-index: 10;
    }

    #content-left {
        z-index: 0;
    }
}

#rcm-article .box-img img.card-content-img {
    width: 100%;
    height: auto;
    height: 270px;
    object-fit: cover;
    min-height: unset;
    border-radius: 3px 0px 0px 3px;
}


.the-coach-zone #rcm-article .card-content {
    border-top: none;
    min-height: unset;
    height: auto;
    display: block;
    border-radius: 3px;
    background-color: #fff;
    filter: drop-shadow(1px 2px 10px rgba(35, 19, 18, 0.1));
}

.the-coach-zone #rcm-article .box-text {
    border-top: unset;
    max-width: unset;
    position: relative;
    padding: 10px 20px 10px 20px;
}

.the-coach-zone #rcm-article .card-content-type {
    font-family: 'Thongterm';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 30px;
    color: #5A5A5A;
}

.the-coach-zone #rcm-article .card-content-title h4 {
    margin-bottom: 16px !important;
    font-size: 16px;
    line-height: 30px;
}

.the-coach-zone #rcm-article .card-content-readmore {
    font-family: 'Thongterm';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 30px;
    width: 100%;
    position: relative;
}

@media screen and (max-width: 767px) {
    .the-coach-zone #rcm-article .card-content {
        display: flex;
        border-radius: 3px;
        background-color: #fff;
    }

    .the-coach-zone #rcm-article .card-content-type {
        font-size: 12px;
        line-height: 26px;
    }

    .the-coach-zone #rcm-article .box-img img.card-content-img {
        width: 110px;
        height: 110px;
        object-fit: cover;
        min-height: unset;
        border-radius: 3px 0px 0px 3px;
    }

    .the-coach-zone #rcm-article .box-text {
        border-top: unset;
        max-width: unset;
        position: relative;
        padding: 5px 8px 0px 8px !important;
    }

    .the-coach-zone #rcm-article .card-content-title h4 {
        min-height: 46px;
        margin-bottom: 0 !important;
        line-height: 24px ;
        padding: 0px;
    }
}

@media screen and (max-width: 768px) {
    .the-coach-zone #rcm-article .card-content-title h4 { 
        line-height: 24px; 
    }
}