/*
 * ─── FONT FAMILY ────────────────────────────────────────────────────────────────
 */

.ct-hp-font-helvetica {
    font-family: Arial, Helvetica, sans-serif !important;
}

.ct-hp-font-kanit {
    font-family: Kanit, notosansthai, Arial, sans-serif !important;
}

/*
 * ─── FONT SIZE ───────────────────────────────────────────────────────────────────────
 */ 

.ct-hp-h1 {
    font-size: 32px !important;
    line-height: 1.5 !important;
}

.ct-hp-h2 {
    font-size: 24px !important;
    line-height: 1.5 !important;
}

.ct-hp-h3 {
    font-size: 18px !important;
    line-height: 1.5 !important;
}

.ct-hp-h4 {
    font-size: 16px !important;
    line-height: 1.5 !important;
}

.ct-hp-h5 {
    font-size: 14px !important;
    line-height: 1.5 !important;
}

.ct-hp-h6 {
    font-size: 12px !important;
    line-height: 1.5 !important;
}

.ct-hp-font-w-regualr {
    font-weight: 400 !important;
}

.ct-hp-font-w-semi {
    font-weight: 600 !important;
}

/*
 * ─── FONT COLOR ─────────────────────────────────────────────────────────────────
 */

.ct-hp-c-black-3 {
    color: #333333 !important;
}

.ct-hp-c-black-6 {
    color: #666666 !important;
}

.ct-hp-c-black-9 {
    color: #999999 !important;
}

.ct-hp-c-green {
    color: #00A94F !important;
}

.ct-hp-c-white {
    color: #FFFFFF !important;
}

/*
 * ─── MARGIN ─────────────────────────────────────────────────────────────────────
 */

.ct-hp-margin-0 {
    margin: 0px !important;
}

.ct-hp-margin-t-5 {
    margin-top: 5px !important;
}

.ct-hp-margin-t-10 {
    margin-top: 10px !important;
}

.ct-hp-margin-t-15 {
    margin-top: 15px !important;
}

.ct-hp-margin-t-20 {
    margin-top: 20px !important;
}

.ct-hp-margin-t-25 {
    margin-top: 25px !important;
}

.ct-hp-margin-t-30 {
    margin-top: 30px !important;
}

.ct-hp-margin-b-5 {
    margin-bottom: 5px !important;
}

.ct-hp-margin-b-10 {
    margin-bottom: 10px !important;
}

.ct-hp-margin-b-15 {
    margin-bottom: 15px !important;
}

.ct-hp-margin-b-20 {
    margin-bottom: 20px !important;
}

.ct-hp-margin-b-25 {
    margin-bottom: 25px !important;
}

.ct-hp-margin-b-30 {
    margin-bottom: 30px !important;
}

.ct-hp-margin-l-5 {
    margin-left: 5px !important;
}

.ct-hp-margin-l-10 {
    margin-left: 10px !important;
}

.ct-hp-margin-l-15 {
    margin-left: 15px !important;
}

.ct-hp-margin-l-20 {
    margin-left: 20px !important;
}

.ct-hp-margin-l-25 {
    margin-left: 25px !important;
}

.ct-hp-margin-l-30 {
    margin-left: 30px !important;
}

.ct-hp-margin-r-5 {
    margin-right: 5px !important;
}

.ct-hp-margin-r-10 {
    margin-right: 10px !important;
}

.ct-hp-margin-r-15 {
    margin-right: 15px !important;
}

.ct-hp-margin-r-20 {
    margin-right: 20px !important;
}

.ct-hp-margin-r-25 {
    margin-right: 25px !important;
}

.ct-hp-margin-r-30 {
    margin-right: 30px !important;
}

.ct-hp-margin-v-5 {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}

.ct-hp-margin-v-10 {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

.ct-hp-margin-v-15 {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
}

.ct-hp-margin-v-20 {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
}

.ct-hp-margin-v-25 {
    margin-top: 25px !important;
    margin-bottom: 25px !important;
}

.ct-hp-margin-v-30 {
    margin-top: 30px !important;
    margin-bottom: 30px !important;
}

.ct-hp-p-0 {
    padding: 0 !important;
}

.ct-hp-padding-t-5 {
    padding-top: 5px !important;
}

.ct-hp-padding-t-10 {
    padding-top: 10px !important;
}

.ct-hp-padding-t-15 {
    padding-top: 15px !important;
}

.ct-hp-padding-t-20 {
    padding-top: 20px !important;
}

.ct-hp-padding-t-25 {
    padding-top: 25px !important;
}

.ct-hp-padding-t-30 {
    padding-top: 30px !important;
}

.ct-hp-padding-b-5 {
    padding-bottom: 5px !important;
}

.ct-hp-padding-b-10 {
    padding-bottom: 10px !important;
}

.ct-hp-padding-b-15 {
    padding-bottom: 15px !important;
}

.ct-hp-padding-b-20 {
    padding-bottom: 20px !important;
}

.ct-hp-padding-b-25 {
    padding-bottom: 25px !important;
}

.ct-hp-padding-b-30 {
    padding-bottom: 30px !important;
}

.ct-hp-padding-l-5 {
    padding-left: 5px !important;
}

.ct-hp-padding-l-10 {
    padding-left: 10px !important;
}

.ct-hp-padding-l-15 {
    padding-left: 15px !important;
}

.ct-hp-padding-l-20 {
    padding-left: 20px !important;
}

.ct-hp-padding-l-25 {
    padding-left: 25px !important;
}

.ct-hp-padding-l-30 {
    padding-left: 30px !important;
}

.ct-hp-padding-r-5 {
    padding-right: 5px !important;
}

.ct-hp-padding-r-10 {
    padding-right: 10px !important;
}

.ct-hp-padding-r-15 {
    padding-right: 15px !important;
}

.ct-hp-padding-r-20 {
    padding-right: 20px !important;
}

.ct-hp-padding-r-25 {
    padding-right: 25px !important;
}

.ct-hp-padding-r-30 {
    padding-right: 30px !important;
}

.ct-hp-padding-v-5 {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

.ct-hp-padding-v-10 {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.ct-hp-padding-v-15 {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}

.ct-hp-padding-v-20 {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

.ct-hp-padding-v-25 {
    padding-top: 25px !important;
    padding-bottom: 25px !important;
}

.ct-hp-padding-v-30 {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
}

/*
 * ─── CUT TO NEWLINE ─────────────────────────────────────────────────────────────
 */

.ct-hp-visible-w360,
.ct-hp-visible-w374,
.ct-hp-visible-w375,
.ct-hp-visible-w413,
.ct-hp-visible-w414,
.ct-hp-visible-w767,
.ct-hp-visible-w991,
.ct-hp-visible-w1023 {
    display: none;
}

.ct-hp-hidden-w360,
.ct-hp-hidden-w374,
.ct-hp-hidden-w375,
.ct-hp-hidden-w413,
.ct-hp-hidden-w414,
.ct-hp-hidden-w767,
.ct-hp-hidden-w991,
.ct-hp-hidden-w1023 {
    display: block;
}

.ct-hp-visible-only-w375,
.ct-hp-visible-only-w414,
.ct-hp-visible-only-w768 {
    display: none;
}

.ct-hp-hidden-only-w375,
.ct-hp-hidden-only-w414,
.ct-hp-hidden-only-w768 {
    display: block;
}

@media screen and (max-width: 360px) {
    .ct-hp-visible-w360 {
        display: block;
    }

    .ct-hp-hidden-w360 {
        display: none;
    }
}

@media screen and (max-width: 374px) {
    .ct-hp-visible-w374 {
        display: block;
    }

    .ct-hp-hidden-w374 {
        display: none;
    }
}

@media screen and (max-width: 375px) {
    .ct-hp-visible-w375 {
        display: block;
    }

    .ct-hp-hidden-w375 {
        display: none;
    }
}

@media screen and (max-width: 413px) {
    .ct-hp-visible-w413 {
        display: block;
    }

    .ct-hp-hidden-w413 {
        display: none;
    }
}

@media screen and (max-width: 414px) {
    .ct-hp-visible-w414 {
        display: block;
    }

    .ct-hp-hidden-w414 {
        display: none;
    }
}

@media screen and (max-width: 767px) {
    .ct-hp-visible-w767 {
        display: block;
    }

    .ct-hp-hidden-w767 {
        display: none;
    }
}

@media screen and (max-width: 991px) {
    .ct-hp-visible-w991 {
        display: block;
    }

    .ct-hp-hidden-w991 {
        display: none;
    }
}

@media screen and (max-width: 1023px) {
    .ct-hp-visible-w1023 {
        display: block;
    }

    .ct-hp-hidden-w1023 {
        display: none;
    }
}

/* ==== Only screen =============================================================== */

@media screen and (width: 360px) {
    .ct-hp-visible-only-w360 {
        display: block;
    }

    .ct-hp-hidden-only-w360 {
        display: none;
    }
}

@media screen and (width: 375px) {
    .ct-hp-visible-only-w375 {
        display: block;
    }

    .ct-hp-hidden-only-w375 {
        display: none;
    }
}

@media screen and (width: 414px) {
    .ct-hp-visible-only-w414 {
        display: block;
    }

    .ct-hp-hidden-only-w414 {
        display: none;
    }
}


@media screen and (width: 768px) {
    .ct-hp-visible-only-w768 {
        display: block;
    }

    .ct-hp-hidden-only-w768 {
        display: none;
    }
}