/************ CUSTOM STYLE IN EDITOR-CONTENT ************/
/* ข้อความตัวหนา */
.editorcontent .font-semibold {
    font-family: GraphikTH-semibold !important;
}

/* ข้อความตัวอย่างสีส้ม */
.editorcontent .example-text {
    color: #FF5B00 !important;
}

/* ข้อความตัวใหญ่ */
.editorcontent .big-text {
    font-size: 20px !important;
}

.editorcontent ul li,
.editorcontent ol li {
    margin-left: -2.2rem !important;
}

.editorcontent ul,
.editorcontent ol {
    margin-left: unset !important;
}

.editorContent p a,
.editorcontent ul li a,
.editorcontent ol li a {
    font-family: GraphikTH-semibold !important;
    background-color: #eff1f4 !important;
    padding: 2px !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    /* display: contents; */
}

.editorcontent ul li p,
.editorcontent ol li p {
    display: inline-block;
}

/************ TABLE OF CONTENTS (MENU) ************/
html {
    scroll-behavior: smooth;
}

:target {
    scroll-margin-top: 100px;
}

.rowxl-article-display {
    background-color: #F3F8FE;
    padding: 30px;
    margin-bottom: 35px;
}

.rowxl-article-display .rowxl-title-hilight {
    font: normal 1.9rem/18px 'GraphikTH-SemiBold' !important;
    margin-bottom: 25px;
}

.rowxl-article-display .rowxl-list {
    padding-left: 15px;
    margin-top: 25px;
}

.rowxl-article-display .rowxl-list li {
    margin: 0 0 15px 0 !important;
}

.rowxl-article-display .rowxl-list li a {
    color: inherit;
}

.rowxl-article-display .rowxl-list li::marker {
    font-weight: normal;
    font-family: 'GraphikTH-Regular' !important;
}

.editorcontent li.li-menu-bullet::marker {
    color: #0053b5 !important;
    font-family: GraphikTH-semibold !important;
}

/************ H2 ORDER LIST ************/
.editorcontent li.li-heading-number-h2::marker,
.editorcontent li.li-heading-number-h2-link::marker {
    font-size: 2.5rem;
    font-family: 'GRAPHIKTH-SEMIBOLD';
}

.editorcontent ol.ol-heading-number-h2 {
    margin-left: 0;
}

.editorcontent li.li-heading-number-h2 {
    color: #000 !important;
    margin-left: -2rem !important;
}

.editorcontent .heading-number-h2 {
    text-decoration: none !important;
}

.editorcontent .heading-number-h2 a {
    font-size: 2rem !important;
}

.editorcontent ol.ol-heading-number-h2-1n {
    margin-left: 1rem;
}

.editorcontent li.li-heading-number-h2-link {
    color: #0053b5 !important;
    margin-left: -2rem !important;
}

.editorcontent .li-heading-number-h2 a {
    font-family: GraphikTH-semibold !important;
    font-size: 2.5rem !important;
    padding: 0 !important;
    color: #0053b5 !important;
}

.editorcontent .heading-number-h2-link {
    color: #0053b5 !important;
}

@media screen and (max-width:767px) {
    .editorcontent ol.ol-heading-number-h2-1n {
        margin-left: 0;
    }
}

/************ H3 ORDER LIST ************/
.editorcontent li.li-heading-number-h3::marker,
.editorcontent li.li-heading-number-h3-link::marker {
    font-size: 2rem;
    font-family: 'GRAPHIKTH-SEMIBOLD';
}

.editorcontent ol.ol-heading-number-h3 {
    margin-left: 0;
}

.editorcontent li.li-heading-number-h3 {
    color: #000 !important;
    margin-left: -2rem !important;
}

.editorcontent .heading-number-h3 {
    text-decoration: none !important;
}

.editorcontent .heading-number-h3 a {
    font-size: 2rem !important;
}

.editorcontent ol.ol-heading-number-h3-1n {
    margin-left: 1rem;
}

.editorcontent li.li-heading-number-h3-link {
    color: #0053b5 !important;
    margin-left: -2rem !important;
}

.editorcontent li.li-heading-number-h3-link a {
    padding: 0 !important;
    color: #0053b5 !important;
}

.editorcontent .heading-number-h3-link {
    color: #0053b5 !important;
}

@media screen and (max-width:767px) {
    .editorcontent ol.ol-heading-number-h3-1n {
        margin-left: 0;
    }
}

/************ H4 ORDER LIST ************/
.editorcontent li.li-heading-number-h4::marker,
.editorcontent li.li-heading-number-h4-link::marker {
    font-size: 1.5rem;
    font-family: 'GRAPHIKTH-SEMIBOLD';
}

.editorcontent ol.ol-heading-number-h4 {
    margin-left: 0;
}

.editorcontent li.li-heading-number-h4 {
    color: #000 !important;
    margin-left: -2rem !important;
}

.editorcontent .heading-number-h4 {
    text-decoration: none !important;
}

.editorcontent .heading-number-h4 a {
    font-size: 1.5rem !important;
}

.editorcontent ol.ol-heading-number-h4-1n {
    margin-left: 1rem;
}

.editorcontent li.li-heading-number-h4-link {
    color: #0053b5 !important;
    margin-left: -2rem !important;
}

.editorcontent li.li-heading-number-h4-link a {
    padding: 0 !important;
    color: #0053b5 !important;
}

.editorcontent .heading-number-h4-link {
    color: #0053b5 !important;
}

@media screen and (max-width:767px) {
    .editorcontent ol.ol-heading-number-h4-1n {
        margin-left: 0;
    }
}

/************ HIGHTLIGH BOX ************/
.editorcontent .hightlightbox {
    background-color: #faf2ec;
    border: solid 1px #ff5b00;
    margin: auto;
    padding: 20px;
}

/************ CAPTION UNDER IMAGE ************/
.editorcontent .img-desc-text {
    font-size: 1.3rem !important;
    line-height: 1.3;
    margin: 10px 0 20px 0 !important;
}

.editorcontent .img-desc-text a {
    font-family: GraphikTH-semibold !important;
    font-size: 1.3rem;
}

/************ PROJECT DETAIL ************/
.editorcontent h4 {
    font-family: GraphikTH-semibold !important;
}

.editorcontent h4 span {
    font-family: GraphikTH-regular !important;
}

.editorcontent .project-detail-icon {
    margin-right: 10px;
    min-width: 25px;
    max-width: 30px;
}

/************ QUESTION & ANSWER ************/
.editorcontent .h2-QA>h2 {
    font-size: 20px !important;
}

.editorcontent .head-text-QA {
    min-width: 40px;
    margin-right: 8px;
}

.editorcontent .h3-QA>h3>span {
    font-size: 2rem !important;
    font-family: GraphikTH-SemiBold !important;
}

.editorcontent .h3-QA>h3 {
    font-size: 2rem !important;
}

.editorcontent p.head-text-QA {
    font-size: 2rem !important;
    font-family: GraphikTH-SemiBold !important;
    line-height: 1.2;
}

/************ TABLE ************/
.editorcontent .table-head {
    background-color: #C7D2DE;
    padding: 20px 25px;
    color: #000;
    font-family: GraphikTH-semibold !important;
    min-width: 217px;
    text-align: center;
}

.editorcontent .table-content {
    background-color: #f5f5f5;
    padding: 20px 25px;
    vertical-align: top;
    text-align: center
}

.editorcontent .table-head-left {
    background-color: #C7D2DE;
    padding: 20px 25px;
    color: #000;
    font-family: GraphikTH-semibold;
    min-width: 217px;
    text-align: left;
}

.editorcontent .table-content-left {
    background-color: #f5f5f5;
    padding: 20px 25px;
    vertical-align: top;
    text-align: left
}

.editorcontent th,
.editorcontent td {
    border: 1px solid #fff;
    line-height: 1.5;
}

/************ 360 VIDEO ************/
.editorcontent .fancybox {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.editorcontent .icon-play-vr {
    position: absolute;
    color: white !important;
    z-index: 2;
}

.editorcontent .icon-play-vr svg {
    width: 100px;
    height: 100px;
    margin: auto;
    display: block;
}

.editorcontent .fancybox img {
    filter: brightness(80%);
    transition: filter 0.3s linear;
}

.editorcontent .fancybox:hover img {
    filter: brightness(100%);
    transition: filter 0.3s linear;
}

@media screen and (max-width:576px) {
    .editorcontent .text-frame {
        order: 2 !important;
        padding: 0 0 10px 0 !important;
    }

    .editorcontent .img-txt-2 {
        order: 3 !important;
        padding: 0 !important;
        margin-bottom: 0;
    }

    .editorcontent .text-frame-2 {
        order: 4 !important;
        padding: 0 0 10px 0 !important;
    }
}

/************ 360 VIDEO ************/
.editorcontent .tiktok-video h3 {
    line-height: 1.5 !important;
}

/************ PROJECT CARD ************/
.editorcontent .div-card-luxury {
    border-radius: 10px;
    margin-top: 24px;
    margin-bottom: 24px;
}

.editorcontent .div-card-luxury a,
.editorcontent .div-card-luxury p span {
    font-family: GraphikTH-semibold !important;
}

.editorcontent .fs-2-5rem {
    font-size: 2.5rem !important;
}

.editorcontent .div-bt-card-luxury {
    font-family: 'GraphikTH-SemiBold';
    font-size: 1.3rem;
    background-color: #f2f2f2;
    padding-left: 15px;
    padding-right: 15px;
    height: 60px;
    border-radius: 10px;
    display: block;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.editorcontent .bt-next-luxury {
    background: url(https://sansiri-com-frontend.s3.ap-southeast-1.amazonaws.com/assets/img/ico/ico-more-b.svg);
    width: 47px;
    height: 47px;
    display: block;
    transition: all 0.2s;
}

.editorcontent .bt-next-luxury:hover {
    background: url(https://sansiri-com-frontend.s3.ap-southeast-1.amazonaws.com/assets/img/ico/ico-more-b-hover.svg);
}

.editorcontent .img-luxury-card {
    border-radius: 10px 0 0 10px;
    object-fit: cover;
}

.editorcontent .line-luxury {
    width: 50px;
    height: 5px;
    left: unset;
    background-color: #0693CB;
}

.editorcontent .line-luxury-2 {
    width: 50px;
    height: 5px;
    left: unset;
    background-color: #FFD400;
}

@media (max-width: 992px) {
    .editorcontent .img-luxury-card {
        border-radius: 10px 10px 0 0;
    }
}

/************ BIG IMAGE ************/
.editorcontent .big-img {
    cursor: pointer;
    transition: transform 0.3s ease;
}

.editorcontent .overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    z-index: 201;
}

.editorcontent .overlay img {
    max-width: 90%;
    max-height: 90%;
}

/************ Zig Zag image ************/
.editorcontent .zigzag-box1 {
    order: 1 !important;
}

.editorcontent .zigzag-box2 {
    order: 2 !important;
}

@media screen and (max-width:767px) {
    .editorcontent .zigzag-box1 {
        order: 2 !important;
    }

    .editorcontent .zigzag-box2 {
        order: 1 !important;
    }
}

/************ CUSTOM OTHER STYLES IN CONTENT CMS ************/
.new-content .hilightbox h4 {
    font: normal 2.2rem / 2.6rem GraphikTH-SemiBold !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
th,
b,
strong {
    font-weight: normal !important;
}

/* H2, H3 */
.editorcontent a h2,
.editorcontent a h3 {
    text-decoration: none !important;
    color: #0053b5 !important;
}

.editorcontent h2 a {
    font-size: 2.5rem !important;
    font-family: GraphikTH-semibold !important;
    text-decoration: none !important;
}

.editorcontent h3 {
    line-height: 1.5;
}

.editorcontent h3 a {
    font-size: 2rem !important;
    text-decoration: none !important;
}

.editorcontent strong {
    font-family: GraphikTH-semibold !important;
}

li.li-heading-number-h2 p {
    display: block !important;
}

li.li-heading-number-h3 p {
    display: block !important;
}

li.li-heading-number-h4 p {
    display: block !important;
}

li.li-heading-number-h2 ul {
    list-style: disc !important;
}

li.li-heading-number-h3 ul {
    list-style: disc !important;
}

li.li-heading-number-h4 ul {
    list-style: disc !important;
}

.editorcontent .table-head {
    min-width: 172px;
}

a:has(.d-contents) {
    display: contents;
}

.table-responsive p {
    margin: 0 !important;
}

.editorcontent b {
    font-weight: normal !important;
}