:root {
    
    /*
    
    อ้างอิงการใช้สีจาก https://dequeuniversity.com/rules/axe/4.10/color-contrast

    */
    
    /* สำหรับเว็บไซต์หลัก CPN */
    
    /* --cpn-color-primary : 179,150,84;
    --cpn-color-primary-hex : b39654;

    --cpn-color-secondary : 20,65,65;
    --cpn-color-secondary-hex : 144141; */

    /* สำหรับเว็บไซต์ Online Booking */
    
    /* --cpn-booking-color-primary-rgb : 179,150,84;
    --cpn-booking-color-primary-hex : b39654;

    --cpn-booking-color-secondary-rgb : 20,65,65;
    --cpn-booking-color-secondary-hex : 144141; */

    /* สำหรับเว็บไซต์ Cagent */
    
    /* --cpn-cagent-color-primary-rgb : 179,150,84;
    --cpn-cagent-color-primary-hex : b39654;

    --cpn-cagent-color-secondary-rgb : 20,65,65;
    --cpn-cagent-color-secondary-hex : 144141; */

    --cpn-color-white : 255,255,255;
    --cpn-color-black : 35,35,35;
    --cpn-color-black-dark : 0,0,0;

    --cpn-color-gray-light : 244,244,244;

    --cpn-color-gray : 147,147,147;

    --cpn-color-gray-dark : 89,89,89;

    --cpn-color-red : 212,22,48;
    --cpn-rgb-text-color-not-found : 220,220,220;

    /* form */

    --cpn-field-alert-border-color : 212,22,48;
    --cpn-field-alert-bg-color : 212,22,48;

    --cpn-input-border-color-on-light : 0,0,0;
    --cpn-input-border-color-on-light-focus : 179,150,84;

    --cpn-input-border-color-on-dark : 255,255,255;
    --cpn-input-border-color-on-dark-focus : 179,150,84;

    /* loading */
    --cpn-color-loading-white : 255,255,255;
    --cpn-bg-color-img : 200,200,200; /* 220,220,220 */

    /* transition */
    --cpn-transition-duration : 0.5s;
    --cpn-transition-duration-slow : 1s;
    --cpn-transition-duration-fast : 0.3s;
    --cpn-transition-all : all 0.5s ease;
    --cpn-transition-all-slow : all 1s ease;
    --cpn-transition-all-fast : all 0.3s ease;

    /* text */
    --cpn-text-link : 138,116,61;
    --cpn-text-link-hover : 179,150,84;   

    /* btn */
    --cpn-btn-height : 45px;
    --cpn-btn-line-height : 45px;
    --cpn-btn-border-radius : 10px;

    /* border */
    --cpn-border-color-on-white : 230,230,230;

    /* card */
    --cpn-card-border-radius : 20px;
    --cpn-card-project-corner : 20px;

    --cpn-col-12 : 100%;
	--cpn-col-11 : calc((100% / 12) * 11);
	--cpn-col-10 : calc((100% / 12) * 10);
	--cpn-col-9 : calc((100% / 12) * 9);
	--cpn-col-8 : calc((100% / 12) * 8);
	--cpn-col-7 : calc((100% / 12) * 7);
	--cpn-col-6 : calc((100% / 12) * 6);
	--cpn-col-5 : calc((100% / 12) * 5);
	--cpn-col-4 : calc((100% / 12) * 4);
	--cpn-col-3 : calc((100% / 12) * 3);
	--cpn-col-2 : calc((100% / 12) * 2);
	--cpn-col-1 : calc((100% / 12));

    --cpn-padding-content-top : 60px;
    --cpn-padding-content-bottom : 60px;

    /* bootstrap */
    /* --bs-modal-width: 500px; */
    --bs-modal-margin : 30px !important;
    
    /* social */
    --social-facebook-color : 9,102,255;
    --social-facebook-color-hover : 0,81,198;
    --social-facebook-on-color : 255,255,255;
    --social-messenger-color : 0,132,255;
    --social-messenger-color-hover : 0,117,204;
    --social-messenger-on-color : 255,255,255;
    --social-instagram-color : 9,102,255;
    --social-instagram-color-hover : 0,81,198;
    --social-instagram-on-color : 255,255,255;
    --social-instagram-color1 : 90,32,102;
    --social-instagram-color2 : 207,27,90;
    --social-instagram-color3 : 235,127,40;
    --social-tiktok-color : 30,30,30;
    --social-tiktok-color-hover : 50,50,50;
    --social-tiktok-on-color : 255,255,255;
    --social-youtube-color : 204,0,0;
    --social-youtube-color-hover : 147,2,2;
    --social-youtube-on-color : 255,255,255;
    --social-line-color : 37,175,0;
    --social-line-color-hover : 32,147,0;
    --social-line-on-color : 255,255,255;

}

[site="cpn"] {

    /* primary */
    --cpn-color-primary : 179,150,84;
    --cpn-color-on-primary : 255,255,255;
    --cpn-color-primary-hover : 155,130,81;
    --cpn-color-on-primary-hover : 255,255,255;

    /* primary light */
    --cpn-color-primary-light : 236,228,212;
    --cpn-color-on-primary-light : 155,130,81; /* 179,150,84 */
    --cpn-color-primary-light-hover : 229,218,195;
    --cpn-color-on-primary-light-hover : 155,130,81; /* 179,150,84 */

    /* secondary */
    --cpn-color-secondary : 20,65,65;
    --cpn-color-on-secondary : 255,255,255;
    --cpn-color-secondary-hover : 24,86,84;
    --cpn-color-on-secondary-hover : 255,255,255;

    /* secondary light */
    --cpn-color-secondary-light : 204,222,225;
    --cpn-color-on-secondary-light : 20,65,65;
    --cpn-color-secondary-light-hover : 179,207,210;
    --cpn-color-on-secondary-light-hover : 20,65,65;

    /* loading */
    --cpn-color-loading : 255,255,255;
    --cpn-color-loading-on-light : 179,150,84;
    --cpn-color-loading-on-dark : 179,150,84;

}


/* --------------------------------------------------------------- */
/* ----------------------------- fill ---------------------------- */
/* --------------------------------------------------------------- */

.fill-color-white {
    --cpn-btn-bg : 255,255,255;
    --cpn-btn-color : 35,35,35;
    --cpn-btn-hover-bg : 240,240,240;
    --cpn-btn-hover-color : 35,35,35;
    --cpn-btn-active-bg : 255,255,255;
    --cpn-btn-active-color : 35,35,35;
}
.fill-color-black {
    --cpn-btn-bg : 0,0,0;
    --cpn-btn-color : 255,255,255;
    --cpn-btn-hover-bg : 12,12,12;
    --cpn-btn-hover-color : 255,255,255;
    --cpn-btn-active-bg : 0,0,0;
    --cpn-btn-active-color : 255,255,255;
}
.fill-color-gray {
    --cpn-btn-bg : 94,94,94;
    --cpn-btn-color : 255,255,255;
    --cpn-btn-hover-bg : 45,45,45;
    --cpn-btn-hover-color : 255,255,255;
    --cpn-btn-active-bg : 94,94,94;
    --cpn-btn-active-color : 255,255,255;
}
.fill-color-gray-light {
    --cpn-btn-bg : 224,224,224;
    --cpn-btn-color : 12,12,12;
    --cpn-btn-hover-bg : 193,193,193;
    --cpn-btn-hover-color : 12,12,12;
    --cpn-btn-active-bg : 224,224,224;
    --cpn-btn-active-color : 12,12,12;
}

/* --------------------------------------------------------------- */
/* --------------------------- outline --------------------------- */
/* --------------------------------------------------------------- */

.outline-color-white {
    --cpn-btn-bg : 255,255,255;
    --cpn-btn-border-color : 255,255,255;
    --cpn-btn-color : 255,255,255;
    --cpn-btn-hover-bg : 255,255,255;
    --cpn-btn-hover-border-color : 255,255,255;
    --cpn-btn-hover-color : 35,35,35;
    --cpn-btn-active-bg : 240,240,240;
    --cpn-btn-active-border-color : 240,240,240;
    --cpn-btn-active-color : 35,35,35;
}
.outline-color-black {
    --cpn-btn-bg : 0,0,0;
    --cpn-btn-border-color : 0,0,0;
    --cpn-btn-color : 0,0,0;
    --cpn-btn-hover-bg : 0,0,0;
    --cpn-btn-hover-border-color : 0,0,0;
    --cpn-btn-hover-color : 255,255,255;
    --cpn-btn-active-bg : 12,12,12;
    --cpn-btn-active-border-color : 0,0,0;
    --cpn-btn-active-color : 255,255,255;
}
.outline-color-gray {
    --cpn-btn-bg : 94,94,94;
    --cpn-btn-border-color : 180,180,180;
    --cpn-btn-color : 94,94,94;
    --cpn-btn-hover-bg : 94,94,94;
    --cpn-btn-hover-border-color : 94,94,94;
    --cpn-btn-hover-color : 255,255,255;
    --cpn-btn-active-bg : 45,45,45;
    --cpn-btn-active-border-color : 20,65,65;
    --cpn-btn-active-color : 255,255,255;
}
.outline-color-gray-light {
    --cpn-btn-bg : 224,224,224;
    --cpn-btn-border-color : 224,224,224;
    --cpn-btn-color : 12,12,12;
    --cpn-btn-hover-bg : 224,224,224;
    --cpn-btn-hover-border-color : 224,224,224;
    --cpn-btn-hover-color : 12,12,12;
    --cpn-btn-active-bg : 193,193,193;
    --cpn-btn-active-border-color : 193,193,193;
    --cpn-btn-active-color : 12,12,12;
}


/* --------------------------------------------------------------- */
/* ----------------------------- fill ---------------------------- */
/* --------------------------------------------------------------- */

.fill-color-primary {
    --cpn-btn-bg : var(--cpn-color-primary);
    --cpn-btn-color : var(--cpn-color-on-primary);
    --cpn-btn-hover-bg : var(--cpn-color-primary-hover);
    --cpn-btn-hover-color : var(--cpn-color-on-primary-hover);
    --cpn-btn-active-bg : var(--cpn-color-primary);
    --cpn-btn-active-color : var(--cpn-color-on-primary);
}
.fill-color-primary-light {
    --cpn-btn-bg : var(--cpn-color-primary-light);
    --cpn-btn-color : var(--cpn-color-on-primary-light);
    --cpn-btn-hover-bg : var(--cpn-color-primary-light-hover);
    --cpn-btn-hover-color : var(--cpn-color-on-primary-light-hover);
    --cpn-btn-active-bg : var(--cpn-color-primary-light);
    --cpn-btn-active-color : var(--cpn-color-on-primary-light);
}
.fill-color-secondary {
    --cpn-btn-bg : var(--cpn-color-secondary);
    --cpn-btn-color : var(--cpn-color-on-secondary);
    --cpn-btn-hover-bg : var(--cpn-color-secondary-hover);
    --cpn-btn-hover-color : var(--cpn-color-on-secondary-hover);
    --cpn-btn-active-bg : var(--cpn-color-secondary);
    --cpn-btn-active-color : var(--cpn-color-on-secondary);
}
.fill-color-secondary-light {
    --cpn-btn-bg : var(--cpn-color-secondary-light);
    --cpn-btn-color : var(--cpn-color-on-secondary-light);
    --cpn-btn-hover-bg : var(--cpn-color-secondary-light-hover);
    --cpn-btn-hover-color : var(--cpn-color-on-secondary-light-hover);
    --cpn-btn-active-bg : var(--cpn-color-secondary-light);
    --cpn-btn-active-color : var(--cpn-color-on-secondary-light);
}

/* --------------------------------------------------------------- */
/* --------------------------- outline --------------------------- */
/* --------------------------------------------------------------- */

.outline-color-primary {
    --cpn-btn-bg : 179,150,84;
    --cpn-btn-border-color : 179,150,84;
    --cpn-btn-color : 179,150,84;
    --cpn-btn-hover-bg : 179,150,84;
    --cpn-btn-hover-border-color : 179,150,84;
    --cpn-btn-hover-color : 255,255,255;
    --cpn-btn-active-bg : 155,130,81;
    --cpn-btn-active-border-color : 155,130,81;
    --cpn-btn-active-color : 255,255,255;
}
.outline-color-primary-light {
    --cpn-btn-bg : 236,228,212;
    --cpn-btn-border-color : 236,228,212;
    --cpn-btn-color : 179,150,84;
    --cpn-btn-hover-bg : 236,228,212;
    --cpn-btn-hover-border-color : 236,228,212;
    --cpn-btn-hover-color : 179,150,84;
    --cpn-btn-active-bg : 229,218,195;
    --cpn-btn-active-border-color : 229,218,195;
    --cpn-btn-active-color : 179,150,84;
}
.outline-color-secondary {
    --cpn-btn-bg : 20,65,65;
    --cpn-btn-border-color : 20,65,65;
    --cpn-btn-color : 20,65,65;
    --cpn-btn-hover-bg : 20,65,65;
    --cpn-btn-hover-border-color : 20,65,65;
    --cpn-btn-hover-color : 255,255,255;
    --cpn-btn-active-bg : 24,86,84;
    --cpn-btn-active-border-color : 20,65,65;
    --cpn-btn-active-color : 255,255,255;
}
.outline-color-secondary-light {
    --cpn-btn-bg : 204,222,225;
    --cpn-btn-border-color : 204,222,225;
    --cpn-btn-color : 20,65,65;
    --cpn-btn-hover-bg : 204,222,225;
    --cpn-btn-hover-border-color : 204,222,225;
    --cpn-btn-hover-color : 20,65,65;
    --cpn-btn-active-bg : 179,207,210;
    --cpn-btn-active-border-color : 179,207,210;
    --cpn-btn-active-color : 20,65,65;
}


/* xxl */
@media (min-width: 1400px) {

    :root {

        /* font size */    
        --cpn-default-font-size : 16px;
        --cpn-default-line-height : 25px;
        --cpn-small-font-size : 14px;
        --cpn-small-line-height : 22px;
        --cpn-smallest-font-size : 12px;
        --cpn-smallest-line-height : 20px;
        --cpn-h1-font-size : 35px;
        --cpn-h1-line-height : 55px;
        --cpn-h2-font-size : 25px;
        --cpn-h2-line-height : 40px;
        --cpn-h3-font-size : 20px;
        --cpn-h3-line-height : 35px;
        --cpn-h4-font-size : 18px;
        --cpn-h4-line-height : 30px;
        --cpn-h5-font-size : 16px;
        --cpn-h5-line-height : 25px;
        --cpn-h6-font-size : 16px;
        --cpn-h6-line-height : 25px;

    }

}

/* xxl - 1 */
@media (min-width:1500px) and (max-width: 1599.98px) {}

/* xxl - 2 */
@media (min-width: 1400px) and (max-width: 1499.98px) {}

/* xxl - 1 และ 2 */
@media (min-width: 1400px) and (max-width: 1599.98px) {

    :root {

        /* font size */    
        --cpn-default-font-size : 15px;
        --cpn-default-line-height : 25px;
        --cpn-small-font-size : 10px;
        --cpn-small-line-height : 15px;
        --cpn-smallest-font-size : 10px;
        --cpn-smallest-line-height : 15px;
        --cpn-h1-font-size : 30px;
        --cpn-h1-line-height : 45px;
        --cpn-h2-font-size : 22px;
        --cpn-h2-line-height : 35px;
        --cpn-h3-font-size : 18px;
        --cpn-h3-line-height : 30px;
        --cpn-h4-font-size : 16px;
        --cpn-h4-line-height : 25px;
        --cpn-h5-font-size : 16px;
        --cpn-h5-line-height : 25px;
        --cpn-h6-font-size : 16px;
        --cpn-h6-line-height : 25px;

    }
}

/* xl */
@media (min-width: 1200px) and (max-width: 1399.98px) {}

/* lg */
@media (min-width: 992px) and (max-width: 1199.98px) {}

/* xl - lg */
@media (min-width: 992px) and (max-width: 1399.98px) {

    :root {

        /* font size */    
        --cpn-default-font-size : 14px;
        --cpn-default-line-height : 25px;
        --cpn-small-font-size : 10px;
        --cpn-small-line-height : 15px;
        --cpn-smallest-font-size : 10px;
        --cpn-smallest-line-height : 15px;
        --cpn-h1-font-size : 28px;
        --cpn-h1-line-height : 45px;
        --cpn-h2-font-size : 20px;
        --cpn-h2-line-height : 35px;
        --cpn-h3-font-size : 18px;
        --cpn-h3-line-height : 30px;
        --cpn-h4-font-size : 16px;
        --cpn-h4-line-height : 25px;
        --cpn-h5-font-size : 16px;
        --cpn-h5-line-height : 25px;
        --cpn-h6-font-size : 16px;
        --cpn-h6-line-height : 25px;

    }

}

/* md */
@media (min-width: 768px) and (max-width: 991.98px) {

    :root {

        /* font size */    
        --cpn-default-font-size : 14px;
        --cpn-default-line-height : 25px;
        --cpn-small-font-size : 11px;
        --cpn-small-line-height : 18px;
        --cpn-smallest-font-size : 11px;
        --cpn-smallest-line-height : 18px;
        --cpn-h1-font-size : 30px;
        --cpn-h1-line-height : 45px;
        --cpn-h2-font-size : 22px;
        --cpn-h2-line-height : 35px;
        --cpn-h3-font-size : 18px;
        --cpn-h3-line-height : 30px;
        --cpn-h4-font-size : 16px;
        --cpn-h4-line-height : 25px;
        --cpn-h5-font-size : 16px;
        --cpn-h5-line-height : 25px;
        --cpn-h6-font-size : 16px;
        --cpn-h6-line-height : 25px;

    }

}

/* sm - xs */
@media (max-width: 767.98px) {
    :root {

        /* card */
        --cpn-card-border-radius : 15px;
        --cpn-card-project-corner : 15px;

    }  
}

/* sm */
@media (min-width: 576px) and (max-width: 767.98px) {

    :root {

        /* font size */    
        --cpn-default-font-size : 14px;
        --cpn-default-line-height : 25px;
        --cpn-small-font-size : 11px;
        --cpn-small-line-height : 18px;
        --cpn-smallest-font-size : 11px;
        --cpn-smallest-line-height : 18px;
        --cpn-h1-font-size : 28px;
        --cpn-h1-line-height : 45px;
        --cpn-h2-font-size : 22px;
        --cpn-h2-line-height : 35px;
        --cpn-h3-font-size : 18px;
        --cpn-h3-line-height : 30px;
        --cpn-h4-font-size : 16px;
        --cpn-h4-line-height : 25px;
        --cpn-h5-font-size : 16px;
        --cpn-h5-line-height : 25px;
        --cpn-h6-font-size : 16px;
        --cpn-h6-line-height : 25px;

    }

}

/* xs */
@media (max-width: 575.98px) {

    :root {

        /* font size */    
        --cpn-default-font-size : 14px;
        --cpn-default-line-height : 25px;
        --cpn-small-font-size : 10px;
        --cpn-small-line-height : 15px;
        --cpn-smallest-font-size : 10px;
        --cpn-smallest-line-height : 15px;
        --cpn-h1-font-size : 25px;
        --cpn-h1-line-height : 40px;
        --cpn-h2-font-size : 18px;
        --cpn-h2-line-height : 30px;
        --cpn-h3-font-size : 18px;
        --cpn-h3-line-height : 30px;
        --cpn-h4-font-size : 16px;
        --cpn-h4-line-height : 25px;
        --cpn-h5-font-size : 16px;
        --cpn-h5-line-height : 25px;
        --cpn-h6-font-size : 16px;
        --cpn-h6-line-height : 25px;

    }

}

/* xs custom */
@media (max-width: 399.98px) {}