:root[data-theme="theme-black-white"] {
    --img-gray: grayscale(100%);
    --color-bg-nav: white;
    --btn-switch: #000000;
    --lang-btn: #000000;
    --btn-switch-label: #000000;
    --social-btn: #000000;
    --btn-switch-border: #000000;
    --btn-theme-active: #ffffff;
    --btn-color-active: #000000;
    --custum-bg-header: #000000;
    --mainmenu-font-color: white;
    --menu-hover: white;
    --menu-hover-font: black;
    --menu-hover-dropdown: #000000;
    --menu-hover-dropdown-font: #ffffff;
    --menu-hover-dropdown-hover: #ffffff;
    --menu-hover-dropdown-hover-font: #000000;
    --gradient-color1: rgb(128 128 128);
    --gradient-color2: rgb(128 128 128);
    --box-general-box-color: #ffffff;
    --section-header-color: white;
    --section-bg: rgb(0 0 0);
    --section-bg-tran: #0000004a;
    --header-news-color: #ffffff;
    --header-news-detail-color: #ffffff;
    --read-more-bg: #000000;
    --about-gradient1: rgb(0 0 0);
    --about-gradient2: rgb(128 128 128);
    --know-aboutus-font-color: white;
    --know-aboutus-item-head: white;
    --know-aboutus-item-detail: #939393;
    --box-slide-content-font-color: black;
    --box-slide-bg: white;
    --trips-button-slide-bg: black;
    --trips-button-slide-font: white;
    --trip-detail-text-font: black;
    --trip-detail-bg: white;
    --news-detail-text-font: #3e4855;
    --news-detail-bg: white;
    --multimedia-detail-font: white;
    --custum-tab-font: white;
    --news-see-all-bg: white;
    --news-see-all-font: black;
    --text-select-font-mobile: #ffffff;
    --train-schedule-table: black;
    --ready-service-font: #ffffff;
    --bg-footer: black;
    --tb-color: #8f8484;
    --media-color: #ffffff;
    --train-schedule-table-bg-odd: #000000;
    --train-schedule-table-bg-even: #000000;
    --train-schedule-table-font-odd: #FFFFFF;
    --train-schedule-table-font-even: #FFFFFF;
    --train-schedule-btn-bg: #FFFFFF;
    --train-schedule-btn-font: #000000;
    --train-schedule-nav-btn-bg: #FFFFFF;
    --train-schedule-nav-btn-font: #000000;
    --multimedia-bg: #242925;
    --menu-bg: #ffffff;
    --menu-font-color: #000000;
    --t-first-color: white;
    --t-first-media-color: white;
    --t-second-color: white;
    /*-----------------------------------------------------------------------*/


    --color-bg-facebook: #000000;
    --color-bg-google: #000000;
    --color-bg-twitter: #000000;
    --color-bg-pinterest: #000000;
    --color-bg: #000000;
    --color-bg-gray: #333;
    --color-blood: #000000;
    --color-blood-switch: #ffffff;
    --color-blood-gray-switch: #ffffff;
    --color-blood-dark: #000000;
    --color-white: #FFFFFF;
    --color-white-switch: #000000;
    --color-black-switch: #FFFFFF;
    --color-white-black-switch: #000000;
    --color-white-rgb-a10: rgb(255 255 255, 0.1);
    --color-white-rgb-a50: rgb(255 255 255, 0.5);
    --color-white-gray: #333;
    --color-white-yellow-switch: #FFFFFF;
    --color-black: #FFFFFF;
    --color-black-rgb-a10: rgb(0, 0, 0, 0.1);
    --color-black-rgb-a20: rgb(0, 0, 0, 0.2);
    --color-black-rgb-a30: rgb(0, 0, 0, 0.3);
    --color-black-rgb-a40: rgb(0, 0, 0, 0.4);
    --color-black-rgb-a50: rgb(0, 0, 0, 0.5);
    --color-black-rgb-a60: rgb(0, 0, 0, 0.6);
    --color-black-rgb-a70: rgb(0, 0, 0, 0.7);
    --color-black-rgb-a80: rgb(0, 0, 0, 0.8);
    --color-black-rgb-a90: rgb(0, 0, 0, 0.9);
    --color-black-rgb-a100: rgb(0, 0, 0, 1);
    --color-black-gray: #333;
    --color-black-gray: #FFFFFF;
    --color-gray: #FFFFFF;
    --color-gray-a70: rgb(255, 255, 255, 0.7);
    --color-gray-light: #FFFFFF;
    --color-black-yellow-switch: #000000;
    --color-orange: #000000;
    --color-orange-black-switch: #000000;
    --color-img-grayscale: grayscale(100%)
}

:root[data-theme="theme-normal"] {
    --img-gray: none;
    --color-bg-nav: #4a515b;
    --btn-switch: #4a515b;
    --lang-btn: transparent;
    --btn-switch-label: white;
    --social-btn: #bcbdbf;
    --btn-switch-border: #4a515b;
    --btn-theme-active: #ffffff;
    --btn-color-active: none;
    --custum-bg-header: #9d0b0e;
    /*--mainmenu-font-color: #8da0aa;*/
    --mainmenu-font-color: #ffffff;
    --menu-hover: #810811;
    --menu-hover-font: white;
    --menu-hover-dropdown: #240205;
    --menu-hover-dropdown-font: #ffffff;
    --menu-hover-dropdown-hover: #810811;
    --menu-hover-dropdown-hover-font: #ffffff;
	
    --gradient-color1: #b69853;						/*rgba(43,134,139,1);*/
    --gradient-color2: #e8bd4b;						/*rgba(65,193,199,1);*/
    --box-general-box-color: #40240f;				/*#ffffff*/
	
    --section-header-color: #999998;
    --section-bg: none;
    --section-bg-tran: none;
    --header-news-color: #810811;
    --header-news-detail-color: #3C4653;
    --read-more-bg: #dddddd;
    /*    --about-gradient1: rgba(32,110,88,1);
    --about-gradient2: rgba(4,172,94,1);*/

    --about-gradient1: #9d0b0e;
    --about-gradient2: #894147;
    --know-aboutus-font-color: white;
    --know-aboutus-item-head: white;
    --know-aboutus-item-detail: #939393;
    --box-slide-content-font-color: black;
    --box-slide-bg: white;
    --trips-button-slide-bg: #810811;
    --trips-button-slide-font: white;
    --trip-detail-text-font: black;
    --trip-detail-bg: white;
    --news-detail-text-font: #3e4855;
    --news-detail-bg: white;
    --multimedia-detail-font: white;
    --custum-tab-font: #4a515b;
    --news-see-all-bg: #810811;
    --news-see-all-font: white;
    --text-select-font-mobile: #59090f;
    --train-schedule-table: none;
    --ready-service-font: #FFDB00;
    --bg-footer: #242c32;
    --tb-color: none;
    --media-color: #ffffff;
    --train-schedule-table-bg-odd: #F3F3F3;
    --train-schedule-table-bg-even: none;
    --train-schedule-table-font-odd: #000000;
    --train-schedule-table-font-even: #000000;
    --train-schedule-btn-bg: #9D8B62;
    --train-schedule-btn-font: #ffffff;
    --train-schedule-nav-btn-bg: #990000;
    --train-schedule-nav-btn-font: #FFFFFF;
    --train-schedule-nav-btn-toggle-bg: #FFFFFF;
    --train-schedule-nav-btn-toggle-font: #000;
    --multimedia-bg: #183e62;
    --menu-bg: #000000;
    --menu-font-color: #FFD700;
    --t-first-color: #FFFFFF;
    --t-first-media-color: #FFFFFF;
    --t-second-color: #9d8b62;
    /*-----------------------------------------------------------------------*/
    --color-bg-facebook: #3b5998;
    --color-bg-google: #dd4b39;
    --color-bg-twitter: #3a92c8;
    --color-bg-pinterest: #C8232C;
    --color-bg-tiktok: #1e3050;
    --color-bg: #FFFFFF;
    --color-bg-gray: #BBB;
    --color-blood: #952124;
    --color-blood-switch: #000000;
    --color-blood-gray-switch: #952124;
    --color-blood-rgb-a50: rgb(149, 33, 36, 0.5);
    --color-blood-rgb-a30: rgb(149, 33, 36, 0.3);
    --color-blood-dark: #540906;
    --color-white: #ffffff;
    --color-white-switch: #ffffff;
    --color-white-black-switch: #ffffff;
    --color-gray-a70: rgb(255, 255, 255, 0.7);
    --color-white-rgb: 255, 255, 255;
    --color-white-gray: #F9F9F9;
    --color-white-yellow-switch: #FFFFFF;
    --color-black: #000000;
    --color-black-switch: #000000;
    --color-black-rgb-a10: rgb(0, 0, 0, 0.1);
    --color-black-rgb-a20: rgb(0, 0, 0, 0.2);
    --color-black-rgb-a30: rgb(0, 0, 0, 0.3);
    --color-black-rgb-a40: rgb(0, 0, 0, 0.4);
    --color-black-rgb-a50: rgb(0, 0, 0, 0.5);
    --color-black-rgb-a60: rgb(0, 0, 0, 0.6);
    --color-black-rgb-a70: rgb(0, 0, 0, 0.7);
    --color-black-rgb-a80: rgb(0, 0, 0, 0.8);
    --color-black-rgb-a90: rgb(0, 0, 0, 0.9);
    --color-black-rgb-a100: rgb(0, 0, 0, 1);
    --color-black-gray: #333;
    --color-gray: #625e5b;
    --color-gray-light: #dfe8f1;
    --color-black-yellow-switch: #ffc451;
    --color-orange: #E6AA26;
    --color-orange-black-switch: #E6AA26;
    --color-img-grayscale: grayscale(0%)
}

:root[data-theme="theme-black-yellow"] {
    --img-gray: grayscale(100%);
    --color-bg-nav: #ffff00;
    --btn-switch: #000000;
    --lang-btn: #000000;
    --btn-switch-label: #000000;
    --social-btn: #000000;
    --btn-switch-border: #000000;
    --btn-theme-active: #ffff00;
    --btn-color-active: #000000;
    --custum-bg-header: #000000;
    --mainmenu-font-color: #ffff00;
    --menu-hover: #ffff00;
    --menu-hover-font: black;
    --menu-hover-dropdown: #000000;
    --menu-hover-dropdown-font: #ffff00;
    --menu-hover-dropdown-hover: #ffff00;
    --menu-hover-dropdown-hover-font: #ffffff;
    --gradient-color1: rgb(128 128 128);
    --gradient-color2: rgb(128 128 128);
    --box-general-box-color: #ffff00;
    --section-header-color: #ffff00;
    --section-bg: rgb(0 0 0);
    --section-bg-tran: #0000004a;
    --header-news-color: #ffff00;
    --header-news-detail-color: #ffff00;
    --read-more-bg: #000000;
    --about-gradient1: rgb(0 0 0);
    --about-gradient2: rgb(128 128 128);
    --know-aboutus-font-color: #ffff00;
    --know-aboutus-item-head: #ffff00;
    --know-aboutus-item-detail: #ffff00;
    --box-slide-content-font-color: #ffff00;
    --box-slide-bg: black;
    --trips-button-slide-bg: black;
    --trips-button-slide-font: #ffff00;
    --trip-detail-text-font: #ffff00;
    --trip-detail-bg: black;
    --news-detail-text-font: #ffff00;
    --news-detail-bg: black;
    --multimedia-detail-font: #ffff00;
    --custum-tab-font: #ffff00;
    --news-see-all-bg: black;
    --news-see-all-font: #ffff00;
    --text-select-font-mobile: black;
    --train-schedule-table: black;
    --ready-service-font: #ffff00;
    --bg-footer: black;
    --tb-color: #8f8484;
    --media-color: #ffff00;
    --train-schedule-table-bg-odd: #000000;
    --train-schedule-table-bg-even: #000000;
    --train-schedule-table-font-odd: #ffff00;
    --train-schedule-table-font-even: #ffff00;
    --train-schedule-btn-bg: #ffff00;
    --train-schedule-btn-font: #000000;
    --train-schedule-nav-btn-bg: #ffff00;
    --train-schedule-nav-btn-font: #000000;
    --multimedia-bg: #242925;
    --menu-bg: #ffff00;
    --menu-font-color: #000000;
    --t-first-color: #ffff00;
    --t-first-media-color: #ffff00;
    --t-second-color: #ffff00;
    /*-----------------------------------------------------------------------*/
    --color-bg-facebook: #000000;
    --color-bg-google: #000000;
    --color-bg-twitter: #000000;
    --color-bg-pinterest: #000000;
    --color-bg-tiktok: #000000;
    --color-bg: #000000;
    --color-bg-gray: #333;
    --color-blood: #000000;
    --color-blood-switch: #ffff00;
    --color-blood-gray-switch: #ffff00;
    --color-blood-dark: #000000;
    --color-white: #ffff00;
    --color-white-switch: #ffff00;
    --color-white-black-switch: #000000;
    --color-white-gray: #000000;
    --color-white-yellow-switch: #ffff00;
    --color-black: #ffff00;
    --color-black-switch: #ffff00;
    --color-black-gray: #ffff00;
    --color-gray: #ffff00;
    --color-gray-a70: rgb(255, 255, 255, 0.7);
    --color-gray-light: #ffff00;
    --color-black-yellow-switch: #000000;
    --color-orange: #ffff00;
    --color-orange-black-switch: #000000;
    --color-img-grayscale: grayscale(100%)
}

:root[data-font="font-75"] {
    --font-default: 1rem;
    --font-default-header: 1.2rem;
    --box-general-box: 90px;
    --box-general-img: 35px;
    --box-general-img1: 35px;
    --box-general-img2: 45px;
    --custum-tab: 1rem;
    --custum-tab-label: 1.5rem;
    --header-news: 1.5rem;
    --header-news-detail: 1rem;
    --header-news-detail-text: 1rem;
    --header-news-detail-line: 3;
    --trip-header: 1.5rem;
    --trip-detail: 1rem;
    --trip-detail-line: 4;
    /*-----------------------------------------------------------------------*/


    --font-body-normal: 1rem;
    --font-body-tablet-sm-max: 0.7rem;
    --font-body-tablet-lg-min: 0.8rem;
    --font-body-leptop: 1rem;
    --font-body-desktop-sm: 1.1rem;
    --font-body-desktop-lg: 1.2rem;
    --font-small-normal: 0.3rem;
    --font-small-tablet-sm-max: 0.3rem;
    --font-small-tablet-lg-min: 0.4rem;
    --font-small-leptop: 0.4rem;
    --font-small-desktop-sm: 0.5rem;
    --font-small-desktop-lg: 0.7rem;
    --font-title-normal: 1.5rem;
    --font-title-tablet-sm-max: 1.6rem;
    --font-title-tablet-lg-min: 1.7rem;
    --font-title-leptop: 1.7rem;
    --font-title-desktop-sm: 1.7rem;
    --font-title-desktop-lg: 1.7rem;
    --font-head-normal: 2.2rem;
    --font-head-tablet-sm-max: 1.9rem;
    --font-head-tablet-lg-min: 2.2rem;
    --font-head-leptop: 2.2rem;
    --font-head-desktop-sm: 2.4rem;
    --font-head-desktop-lg: 2.7rem;
    --font-head-sub-normal: 1.5rem;
    --font-head-sub-tablet-sm-max: 1.5rem;
    --font-head-sub-tablet-lg-min: 1.5rem;
    --font-head-sub-leptop: 1.5rem;
    --font-head-sub-desktop-sm: 1.7rem;
    --font-head-sub-desktop-lg: 2rem;
    --font-head-large-normal: 3.2rem;
    --font-head-large-tablet-sm-max: 3.2rem;
    --font-head-large-tablet-lg-min: 5.1rem;
    --font-head-large-leptop: 6rem;
    --font-head-large-desktop-sm: 7rem;
    --font-head-large-desktop-lg: 7.5rem
}

:root[data-font="font-100"] {
    --font-default: 1.6rem;
    --font-default-header: 1.8rem;
    --box-general-box: 110px;
    --box-general-img: 45px;
    --box-general-img1: 35px;
    --box-general-img2: 45px;
    --custum-tab: 1.6rem;
    --custum-tab-label: 2rem;
    --header-news: 2rem;
    --header-news-detail: 1.7rem;
    --header-news-detail-text: 1.5rem;
    --header-news-detail-line: 3;
    --trip-header: 2rem;
    --trip-detail: 1.5rem;
    --trip-detail-line: 3;
    /*-----------------------------------------------------------------------*/
    --font-body-normal: 1.8rem;
    --font-body-leptop: 1.8rem;
    --font-body-tablet-sm-max: 1.8rem;
    --font-body-tablet-lg-min: 1.8rem;
    --font-body-desktop-sm: 1.8rem;
    --font-body-desktop-lg: 1.8rem;
    --font-small-normal: 1rem;
    --font-small-tablet-sm-max: 1rem;
    --font-small-tablet-lg-min: 1rem;
    --font-small-leptop: 1rem;
    --font-small-desktop-sm: 1.5rem;
    --font-small-desktop-lg: 1.5rem;
    --font-title-normal: 2rem;
    --font-title-tablet-sm-max: 1.6rem;
    --font-title-tablet-lg-min: 2.2rem;
    --font-title-leptop: 2.2rem;
    --font-title-desktop-sm: 2.2rem;
    --font-title-desktop-lg: 2.2rem;
    --font-head-normal: 2.7rem;
    --font-head-tablet-sm-max: 2rem;
    --font-head-tablet-lg-min: 2.7rem;
    --font-head-leptop: 2.7rem;
    --font-head-desktop-sm: 2.9rem;
    --font-head-desktop-lg: 3.1rem;
    --font-head-sub-normal: 2rem;
    --font-head-sub-tablet-sm-max: 2rem;
    --font-head-sub-tablet-lg-min: 2rem;
    --font-head-sub-leptop: 2rem;
    --font-head-sub-desktop-sm: 2.2rem;
    --font-head-sub-desktop-lg: 2.5rem;
    --font-head-large-normal: 3.7rem;
    --font-head-large-tablet-sm-max: 3.7rem;
    --font-head-large-tablet-lg-min: 5.6rem;
    --font-head-large-leptop: 6.5rem;
    --font-head-large-desktop-sm: 7.5rem;
    --font-head-large-desktop-lg: 8rem
}

:root[data-font="font-125"] {
    --font-default: 2rem;
    --font-default-header: 2rem;
    --box-general-box: 145px;
    --box-general-img: 50px;
    --box-general-img1: 50px;
    --box-general-img2: 60px;
    --custum-tab: 2rem;
    --custum-tab-label: 2.5rem;
    --header-news: 2.5rem;
    --header-news-detail: 2rem;
    --header-news-detail-text: 1.8rem;
    --header-news-detail-line: 2;
    --trip-header: 2.5rem;
    --trip-detail: 2rem;
    --trip-detail-line: 2;
    /*-----------------------------------------------------------------------*/
    --font-body-normal: 2rem;
    --font-body-leptop: 2rem;
    --font-body-tablet-sm-max: 1.7rem;
    --font-body-tablet-lg-min: 1.8rem;
    --font-body-desktop-sm: 2.1rem;
    --font-body-desktop-lg: 2.2rem;
    --font-small-normal: 1.3rem;
    --font-small-tablet-sm-max: 1.3rem;
    --font-small-tablet-lg-min: 1.4rem;
    --font-small-leptop: 1.4rem;
    --font-small-desktop-sm: 1.5rem;
    --font-small-desktop-lg: 1.7rem;
    --font-title-normal: 2.5rem;
    --font-title-tablet-sm-max: 2.2rem;
    --font-title-tablet-lg-min: 2.7rem;
    --font-title-leptop: 2.7rem;
    --font-title-desktop-sm: 2.7rem;
    --font-title-desktop-lg: 2.7rem;
    --font-head-normal: 3.2rem;
    --font-head-tablet-sm-max: 2.2rem;
    --font-head-tablet-lg-min: 3.2rem;
    --font-head-leptop: 3.2rem;
    --font-head-desktop-sm: 3.4rem;
    --font-head-desktop-lg: 3.6rem;
    --font-head-sub-normal: 2.5rem;
    --font-head-sub-tablet-sm-max: 2.5rem;
    --font-head-sub-tablet-lg-min: 2.5rem;
    --font-head-sub-leptop: 2.5rem;
    --font-head-sub-desktop-sm: 2.7rem;
    --font-head-sub-desktop-lg: 3.5rem;
    --font-head-large-normal: 4.2rem;
    --font-head-large-tablet-sm-max: 4.2rem;
    --font-head-large-tablet-lg-min: 6.1rem;
    --font-head-large-leptop: 6.5rem;
    --font-head-large-desktop-sm: 8rem;
    --font-head-large-desktop-lg: 8.5rem
}