:root {
    --navy: #0A296A;
    --red: #F4003D;
    --dark-red: #C10030;
    --pink: #FF65B3;
    --green: #3FEAA8;
    --purple: #5E49FE;
    --blue: #006AFE;
    --bondi-blue: #00A9BC;
    --fire-opal: #EA5C58;
    --black: #000000;
    --sec-black: #101010;
    --off-black: #212121;
    --light-black: #333333;
    --white: #ffffff;
    --gray: #cccccc;
    --dark-gray: #979797;
	--border: #DBDBDB;
    --red-black: linear-gradient(180deg, #F4003D 0%, #000000 100%);
    --blue-black: linear-gradient(180deg, #0A296A 0%, #000000 100%);
    --red-blue: linear-gradient(180deg, #F4003D 0%, #0A296A 100%);
    --font-ibm: "IBM Plex Sans Thai", sans-serif;
    --font-sarabun: "Sarabun", sans-serif;
}


/* *** *  *** *  *** *  *** *  *** *  *** *  *** *  *** *  *** *  *** *  *** *  *** *  *** *  *** *  *** *
** body
** *** *  *** *  *** *  *** *  *** *  *** *  *** *  *** *  *** *  *** *  *** *  *** *  *** *  *** *  *** */

body {
    font-family: var(--font-sarabun);
    font-style: normal;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 300;
    color: var(--light-black);
}

a {
    text-decoration: none;
    transition: all .3s linear;
}

/* *** *  *** *  *** *  *** *  *** *  *** *  *** *  *** *  *** *  *** *  *** *  *** *  *** *  *** *  *** *
** container
** *** *  *** *  *** *  *** *  *** *  *** *  *** *  *** *  *** *  *** *  *** *  *** *  *** *  *** *  *** */

.container {
    max-width: 1248px;
    padding: 0 24px;
    margin: 0 auto;
}


/* *** *  *** *  *** *  *** *  *** *  *** *  *** *  *** *  *** *  *** *  *** *  *** *  *** *  *** *  *** *
** pre-defined classes
** *** *  *** *  *** *  *** *  *** *  *** *  *** *  *** *  *** *  *** *  *** *  *** *  *** *  *** *  *** */
h1, .h1 {
    font-size: 32px;
    line-height: 1.3;
    font-family: var(--font-ibm);
    font-weight: 600;
    margin: 0;
}

h2, .h2 {
    font-size: 28px;
    line-height: 1;
    font-weight: 600;
    font-family: var(--font-ibm);
    margin: 0;
}

h3, .h3 {
    font-size: 26px;
    line-height: 1.6;
    font-family: var(--font-ibm);
    font-weight: 600;
    margin: 0;
}

h4, .h4 {
    font-size: 22px;
    line-height: 1.6;
    margin: 0;
    font-family: var(--font-ibm);
    font-weight: 600;
}

h5, .h5 {
    font-size: 18px;
    line-height: 1.5;
    margin: 0;
    font-family: var(--font-ibm);
    font-weight: 500;
}

h6, .h6 {
    font-size: 18px;
    line-height: 140%;
    margin: 0;
    font-family: var(--font-ibm);
    font-weight: 700;
}


.lg-text {
    font-size: 24px;
    line-height: 1.4;
    font-weight: 400;
}

.md-text {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
}

.sm-text {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
}
.ssm-text {
    font-size: 14px;
}

.white .p, 
.white .lg-text,
.white .md-text,
.white .sm-text {
    color: var(--white);
}



.font-ibm {
    font-family: var(--font-ibm);
}

.font-sarabun {
    font-family: var(--font-sarabun);
}




.fw-100 {
    font-weight: 100;
}

.fw-300 {
    font-weight: 300;
}

.fw-400 {
    font-weight: 400;
}

.fw-500 {
    font-weight: 500;
}

.fw-600 {
    font-weight: 600;
}

.fw-700 {
    font-weight: 700;
}

.fs-normal {
    font-style: normal;
}

.fs-italic {
    font-style: italic;
}




.fl-height-80 {
    line-height: .8;
}
.fl-height-90 {
    line-height: .9;
}
.fl-height-100 {
    line-height: 1;
}
.fl-height-110 {
    line-height: 1.1;
}
.fl-height-120 {
    line-height: 1.2;
}
.fl-height-130 {
    line-height: 1.3;
}
.fl-height-140 {
    line-height: 1.4;
}
.fl-height-150 {
    line-height: 1.5;
}
.fl-height-160 {
    line-height: 1.6;
}
.fl-height-170 {
    line-height: 1.7;
}
.fl-height-180 {
    line-height: 1.8;
}
.fl-height-190 {
    line-height: 1.9;
}
.fl-height-200 {
    line-height: 2;
}



.tt-upper {
    text-transform: uppercase;
}

.tt-lower {
    text-transform: lowercase;
}

.ta-center,
.text-center {
    text-align: center;
}

.ta-left {
    text-align: left;
}

.ta-right {
    text-align: right;
}

.ls-1 {
    letter-spacing: 1px;
}

.ls-2 {
    letter-spacing: 2px;
}

.ls-3 {
    letter-spacing: 3px;
}

.fl {
    display: flex;
    gap: 1rem;
} 

.fl-ai-center {
    align-items: center;
} 

.fl-ai-fs {
    align-items: flex-start;
} 

.fl-ai-fe {
    align-items: flex-end;
} 

.fl-ai-stretch {
    justify-content: stretch;
}

.fl-jc-sb {
    justify-content: space-between;
}

.fl-jc-fs {
    justify-content: flex-start;
}

.fl-jc-fe {
    justify-content: flex-end;
}

.fl-jc-center {
    justify-content: center;
}
.ai-self-center {
    align-self: center;
}
.ai-self-st {
    align-self: self-start;
}
.ai-self-ed {
    align-self: self-end;
}


.fl-dir-row {
    flex-direction: row;
}

.fl-dir-col {
    flex-direction: column;
}

.fl-dir-row-rev {
    flex-direction: row-reverse;
}

.fl-dir-col-rev {
    flex-direction: column-reverse;
}
.fl-wr-wrap {
	flex-wrap: wrap;
}

.gd {
    display: grid;
}

.gd-col-2 {
    grid-template-columns: 1fr 1fr;
}

.gd-col-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.g-0 {
    gap: 0px;
}
.g-10 {
    gap: 10px;
}

.g-12 {
    gap: 12px;
}

.g-16 {
    gap: 16px;
}

.g-20 {
    gap: 20px;
}
.g-24 {
    gap: 24px;
}
.g-30 {
    gap: 30px;
}
.g-40 {
    gap: 40px;
}
.g-60 {
    gap: 60px;
}


/* Margin & Padding */
.m-auto {
    margin-left: auto;
    margin-right: auto;
}

.m-0 {
    margin: 0;
}

.m-1 {
    margin: 1rem;
}

.m-2 {
    margin: 2rem;
}

.m-3 {
    margin: 3rem;
}

.m-4 {
    margin: 4rem;
}

.m-5 {
    margin: 5rem;
}

.mt-0 {
    margin-top: 0;
}

.mt-1 {
    margin-top: 1rem;
}

.mt-2 {
    margin-top: 2rem;
}

.mt-3 {
    margin-top: 3rem;
}

.mt-4 {
    margin-top: 4rem;
}

.mt-5 {
    margin-top: 5rem;
}

.mb-0 {
    margin-bottom: 0;
}

.mb-1 {
    margin-bottom: 1rem;
}

.mb-2 {
    margin-bottom: 2rem;
}

.mb-3 {
    margin-bottom: 3rem;
}

.mb-4 {
    margin-bottom: 4rem;
}

.mb-5 {
    margin-bottom: 5rem;
}


.mx-0 {
    margin-left: 0;
    margin-right: 0;
}

.mx-1 {
    margin-left: 1rem;
    margin-right: 1rem;
}

.mx-2 {
    margin-left: 2rem;
    margin-right: 2rem;
}

.mx-3 {
    margin-left: 3rem;
    margin-right: 3rem;
}

.mx-4 {
    margin-left: 4rem;
    margin-right: 4rem;
}

.mx-5 {
    margin-left: 5rem;
    margin-right: 5rem;
}

.my-0 {
    margin-top: 0;
    margin-bottom: 0;
}

.my-1 {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.my-2 {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.my-3 {
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.my-4 {
    margin-top: 4rem;
    margin-bottom: 4rem;
}

.my-5 {
    margin-top: 5rem;
    margin-bottom: 5rem;
}
.mb-24 {
    margin-bottom: 24px;
}
.mt-24 {
    margin-top: 24px;
}
.my-24 {
    margin-top: 24px;
    margin-bottom: 24px;
}
.mb-40 {
    margin-bottom: 40px;
}
.mt-40 {
    margin-top: 40px;
}
.my-40 {
    margin: 40px auto;
}
.mb-60 {
    margin-bottom: 60px;
}
.mt-60 {
    margin-top: 60px;
}
.my-60 {
    margin: 60px auto;
}
.my-120 {
    margin: 120px auto;
}
.mt-120 {
    margin-top: 120px;
}
.mb-120 {
    margin-bottom: 120px;
}


.p-0 {
    padding: 0;
}

.p-1 {
    padding: 1rem;
}

.p-2 {
    padding: 2rem;
}

.p-3 {
    padding: 3rem;
}

.p-4 {
    padding: 4rem;
}

.p-5 {
    padding: 5rem;
}

.pt-0 {
    padding-top: 0;
}

.pt-1 {
    padding-top: 1rem;
}

.pt-2 {
    padding-top: 2rem;
}

.pt-3 {
    padding-top: 3rem;
}

.pt-4 {
    padding-top: 4rem;
}

.pt-5 {
    padding-top: 5rem;
}

.pb-0 {
    padding-bottom: 0;
}

.pb-1 {
    padding-bottom: 1rem;
}

.pb-2 {
    padding-bottom: 2rem;
}

.pb-3 {
    padding-bottom: 3rem;
}

.pb-4 {
    padding-bottom: 4rem;
}

.pb-5 {
    padding-bottom: 5rem;
}

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

.px-1 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.px-2 {
    padding-left: 2rem;
    padding-right: 2rem;
}

.px-3 {
    padding-left: 3rem;
    padding-right: 3rem;
}

.px-4 {
    padding-left: 4rem;
    padding-right: 4rem;
}

.px-5 {
    padding-left: 5rem;
    padding-right: 5rem;
}

.py-0 {
    padding-top: 0;
    padding-bottom: 0;
}

.py-1 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.py-2 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.py-3 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.py-4 {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.py-5 {
    padding-top: 5rem;
    padding-bottom: 5rem;
}
.py-16 {
    padding-top: 16px;
	padding-bottom: 16px;
}
.pt-16 {
    padding-top: 16px;
}
.pt-20 {
    padding-top: 20px;
}
.py-30 {
    padding-top: 30px;
	padding-bottom: 30px;
}
.py-60 {
    padding-top: 60px;
	padding-bottom: 60px;
}




/* Color & Background */
.navy {
    color: var(--navy);
}

.red {
    color: var(--red);
}

.pink {
    color: var(--pink);
}

.green {
    color: var(--green);
}

.purple {
    color: var(--purple);
}

.blue {
    color: var(--blue);
}

.bondi-blue {
    color: var(--bondi-blue);
}

.fire-opal {
    color: var(--fire-opal);
}

.off-black {
    color: var(--off-black);
}

.black {
    color: var(--black);
}

.white {
    color: var(--white);
}

.gray {
    color: var(--gray);
}

.dark-gray {
    color: var(--dark-gray);
}





.bg-navy {
    background-color: var(--navy);
}

.bg-red {
    background-color: var(--red);
}

.bg-pink {
    background-color: var(--pink);
}

.bg-green {
    background-color: var(--green);
}

.bg-purple {
    background-color: var(--purple);
}

.bg-blue {
    background-color: var(--blue);
}

.bg-bondi-blue {
    background-color: var(--bondi-blue);
}

.bg-fire-opal {
    background-color: var(--fire-opal);
}

.bg-off-black {
    background-color: var(--off-black);
}

.bg-black {
    background-color: var(--black);
}

.bg-white {
    background-color: var(--white);
}

.bg-red-black {
    background: var(--red-black);
}

.bg-red-blue {
    background: var(--red-blue);
}

.bg-blue-black {
    background: var(--blue-black);
}






/* Button */
.btn {
    color: var(--white);
    width: fit-content;
    display: block;
    text-decoration: none !important;
    font-size: 16px;
    line-height: 1.6;
    font-weight: 700;
    font-family: var(--font-ibm);
    transition: all .25s linear;
    color: var(--navy);
    position: relative;
}


.btn.white {
    color: var(--white);
}

.has-arrow {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

.arrow-right::after {
    content: url('../img/arrow-right.svg');
}

.white.arrow-right::after {
    content: url('../img/arrow-right-white.svg');
}

.arrow-left::before {
    content: url('../img/arrow-right.svg');
    transform: rotate(180deg);
}

.bg-* .btn {
    color: var(--white);
}

.btn:hover {
    color: var(--red);
}

.bg-* .btn:hover {
    color: var(--gray);
}



/* News Heading */
.news-heading {
    background-color: var(--sec-black);
    border-radius: 36px;
    padding: 8px 26px;
}

.news-heading.center {
    justify-content: center;
}

.news-heading h3 {
    line-height: 1.4;
	overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1; 
    -webkit-box-orient: vertical;
}

.news-heading .btn {
    margin-left: auto;
    margin-right: 0;
	min-width: 67px;
}

.news-heading .btn:hover {
    color: #cccccc;
}


.clearfix::after {
    content: "";
    /* display: table; */
    display: none;
    clear: both;
    float: none;
}

.clearfix::before {
    content: "";
    /* display: table; */
    display: none;
    clear: both;
    float: none;
}


/* Tags */
.tag {
    font-family: var(--font-ibm);
    font-size: 14px;
    line-height: 1.6;
    font-weight: 500;
}



/* label */
.cat-label {
    font-family: var(--font-ibm);
    font-size: 14px;
    line-height: 1.6;
    font-weight: 500;
    padding: 2px 12px;
    color: var(--white);
    background-color: var(--red);
    border-radius: 14px;
    letter-spacing: 0;
    display: inline-block;
}
body.page-template-category-entertainment .cat-label,
.cat-label_entertainment {
    background-color: var(--pink);
}
body.page-template-category-horoscope .cat-label,
.cat-label_horoscope {
    background-color: var(--purple);
}
body.page-template-category-lifestyle .cat-label,
.cat-label_lifestyle {
    background-color: var(--green);
}
body.page-template-category-video .cat-label,
.cat-label_video  {
    background-color: var(--bondi-blue);
}
body.page-template-category-lottery .cat-label,
.cat-label_lottery {
    background-color: var(--blue);
}

body.page-template-category-ruam-duay .cat-label,
.cat-label_ruam-duay-1677 {
    background-color: var(--fire-opal);
}

.hv-fire-opal:hover {
    color: var(--fire-opal);
}
.hv-blue:hover {
    color: var(--blue);
}
.hv-bondi-blue:hover {
    color: var(--bondi-blue);
}
.hv-green:hover {
    color: var(--green);
}
.hv-purple:hover {
    color: var(--purple);
}
.hv-pink:hover {
    color: var(--pink);
}
.hv-red:hover {
    color: var(--red);
}



/* cols */
.full-width {
    width: 100%;
}

.g-24 .col-two-third {
    width: 100%;
    /* max-width: 792px; */
    max-width: calc(100% - 408px);
}

.g-24 .col-one-third {
    width: 100%;
    max-width: 384px;
}


/* line count */
.line-count-1 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}
.line-count-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.line-count-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

@media only screen and (min-width: 998px) {
    .pagination-mb {
        display: none;
    }
}

@media only screen and (min-width: 768px) {
    .for-mobile {
        display: none;
    }

}


/* *** *  *** *  *** *  *** *  *** *  *** *  *** *  *** *  *** *  *** *  *** *  *** *  *** *  *** *  *** *
** responsive styles
** *** *  *** *  *** *  *** *  *** *  *** *  *** *  *** *  *** *  *** *  *** *  *** *  *** *  *** *  *** */
@media only screen and (max-width: 1024px) {
    /* GLobal */
    .g-24 .col-one-third {
        max-width: 309px;
    }
    .g-24 .col-two-third {
        max-width: calc(100% - 333px);
    }

}

@media only screen and (max-width: 998px) {
    /* Global */
    .h5, .h5 {
        line-height: 1.4;
    }


    .container.fl {
        flex-wrap: wrap;
    }
    .g-24 .col-one-third {
        max-width: 100%;
    }
    .g-24 .col-two-third {
        max-width: 100%;
    }
    .pagination-desk {
        display: none;
    }


}


@media only screen and (max-width: 767px) {
    /* Global */

    /* heading */
/*     .news-heading {
        justify-content: center;
            padding: 4px 10px;
    } */
    .news-heading h3 {
        font-size: 18px;
        margin-top: 3px;
    }
    .news-heading img {
        height: 13px;
        object-fit: contain;
    }

        
    .g-24 {
        gap: 16px;
    }

    .g-40 {
        gap: 24px;
    }

    .my-60 {
        margin: 24px auto;
    }


    /* cols */
    .col-two-third,
    .col-one-third, 
    .g-24 .col-two-third,
    .g-24 .col-one-third {
        max-width: 100%;
    }


    .for-desk {
        display: none;
    }



}