:root {
    --color-1: #0F4A5E;
    --color-2: #308ACA;
    --color-3: #1DAF91;
    --color-4: #2D2D2D;
    --color-5: #6DBF6B;
    --color-6: #CEC371;
    --color-7: #C4DFE9;
    --color-8: #C62828;
    --color-9: #275851;
    --color-10: #DFEDEB;
    --color-11: #DFC368;
    --color-12: #DC9A9A;
    --color-13: #BFB392;
    --color-14: #F8F1DB;
    --color-15: #F6EFEF;
    --color-16: #F1EDE0;
    --color-17: #2A8428;
    --color-18: #63380C;
    --color-19: #FF4D00;
    --color-20: #FFF600;
    --color-21: #A9CEE9;
    --color-22: #EAF1F5;
    --color-23: #689E96;
    --color-24: #E8B393;
    --color-25: #FCEFE8;
    --color-26: #E2A610;
    --color-27:#FFEFE0;
}

/* ------------------- backgroud color ------------- */
.bg-gradient-2-3 {
    background: linear-gradient(1.84deg, var(--color-2) 1.57%, var(--color-3) 98.45%);
}

.bg-gradient-5-6 {
    background: linear-gradient(4.5deg, var(--color-5) 3.65%, var(--color-6) 96.36%);
}

.bg-gradient-orange {
    background: linear-gradient(180deg, #FFFFFF 0%, #FFF8F0 100%);
}

.bg-color1 {
    background-color: var(--color-1) !important;
}

.bg-color7 {
    background-color: var(--color-7) !important;
}

.bg-color10 {
    background-color: var(--color-10) !important;
}

.bg-color9 {
    background-color: var(--color-9) !important;
}

.bg-color11 {
    background-color: var(--color-11) !important;
}

.bg-color12 {
    background-color: var(--color-12) !important;
}

.bg-color13 {
    background-color: var(--color-13) !important;
}

.bg-color14 {
    background-color: var(--color-14) !important;
}

.bg-color15 {
    background-color: var(--color-15) !important;
}

.bg-color16 {
    background-color: var(--color-16) !important;
}
.bg-color18{
    background-color: var(--color-18) !important;
}

.bg-color21 {
    background-color: var(--color-21) !important;
}

.bg-color22 {
    background-color: var(--color-22) !important;
}

.bg-color23 {
    background-color: var(--color-23) !important;
}

.bg-color24 {
    background-color: var(--color-24) !important;
}

.bg-color25 {
    background-color: var(--color-25) !important;
}
.bg-color27{
    background-color: var(--color-27)  !important;
}

/* ---------------border ------------------ */
.border-bt-0 {
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

.border-cl7-dashed {
    border: 1px dashed var(--color-19) !important
}

.border-color21-2px {
    border: 2px solid var(--color-21) !important
}

.border-color23-2px {
    border: 2px solid var(--color-23) !important
}

.border-color12-2px {
    border: 2px solid var(--color-12) !important
}

.border-color24-2px {
    border: 2px solid var(--color-24) !important
}

.border-gradient-2-31px {
    border: 1px solid transparent;
    /* สำคัญ */
    background:
        linear-gradient(#fff, #fff) padding-box,
        /* สีพื้นด้านใน */
        linear-gradient(1.84deg, var(--color-2) 1.57%, var(--color-3) 98.45%) border-box;
    /* ขอบ gradient */
}

.border-gradient-2-32px {
    border: 2px solid transparent;
    background:
        linear-gradient(#fff, #fff) padding-box,
        /* สีพื้นด้านใน */
        linear-gradient(90.09deg, var(--color-2) 23.6%, var(--color-3) 76.22%) border-box;
    /* ขอบ gradient */
}

.border-gradient-5-6px {
    border: 1px solid transparent;
    background:
        linear-gradient(#fff, #fff) padding-box,
        /* สีพื้นด้านใน */
        linear-gradient(4.5deg, var(--color-5) 3.65%, var(--color-6) 96.36%) border-box;
    /* ขอบ gradient */
}

.border-rd5px {
    border-radius: 5px !important
}

.border-rd10px {
    border-radius: 10px !important
}


/* ---------------- text --------------------- */
.text-color-1 {
    color: var(--color-1) !important
}

.text-color-2 {
    color: var(--color-2) !important
}

.text-color-3 {
    color: var(--color-3) !important
}

.text-color-4 {
    color: var(--color-4) !important
}

.text-color-5 {
    color: var(--color-5) !important
}

.text-color-8 {
    color: var(--color-8) !important
}

.text-color-9 {
    color: var(--color-9) !important
}

.text-color-17 {
    color: var(--color-17) !important
}

.text-color-18 {
    color: var(--color-18) !important
}

.text-color-19 {
    color: var(--color-19) !important
}

.text-color-26 {
    color: var(--color-26) !important
}

.text-gradient-2-3 {
    background: linear-gradient(90.09deg, var(--color-2) 23.6%, var(--color-3) 76.22%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;

}

.text-gradient-19-20 {
    background: linear-gradient(4.5deg, var(--color-19) 3.65%, var(--color-20) 96.36%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;

}

.font-22 {
    font-size: 22px !important
}

.font-24 {
    font-size: 24px !important
}

.font-28 {
    font-size: 28px !important
}

.font-32 {
    font-size: 32px !important
}

.font-48 {
    font-size: 48px !important
}

.font-64 {
    font-size: 64px !important
}

/* *********** Width *********************** */
.mw-200px {
    max-width: 200px;
    width: 100%;
}

.mw-610px {
    max-width: 610px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.mw-875px {
    max-width: 875px;
    width: 100%;
}

.h-45px {
    height: 45px;
    align-content: space-around;

}

/* ------------ shadow -------------------- */
.shadow1 {
    box-shadow: 0px 4px 4px 0px #00000040;

}

.shadow-blue {
    box-shadow: 0px 2px 10px rgba(41, 150, 183, 0.5);
}

.shadow-red {
    box-shadow: 0px 4px 20px 0px #FF4D0040;

}

.shadow-green {
    box-shadow: 0px 2px 10px 0px #88C06D80;
}

.shadow-blue1 {
    box-shadow: 0px 4px 10px 0px #A9CEE940;
}

.shadow-green1 {
    box-shadow: 0px 4px 10px 0px #689E9640;
}

.shadow-red1 {
    box-shadow: 0px 4px 10px 0px #DC9A9A40;
}

.shadow-orange {
    box-shadow: 0px 4px 10px 0px #E8B39340;
}

/* ------------ banner -------------------- */
.breadcrumbs .breadcrumb-blog h1 {
    color: var(--color-1) !important;
    font-weight: var(--font-weight-bold)
}

.breadcrumbs .breadcrumb-blog h2 {
    background: linear-gradient(90.09deg, var(--color-2) 23.6%, var(--color-3) 76.22%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    font-size: var(--h6-font-size);
    font-weight: var(--font-weight-bold)
}

.breadcrumbs .breadcrumb-blog {
    text-align: center;
    padding-top: 5px !important;
    padding-bottom: 20px !important
}

#banner-content {
    background-image: url(../images/group/cover-travel-group.webp);
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 320px
}

/* ------------ end banner -------------------- */

/* *********** Card Plan *********************** */
/* .listplan {
    min-height: 100px;
} */
.buybtn {
    position: relative;
    top: 20px;
    outline: none;
}
.bg-main {
    background-color: var(--color-1) !important
}
.buybtn:hover {
    background-color: var(--color-1);
}

.cardimg {
    max-width: 350px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.cardimg2 {
    max-width: 355px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.z-index999 {
    z-index: 9999;
}

.plandiv .list-group-item {
    border: 0;
}

.plandiv .list-group-item span{
   white-space: nowrap;
}


/* ***********End Card Plan *********************** */
/* -------------- icon ----------------- */
.bi-bag::before {
    content: "\f179"
}

.bi-info-circle::before {
    content: "\f431"
}

.bi-file-earmark-text::before {
    content: "\f38b"
}

.bi-hospital::before {
    content: "\f774"
}

.bi-piggy-bank::before {
    content: "\f64a"
}

.bi-headset::before {
    content: "\f414"
}

.bi-lightbulb-fill::before {
    content: "\f468"
}

.pdiv {
    text-align: left;
}

.stardiv {
    top: 47%;
    left: 18%;
}
.coliconcard{
    align-content: center;
}
.col-card-special .col-1 {
    flex: 0 0 auto;
    width: 9%;
}
.section {
  scroll-margin-top: 80px; /* ความสูง header */
}
@media only screen and (max-width:1399px) {
    .container {
        max-width: 1300px !important;
    }
}

@media only screen and (max-width:1221px) {

    .col-card-special {
        flex: 0 0 auto;
        width: 50% !important;

    }
}

@media only screen and (max-width:992px) {
    .plandiv {
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }

    .pdiv {
        text-align: center;
    }

    .col-card-special {
        display: none;
    }

    .col-card-special0 {
        display: block !important;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }

    .col-card-special0 .col-1 {
        flex: 0 0 auto;
        width: 5%;
    }

    .col-card-special0 .col-10 {
        flex: 0 0 auto;
        width: 95%;
    }

    .col-card-special0 p {
        margin-top: 0px !important;
    }

    .col-card-special0 span {
        margin-top: 5px !important;
    }

    svg {
        width: 300px;
    }

    .stardiv {
        top: 46%;
        left: 13%;
    }

    .carddesign .card {
        min-height: 142px;
    }
}

@media only screen and (max-width:863px) {
    .stardiv {
        top: 46%;
        left: 12%;
    }
}

@media only screen and (max-width:834px) {
    .stardiv {
        top: 46%;
        left: 11%;
    }
}

@media only screen and (max-width:768px) {
    #banner-content {
        background-image: url(../images/group/cover-travel-group-sm.webp);
        background-position: top 0 center;
        max-width: 750px !important;
        width: 100%;
        height: 220px !important;
        object-fit: contain;
        object-position: 50% 0;
        aspect-ratio: 4/3
    }

    .breadcrumbs .breadcrumb-blog h1 {
        padding-top: 60px;
    }

    .colguide {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .stardiv {
        top: 45%;
        left: 12%;
    }

    svg {
        width: 300px;
    }
}

@media only screen and (max-width:731px) {
    .colguide {
        flex: 0 0 auto;
        width: 40%;
    }

    .stardiv {
        top: 43%;
        left: 12%;
    }
}

@media only screen and (max-width: 678px) {
    .stardiv {
        top: 41%;
        left: 12%;
    }
}

@media only screen and (max-width:653px) {
    .h-45px {
        height: auto;
        align-content: space-around;
    }

    .col-card-special0 .col-1 {
        flex: 0 0 auto;
        width: 7%;
    }

    .col-card-special0 .col-10 {
        flex: 0 0 auto;
        width: 93%;
    }

}

@media only screen and (max-width:630px) {

    .stardiv {
        top: 40%;
        left: 13%;
    }
}


@media only screen and (max-width:610px) {
    svg {
        width: 100%;
        margin-left: 5%;
    }

    .colguide {
        text-align: center !important;
    }

    .colguide, .colguide2 {
        width: 100%;
    }

    .stardiv {
        top: 30%;
        left: 40%;
    }

    .colguide2 p {
        margin-top: 0px !important;
    }
}

@media only screen and (max-width:588px) {
    .stardiv {
        top: 34%;
        left: 40%;
    }

    .breadcrumbs .breadcrumb-blog h1 {
        padding-top: 40px;
    }
}

@media only screen and (max-width:545px) {
    .stardiv {
        top: 34%;
        left: 38%;
    }
}

@media only screen and (max-width:502px) {
    .stardiv {
        top: 34%;
        left: 37%;
    }


}

@media only screen and (max-width:479px) {
    .stardiv {
        top: 34%;
        left: 35%;
    }

    .col-card-special0 .col-1 {
        flex: 0 0 auto;
        width: 8%;
    }

    .col-card-special0 .col-10 {
        flex: 0 0 auto;
        width: 92%;
    }
}

@media only screen and (max-width:450px) {
    .cardicon {
        width: 40px !important;
        height: 40px !important;
    }

    .cardicon1 i {
        font-size: 20px !important;
    }

    .ps-5 {
        padding-left: 1rem !important;
    }

    .pe-5 {
        padding-right: 1rem !important;
    }
    .coliconcard{
        align-content: baseline;
    }
}

@media only screen and (max-width:438px) {
    .stardiv {
        top: 32%;
        left: 34%;
    }
}
@media only screen and (max-width:431px) {


    .col-card-special0 .col-1 {
        flex: 0 0 auto;
        width: 9%;
    }

    .col-card-special0 .col-10 {
        flex: 0 0 auto;
        width: 91%;
    }
}

@media only screen and (max-width:422px) {
    .stardiv {
        top: 32%;
        left: 33%;
    }
}



@media only screen and (max-width:411px) {
    .stardiv {
        top: 31%;
        left: 32%;
    }

}

@media only screen and (max-width: 389px) {
    .stardiv {
        top: 32%;
        left: 31%;
    }
        .col-card-special0 .col-1 {
        flex: 0 0 auto;
        width: 11%;
    }

    .col-card-special0 .col-10 {
        flex: 0 0 auto;
        width: 89%;
    }
}



@media only screen and (max-width: 373px) {
    .stardiv {
        top: 33%;
        left: 30%;
    }
}

@media only screen and (max-width: 359px) {
    .stardiv {
        top: 36.5%;
        left: 28%;
    }


}

@media only screen and (max-width: 346px) {
    .stardiv {
        top: 39%;
        left: 28%;
    }

}

@media only screen and (max-width: 333px) {
    .font-20 {
        font-size: 18px !important;
    }

    .font-64 {
        font-size: 50px !important;
    }

    svg {
        height: 200px;
    }

    .stardiv {
        top: 38%;
        left: 30%;
    }

    .cardicon {
        width: 35px !important;
        height: 35px !important;
    }

    .breadcrumbs .breadcrumb-blog h1 {
        padding-top: 30px;
        font-size: 24px;
    }
}

@media only screen and (max-width: 322px) {
    .stardiv {
        top: 38%;
        left: 30%;
    }
}
@media only screen and (max-width: 308px) {
    .stardiv {
        top: 38%;
        left: 28%;
    }
}

/* @media only screen and (max-width: 395px) {
    .stardiv {
        top: 29.5%;
        left: 35.5%;
    }
} */
/* ------------- other ------------------------ */


/* ----------------- NEW 020968------------------ */
.cardicon {
    width: 50px;
    height: 50px;
    border: 0;
    display: inline-block;
}

.cardicon i {
    font-size: 30px;
    vertical-align: middle;
    color: var(--white-color);
    position: relative;
    top: 7%;
}