/* ================= Fixed ================= */
*,
*::before,
*::after {
    padding: 0;
    margin: 0;
    text-decoration: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: none;
    border: none;
    list-style: none;
}


/* ================= Color ================= */
:root {
    /* https://www.w3schools.com/colors/colors_picker.asp */
    /* === Change Color Here === */
    --color-first: #c6812a;
    --color-first-rgb: 198, 129, 42;
    --color-second: #f2dbc0;
    --color-second-rgb: 242, 219, 192;
    --color-third: #0099ff;
    --color-third-rgb: 0, 153, 255;
    --color-fourth: #ff914d;
    --color-fourth-rgb: 255, 145, 77;
    --color-fifth: #ffffff;
    --color-fifth-rgb: 255, 255, 255;

    /* === Change Color image footer === */
    /* นำสีที่ต้องการไปวางที่ลิงค์ด้านล่าง เช่น #000000 แล้วกดปุ่ม Get Filter  */
    /* ให้ดูค่าที่ Loss: จะต้องมีค่าน้อยกว่า 0.5 ถ้าค่าที่ได้ยังไม่น้อยกว่าให้กดปุ่ม Get Filter ใหม่จนกว่าจะได้ค่าที่ต้องการ */
    /* https://angel-rs.github.io/css-color-filter-generator/ */
    --color-img-footer: brightness(0) saturate(100%) invert(45%) sepia(22%) saturate(5546%) hue-rotate(359deg) brightness(99%) contrast(109%);

    /* === Fixed Color === */
    --color-light: #ffffff;
    --color-light-rgb: 255, 255, 255;
    --color-dark: #000000;
    --color-dark-rgb: 0, 0, 0;

    --color-txtg: #4d4c4c;
    --color-txtg-rgb: 77, 76, 76;
    --color-txtg1: #cdcbcb;
    --color-txtg1-rgb: 205, 203, 203;
    --color-txtg2: #b3b2b2;
    --color-txtg2-rgb: 179, 178, 178;
    --color-txtg3: #9a9898;
    --color-txtg3-rgb: 154, 152, 152;
    --color-txtg4: #817e7e;
    --color-txtg4-rgb: 129, 126, 126;
    --color-txtg5: #676565;
    --color-txtg5-rgb: 103, 101, 101;
    --color-txtg6: #4d4c4c;
    --color-txtg6-rgb: 177, 76, 76;

    --color-grey: #f5f5f5;
    --color-grey-rgb: 245, 245, 245;
    --color-grey1: #f9f9f9;
    --color-grey1-rgb: 249, 249, 249;
    --color-grey2: #f2f2f2;
    --color-grey2-rgb: 242, 242, 242;
    --color-grey3: #e6e6e6;
    --color-grey3-rgb: 230, 230, 230;
    --color-grey4: #d9d9d9;
    --color-grey4-rgb: 217, 217, 217;
    --color-grey5: #cccccc;
    --color-grey5-rgb: 204, 204, 204;
    --color-grey6: #b3b3b3;
    --color-grey6-rgb: 204, 204, 204;

    --color-green: #259b24;
    --color-green-rgb: 37, 155, 36;
    --color-green1: #adecac;
    --color-green1-rgb: 173, 236, 172;
    --color-green2: #85e283;
    --color-green2-rgb: 133, 226, 131;
    --color-green3: #5cd85a;
    --color-green3-rgb: 92, 216, 90;
    --color-green4: #33cf30;
    --color-green4-rgb: 51, 207, 48;
    --color-green5: #2eba2c;
    --color-green5-rgb: 46, 186, 44;
    --color-green6: #1f7c1d;
    --color-green6-rgb: 431, 124, 29;

    --color-red: #ff0000;
    --color-red-rgb: 255, 0, 0;
    --color-red1: #ffcccc;
    --color-red1-rgb: 255, 204, 204;
    --color-red2: #ff8080;
    --color-red2-rgb: 255, 128, 128;
    --color-red3: #ff4d4d;
    --color-red3-rgb: 255, 77, 77;
    --color-red4: #f20d0d;
    --color-red4-rgb: 242, 13, 13;
    --color-red5: #e51c23;
    --color-red5-rgb: 229, 28, 35;
    --color-red6: #cc0000;
    --color-red6-rgb: 204, 0, 0;

    --color-orange: #ff5722;
    --color-orange-rgb: 255, 87, 34;
    --color-orange1: #ffc3b3;
    --color-orange1-rgb: 255, 195, 179;
    --color-orange2: #ffaf99;
    --color-orange2-rgb: 255, 175, 153;
    --color-orange3: #ff9d80;
    --color-orange3-rgb: 255, 157, 128;
    --color-orange4: #ff8a66;
    --color-orange4-rgb: 255, 138, 102;
    --color-orange5: #ff764d;
    --color-orange5-rgb: 255, 118, 77;
    --color-orange6: #ff3c00;
    --color-orange6-rgb: 255, 60, 0;

    --color-yellow: #ffc107;
    --color-yellow-rgb: 255, 193, 7;
    --color-yellow1: #fff2cc;
    --color-yellow1-rgb: 255, 242, 204;
    --color-yellow2: #ffe699;
    --color-yellow2-rgb: 255, 230, 153;
    --color-yellow3: #ffd966;
    --color-yellow3-rgb: 255, 217, 102;
    --color-yellow4: #ffd24d;
    --color-yellow4-rgb: 255, 210, 77;
    --color-yellow5: #ffcc33;
    --color-yellow5-rgb: 255, 204, 51;
    --color-yellow6: #e6ac00;
    --color-yellow6-rgb: 230, 172, 0;

    --color-blue: #0000e6;
    --color-blue-rgb: 0, 0, 230;
    --color-blue1: #8080ff;
    --color-blue1-rgb: 128, 128, 255;
    --color-blue2: #6666ff;
    --color-blue2-rgb: 102, 102, 255;
    --color-blue3: #4d4dff;
    --color-blue3-rgb: 77, 77, 255;
    --color-blue4: #3333ff;
    --color-blue4-rgb: 51, 51, 255;
    --color-blue5: #1a1aff;
    --color-blue5-rgb: 26, 26, 255;
    --color-blue6: #0000b3;
    --color-blue6-rgb: 0, 0, 179;

    --color-brown: #795548;
    --color-brown-rgb: 121, 85, 72;
    --color-brown1: #e2d4cf;
    --color-brown1-rgb: 226, 212, 207;
    --color-brown2: #cfb7af;
    --color-brown2-rgb: 207, 183, 175;
    --color-brown3: #bc9a8f;
    --color-brown3-rgb: 188, 154, 143;
    --color-brown4: #a97d70;
    --color-brown4-rgb: 169, 125, 112;
    --color-brown5: #8f6556;
    --color-brown5-rgb: 143, 101, 86;
    --color-brown6: #604439;
    --color-brown6-rgb: 96, 68, 57;

    --color-fb: #4267b2;
    --color-fb-rgb: 66, 103, 178;
    --color-msg: #0099ff;
    --color-msg-rgb: 0, 153, 255;
    --color-ig: #e4405f;
    --color-ig-rgb: 228, 64, 95;
    --color-line: #00c300;
    --color-line-rgb: 0, 195, 0;
    --color-twt: #1da1f2;
    --color-twt-rgb: 29, 161, 242;
    --color-wa: #25d366;
    --color-wa-rgb: 37, 211, 102;
    --color-yt: #cd201f;
    --color-yt-rgb: 205, 32, 31;
    --color-email: #c71610;
    --color-email-rgb: 199, 22, 16;
    --color-pdf: #f40f02;
    --color-pdf-rgb: 244, 15, 2;
    --color-word: #2b579a;
    --color-word-rgb: 43, 87, 154;

    --color-icon-yl: #ffb61a;
    --color-icon-yl-rgb: 255, 182, 26;

    --color-bg-yl: #e69d00;
    --color-bg-yl-rgb: 230, 157, 0;

    --color-bg-ft: #292929;
    --color-bg-ft-rgb: 41, 41, 41;
}


/* ================= Size Width ================= */
.container {
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .container {
        width: 970px;
    }
}

@media (min-width: 791px) and (max-width: 991px) {
    .container {
        width: 100%;
        padding: 0 16px;
    }
}

@media (min-width: 501px) and (max-width: 790px) {
    .container {
        width: 100%;
        padding: 0 16px;
    }
}

@media (min-width: 0px) and (max-width: 500px) {
    .container {
        width: 100%;
        padding: 0 16px;
    }
}

/* ================= Font ================= */
* {
    font-family: 'Noto Sans Thai', sans-serif;
    color: var(--color-txtg);
}

:root {
    --font-bai-jamjuree: 'Bai Jamjuree', sans-serif;
    --font-barlow-semi: 'Barlow Semi Condensed', sans-serif;
    --font-noto-sans: 'Noto Sans Thai', sans-serif;
}

/* ================= Tag All ================= */
body {
    background-color: rgba(var(--color-grey1-rgb), 1);
}

figure {
    font-size: 0;
}

/* ================= main ================= */
.box--main {
    position: relative;
    width: 100%;
    height: auto;
}

/* ============================================================================================================================================= */
/* ================================================================== details ================================================================== */
/* ============================================================================================================================================= */

/* ================= tabs menu ================= */
.sc--tabs-menu-view {
    position: relative;
    width: 100%;
    height: auto;
}

.bg-color-tabs {
    background-color: var(--color-bg-ft);
    border-bottom: 1px solid var(--color-txtg4);
}

.sc--tabs-menu-view .tabs-menu {
    position: relative;
    width: 100%;
    height: auto;
    padding: 10px 0;
    display: flex;
    justify-content: end;
}

.sc--tabs-menu-view .tabs-menu p {
    font-size: 0.88rem;
    color: var(--color-light);
    padding: 0 2px;
}

.sc--tabs-menu-view .tabs-menu p:last-child {
    padding-right: 0;
}

.sc--tabs-menu-view .tabs-menu p a {
    color: var(--color-txtg3);
    cursor: pointer;
}

.sc--tabs-menu-view .tabs-menu p a:hover {
    color: var(--color-light);
    transition: all 0.3s ease;
}

.sc--tabs-menu-view .tabs-menu .cl-sp {
    color: var(--color-txtg3);
}

/* ============= */
@media (min-width: 1200px) {}

@media (min-width: 992px) and (max-width: 1199px) {}

@media (min-width: 791px) and (max-width: 991px) {
    .sc--tabs-menu-view {
        display: none;
    }
}

@media (min-width: 501px) and (max-width: 790px) {
    .sc--tabs-menu-view {
        display: none;
    }
}

@media (min-width: 0px) and (max-width: 500px) {
    .sc--tabs-menu-view {
        display: none;
    }
}

/* ================= details ================= */
.sc--details-pg {
    position: relative;
    width: 100%;
    height: auto;
}

.sc--details-pg .box-pg-dt {
    position: relative;
    width: 100%;
    height: auto;
    padding: 30px 20px 50px 20px;
    overflow: hidden;
    background-color: var(--color-light);
    box-shadow: 0px 0px 5px 2px rgba(var(--color-dark-rgb), 0.05);
    -webkit-box-shadow: 0px 0px 5px 2px rgba(var(--color-dark-rgb), 0.05);
    -moz-box-shadow: 0px 0px 5px 2px rgba(var(--color-dark-rgb), 0.05);
}

.sc--details-pg .box-pg-dt .b-name-pg {
    position: relative;
    width: 100%;
    height: auto;
    padding: 10px 0 8px 0;
}

.sc--details-pg .box-pg-dt .b-name-pg p {
    font-size: 1.38rem;
    font-weight: bold;
}

.sc--details-pg .box-pg-dt-atc {
    position: relative;
    width: 100%;
    height: auto;
    padding: 30px 20px 0 20px;
    border-radius: 5px;
    overflow: hidden;
    background-color: var(--color-light);
    box-shadow: 0px 0px 5px 2px rgba(var(--color-dark-rgb), 0.05);
    -webkit-box-shadow: 0px 0px 5px 2px rgba(var(--color-dark-rgb), 0.05);
    -moz-box-shadow: 0px 0px 5px 2px rgba(var(--color-dark-rgb), 0.05);
}

.sc--details-pg .box-pg-dt-atc .b-name-pg {
    position: relative;
    width: 100%;
    height: auto;
    padding: 10px 0 8px 0;
}

.sc--details-pg .box-pg-dt-atc .b-name-pg p {
    font-size: 1.38rem;
    font-weight: bold;
}

/* ============= */
@media (min-width: 1200px) {}

@media (min-width: 992px) and (max-width: 1199px) {}

@media (min-width: 791px) and (max-width: 991px) {}

@media (min-width: 501px) and (max-width: 790px) {}

@media (min-width: 0px) and (max-width: 500px) {
    .sc--details-pg .container {
        padding: 0;
    }

    .sc--details-pg .box-pg-dt {
        border-radius: 0;
        padding: 0;
    }

    .sc--details-pg .box-pg-dt-atc {
        width: 100%;
        padding: 0;
        border-radius: 0;
    }
}

/* ====== details program ====== */
.box-dt-program-img-txt {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: stretch;
    flex-wrap: wrap;
    flex-direction: row;
    padding: 0 0 16px 0;
    margin: 0 0 16px 0;
    border-bottom: 1px solid var(--color-grey3);
}

/* image program */
.box-dt-program-img-txt .b-img {
    position: relative;
    width: 35%;
    height: auto;
    overflow: hidden;
}

.box-dt-program-img-txt .b-img figure {
    position: relative;
    width: 100%;
    height: auto;
}

.box-dt-program-img-txt .b-img figure .size-img {
    position: relative;
    width: 100%;
    height: auto;
    border-radius: 5px;
}

/* text program */
.box-dt-program-img-txt .b-dt {
    position: relative;
    width: 65%;
    height: auto;
    padding: 0 0 0 20px;
}

.box-dt-program-img-txt .b-dt .bt-dt {
    position: relative;
    width: 100%;
    height: auto;
}

.box-dt-program-img-txt .b-dt .pd-bt {
    padding: 2px 0 5px 0;
}

.box-dt-program-img-txt .b-dt .bt-dt p {
    font-size: 0.94rem;
    color: var(--color-txtg4);
}

.box-dt-program-img-txt .b-dt .bt-dt .t-name2 {
    font-size: 1.32rem;
    font-weight: bold;
    color: var(--color-txtg);
}

.box-dt-program-img-txt .b-dt .bt-dt .t-shoetdt {
    font-size: 0.88rem;
    text-indent: 20px;
}

.box-dt-program-img-txt .b-dt .b-dt-price {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: stretch;
    flex-wrap: wrap;
    flex-direction: row;
    border-top: 1px dashed var(--color-grey4);
    margin-top: 10px;
    padding: 10px 0 0 20px;
}

.box-dt-program-img-txt .b-dt .b-dt-price .txt-dt-icon {
    position: relative;
    width: calc(100%/2);
    height: auto;
    padding: 5px 20px 5px 0;
}

.box-dt-program-img-txt .b-dt .b-dt-price .txt-dt-icon p {
    font-size: 0.88rem;
    color: var(--color-txtg4);
    padding-bottom: 1px;
    font-weight: bold;
}

.box-dt-program-img-txt .b-dt .b-dt-price .txt-dt-icon p span {
    color: var(--color-txtg4);
}

.box-dt-program-img-txt .b-dt .b-dt-price .txt-dt-icon p .icon-pd {
    padding-right: 5px;
}

.box-dt-program-img-txt .b-dt .b-dt-price .txt-dt-icon p i {
    color: var(--color-icon-yl);
}

.box-dt-program-img-txt .b-dt .b-dt-price .txt-dt-icon .txt-pd-l {
    padding-left: 1.4rem;
    font-weight: normal;
}

.box-dt-program-img-txt .b-dt .b-dt-price .txt-dt-icon .txt-pd-top {
    padding-top: 3px;
    font-size: 0.75rem;
}

.box-dt-program-img-txt .b-dt .b-dt-price .b-img-airline {
    position: relative;
    width: 100%;
    height: auto;
    padding: 0 0 0 1.4rem;
}

.box-dt-program-img-txt .b-dt .b-dt-price .b-img-airline figure {
    position: relative;
    width: auto;
    height: 2.5rem;
    overflow: hidden;
}

.box-dt-program-img-txt .b-dt .b-dt-price .b-img-airline figure .size-img {
    position: relative;
    width: auto;
    height: 100%;
}

.box-dt-program-img-txt .b-dt .b-dt-price .b-price {
    position: relative;
    width: 100%;
    height: auto;
    padding: 0 0 0 1.4rem;
}

.box-dt-program-img-txt .b-dt .b-dt-price .b-price p {
    font-size: 0.88rem;
    color: var(--color-txtg4);
    margin-bottom: -10px;
}

.box-dt-program-img-txt .b-dt .b-dt-price .b-price .t-decoration {
    text-decoration: line-through;
    font-weight: normal;
}

.box-dt-program-img-txt .b-dt .b-dt-price .b-price h1 {
    font-size: 1.75rem;
    font-weight: bold;
    color: var(--color-red);
}

.box-dt-program-img-txt .b-dt .b-dt-price .b-price h1 span {
    font-size: 0.88rem;
    font-weight: normal;
    padding-left: 2px;
    color: var(--color-txtg4);
}

.box-dt-program-img-txt .b-dt .b-dt-price .b-price h1 .txt-currency {
    color: var(--color-txtg4);
}

/* button contact */
.box-dt-program-img-txt .b-dt .b-btn-contact {
    position: relative;
    width: 100%;
    height: auto;
    border-top: 1px dashed var(--color-grey4);
    margin-top: 5px;
    padding: 16px 0 0 0;
}

.box-dt-program-img-txt .b-dt .b-btn-contact .b-btn {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: stretch;
    flex-wrap: wrap;
    flex-direction: row;
}

.box-dt-program-img-txt .b-dt .b-btn-contact .b-btn .btn-ct {
    position: relative;
    width: calc((100%/4) - 6.75px);
    padding: 5px 10px 4px 10px;
    margin: 0 9px 9px 0;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;
    background-color: var(--color-light);
}

.box-dt-program-img-txt .b-dt .b-btn-contact .b-btn .cl-tel {
    border: 1px solid var(--color-first);
}

.box-dt-program-img-txt .b-dt .b-btn-contact .b-btn .cl-line {
    border: 1px solid var(--color-line);
}

.box-dt-program-img-txt .b-dt .b-btn-contact .b-btn .cl-line2 {
    border: 1px solid var(--color-line);
}

.box-dt-program-img-txt .b-dt .b-btn-contact .b-btn .cl-pdf {
    border: 1px solid var(--color-pdf);
}

.box-dt-program-img-txt .b-dt .b-btn-contact .b-btn .btn-ct a {
    position: relative;
    width: 100%;
    height: auto;
}

.box-dt-program-img-txt .b-dt .b-btn-contact .b-btn .btn-ct p {
    font-size: 1rem;
    font-weight: normal;
    text-align: center;
}

.box-dt-program-img-txt .b-dt .b-btn-contact .b-btn .cl-tel p,
.box-dt-program-img-txt .b-dt .b-btn-contact .b-btn .cl-tel p i {
    color: var(--color-first);
}

.box-dt-program-img-txt .b-dt .b-btn-contact .b-btn .cl-line p,
.box-dt-program-img-txt .b-dt .b-btn-contact .b-btn .cl-line p i {
    color: var(--color-line);
}

.box-dt-program-img-txt .b-dt .b-btn-contact .b-btn .cl-line2 p,
.box-dt-program-img-txt .b-dt .b-btn-contact .b-btn .cl-line2 p i {
    color: var(--color-line);
}

.box-dt-program-img-txt .b-dt .b-btn-contact .b-btn .cl-pdf p,
.box-dt-program-img-txt .b-dt .b-btn-contact .b-btn .cl-pdf p i {
    color: var(--color-pdf);
}

.box-dt-program-img-txt .b-dt .b-btn-contact .b-btn .btn-ct p .icon-pd {
    padding-right: 1px;
}

.box-dt-program-img-txt .b-dt .b-btn-contact .b-btn .cl-tel p .txt-tel-web {
    color: var(--color-first);
}

.box-dt-program-img-txt .b-dt .b-btn-contact .b-btn .cl-line p .txt-line-web {
    color: var(--color-line);
}

.box-dt-program-img-txt .b-dt .b-btn-contact .b-btn .cl-line2 p .txt-line2-web {
    color: var(--color-line);
}

.box-dt-program-img-txt .b-dt .b-btn-contact .b-btn .cl-pdf p .txt-pdf-web {
    color: var(--color-pdf);
}

.box-dt-program-img-txt .b-dt .b-btn-contact .b-btn .cl-pdf p .txt-pdf-mbview {
    display: none;
}

/* ============= */
@media (min-width: 1200px) {
    .box-dt-program-img-txt .b-dt .bt-dt .t-shoetdt {
        overflow: hidden;
        display: -webkit-box;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    .box-dt-program-img-txt .b-dt .b-btn-contact .b-btn .btn-ct:nth-child(4n+0) {
        margin-right: 0;
    }

    .box-dt-program-img-txt .b-dt .b-btn-contact .b-btn .btn-ct.cl-tel:hover {
        background-color: var(--color-first);
        transition: all 0.3s ease;
    }

    .box-dt-program-img-txt .b-dt .b-btn-contact .b-btn .btn-ct.cl-line:hover {
        background-color: var(--color-line);
        transition: all 0.3s ease;
    }

    .box-dt-program-img-txt .b-dt .b-btn-contact .b-btn .btn-ct.cl-line2:hover {
        background-color: var(--color-line);
        transition: all 0.3s ease;
    }

    .box-dt-program-img-txt .b-dt .b-btn-contact .b-btn .btn-ct.cl-pdf:hover {
        background-color: var(--color-pdf);
        transition: all 0.3s ease;
    }

    .box-dt-program-img-txt .b-dt .b-btn-contact .b-btn .btn-ct:hover p span {
        color: var(--color-light);
        transition: all 0.3s ease;
    }

    .box-dt-program-img-txt .b-dt .b-btn-contact .b-btn .btn-ct:hover p i {
        color: var(--color-light);
        transition: all 0.3s ease;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .box-dt-program-img-txt .b-dt .bt-dt .t-shoetdt {
        overflow: hidden;
        display: -webkit-box;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    .box-dt-program-img-txt .b-dt .b-btn-contact .b-btn .btn-ct:nth-child(4n+0) {
        margin-right: 0;
    }
}

@media (min-width: 791px) and (max-width: 991px) {
    .box-dt-program-img-txt .b-img {
        width: 100%;
    }

    .box-dt-program-img-txt .b-img figure {
        width: 80%;
        margin: 0 auto;
    }

    .box-dt-program-img-txt .b-dt {
        width: 100%;
        padding: 20px 10px 0 10px;
    }

    .box-dt-program-img-txt .b-dt .bt-dt .t-shoetdt {
        overflow: hidden;
        display: -webkit-box;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    .box-dt-program-img-txt .b-dt .b-dt-price .txt-dt-icon {
        width: calc(100%/3);
    }

    .box-dt-program-img-txt .b-dt .b-dt-price .b-codepg {
        order: 1;
    }

    .box-dt-program-img-txt .b-dt .b-dt-price .b-countrypg {
        order: 2;
    }

    .box-dt-program-img-txt .b-dt .b-dt-price .b-datepg {
        order: 3;
    }

    .box-dt-program-img-txt .b-dt .b-dt-price .b-numberpg {
        order: 4;
    }

    .box-dt-program-img-txt .b-dt .b-dt-price .b-pricepg {
        order: 6;
    }

    .box-dt-program-img-txt .b-dt .b-dt-price .b-travelpg {
        order: 5;
    }

    .box-dt-program-img-txt .b-dt .b-btn-contact .b-btn {
        justify-content: center;
    }

    .box-dt-program-img-txt .b-dt .b-btn-contact .b-btn .btn-ct:nth-child(4n+0) {
        margin-right: 0;
    }
}

@media (min-width: 501px) and (max-width: 790px) {
    .sc--details-pg .container {
        padding: 0;
    }

    .box-dt-program-img-txt .b-img {
        width: 100%;
    }

    .box-dt-program-img-txt .b-img figure {
        width: 80%;
        margin: 0 auto;
    }

    .box-dt-program-img-txt .b-dt {
        width: 100%;
        padding: 20px 10px 0 10px;
    }

    .box-dt-program-img-txt .b-dt .bt-dt .t-shoetdt {
        overflow: hidden;
        display: -webkit-box;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    .box-dt-program-img-txt .b-dt .b-dt-price .txt-dt-icon {
        width: calc(100%/3);
    }

    .box-dt-program-img-txt .b-dt .b-dt-price .b-codepg {
        order: 1;
    }

    .box-dt-program-img-txt .b-dt .b-dt-price .b-countrypg {
        order: 2;
    }

    .box-dt-program-img-txt .b-dt .b-dt-price .b-datepg {
        order: 3;
    }

    .box-dt-program-img-txt .b-dt .b-dt-price .b-numberpg {
        order: 4;
    }

    .box-dt-program-img-txt .b-dt .b-dt-price .b-pricepg {
        order: 6;
    }

    .box-dt-program-img-txt .b-dt .b-dt-price .b-travelpg {
        order: 5;
    }

    .box-dt-program-img-txt .b-dt .b-btn-contact .b-btn {
        justify-content: center;
    }

    .box-dt-program-img-txt .b-dt .b-btn-contact .b-btn .btn-ct:nth-child(4n+0) {
        margin-right: 0;
    }
}

@media (min-width: 0px) and (max-width: 500px) {
    .box-dt-program-img-txt .b-img {
        width: 100%;
    }

    .box-dt-program-img-txt .b-img figure .size-img {
        border-radius: 0;
    }

    .box-dt-program-img-txt .b-dt {
        width: 100%;
        padding: 10px 16px 0 16px;
    }

    .box-dt-program-img-txt .b-dt .bt-dt .t-name2 {
        font-size: 1rem;
    }

    .box-dt-program-img-txt .b-dt .bt-dt .t-shoetdt {
        font-size: 0.82rem;
    }

    .box-dt-program-img-txt .b-dt .b-dt-price {
        padding: 0;
        padding: 10px 5px;
        background-color: var(--color-light);
        border: 1px solid var(--color-grey3);
        border-radius: 5px;
    }

    .box-dt-program-img-txt .b-dt .b-dt-price .txt-dt-icon {
        width: calc(100%/4);
        padding: 0 5px;
        overflow: hidden;
    }

    .box-dt-program-img-txt .b-dt .car-dtandprice .txt-dt-icon {
        width: calc(100%/3);
        padding: 0 5px;
        overflow: hidden;
    }

    .box-dt-program-img-txt .b-dt .b-dt-price .txt-dt-icon p {
        text-align: center;
        font-size: 0.75rem;
    }

    .box-dt-program-img-txt .b-dt .b-dt-price .txt-dt-icon p .icon-pd {
        display: none;
    }

    .box-dt-program-img-txt .b-dt .b-dt-price .txt-dt-icon .txt-pd-l {
        font-size: 0.69rem;
        padding: 0;
    }

    .box-dt-program-img-txt .b-dt .b-dt-price .b-price {
        padding: 0;
    }

    .box-dt-program-img-txt .b-dt .b-dt-price .b-price h1 {
        font-size: 1rem;
        display: grid;
        justify-content: center;
        flex-wrap: wrap;
        flex-direction: row;
    }

    .box-dt-program-img-txt .b-dt .b-dt-price .b-price h1 span {
        font-size: 0.69rem;
        margin-top: -5px;
    }

    .box-dt-program-img-txt .b-dt .b-dt-price .b-price h1 .txt-currency {
        text-align: center;
    }

    .box-dt-program-img-txt .b-dt .b-dt-price .b-img-airline {
        padding: 0;
    }

    .box-dt-program-img-txt .b-dt .b-dt-price .b-img-airline figure {
        height: 2rem;
        display: flex;
    }

    .box-dt-program-img-txt .b-dt .b-dt-price .b-img-airline figure .size-img {
        margin: 0 auto;
    }

    .box-dt-program-img-txt .b-dt .b-dt-price .b-codepg {
        order: 1;
        border-right: 1px dashed var(--color-grey4);
    }

    .box-dt-program-img-txt .b-dt .b-dt-price .b-codepg-car {
        order: 1;
        border-right: 1px dashed var(--color-grey4);
    }

    .box-dt-program-img-txt .b-dt .b-dt-price .b-countrypg {
        display: none;
    }

    .box-dt-program-img-txt .b-dt .b-dt-price .b-countrypg-package {
        order: 3;
        border-right: 1px dashed var(--color-grey4);
    }

    .box-dt-program-img-txt .b-dt .b-dt-price .b-countrypg-car {
        order: 2;
        border-right: 1px dashed var(--color-grey4);
    }

    .box-dt-program-img-txt .b-dt .b-dt-price .b-datepg {
        display: none;
    }

    .box-dt-program-img-txt .b-dt .b-dt-price .b-numberpg {
        order: 2;
        border-right: 1px dashed var(--color-grey4);
    }

    .box-dt-program-img-txt .b-dt .b-dt-price .b-pricepg {
        order: 4;
    }

    .box-dt-program-img-txt .b-dt .b-dt-price .b-pricepg-car {
        order: 2;
    }

    .box-dt-program-img-txt .b-dt .b-dt-price .b-travelpg {
        order: 3;
        border-right: 1px dashed var(--color-grey4);
    }

    .box-dt-program-img-txt .b-dt .b-btn-contact {
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 4;
        padding: 12px 10px 10px 10px;
        background-color: var(--color-light);
        border-top: 1px solid var(--color-grey2);
        box-shadow: 0px 0px 5px 2px rgba(var(--color-dark-rgb), 0.05);
        -webkit-box-shadow: 0px 0px 5px 2px rgba(var(--color-dark-rgb), 0.05);
        -moz-box-shadow: 0px 0px 5px 2px rgba(var(--color-dark-rgb), 0.05);
    }

    .box-dt-program-img-txt .b-dt .b-btn-contact .b-btn {
        justify-content: space-between;
        align-items: center;
    }

    .box-dt-program-img-txt .b-dt .b-btn-contact .b-btn .btn-ct {
        width: auto;
        padding: 0 10px 0 10px;
        margin: 0;
    }

    .box-dt-program-img-txt .b-dt .b-btn-contact .b-btn .cl-tel {
        order: 4;
        width: 49%;
        height: 3rem;
        padding: 5px 10px 3px 10px;
        background: linear-gradient(90deg, rgba(var(--color-fourth-rgb), 1) 0%, rgba(var(--color-first-rgb), 1) 50%, rgba(var(--color-first-rgb), 1) 100%);
    }

    .box-dt-program-img-txt .b-dt .b-btn-contact .b-btn .cl-tel a {
        align-items: center;
        display: flex;
        height: 100%;
    }

    .box-dt-program-img-txt .b-dt .b-btn-contact .b-btn .cl-line {
        order: 2;
        width: 17%;
        border: none;
    }

    .box-dt-program-img-txt .b-dt .b-btn-contact .b-btn .cl-line2 {
        order: 3;
        width: 17%;
        border: none;
    }

    .box-dt-program-img-txt .b-dt .b-btn-contact .b-btn .cl-pdf {
        order: 1;
        width: 17%;
        border: none;
    }

    .box-dt-program-img-txt .b-dt .b-btn-contact .b-btn .btn-ct p {
        font-size: 0.75rem;
    }

    .box-dt-program-img-txt .b-dt .b-btn-contact .b-btn .btn-ct p .icon-pd {
        font-size: 1.82rem;
    }

    .box-dt-program-img-txt .b-dt .b-btn-contact .b-btn .cl-tel p {
        width: 100%;
        display: flex;
        justify-content: stretch;
        align-items: center;
    }

    .box-dt-program-img-txt .b-dt .b-btn-contact .b-btn .cl-tel p .icon-pd {
        width: 30%;
        border-right: 1px solid var(--color-light);
        padding-right: 12px;
        color: var(--color-light);
        display: flex;
    }

    .box-dt-program-img-txt .b-dt .b-btn-contact .b-btn .cl-tel p .icon-pd i {
        color: var(--color-light);
        margin: 0 auto;
    }

    .box-dt-program-img-txt .b-dt .b-btn-contact .b-btn .cl-tel p .txt-tel-web {
        width: 70%;
        font-size: 1.13rem;
        display: block;
        color: var(--color-light);
        padding-left: 10px;
    }

    .box-dt-program-img-txt .b-dt .b-btn-contact .b-btn .cl-line p .txt-line-web {
        display: block;
        color: var(--color-txtg);
        margin-top: -4px;
    }

    .box-dt-program-img-txt .b-dt .b-btn-contact .b-btn .cl-line2 p .txt-line2-web {
        display: block;
        color: var(--color-txtg);
        margin-top: -4px;
    }

    .box-dt-program-img-txt .b-dt .b-btn-contact .b-btn .cl-pdf p .txt-pdf-web {
        display: none;
    }

    .box-dt-program-img-txt .b-dt .b-btn-contact .b-btn .cl-pdf p .txt-pdf-mbview {
        display: block;
        color: var(--color-txtg);
        margin-top: -4px;
    }
}

/* ====== period date price program ====== */
.box-period-dateprice-program {
    position: relative;
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}

.box-period-dateprice-program .box-title {
    position: relative;
    width: 100%;
    height: auto;
    padding: 0 0 5px 5px;
}

.box-period-dateprice-program .box-title p {
    font-size: 1.07rem;
    font-weight: bold;
}

.box-period-dateprice-program .table-dateprice {
    position: relative;
    width: 100%;
    height: auto;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid var(--color-grey3);
}

.box-period-dateprice-program .table-dateprice .tb-head {
    position: relative;
    width: 100%;
    height: auto;
    max-height: 2.125rem;
    display: flex;
    justify-content: stretch;
    flex-wrap: wrap;
    flex-direction: row;
    padding: 0 5px 0 20px;
    background-color: var(--color-first);
}

.box-period-dateprice-program .table-dateprice .tb-head .b-size-tb {
    position: relative;
    height: auto;
    border-right: 1px solid var(--color-grey2);
    margin: 5px 0;
}

.box-period-dateprice-program .table-dateprice .tb-head .b-size-tb:last-child {
    border-right: none;
}

.box-period-dateprice-program .table-dateprice .tb-head .b-size-tb p {
    font-size: 1rem;
    color: var(--color-light);
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.box-period-dateprice-program .table-dateprice .tb-head .b-size-tb .txt-left {
    text-align: left;
}

.box-period-dateprice-program .table-dateprice .tb-dt {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
}

.box-period-dateprice-program .table-dateprice .tb-dt .b-tb-dp {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: stretch;
    flex-wrap: wrap;
    flex-direction: row;
    padding: 0 5px 0 20px;
    align-items: center;
}

.box-period-dateprice-program .table-dateprice .tb-dt .b-tb-dp p {
    margin: auto 0;
}

.box-period-dateprice-program .table-dateprice .tb-dt .b-tb-dp .b-size-tb {
    position: relative;
    height: auto;
    border-right: 1px solid var(--color-grey2);
    margin: 5px 0;
    display: grid;
}

.box-period-dateprice-program .table-dateprice .tb-dt .b-tb-dp .b-size-tb:last-child {
    border-right: none;
}

.box-period-dateprice-program .table-dateprice .tb-dt .b-tb-dp .b-size-tb .btn-bk-contact {
    position: relative;
    width: fit-content;
    height: fit-content;
    border-radius: 5px;
    background-color: var(--color-green5);
    cursor: pointer;
    align-items: center;
    display: flex;
    margin: auto;
    padding: 5px 10px;
}

.box-period-dateprice-program .table-dateprice .tb-dt .b-tb-dp .b-size-tb .btn-bk-contact a {
    position: relative;
    width: 100%;
    height: auto;
}

.box-period-dateprice-program .table-dateprice .tb-dt .b-tb-dp .b-size-tb .btn-bk-contact p {
    font-size: 0.94rem;
    text-align: center;
    color: var(--color-light);
}

.box-period-dateprice-program .table-dateprice .tb-dt .b-tb-dp .b-size-tb .btn-bk-contact2 {
    position: relative;
    width: fit-content;
    height: fit-content;
    border-radius: 5px;
    cursor: pointer;
    align-items: center;
    display: flex;
    margin: auto;
    padding: 5px 10px;
}

.box-period-dateprice-program .table-dateprice .tb-dt .b-tb-dp .b-size-tb .btn-bk-contact2 a {
    position: relative;
    width: 100%;
    height: auto;
}

.box-period-dateprice-program .table-dateprice .tb-dt .b-tb-dp .b-size-tb .btn-bk-contact2 p {
    font-size: 0.94rem;
    text-align: center;
    color: var(--color-light);
}

.box-period-dateprice-program .table-dateprice .tb-dt .b-tb-dp .b-size-tb .bg-color-btn1 {
    background-color: var(--color-green5);
}

.box-period-dateprice-program .table-dateprice .tb-dt .b-tb-dp .b-size-tb .bg-color-btn2 {
    background-color: var(--color-first);
}

.box-period-dateprice-program .table-dateprice .tb-dt .b-tb-dp .b-size-tb .bg-color-btn3 {
    background-color: var(--color-line);
}

.box-period-dateprice-program .table-dateprice .tb-dt .b-tb-dp .b-size-tb p {
    font-size: 0.94rem;
    text-align: center;
}

.box-period-dateprice-program .table-dateprice .tb-dt .b-tb-dp .b-size-tb p .currency-size-ip {
    color: var(--color-txtg5);
    font-size: 0.75rem;
    padding: 0 0 0 2px;
}

.box-period-dateprice-program .table-dateprice .tb-dt .b-tb-dp .b-size-tb .txt-fullprice {
    font-size: 0.69rem;
    text-align: center;
    color: var(--color-txtg4);
    text-decoration: line-through;
    margin-bottom: -5px;
}

.box-period-dateprice-program .table-dateprice .tb-dt .b-tb-dp .b-size-tb .txt-left {
    text-align: left;
}


.s-tb-name-set {
    width: 27%;
}

.s-tb-number-set {
    width: 11%;
}

.s-tb-gsize-set {
    width: 7%;
}

/* ============= */
@media (min-width: 1200px) {}

@media (min-width: 992px) and (max-width: 1199px) {}

@media (min-width: 791px) and (max-width: 991px) {}

@media (min-width: 501px) and (max-width: 790px) {}

@media (min-width: 0px) and (max-width: 500px) {}

@media (min-width: 501px) and (max-width: 991px) {}





/* ====== period date price package ====== */
.box-period-dateprice-package {
    position: relative;
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}

.box-period-dateprice-package .box-title {
    position: relative;
    width: 100%;
    height: auto;
    padding: 0 0 5px 5px;
}

.box-period-dateprice-package .box-title p {
    font-size: 1.07rem;
    font-weight: bold;
}

.box-period-dateprice-package .table-dateprice {
    position: relative;
    width: 100%;
    height: auto;
    max-height: 23rem;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid var(--color-grey3);
}

.box-period-dateprice-package .table-dateprice .tb-head {
    position: relative;
    width: 100%;
    height: auto;
    max-height: 3.625rem;
    display: flex;
    justify-content: space-between;
    padding: 0 5px 0 20px;
    background-color: var(--color-first);
}

.box-period-dateprice-package .table-dateprice .tb-head .b-size-tb {
    position: relative;
    width: 100%;
    height: auto;
    border-right: 1px solid var(--color-grey2);
    margin: 5px 0;
    padding: 0 5px;
}

.box-period-dateprice-package .table-dateprice .tb-head .b-size-tb:last-child {
    border-right: none;
}

.box-period-dateprice-package .table-dateprice .tb-head .s-tb1 {
    width: 160%;
}

.box-period-dateprice-package .table-dateprice .tb-head .s-tb6 {
    width: 70%;
}

.box-period-dateprice-package .table-dateprice .tb-head .b-size-tb p {
    font-size: 0.94rem;
    color: var(--color-light);
    text-align: center;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.box-period-dateprice-package .table-dateprice .tb-head .b-size-tb .txt-left {
    text-align: left;
}

.box-period-dateprice-package .table-dateprice .tb-dt {
    position: relative;
    width: 100%;
    height: auto;
    max-height: 19.375rem;
    overflow: scroll;
    margin: 0 0 5px 0;
}

.box-period-dateprice-package .table-dateprice .tb-dt .b-tb-dp {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    padding: 0 5px 0 20px;
}

.box-period-dateprice-package .table-dateprice .tb-dt .b-tb-dp p {
    margin: auto 0;
}

.box-period-dateprice-package .table-dateprice .tb-dt .b-tb-dp .b-size-tb {
    position: relative;
    width: 100%;
    height: auto;
    border-right: 1px solid var(--color-grey2);
    margin: 5px 0;
    display: grid;
}

.box-period-dateprice-package .table-dateprice .tb-dt .b-tb-dp .b-size-tb:last-child {
    border-right: none;
}

.box-period-dateprice-package .table-dateprice .tb-dt .b-tb-dp .b-size-tb .txt-l-b {
    display: none;
}

.box-period-dateprice-package .table-dateprice .tb-dt .b-tb-dp .b-size-tb .price-r-b {
    display: grid;
}

.box-period-dateprice-package .table-dateprice .tb-dt .b-tb-dp .b-size-tb .btn-bk-contact {
    position: relative;
    width: fit-content;
    height: fit-content;
    border-radius: 5px;
    background-color: var(--color-green5);
    cursor: pointer;
    align-items: center;
    display: flex;
    margin: auto;
    padding: 5px 10px;
}

.box-period-dateprice-package .table-dateprice .tb-dt .b-tb-dp .b-size-tb .btn-bk-tel {
    display: none;
}

.box-period-dateprice-package .table-dateprice .tb-dt .b-tb-dp .b-size-tb .btn-bk-contact a {
    position: relative;
    width: 100%;
    height: auto;
}

.box-period-dateprice-package .table-dateprice .tb-dt .b-tb-dp .b-size-tb .btn-bk-contact p {
    font-size: 0.94rem;
    text-align: center;
    color: var(--color-light);
}

.box-period-dateprice-package .table-dateprice .tb-dt .b-tb-dp .s-tb1 {
    width: 160%;
}

.box-period-dateprice-package .table-dateprice .tb-dt .b-tb-dp .s-tb6 {
    width: 70%;
}

.box-period-dateprice-package .table-dateprice .tb-dt .b-tb-dp .b-size-tb p {
    font-size: 0.94rem;
    text-align: center;
}

.box-period-dateprice-package .table-dateprice .tb-dt .b-tb-dp .b-size-tb .txt-fullprice {
    font-size: 0.69rem;
    text-align: center;
    color: var(--color-txtg4);
    text-decoration: line-through;
    margin-bottom: -5px;
}

.box-period-dateprice-package .table-dateprice .tb-dt .b-tb-dp .b-size-tb .txt-left {
    text-align: left;
}

/* ============= */
@media (min-width: 1200px) {}

@media (min-width: 992px) and (max-width: 1199px) {}

@media (min-width: 791px) and (max-width: 991px) {}

@media (min-width: 501px) and (max-width: 790px) {}

@media (min-width: 0px) and (max-width: 500px) {
    .box-period-dateprice-package {
        padding: 0 16px;
    }

    .box-period-dateprice-package .table-dateprice .tb-head {
        display: none;
        flex-wrap: wrap;
        flex-direction: row;
    }

    .box-period-dateprice-package .table-dateprice .tb-dt {
        max-height: inherit;
    }

    .box-period-dateprice-package .table-dateprice .tb-dt .b-tb-dp {
        padding: 0;
        flex-wrap: wrap;
        flex-direction: row;
    }

    .box-period-dateprice-package .table-dateprice .tb-dt .b-tb-dp .b-size-tb {
        display: flex;
        justify-content: stretch;
        border-right: none;
        padding: 0 10px;
    }

    .box-period-dateprice-package .table-dateprice .tb-dt .b-tb-dp .b-size-tb .txt-l-b {
        position: relative;
        width: 80%;
        height: auto;
        display: grid;
        border-right: 1px dashed var(--color-grey5);
    }

    .box-period-dateprice-package .table-dateprice .tb-dt .b-tb-dp .b-size-tb .price-r-b {
        position: relative;
        width: 20%;
        height: auto;
    }

    .box-period-dateprice-package .table-dateprice .tb-dt .b-tb-dp .b-size-tb .txt-l-b p {
        text-align: left;
    }

    .box-period-dateprice-package .table-dateprice .tb-dt .b-tb-dp .b-size-tb p {
        font-size: 0.88rem;
    }

    .box-period-dateprice-package .table-dateprice .tb-dt .b-tb-dp .b-size-tb .btn-bk-contact {
        width: 45%;
    }

    .box-period-dateprice-package .table-dateprice .tb-dt .b-tb-dp .b-size-tb .btn-bk-tel {
        display: block;
        background-color: var(--color-first);
    }

    .box-period-dateprice-package .table-dateprice .tb-dt .b-tb-dp .s-tb1 {
        width: 100%;
        padding: 7px 10px 5px 10px;
        margin-top: 0;
        background-color: rgba(var(--color-first-rgb), 0.05);
        border-bottom: 1px solid var(--color-first);
    }

    .box-period-dateprice-package .table-dateprice .tb-dt .b-tb-dp .s-tb2 {
        width: 100%;
    }

    .box-period-dateprice-package .table-dateprice .tb-dt .b-tb-dp .s-tb3 {
        width: 100%;
    }

    .box-period-dateprice-package .table-dateprice .tb-dt .b-tb-dp .s-tb4 {
        width: 100%;
    }

    .box-period-dateprice-package .table-dateprice .tb-dt .b-tb-dp .s-tb5 {
        width: 100%;
    }

    .box-period-dateprice-package .table-dateprice .tb-dt .b-tb-dp .s-tb6 {
        width: 100%;
        margin: 14px 0;
    }
}

/* ====== period date price car rental ====== */
.box-period-dateprice-car-rental {
    position: relative;
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}

.box-period-dateprice-car-rental .box-title {
    position: relative;
    width: 100%;
    height: auto;
    padding: 0 0 5px 5px;
}

.box-period-dateprice-car-rental .box-title p {
    font-size: 1.07rem;
    font-weight: bold;
}

.box-period-dateprice-car-rental .table-dateprice {
    position: relative;
    width: 100%;
    height: auto;
    max-height: 23rem;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid var(--color-grey3);
}

.box-period-dateprice-car-rental .table-dateprice .tb-head {
    position: relative;
    width: 100%;
    height: auto;
    max-height: 3.625rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: row;
    padding: 0 5px 0 20px;
    background-color: var(--color-first);
}

.box-period-dateprice-car-rental .table-dateprice .tb-head .b-size-tb {
    position: relative;
    width: auto;
    height: auto;
    margin: 5px 0;
    padding: 0 5px;
}

.box-period-dateprice-car-rental .table-dateprice .tb-head .s-tb1 {
    width: calc(46% - 1px);
}

.box-period-dateprice-car-rental .table-dateprice .tb-head .s-tb2 {
    width: calc(15% - 1px);
}

.box-period-dateprice-car-rental .table-dateprice .tb-head .s-tb3 {
    width: calc(15% - 1px);
}

.box-period-dateprice-car-rental .table-dateprice .tb-head .s-tb4 {
    width: calc(15% - 1px);
}

.box-period-dateprice-car-rental .table-dateprice .tb-head .s-tb5 {
    width: 9%;
}

.box-period-dateprice-car-rental .table-dateprice .tb-head .b-size-tb p {
    font-size: 1rem;
    color: var(--color-light);
    text-align: center;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.box-period-dateprice-car-rental .table-dateprice .tb-head .b-size-tb .txt-left {
    text-align: left;
}

.box-period-dateprice-car-rental .table-dateprice .tb-dt {
    position: relative;
    width: 100%;
    height: auto;
    max-height: 19.375rem;
    overflow: scroll;
    margin: 0 0 5px 0;
}

.box-period-dateprice-car-rental .table-dateprice .tb-dt .b-tb-dp {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: row;
    padding: 0 5px 0 20px;
}

.box-period-dateprice-car-rental .table-dateprice .tb-dt .b-tb-dp p {
    margin: auto 0;
}

.box-period-dateprice-car-rental .table-dateprice .tb-dt .b-tb-dp .b-size-tb {
    position: relative;
    width: auto;
    height: auto;
    margin: 5px 0;
    display: grid;
}

.box-period-dateprice-car-rental .table-dateprice .tb-dt .b-tb-dp .b-size-tb .txt-l-b {
    display: none;
}

.box-period-dateprice-car-rental .table-dateprice .tb-dt .b-tb-dp .b-size-tb .price-r-b {
    display: grid;
}

.box-period-dateprice-car-rental .table-dateprice .tb-dt .b-tb-dp .b-size-tb .btn-bk-contact {
    position: relative;
    width: fit-content;
    height: fit-content;
    border-radius: 5px;
    background-color: var(--color-green5);
    cursor: pointer;
    align-items: center;
    display: flex;
    margin: auto;
    padding: 5px 10px;
}

.box-period-dateprice-car-rental .table-dateprice .tb-dt .b-tb-dp .b-size-tb .btn-bk-tel {
    display: none;
}

.box-period-dateprice-car-rental .table-dateprice .tb-dt .b-tb-dp .b-size-tb .btn-bk-contact a {
    position: relative;
    width: 100%;
    height: auto;
}

.box-period-dateprice-car-rental .table-dateprice .tb-dt .b-tb-dp .b-size-tb .btn-bk-contact p {
    font-size: 0.94rem;
    text-align: center;
    color: var(--color-light);
}

.box-period-dateprice-car-rental .table-dateprice .tb-dt .b-tb-dp .s-tb1 {
    width: calc(46% - 1px);
}

.box-period-dateprice-car-rental .table-dateprice .tb-dt .b-tb-dp .s-tb2 {
    width: calc(15% - 1px);
}

.box-period-dateprice-car-rental .table-dateprice .tb-dt .b-tb-dp .s-tb3 {
    width: calc(15% - 1px);
}

.box-period-dateprice-car-rental .table-dateprice .tb-dt .b-tb-dp .s-tb4 {
    width: calc(15% - 1px);
}

.box-period-dateprice-car-rental .table-dateprice .tb-dt .b-tb-dp .s-tb5 {
    width: 9%;
}

.box-period-dateprice-car-rental .table-dateprice .tb-dt .b-tb-dp .b-size-tb p {
    font-size: 0.94rem;
    text-align: center;
}

.box-period-dateprice-car-rental .table-dateprice .tb-dt .b-tb-dp .b-size-tb .txt-fullprice {
    font-size: 0.69rem;
    text-align: center;
    color: var(--color-txtg4);
    text-decoration: line-through;
    margin-bottom: -5px;
}

.box-period-dateprice-car-rental .table-dateprice .tb-dt .b-tb-dp .b-size-tb .txt-left {
    text-align: left;
}

.lines-right-tb-car-rental {
    position: relative;
    width: 1px;
    height: auto;
    margin: 5px 0;
    background-color: var(--color-grey2);
}

/* ============= */
@media (min-width: 1200px) {}

@media (min-width: 992px) and (max-width: 1199px) {
    .box-period-dateprice-car-rental .table-dateprice .tb-head .s-tb1 {
        width: calc(39% - 1px);
    }

    .box-period-dateprice-car-rental .table-dateprice .tb-head .s-tb2 {
        width: calc(16.5% - 1px);
    }

    .box-period-dateprice-car-rental .table-dateprice .tb-head .s-tb3 {
        width: calc(16.5% - 1px);
    }

    .box-period-dateprice-car-rental .table-dateprice .tb-head .s-tb4 {
        width: calc(16.5% - 1px);
    }

    .box-period-dateprice-car-rental .table-dateprice .tb-head .s-tb5 {
        width: 11.5%;
    }

    .box-period-dateprice-car-rental .table-dateprice .tb-dt .b-tb-dp .s-tb1 {
        width: calc(39% - 1px);
    }

    .box-period-dateprice-car-rental .table-dateprice .tb-dt .b-tb-dp .s-tb2 {
        width: calc(16.5% - 1px);
    }

    .box-period-dateprice-car-rental .table-dateprice .tb-dt .b-tb-dp .s-tb3 {
        width: calc(16.5% - 1px);
    }

    .box-period-dateprice-car-rental .table-dateprice .tb-dt .b-tb-dp .s-tb4 {
        width: calc(16.5% - 1px);
    }

    .box-period-dateprice-car-rental .table-dateprice .tb-dt .b-tb-dp .s-tb5 {
        width: 11.5%;
    }
}

@media (min-width: 791px) and (max-width: 991px) {
    .box-period-dateprice-car-rental .table-dateprice .tb-head .s-tb1 {
        width: calc(39% - 1px);
    }

    .box-period-dateprice-car-rental .table-dateprice .tb-head .s-tb2 {
        width: calc(16.5% - 1px);
    }

    .box-period-dateprice-car-rental .table-dateprice .tb-head .s-tb3 {
        width: calc(16.5% - 1px);
    }

    .box-period-dateprice-car-rental .table-dateprice .tb-head .s-tb4 {
        width: calc(16.5% - 1px);
    }

    .box-period-dateprice-car-rental .table-dateprice .tb-head .s-tb5 {
        width: 11.5%;
    }

    .box-period-dateprice-car-rental .table-dateprice .tb-dt .b-tb-dp .s-tb1 {
        width: calc(39% - 1px);
    }

    .box-period-dateprice-car-rental .table-dateprice .tb-dt .b-tb-dp .s-tb2 {
        width: calc(16.5% - 1px);
    }

    .box-period-dateprice-car-rental .table-dateprice .tb-dt .b-tb-dp .s-tb3 {
        width: calc(16.5% - 1px);
    }

    .box-period-dateprice-car-rental .table-dateprice .tb-dt .b-tb-dp .s-tb4 {
        width: calc(16.5% - 1px);
    }

    .box-period-dateprice-car-rental .table-dateprice .tb-dt .b-tb-dp .s-tb5 {
        width: 11.5%;
    }

    .box-period-dateprice-car-rental .table-dateprice .tb-head .b-size-tb p {
        font-size: 0.94rem;
    }

    .box-period-dateprice-car-rental .table-dateprice .tb-dt .b-tb-dp .b-size-tb p {
        font-size: 0.88rem;
    }

    .box-period-dateprice-car-rental .table-dateprice .tb-dt .b-tb-dp .b-size-tb .btn-bk-contact p {
        font-size: 0.88rem;
    }
}

@media (min-width: 501px) and (max-width: 790px) {
    .box-period-dateprice-car-rental .table-dateprice .tb-head .s-tb1 {
        width: calc(39% - 1px);
    }

    .box-period-dateprice-car-rental .table-dateprice .tb-head .s-tb2 {
        width: calc(16.5% - 1px);
    }

    .box-period-dateprice-car-rental .table-dateprice .tb-head .s-tb3 {
        width: calc(16.5% - 1px);
    }

    .box-period-dateprice-car-rental .table-dateprice .tb-head .s-tb4 {
        width: calc(16.5% - 1px);
    }

    .box-period-dateprice-car-rental .table-dateprice .tb-head .s-tb5 {
        width: 11.5%;
    }

    .box-period-dateprice-car-rental .table-dateprice .tb-dt .b-tb-dp .s-tb1 {
        width: calc(39% - 1px);
    }

    .box-period-dateprice-car-rental .table-dateprice .tb-dt .b-tb-dp .s-tb2 {
        width: calc(16.5% - 1px);
    }

    .box-period-dateprice-car-rental .table-dateprice .tb-dt .b-tb-dp .s-tb3 {
        width: calc(16.5% - 1px);
    }

    .box-period-dateprice-car-rental .table-dateprice .tb-dt .b-tb-dp .s-tb4 {
        width: calc(16.5% - 1px);
    }

    .box-period-dateprice-car-rental .table-dateprice .tb-dt .b-tb-dp .s-tb5 {
        width: 11.5%;
    }

    .box-period-dateprice-car-rental .table-dateprice .tb-head .b-size-tb p {
        font-size: 0.94rem;
    }

    .box-period-dateprice-car-rental .table-dateprice .tb-dt .b-tb-dp .b-size-tb p {
        font-size: 0.88rem;
    }

    .box-period-dateprice-car-rental .table-dateprice .tb-dt .b-tb-dp .b-size-tb .btn-bk-contact p {
        font-size: 0.88rem;
    }
}

@media (min-width: 0px) and (max-width: 500px) {
    .box-period-dateprice-car-rental {
        padding: 0 16px;
    }

    .box-period-dateprice-car-rental .table-dateprice .tb-head {
        display: none;
    }

    .box-period-dateprice-car-rental .table-dateprice .tb-dt {
        max-height: inherit;
    }

    .box-period-dateprice-car-rental .table-dateprice .tb-dt .b-tb-dp {
        padding: 0;
    }

    .box-period-dateprice-car-rental .table-dateprice .tb-dt .b-tb-dp .b-size-tb {
        display: flex;
        justify-content: stretch;
        border-right: none;
        padding: 0 10px;
    }

    .box-period-dateprice-car-rental .table-dateprice .tb-dt .b-tb-dp .b-size-tb .txt-l-b {
        position: relative;
        width: 80%;
        height: auto;
        display: grid;
        border-right: 1px dashed var(--color-grey5);
    }

    .box-period-dateprice-car-rental .table-dateprice .tb-dt .b-tb-dp .b-size-tb .price-r-b {
        position: relative;
        width: 20%;
        height: auto;
    }

    .box-period-dateprice-car-rental .table-dateprice .tb-dt .b-tb-dp .b-size-tb .txt-l-b p {
        text-align: left;
    }

    .box-period-dateprice-car-rental .table-dateprice .tb-dt .b-tb-dp .b-size-tb p {
        font-size: 0.88rem;
    }

    .box-period-dateprice-car-rental .table-dateprice .tb-dt .b-tb-dp .b-size-tb .btn-bk-contact {
        width: 45%;
    }

    .box-period-dateprice-car-rental .table-dateprice .tb-dt .b-tb-dp .b-size-tb .btn-bk-tel {
        display: block;
        background-color: var(--color-first);
    }

    .box-period-dateprice-car-rental .table-dateprice .tb-dt .b-tb-dp .s-tb1 {
        width: 100%;
        padding: 7px 10px 5px 10px;
        margin-top: 0;
        background-color: rgba(var(--color-first-rgb), 0.05);
        border-bottom: 1px solid var(--color-first);
    }

    .box-period-dateprice-car-rental .table-dateprice .tb-dt .b-tb-dp .s-tb2 {
        width: 100%;
    }

    .box-period-dateprice-car-rental .table-dateprice .tb-dt .b-tb-dp .s-tb3 {
        width: 100%;
    }

    .box-period-dateprice-car-rental .table-dateprice .tb-dt .b-tb-dp .s-tb4 {
        width: 100%;
    }

    .box-period-dateprice-car-rental .table-dateprice .tb-dt .b-tb-dp .s-tb5 {
        width: 100%;
        margin: 14px 0;
    }
}

/* ====== period date price cruise ====== */
.box-period-dateprice-cruise {
    position: relative;
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}

.box-period-dateprice-cruise .box-title {
    position: relative;
    width: 100%;
    height: auto;
    padding: 0 0 5px 5px;
}

.box-period-dateprice-cruise .box-title p {
    font-size: 1.07rem;
    font-weight: bold;
}

.box-period-dateprice-cruise .table-dateprice {
    position: relative;
    width: 100%;
    height: auto;
    max-height: 23rem;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid var(--color-grey3);
}

.box-period-dateprice-cruise .table-dateprice .tb-head {
    position: relative;
    width: 100%;
    height: auto;
    max-height: 3.625rem;
    display: flex;
    justify-content: stretch;
    flex-wrap: wrap;
    flex-direction: row;
    padding: 0 5px 0 5px;
    background-color: var(--color-first);
}

.box-period-dateprice-cruise .table-dateprice .tb-head .b-size-tb {
    position: relative;
    height: auto;
    border-right: 1px solid var(--color-grey2);
    margin: 5px 0;
    padding: 0 5px;
}

.box-period-dateprice-cruise .table-dateprice .tb-head .b-size-tb:last-child {
    border-right: none;
}

.box-period-dateprice-cruise .table-dateprice .tb-head .b-size-tb p {
    font-size: 0.94rem;
    color: var(--color-light);
    text-align: center;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.box-period-dateprice-cruise .table-dateprice .tb-head .s-tb1 {
    width: 25%;
}

.box-period-dateprice-cruise .table-dateprice .tb-head .s-tb2 {
    width: 18%;
}

.box-period-dateprice-cruise .table-dateprice .tb-head .s-tb3 {
    width: 13%;
}

.box-period-dateprice-cruise .table-dateprice .tb-head .s-tb4 {
    width: 13%;
}

.box-period-dateprice-cruise .table-dateprice .tb-head .s-tb5 {
    width: 13%;
}

.box-period-dateprice-cruise .table-dateprice .tb-head .s-tb6 {
    width: 9%;
}

.box-period-dateprice-cruise .table-dateprice .tb-head .s-tb7 {
    width: 9%;
}

.box-period-dateprice-cruise .table-dateprice .tb-dt {
    position: relative;
    width: 100%;
    height: auto;
    max-height: 19.375rem;
    overflow: scroll;
}

.box-period-dateprice-cruise .table-dateprice .tb-dt .b-tb-dp {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: stretch;
    flex-wrap: wrap;
    flex-direction: row;
    padding: 5px;
    border-bottom: 1px solid var(--color-grey4);
    margin: 5px 0;
}

.box-period-dateprice-cruise .table-dateprice .tb-dt .b-tb-dp:last-child {
    border-bottom: none;
}

.box-period-dateprice-cruise .table-dateprice .tb-dt .b-tb-dp p {
    margin: auto 0;
}

.box-period-dateprice-cruise .table-dateprice .tb-dt .b-tb-dp .b-date {
    position: relative;
    width: 25%;
    height: auto;
    border-right: 1px dashed var(--color-grey4);
}

.box-period-dateprice-cruise .table-dateprice .tb-dt .b-tb-dp .b-date .b-size-tb {
    position: relative;
    width: 100%;
    height: auto;
    padding: 0 5px;
    top: 50%;
    transform: translateY(-50%);
}

.box-period-dateprice-cruise .table-dateprice .tb-dt .b-tb-dp .b-date .b-size-tb p {
    font-size: 0.88rem;
    text-align: center;
}

.box-period-dateprice-cruise .table-dateprice .tb-dt .b-tb-dp .b-dt-price {
    position: relative;
    width: 75%;
    height: auto;
}

.box-period-dateprice-cruise .table-dateprice .tb-dt .b-tb-dp .b-dt-price .b-tb-list {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: stretch;
    flex-wrap: wrap;
    flex-direction: row;
    border-bottom: 1px dashed var(--color-grey4);
}

.box-period-dateprice-cruise .table-dateprice .tb-dt .b-tb-dp .b-dt-price .b-tb-list:last-child {
    border-bottom: none;
}

.box-period-dateprice-cruise .table-dateprice .tb-dt .b-tb-dp .b-dt-price .b-tb-list .b-size-tb {
    position: relative;
    height: auto;
    border-right: 1px solid var(--color-grey2);
    margin: 5px 0;
    padding: 0 5px;
    display: grid;
}

.box-period-dateprice-cruise .table-dateprice .tb-dt .b-tb-dp .b-dt-price .b-tb-list .b-size-tb:last-child {
    border-right: none;
}

.box-period-dateprice-cruise .table-dateprice .tb-dt .b-tb-dp .b-dt-price .b-tb-list .b-size-tb p {
    font-size: 0.88rem;
    text-align: center;
}

.box-period-dateprice-cruise .table-dateprice .tb-dt .b-tb-dp .b-dt-price .b-tb-list .b-size-tb .txt-fullprice {
    font-size: 0.69rem;
    text-align: center;
    color: var(--color-txtg4);
    text-decoration: line-through;
    margin-bottom: -5px;
}

.box-period-dateprice-cruise .table-dateprice .tb-dt .b-tb-dp .b-dt-price .b-tb-list .b-size-tb .b-title-mb {
    display: none;
}

.box-period-dateprice-cruise .table-dateprice .tb-dt .b-tb-dp .b-dt-price .b-tb-list .b-size-tb .b-txt-mb {
    display: grid;
}

.box-period-dateprice-cruise .table-dateprice .tb-dt .b-tb-dp .b-dt-price .b-tb-list .s-tb2 {
    width: 24%;
}

.box-period-dateprice-cruise .table-dateprice .tb-dt .b-tb-dp .b-dt-price .b-tb-list .s-tb3 {
    width: 17.3%;
}

.box-period-dateprice-cruise .table-dateprice .tb-dt .b-tb-dp .b-dt-price .b-tb-list .s-tb4 {
    width: 17.3%;
}

.box-period-dateprice-cruise .table-dateprice .tb-dt .b-tb-dp .b-dt-price .b-tb-list .s-tb5 {
    width: 17.3%;
}

.box-period-dateprice-cruise .table-dateprice .tb-dt .b-tb-dp .b-dt-price .b-tb-list .s-tb6 {
    width: 12.05%;
}

.box-period-dateprice-cruise .table-dateprice .tb-dt .b-tb-dp .b-dt-price .b-tb-list .s-tb7 {
    width: 12.05%;
}

/* ============= */
@media (min-width: 1200px) {}

@media (min-width: 992px) and (max-width: 1199px) {}

@media (min-width: 791px) and (max-width: 991px) {}

@media (min-width: 501px) and (max-width: 790px) {}

@media (min-width: 0px) and (max-width: 500px) {
    .box-period-dateprice-cruise {
        padding: 0 16px;
        margin-bottom: 16px;
    }

    .box-period-dateprice-cruise .box-title p {
        font-size: 1rem;
    }

    .box-period-dateprice-cruise .table-dateprice .tb-head {
        display: none;
    }

    .box-period-dateprice-cruise .table-dateprice .tb-dt .b-tb-dp .b-date .b-size-tb p {
        font-size: 0.82rem;
    }

    .box-period-dateprice-cruise .table-dateprice .tb-dt .b-tb-dp .b-dt-price .b-tb-list .b-size-tb p {
        font-size: 0.82rem;
    }

    .box-period-dateprice-cruise .table-dateprice .tb-dt .b-tb-dp {
        padding: 0 0 5px 0;
        margin: 0;
    }

    .box-period-dateprice-cruise .table-dateprice .tb-dt .b-tb-dp .b-date {
        width: 100%;
        border-right: none;
        padding: 7px 10px 5px 10px;
        background-color: rgba(var(--color-first-rgb), 0.05);
        border-bottom: 1px solid var(--color-first);
    }

    .box-period-dateprice-cruise .table-dateprice .tb-dt .b-tb-dp .b-dt-price {
        width: 100%;
    }

    .box-period-dateprice-cruise .table-dateprice .tb-dt .b-tb-dp .b-dt-price .b-tb-list .s-tb2 {
        width: 100%;
    }

    .box-period-dateprice-cruise .table-dateprice .tb-dt .b-tb-dp .b-dt-price .b-tb-list .s-tb3 {
        width: 100%;
    }

    .box-period-dateprice-cruise .table-dateprice .tb-dt .b-tb-dp .b-dt-price .b-tb-list .s-tb4 {
        width: 100%;
    }

    .box-period-dateprice-cruise .table-dateprice .tb-dt .b-tb-dp .b-dt-price .b-tb-list .s-tb5 {
        width: 100%;
    }

    .box-period-dateprice-cruise .table-dateprice .tb-dt .b-tb-dp .b-dt-price .b-tb-list .s-tb6 {
        width: 100%;
    }

    .box-period-dateprice-cruise .table-dateprice .tb-dt .b-tb-dp .b-dt-price .b-tb-list .s-tb7 {
        width: 100%;
    }

    .box-period-dateprice-cruise .table-dateprice .tb-dt .b-tb-dp .b-dt-price .b-tb-list .s-tb2 .b-txt-mb p {
        font-weight: bold;
        color: var(--color-first);
    }

    .box-period-dateprice-cruise .table-dateprice .tb-dt .b-tb-dp .b-dt-price .b-tb-list .b-size-tb {
        display: flex;
        justify-content: stretch;
        flex-wrap: wrap;
        flex-direction: row;
    }

    .box-period-dateprice-cruise .table-dateprice .tb-dt .b-tb-dp .b-dt-price .b-tb-list .b-size-tb .b-title-mb {
        position: relative;
        width: 50%;
        height: auto;
        display: block;
        border-right: 1px dashed var(--color-grey3);
    }

    .box-period-dateprice-cruise .table-dateprice .tb-dt .b-tb-dp .b-dt-price .b-tb-list .b-size-tb .b-title-mb p {
        text-align: left;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }

    .box-period-dateprice-cruise .table-dateprice .tb-dt .b-tb-dp .b-dt-price .b-tb-list .b-size-tb .b-txt-mb {
        position: relative;
        width: 50%;
        height: auto;
    }
}

/* ====== period date price ticket ====== */
.box-period-dateprice-ticket {
    position: relative;
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}

.box-period-dateprice-ticket .box-title {
    position: relative;
    width: 100%;
    height: auto;
    padding: 0 0 5px 5px;
}

.box-period-dateprice-ticket .box-title p {
    font-size: 1.07rem;
    font-weight: bold;
}

.box-period-dateprice-ticket .table-dateprice {
    position: relative;
    width: 100%;
    height: auto;
    max-height: 23rem;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid var(--color-grey3);
}

.box-period-dateprice-ticket .table-dateprice .tb-head {
    position: relative;
    width: 100%;
    height: auto;
    max-height: 2.125rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: row;
    padding: 0 5px 0 20px;
    background-color: var(--color-first);
}

.box-period-dateprice-ticket .table-dateprice .tb-head .b-size-tb {
    position: relative;
    width: auto;
    height: auto;
    border-right: 1px solid var(--color-grey2);
    margin: 5px 0;
    padding: 0 5px;
}

.box-period-dateprice-ticket .table-dateprice .tb-head .b-size-tb:last-child {
    border-right: none;
}

.box-period-dateprice-ticket .table-dateprice .tb-head .s-tb1 {
    width: 70%;
}

.box-period-dateprice-ticket .table-dateprice .tb-head .s-tb2 {
    width: 18%;
}

.box-period-dateprice-ticket .table-dateprice .tb-head .s-tb3 {
    width: 12%;
}

.box-period-dateprice-ticket .table-dateprice .tb-head .b-size-tb p {
    font-size: 1rem;
    color: var(--color-light);
    text-align: center;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.box-period-dateprice-ticket .table-dateprice .tb-head .b-size-tb .txt-left {
    text-align: left;
}

.box-period-dateprice-ticket .table-dateprice .tb-dt {
    position: relative;
    width: 100%;
    height: auto;
    max-height: 20.875rem;
    overflow: scroll;
    margin: 0 0 5px 0;
}

.box-period-dateprice-ticket .table-dateprice .tb-dt .b-tb-dp {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: row;
    padding: 0 5px 0 20px;
}

.box-period-dateprice-ticket .table-dateprice .tb-dt .b-tb-dp p {
    margin: auto 0;
}

.box-period-dateprice-ticket .table-dateprice .tb-dt .b-tb-dp .b-size-tb {
    position: relative;
    width: auto;
    height: auto;
    border-right: 1px solid var(--color-grey2);
    margin: 5px 0;
    display: grid;
}

.box-period-dateprice-ticket .table-dateprice .tb-dt .b-tb-dp .b-size-tb:last-child {
    border-right: none;
}

.box-period-dateprice-ticket .table-dateprice .tb-dt .b-tb-dp .b-size-tb .txt-l-b {
    display: none;
}

.box-period-dateprice-ticket .table-dateprice .tb-dt .b-tb-dp .b-size-tb .price-r-b {
    display: grid;
}

.box-period-dateprice-ticket .table-dateprice .tb-dt .b-tb-dp .b-size-tb .btn-bk-contact {
    position: relative;
    width: fit-content;
    height: fit-content;
    border-radius: 5px;
    background-color: var(--color-green5);
    cursor: pointer;
    align-items: center;
    display: flex;
    margin: auto;
    padding: 5px 10px;
}

.box-period-dateprice-ticket .table-dateprice .tb-dt .b-tb-dp .b-size-tb .btn-bk-tel {
    display: none;
}

.box-period-dateprice-ticket .table-dateprice .tb-dt .b-tb-dp .b-size-tb .btn-bk-contact a {
    position: relative;
    width: 100%;
    height: auto;
}

.box-period-dateprice-ticket .table-dateprice .tb-dt .b-tb-dp .b-size-tb .btn-bk-contact p {
    font-size: 0.94rem;
    text-align: center;
    color: var(--color-light);
}

.box-period-dateprice-ticket .table-dateprice .tb-dt .b-tb-dp .s-tb1 {
    width: 70%;
}

.box-period-dateprice-ticket .table-dateprice .tb-dt .b-tb-dp .s-tb2 {
    width: 18%;
}

.box-period-dateprice-ticket .table-dateprice .tb-dt .b-tb-dp .s-tb3 {
    width: 12%;
}

.box-period-dateprice-ticket .table-dateprice .tb-dt .b-tb-dp .b-size-tb p {
    font-size: 0.94rem;
    text-align: center;
}

.box-period-dateprice-ticket .table-dateprice .tb-dt .b-tb-dp .b-size-tb .txt-fullprice {
    font-size: 0.69rem;
    text-align: center;
    color: var(--color-txtg4);
    text-decoration: line-through;
    margin-bottom: -5px;
}

.box-period-dateprice-ticket .table-dateprice .tb-dt .b-tb-dp .b-size-tb .txt-left {
    text-align: left;
}

/* ============= */
@media (min-width: 1200px) {}

@media (min-width: 992px) and (max-width: 1199px) {}

@media (min-width: 791px) and (max-width: 991px) {}

@media (min-width: 501px) and (max-width: 790px) {}

@media (min-width: 0px) and (max-width: 500px) {
    .box-period-dateprice-ticket {
        padding: 0 16px;
    }

    .box-period-dateprice-ticket .table-dateprice {
        max-height: 30rem;
    }

    .box-period-dateprice-ticket .table-dateprice .tb-head {
        display: none;
    }

    .box-period-dateprice-ticket .table-dateprice .tb-dt {
        max-height: inherit;
    }

    .box-period-dateprice-ticket .table-dateprice .tb-dt .b-tb-dp {
        padding: 0;
    }

    .box-period-dateprice-ticket .table-dateprice .tb-dt .b-tb-dp .b-size-tb {
        display: flex;
        justify-content: stretch;
        border-right: none;
        padding: 0 10px;
    }

    .box-period-dateprice-ticket .table-dateprice .tb-dt .b-tb-dp .b-size-tb .txt-l-b {
        position: relative;
        width: 80%;
        height: auto;
        display: grid;
        border-right: 1px dashed var(--color-grey5);
    }

    .box-period-dateprice-ticket .table-dateprice .tb-dt .b-tb-dp .b-size-tb .price-r-b {
        position: relative;
        width: 20%;
        height: auto;
    }

    .box-period-dateprice-ticket .table-dateprice .tb-dt .b-tb-dp .b-size-tb .txt-l-b p {
        text-align: left;
    }

    .box-period-dateprice-ticket .table-dateprice .tb-dt .b-tb-dp .b-size-tb p {
        font-size: 0.88rem;
    }

    .box-period-dateprice-ticket .table-dateprice .tb-dt .b-tb-dp .b-size-tb .btn-bk-contact {
        width: 45%;
    }

    .box-period-dateprice-ticket .table-dateprice .tb-dt .b-tb-dp .b-size-tb .btn-bk-tel {
        display: block;
        background-color: var(--color-first);
    }

    .box-period-dateprice-ticket .table-dateprice .tb-dt .b-tb-dp .s-tb1 {
        width: 100%;
        padding: 7px 10px 5px 10px;
        margin-top: 0;
        background-color: rgba(var(--color-first-rgb), 0.05);
        border-bottom: 1px solid var(--color-first);
    }

    .box-period-dateprice-ticket .table-dateprice .tb-dt .b-tb-dp .s-tb2 {
        width: 100%;
    }

    .box-period-dateprice-ticket .table-dateprice .tb-dt .b-tb-dp .s-tb3 {
        width: 100%;
        margin: 14px 0;
    }
}

/* ====== timeline program ====== */
.box-timeline-program {
    position: relative;
    width: 100%;
    height: auto;
    border-top: 1px dashed var(--color-grey4);
}

.box-timeline-program .box-title {
    position: relative;
    width: 100%;
    height: auto;
    padding: 10px;
    background-color: rgba(var(--color-first-rgb), 0.02);
}

.box-timeline-program .box-title p {
    font-size: 1.07rem;
    font-weight: bold;
}

.box-timeline-program .box-title span {
    font-size: 1.07rem;
    font-weight: bold;
}

.box-timeline-program .box-title i {
    font-size: 1.07rem;
    font-weight: bold;
}

.box-timeline-program .box-dt {
    position: relative;
    width: 100%;
    height: auto;
    padding: 10px 0 20px 40px;
}

.box-timeline-program .box-dt .b-timelines {
    position: relative;
    width: 100%;
    height: auto;
}

.box-timeline-program .box-dt .b-timelines .b-list-timelines {
    border-left: 1px dashed var(--color-first);
    position: relative;
    padding: 0 0 16px 25px;
    margin-left: 10px;
}

.box-timeline-program .box-dt .b-timelines .b-list-timelines:last-child {
    border: 0px;
    padding-bottom: 0;
}

.box-timeline-program .box-dt .b-timelines .b-list-timelines::after {
    content: "";
    width: 20px;
    height: 20px;
    background: var(--color-second);
    border: 1px solid var(--color-first);
    box-shadow: 2px 2px 0px var(--color-second);
    border-radius: 50%;
    position: absolute;
    left: -11px;
    top: 0px;
}

.box-timeline-program .box-dt .b-timelines .b-list-timelines::before {
    content: "";
    display: inline-block;
    width: 15px;
    height: 10px;
    position: absolute;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    left: 10px;
    top: 5px;
    border-right: 10px solid var(--color-grey6);
}

.box-timeline-program .box-dt .b-timelines .b-list-timelines .bg-box {
    width: 95%;
    height: auto;
    border: 1px solid var(--color-grey3);
    border-radius: 5px;
    background-color: var(--color-light);
    overflow: hidden;
}

.box-timeline-program .box-dt .b-timelines .b-list-timelines .bg-box .title-day {
    position: relative;
    width: 100%;
    height: auto;
    padding: 5px 12px;
    border-bottom: 1px dashed var(--color-grey3);
    background-color: var(--color-grey1);
}

.box-timeline-program .box-dt .b-timelines .b-list-timelines .bg-box .title-day p {
    font-size: 1rem;
    font-weight: bold;
}

.box-timeline-program .box-dt .b-timelines .b-list-timelines .bg-box .dt-day {
    position: relative;
    width: 100%;
    height: auto;
    padding: 5px 12px;
}

.box-timeline-program .box-dt .b-timelines .b-list-timelines .bg-box .dt-day p {
    font-size: 0.94rem;
    color: var(--color-txtg5);
}

/* ============= */
@media (min-width: 1200px) {}

@media (min-width: 992px) and (max-width: 1199px) {}

@media (min-width: 791px) and (max-width: 991px) {}

@media (min-width: 501px) and (max-width: 790px) {}

@media (min-width: 0px) and (max-width: 500px) {
    .box-timeline-program .box-title span {
        font-size: 1rem;
    }

    .box-timeline-program .box-dt {
        padding: 10px 16px 20px 16px;
    }

    .box-timeline-program .box-dt .b-timelines .b-list-timelines .bg-box {
        width: 100%;
    }

    .box-timeline-program .box-dt .b-timelines .b-list-timelines .bg-box .title-day p {
        font-size: 0.94rem;
    }

    .box-timeline-program .box-dt .b-timelines .b-list-timelines .bg-box .dt-day p {
        font-size: 0.88rem;
    }
}

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  text-align: center;
  padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2}

th {
  background-color: #04AA6D;
  color: white;
}