/*
    Theme Name: Divi Child
    Theme URI: https://yourwebsite.com
    Description: Child theme for Divi
    Author: Your Name
    Author URI: https://yourwebsite.com
    Template: Divi
    Version: 1.0.0
    */

    @import url("../Divi/style.css");

    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
    #testimonial-mobile {
        display: none;
    }
    .welcome-page{
    transition: background-image 1s ease;
    background-size: cover;
    background-position: center;
    }
    .bg-wel-1{
    background: none;
    }
    .bubble-text-video {
    z-index:9999999999999;
        font-family: 'Open Sans' ;
    position: absolute;
    bottom: 150px;   /* chỉnh khoảng cách cách bottom */
    left: 50px;     /* chỉnh khoảng cách cách left */
    color: #E3B7A0; /* màu text giống ảnh */
    font-size: 24px;
    line-height: 100%;
    max-width: 700px;
    }
    .bubble-text-video span {
    color: #E3B7A0; /* màu khác biệt cho email */
        text-decoration: underline;
    text-decoration-color: #E3B7A0;
    }
    .welcome-page {
    position: relative;
    overflow: hidden;
    }

    .bg-video {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    }
    .bg-video-section {

    top: 0;
    left: 0;
    z-index: 5;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    }
    .hidden {
    display: none;
    }

    .visible {
    display: block;
    }
    .bg-wel-2{
    background-image: url('https://borisgym.joosdigital.com/wp-content/uploads/2025/06/2.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    }
    .et_pb_row_0_tb_header  {
        display: flex;
    }

    .et_pb_row_0_tb_header .et_pb_column_0_tb_header {
        width: 250px !important;
    }
    .et_pb_row_0_tb_header .et_pb_column_1_tb_header   {
        flex:1 !important;
    }
    .et_pb_row_0_tb_header .et_pb_column_2_tb_header {
        width: 258px !important;
        align-items : start !important;
    }

    .et_pb_row_0_tb_header .et_pb_column_1_tb_header .dsm_mega_menu_0_tb_header ul  {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .et_pb_menu_0_tb_header.et_pb_menu ul li.current-page-ancestor > a {
    color : #E3B7A0 !important;
    }
    .et_pb_row_1_tb_header {
        margin : 0;
        width: 100%;
    }

    .et_pb_column_1_tb_header .et_pb_module  {
        
    }
    .error {
        border-color: #F34B61 !important;
    }
    .bg-banner-program {
    transition: background-image 1s ease;
    background-size: cover;
    background-position: center;
    padding: 78px ;
        height:400px;
    }
    .select2-selection__rendered.has-value {
    color: #000 !important; /* màu chữ khi đã chọn */
    }
    .bg-0 {
    background-image: url('https://borisgym.joosdigital.com/wp-content/uploads/2025/06/image-1.png');
    background-size: cover;       /* Giúp ảnh phủ kín nhưng không bị vỡ */
    background-position: center;  /* Canh giữa ảnh */
    background-repeat: no-repeat; /* Không lặp lại */

    }
    .bg-1 {
    background-image: url('https://borisgym.joosdigital.com/wp-content/uploads/2025/06/image-40.png');
    background-size: cover;       /* Giúp ảnh phủ kín nhưng không bị vỡ */
    background-position: center;  /* Canh giữa ảnh */
    background-repeat: no-repeat; /* Không lặp lại */

    }



    #toast-error {
        font-size:14px;
    position: fixed;
    top: 7em;              /* ✅ Đặt ở top */
    left: 45%;
    transform: translateX(-50%) translateY(-20px);  /* ✅ Canh giữa và ẩn lên */
    background: #F9FAFF;    /* ✅ Màu đỏ cảnh báo */
    color: #2F2F2F;
    padding: 12px 16px;
    border-radius: 6px;
    font-weight: 400;
    font-family: 'Open Sans';
    transition: all 0.3s ease;
    z-index: 9999;
    pointer-events: none;
    }

    .select2-container--default .select2-selection--single {
        padding: 12px;
        height: auto;
        min-height: 38px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        border: 1px solid #EDEDED
    }
    .time-slot.disabled {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed;
        background-color:#EDEDED;
    }
    .breadcrumb a{
    color:#000;
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        font-size: 16px;
        padding: 0;
        height: 100%;
        display: flex;
        align-items: center;
    }

    .selected_coach {
        cursor: pointer;
    }

    body {
        margin: 1;
        justify-content: center;
        align-items: center;
    }

    .error-message {
    font-family: Open Sans;
    font-weight: 400;
    font-style: italic;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0%;

    }
    #arrow-toggle{
    cursor:pointer;
    }

    input::-webkit-input-placeholder {
    font-family: 'Open Sans';
    font-size: 14px;
    color:#C3C1C1 ;
    }

    input:-moz-placeholder {
    font-size: 14px;
    font-family: 'Open Sans';
    color:#C3C1C1 ;
    }
    .slider-indicator {
    display: flex;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.3); /* nền mờ */
    border-radius: 999px; /* bo tròn */
    width: fit-content;
    margin: auto;
    position: absolute;
    bottom: 20px;
    z-index : 100 ;
    left: 50%;
    transform: translateX(-50%);
    }

    .dot {
    width: 12px;
    height: 12px;
    background: #666;
    border-radius: 50%;
    transition: background 0.3s;
    display: inline-block;
        cursor: pointer;
    }

    .dot.active {
    background: #000;
    }
    input::-moz-placeholder {
    font-size: 14px;
    font-family: 'Open Sans';
    color:#C3C1C1 ;
    }
    .select2-container--default .select2-selection--single .select2-selection__rendered {
    color:#c3c1c1;
    }
    input:-ms-input-placeholder {
    font-size: 14px;
    font-family: 'Open Sans';
    color:#C3C1C1 ;
    }

    .coaches-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 32px;
        padding: 32px;
        background: #ffffff;
        border-radius: 8px;
    }

    .btn_viewDetail_program {
        display: flex;
        justify-content: flex-end
    }

    .coaches-headline {
        font-family: Open Sans;
        font-size: 24px;
        font-weight: 700;
        line-height: 100%;
        color: #484848;
        border-left: 4px solid #E3B7A0;
        padding: 0px 0px 0px 8px;
    }

    .coach-box {
        flex: 0 1 calc(33.333% - 22px);
        border-radius: 8px;
        margin-bottom: 24px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        max-width: calc(33.333% - 22px);
    }

    .coach-box img {
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        border-radius: 8px;
    }

    .coach-img {
        display: block;
        width: auto;


        object-fit: fill;
        border-radius: 5px;

    }

    .program-img {
        display: block;
        width: auto;
        height: auto;
        object-fit: fill;
        border-radius: 5px;
        margin-bottom: 8px;
    }

    .coach-img-placeholder {
        width: 100%;
        height: 180px;
        background: #eee;
        border-radius: 5px;
        margin-bottom: 10px;
    }

    .program-img-placeholder {
        width: 100%;
        height: 180px;
        background: #eee;
        border-radius: 5px;
        margin-bottom: 10px;
    }

    .coach-title {
        margin: 8px 0;
        font-family: 'Open Sans';
        font-size: 18px;
        line-height: 28px;
        font-weight: 700;
        color: #484848;
        text-align: left;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        /* Giới hạn số dòng */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        /* Hiển thị dấu ... nếu vượt quá */
        white-space: normal;
        /* Cho phép wrap theo dòng (kết hợp với line-clamp) */
        max-height: 1.4em;
    }

    .related-program-title {
        display: -webkit-box;
        -webkit-line-clamp: 1;
        /* Giới hạn số dòng */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        /* Hiển thị dấu ... nếu vượt quá */
        white-space: normal;
        /* Cho phép wrap theo dòng (kết hợp với line-clamp) */
        max-height: 1.6em;
        font-family: Open Sans;
        font-weight: 700;
        font-size: 18px;
        line-height: 28px;
        letter-spacing: 0%;
        vertical-align: middle;



    }

    .program-duration {
        font-family: Open Sans;
        font-weight: 400;
        font-size: 16px;
        line-height: 26px;
        letter-spacing: 0%;
        vertical-align: middle;



    }
    input::placeholder {
    font-size: 14px;
    font-family: 'Open Sans';
    color:#C3C1C1 ;
    }

    .program-cost {
        font-family: Open Sans;
        font-weight:600;
        font-size: 16px;
        line-height: 26px;
        letter-spacing: 0%;
        vertical-align: middle;

    }

    .program-image-payment img {
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }

    .coach_row_title {
        display: -webkit-box;
        -webkit-line-clamp: 1;
        /* Giới hạn số dòng */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        /* Hiển thị dấu ... nếu vượt quá */
        white-space: normal;
        /* Cho phép wrap theo dòng (kết hợp với line-clamp) */
        max-height: 1.7em;
    }

    .btnViewDetail {
        display: inline-block;
        padding: 14px;
        background: #FFF7F2;
        color: #E3B7A0;
        text-decoration: none;
        border: 1px solid #E3B7A0;
        border-radius: 32px;
        font-family: Open Sans;

        font-size: 16px;
        font-weight: 700;
        line-height: 100%;
        width: 100%;
        margin-top: 8px;
    }

    .btnViewDetail:hover,
    .btnViewDetail:focus {
        background: #E3B7A0;
        color: #FFF7F2;
        border-color: #E3B7A0;
        transition: all 0.4s;
        text-decoration: none;
        box-shadow: 0 2px 8px rgba(227, 183, 160, 0.15);
    }

    @media (max-width: 900px) {
        .coach-box {
            flex: 0 1 calc(50% - 16px);
        }
    }

    @media (max-width:600px) {
        .coach-box {
            flex: 0 1 100%;
        }
    }

    .select-coach-sort {
        position: relative;
        display: inline-block;
    }

    .select-coach-sort:after {
        content: "▼";
        /* hoặc dùng hình ảnh background */
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
        font-size: 14px;
    }
    .related-programs-slider-wrap {
    width: -webkit-fill-available;
    }
    .coach-sort-select {
        width: 140px;
        margin-left: 8px;
        padding: 10px 12px;
        border: 0px;
        border-radius: 4px;
        font-size: 14px;
        color: #484848;
        appearance: none;
        /* For modern browsers */
        -webkit-appearance: none;
        -moz-appearance: none;

    }

    .coach9-sort-wrap {
        position: relative;
        display: inline-block;
    }

    .coach9-sort-wrap:after {
        content: "▼";
        /* hoặc dùng hình ảnh background */
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
        font-size: 14px;
    }

    .coach9-sort-select {
        width: 140px;
        margin-left: 8px;
        padding: 10px 12px;
        border: 0px;
        border-radius: 4px;
        font-size: 14px;
        color: #484848;
        appearance: none;
        /* For modern browsers */
        -webkit-appearance: none;
        -moz-appearance: none;

    }

    .program-sort-wrap {
        position: relative;
        display: inline-block;
    }

    .program-sort-wrap:after {
        content: "▼";
        /* hoặc dùng hình ảnh background */
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
        font-size: 14px;
    }

    .program-sort-select {
        width: 140px;
        margin-left: 8px;
        padding: 10px 12px;
        border: 0px;
        border-radius: 4px;
        font-size: 14px;
        color: #484848;
        appearance: none;
        /* For modern browsers */
        -webkit-appearance: none;
        -moz-appearance: none;
        background-color: #3f3b2d;
    }


    .country-select-booking-wrap {
        position: relative;
        display: inline-block;
        color : #c3c1c1 ;
    }

    .country-select-booking-wrap:after {

        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
        font-size: 10px;
    }

    .country-select {
        appearance: none;
        /* For modern browsers */
        -webkit-appearance: none;
        -moz-appearance: none;

    }

    .visa-country-select-wrap {
        position: relative;
        display: inline-block;
        width: 100%;
    }

    .visa-country-select-wrap:after {

        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
        font-size: 10px;
    }

    .country-select {
        appearance: none;
        /* For modern browsers */
        -webkit-appearance: none;
        -moz-appearance: none;

    }

    .language-select-booking {
        position: relative;
        display: inline-block;
    }

    .language-select-booking:after {
        content: "▼";
        /* hoặc dùng hình ảnh background */
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
        font-size: 10px;
    color :#888;
    }

    .language-select {

        appearance: none;
        /* For modern browsers */
        -webkit-appearance: none;
        -moz-appearance: none;

    }

    .country-select-wrap {
        position: relative;
        display: block;
    }

    .country-select-wrap:after {

        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
        font-size: 10px;
    }

    .country-select {
        appearance: none;
        /* For modern browsers */
        -webkit-appearance: none;
        -moz-appearance: none;

    }

    .language-select-checkout-wrap {
        position: relative;
        display: inline-block;
    }

    .language-select-checkout-wrap:after {
        content: "▼";
        /* hoặc dùng hình ảnh background */
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
        font-size: 10px;

    font-family:'Open Sans';
    color :#888;
    }

    .language-select {
        appearance: none;
        /* For modern browsers */
        -webkit-appearance: none;
        -moz-appearance: none;

    }

    .coaches-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24px;
    }

    .coaches-header .coach-search-input {
        padding: 10px 12px;
        width: 320px;
        border-radius: 4px;
        background: #FFFFFF;
        border: 0px;
        font-family: Montserrat;
        font-size: 14px;
        line-height: 24px;
        font-weight: 500;
    }

    .program-search-wrap input {
        padding: 10px 12px;
        width: 320px;
        border-radius: 4px;
        background: #FFFFFF;
        border: 0px;
        font-family: Montserrat;
        font-size: 14px;
        line-height: 24px;
        font-weight: 500;
    }


    .program-search-wrap input::placeholder {
        color: #C3C1C1;
        opacity: 1;
    }
    .programs-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:32px;
    }
    .coaches-filter .sort-title {
        width: 56px;
        font-family: Montserrat;
        font-size: 14px;
        line-height: 24px;
        font-weight: 500;
    }

    .coach-search-input::placeholder {
        color: #C3C1C1;
        opacity: 1;
    }

    .coach-box--hidden {
        display: none;
    }

    .coaches-filter .sort-by-section {
        display: flex;
        align-items: center;
        width: 204px;

    }

    .coach-sort-select option {


        font-family: 'Open Sans', sans-serif;
        font-size: 14px;
    }

    .coach-sort-select:hover option {


        font-family: 'Open Sans', sans-serif;
        font-size: 16px;
    }

    .see-more-spinner {
        display: inline-block;
        width: 24px;
        height: 24px;
        border: 3px solid #E3B7A0;
        border-top: 3px solid #FFF7F2;
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
        margin-left: 8px;
    }

    .see-more-spinner--hidden {
        display: none;
    }

    .seemore-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px 46.5px;
        background: #E3B7A0;
        color: #fff;
        text-decoration: none;
        border: none;
        border-radius: 32px;
        font-family: Open Sans;
        font-size: 14px;
        font-weight: 600;
        line-height: 24px;
        margin-bottom: 32px;
        margin-top: 20px;
    }

    .seemore-btn:hover {
        background: #FFF7F2;
        color: #E3B7A0;
        border-color: #E3B7A0;

        text-decoration: none;
        box-shadow: 0 2px 8px rgba(227, 183, 160, 0.15);
    }

    .programs-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24px;
    }

    .divider-col {
        font-size: 35px;
        color: #E3B7A0;
        font-weight: 900;
    }

    .title_page {
        color: #484848;
        font-size: 24px;
        font-weight: 700;
    }

    .sort-by-section {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }

    .programs-headline {
        font-family: Open Sans;
        font-size: 24px;
        font-weight: 700;
        line-height: 100%;
        color: #484848;
        border-left: 4px solid #E3B7A0;
        padding: 0px 0px 0px 8px;

    }

    .coach-description {
        margin-top: 24px;
    }

    .coach-headline {
        font-family: Open Sans;
        font-size: 24px;
        font-weight: 700;
        line-height: 100%;
        color: #484848;
        border-left: 4px solid #E3B7A0;
        padding: 0px 0px 0px 8px;
    }






    .program-sort-select {
        margin-left: 8px;
        padding: 10px 12px;
        border: 0px;
        border-radius: 4px;
        font-size: 14px;
        color: #484848;

        border: 0px solid #fff;

        font-size: 14px;
        background-color: #fff;
    }

    .containerr {
        padding: 0;
        margin: 0;
        min-width: 40%;
        max-width: 40%;
    }


    .program-container {
        background-color: #fff;
        padding: 32px;
        display: flex;
        gap: 32px;
        flex-direction: column;
        margin: auto;
        border-radius: 10px;
    }

    .program-header-a {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 32px;
    }

    .program-image img {
        width: 300px;
        aspect-ratio: 1 / 1;
        border-radius: 12px;
        object-fit: cover;
    }

    .program-content {
        flex: 1;
    }

    /* .program-title-item {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 8px;
        border-bottom: 2px solid #e5b4a1;
        padding-bottom: 4px;
    } */

    .program-meta {
        display: flex;
        justify-content: space-between;
        margin-top : 12px ;
        padding-right: 30%;
    }

    .program-description p {

        line-height: 1.6;
    }

    .program-description ul {
        list-style: none;
        padding-left: 0;

    }

    .program-description li {
        margin-bottom: 6px;
    }

    .program-register {
        margin-top: 24px;
        margin-left: 40%;
    }

    .register-btn {
        display: flex;
        justify-content: center;
        margin-bottom: 17px;
    }
    .select2-container--default .select2-selection--single.has-value .select2-selection__rendered {
    color: #000 !important;
    }
    .register-btn a {
        padding: 10px 44px;
        font-weight: bold;
        color: #E3B7A0;
        background-color: transparent;
        border: 1px solid #E3B7A0;
        border-radius: 32px;
        cursor: pointer;
        position: relative;
        transition: all 0.3s ease;
        background-color: #FFF7F2;
    }



    .register-btn a:hover {
        background-color: #e5b4a1;
        color: white;
    }

    .program-category-section h4 {
        font: Montserrat;
        font-size: 20px;
        font-weight: 700;
        line-height: 32px;
    }

    .top-programs-slider h3 {
        font: Montserrat;
        font-size: 20px;
        font-weight: 700;
        line-height: 32px;
    }

    .programs-wrap {
        gap: 32px;
        padding: 32px;
        background: #ffffff;
        border-radius: 8px;
    }

    .programs-wrap img {
        display: block;
        min-width: 100%;
        max-width: 100%;
        width: auto;
        height: auto;
        object-fit: fill;
        border-radius: 5px;
        margin-bottom: 8px;
    }

    .related-programs-slider-items {
        display: flex;
        transition: transform 0.4s ease;
        will-change: transform;
    }

    .program-box--hidden {
        display: none;
    }

    .related-program-box img {
        display: block;

        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: fill;
        border-radius: 5px;
        margin-bottom: 8px;
    }

    .program-box {
        position: relative;
        max-width: 100%;
        padding-bottom: 10px;
    }

    .related-program-box {
        box-sizing: border-box;
        flex: 0 0 33.33%;
        max-width: 33.33%;

        padding: 5px;
        display: flex;
        flex-direction: column;


    }

    .program-box img {
        border-radius: 8px;
        width: 100%;
        aspect-ratio: 1 / 1;
    }

    /* .et_pb_text_inner {
        min-width: 348px;
        max-width: 348px;
        min-height: 348px;
        max-height: 348px;
        border-radius: 8px;
    } */
    .related-programs h3 {
        font: Montserrat;
        font-size: 20px;
        font-weight: 700;
        line-height: 32px;
    }

    .related-programs {
        padding: 15px;
        background-color: #fff;
        border-radius: 10px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
    }

    .related-program-title-outer {
        font-family: Open Sans;
        font-size: 24px;
        font-weight: 700;
        line-height: 100%;
        color: #484848;
        border-left: 4px solid #E3B7A0;
        padding: 0px 0px 0px 8px;
        margin-bottom: 24px;

    }

    /*Program payment page */
    .one-program-container {
        margin: 0;
        background-color: #fff !important;
        z-index: 9999;
        padding: 24px;
        gap: 24px;
        display: flex;
        flex-direction: column;
        justify-content: start;
        border-radius: 16px;
    }

    .payment-container h3 {
        font-family: Montserrat;
        font-size: 24px;
        font-weight: 700;
        line-height: 100%;
        color: #484848;
        border-left: 4px solid #E3B7A0;
        padding: 0px 0px 0px 8px;
    }

    .one-program-container h2 {
        font-family: Montserrat;
        font-size: 24px;
        font-weight: 700;
        line-height: 100%;
        color: #484848;
        border-left: 4px solid #E3B7A0;
        padding: 0px 0px 0px 8px;
    }

    .program-title-item {
        font-family: Open Sans;
        font-size: 22px;
        font-weight: 700;
        line-height: 100%;
        color: #484848;
        border-left: 4px solid #E3B7A0;
        padding: 0px 0px 0px 8px;
    }

    .program-title-item-detail {
        font-family: Open Sans;
        font-size: 22px;
        font-weight: 700;
        line-height: 100%;
        color: #484848;
        border-bottom: 4px solid #E3B7A0;
        padding: 0px 0px 12px 0px;
    }

    .program-title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        /* Giới hạn số dòng */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        /* Hiển thị dấu ... nếu vượt quá */
        white-space: normal;
        /* Cho phép wrap theo dòng (kết hợp với line-clamp) */
        font-size: 18px;
        line-height: 26px;
        font-weight: 700;
        max-height: 1.6em;
    }

    .programinfo-payment {
        display: flex;
        flex-direction: row;
        gap: 48px;
    }

    .payment-container {
        display: flex;
        flex-direction: column;
        gap: 24px;
        width: 100%;
    }

    .payment-container input::placeholder {
        color: #C3C1C1;
        /* Đổi màu placeholder */
        opacity: 1;
        /* Giữ nguyên độ đậm (mặc định có thể là mờ) */
    }

    .personal-info-wrap {
        background-color: #fff;
        justify-content: start;
        z-index: 9999;

        gap: 24px;
        display: flex;
        flex-direction: column;
        border-radius: 16px;
    }

    .personal-info-wrap label {
        font-weight: 600;
        font-size: 16px;
    }

    .personal-info-wrap h3 {
        font-size: 22px;
    }



    .personal-info-wrap input {
        padding: 16px;
        width: 100%;
        border-radius: 4px;
        background: #FFFFFF;
        border: 1px solid #EDEDED;
        font-family: Montserrat;
        font-size: 14px;
        line-height: 24px;
        font-weight: 500;

    }

    .payment-info-wrap {
        background-color: #fff;
        background-color: #fff !important;

        padding: 24px;
        gap: 16px;
        display: flex;
        flex-direction: column;
        border-radius: 16px;
    }

    .program-info-wrap {
        background-color: #fff;
        background-color: #fff !important;
        z-index: 9999;
        padding: 24px;
        gap: 16px;
        display: flex;
        flex-direction: column;
        border-radius: 16px;
    }

    .payment-options-wrap {
        background-color: #fff;
        background-color: #fff !important;
        z-index: 9999;
        padding: 24px;
        gap: 16px;
        display: flex;
        flex-direction: column;
        border-radius: 16px;
    }

    .payment-container label {
        font-family: Open Sans;
        font-weight: 600;
        font-size: 16px;
        line-height: 24px;
        letter-spacing: 0%;
        vertical-align: middle;
        color: #484848;
    }

    .name-wrap {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .name-wrap .item_warp {
        width: 100%;
    }

    .item-wrap select {
        width: 100%;
        padding: 16px;
        border-radius: 4px;
        background: #FFFFFF;
        border: 1px solid #EDEDED;
        font-family: 'Open Sans';
        font-size: 14px;
        line-height: 24px;
        font-weight: 500;
    color : #c3c1c1 ;

    }

    .item-wrap {
        display: flex;
        flex-direction: column;
        justify-content: center;

    }

    .name-wrap input {
        padding: 16px;
        width: 100%;
        border-radius: 4px;
        background: #FFFFFF;
        border: 1px solid #EDEDED;
        font-family: 'Open Sans';
        font-size: 14px;
        line-height: 24px;
        font-weight: 500;
    }

    .i18n-wrap {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .i18n-wrap .item-wrap {
        gap: 8px;
    }

    .i18n-wrap input {
        padding: 10px;
        width: 50%;
        border-radius: 4px;
        background: #FFFFFF;
        border: 1px solid #EDEDED;
        font-family: Montserrat;
        font-size: 14px;
        line-height: 24px;
        font-weight: 500;
    }

    .payment-info-wrap {


        padding: 24px;
        background-color: #f9f9f9;
        border-radius: 12px;
        font-family: Arial, sans-serif;
    }

    .payment-info-wrap h3 {
        font-size: 22px;
        font-weight: 800;
        margin-bottom: 16px;
    }

    .payment-info-wrap label {
        display: block;
        margin-bottom: 6px;
    }

    .payment-info-wrap .card-icon {
        padding-top: 15px;
    }

    .payment-info-wrap input,
    .payment-info-wrap select {
        width: 100%;
        padding: 16px;

        border: 1px solid #ccc;
        border-radius: 6px;
        font-size: 16px;
    }

    .input-wrap {
        position: relative;
    }

    .card-icon {
        position: absolute;
        top: 35%;
        left: 10px;
        transform: translateY(-50%);
        font-size: 28px;
        color: #007bff;
        padding-right: 10px;
    }

    #card-number {
        padding-left: 70px;
        /* Leave space for icon */
    }

    .input-wrap input {
        padding-left: 36px;
        /* Leave space for icon */
    }

    .visa-name-country-wrap {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    @media (max-width: 600px) {
        .visa-name-country-wrap {
            grid-template-columns: 1fr;
        }
    }

    p {
        padding: 0px;
    }

    .program-info-wrap {
        background-color: #f9f9f9;
        padding: 24px;
        border-radius: 8px;
        min-width: 100%;
        max-width: 100%;
        margin: 0 auto;
        font-family: Arial, sans-serif;
    }

    .program-info-wrap h3 {
        font-size: 20px;
        font-weight: 800;
        margin-bottom: 16px;
        color: #333;
    }

    .program-info-wrap label {
        display: block;
        margin-bottom: 6px;
        font-weight: 600;
        color: #333;
    }

    .program-info-wrap input[type="text"],
    .program-info-wrap input {
        width: 100%;
        padding: 16px;

        border: 1px solid #ccc;
        border-radius: 6px;
        font-size: 14px;
        box-sizing: border-box;
    }

    .program-info-wrap input[type="text"]:focus,
    .program-info-wrap select:focus {
        border-color: #007BFF;
        outline: none;
    }

    .payment-btn {
        margin: 0 auto;

        padding: 12px 24px;
        font-weight: bold;
        color: #E3B7A0;
        background-color: transparent;
        border: 1px solid #E3B7A0;
        border-radius: 32px;
        cursor: pointer;
        position: relative;
        transition: all 0.3s ease;
        background-color: #FFF7F2;
    }

    .payment-btn:hover {
        background-color: #e5b4a1;
        color: white;
    }

    .payment-option {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 16px;
        flex-direction: row;
    }

    .payment-option-item {
        width: 100%;
        display: flex;
        border-radius: 8px;
        padding: 12px;
        align-items: center;
        gap: 16px;
        flex-direction: row;
        background-color: #f5f5f7;
    }

    .cost-wrap {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .cost-wrap label {
        font-family: Open Sans;
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        color: #484848;
    }

    .cost-wrap p {
        font-family: Open Sans;
        font-size: 16px;
        font-weight: 700;
        line-height: 24px;
        color: #484848;
    }

    .custom-checkbox {
        accent-color: #E3B7A0;
        width: 20px;
        height: 20px;
        border: 1px solid #E3B7A0;
        outline: none;
    }

    .fee_total {
        font-family: Open Sans;
        font-size: 16px;
        font-weight: 700;
        line-height: 24px;
        color: #E3B7A0;
    }

    .total-fee-wrap {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

    }

    .total-fee-wrap span {
        color: #E3B7A0;
    }

    br {
        display: block;
        width: 100%;
        height: 1px;
        background-color: #f5f5f7;
        margin: 16px 0;
    }

    .option_monthly {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .option_monthly input {
        width: 20px;
        height: 20px;
        border: 1px solid #EDEDED;
        outline: none;
    }

    .cost-payment-monthly-wrap {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding:16px;
        border: 1px solid #EDEDED;
        border-radius: 5px;
    }

    .cost-payment-monthly-wrap p {
        color: #E3B7A0;
        padding: 0;
    }

    .billing-cycle-wrap input {
        height: 53px;
        width: 100%;
        border: 1px solid #EDEDED;
        outline: none;
        padding: 16px;
        border-radius: 4px;
        font-size: 14px;

    }









    .grid-cloumn-coach {
        display: grid;
        grid-template-columns: 45% 55%;
        gap: 48px;

    }

    .coach-title-item {
        font-family: 'Open Sans';
        font-size: 24px;
        font-weight: 700;
        line-height: 100%;
        color: #484848;
        border-left: 4px solid #E3B7A0;
        padding: 0px 0px 0px 8px;

    }


    .coach-image img {
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        border-radius: 8px;

    }

    .coach-item {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 16px;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .datepicker-wrap {
        background-color: #F5F5F7;
        padding: 16px;
        border-radius: 8px;
        margin-top: 12px;
    }

    .book-title {

        font-family: Open Sans;
        font-size: 22px;
        font-weight: 700;
        line-height: 100%;
        color: #484848;
        border-left: 4px solid #E3B7A0;
        padding: 0px 0px 0px 8px;
    }

    .time-picker {
        margin-top: 16px;
        width: auto;
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        flex-wrap: wrap;
        gap: 12px;
        justify-items: center;

    }

    .air-datepicker {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        height: auto;
    }

    .time-slot {
        padding: 8px 18px;
        border: 1px solid #EDEDED;
        border-radius: 4px;
        cursor: pointer;
        user-select: none;
        background-color: #fff;
        font-size: 13px;
    font-weight:600;
    }

    .time-slot:hover {
        background-color: #E3B7A0;
        /* orange */
        color: white;
        border-color: #E3B7A0;
    }

    .air-datepicker-body--cells {
        display: grid !important;
        grid-template-columns: repeat(7, 1fr);
        gap: 3px;
        /* space between days */
        justify-items: center;
    }

    .air-datepicker--content {
        width: 100%;
        border: none;
        padding: 20px;
    }

    .air-datepicker-cell.-selected- {
        background-color: #E3B7A0 !important;

        color: white !important;
        border-radius: 50% !important;
    }

    /* Set height and width of each day item */
    .air-datepicker-cell.-day- {
        width: 20px;
        height: 20px;
        line-height: 40px;
        /* centers the number vertically */
        text-align: center;

        border-radius: 50%;
        /* Optional: makes it a circle */
        font-size: 14px;
        padding: 15px;
    }

    .air-datepicker-nav {
        padding: 5px 10px;
    }

    .time-slot.selected {
        background-color: #E3B7A0;
        /* orange */
        color: white;
        border-color: #E3B7A0;
    }

    .time-slot.disabled {
        background-color: #e5e7eb;
        color: #9ca3af;
        pointer-events: none;
    }

    .label {
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 12px;
    }

    .air-datepicker-time {
        border: none;
    }

    .book-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        width: 30%;
        padding: 10px 15px;
        font-weight: bold;
        color: #E3B7A0;
        background-color: transparent;
        border: 1px solid #E3B7A0;
        border-radius: 32px;
        cursor: pointer;
        position: relative;
        transition: all 0.3s ease;
        background-color: #FFF7F2;

    }

    .btn_book {
        margin-top: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .book-btn:hover {
        background-color: #e5b4a1;
        color: white;
    }

    .book-contain {
        padding: 24px;
        display: flex;
        gap: 24px;
        flex-direction: column;
        background-color: #fff;
        border-radius: 8px;
    }


    .air-datepicker.-inline- {

        background-color: #f5f5f7;
        margin-top:12px;
        width: auto;
        transform: scale(0.85);
        /* Adjust to 0.8, 0.7, etc. for smaller sizes */
        transform-origin: top left;

        /* Set your desired width */
        font-size: 12px;
        /* Smaller text for tighter UI */

    }

    .iti {
        min-width: 100%;
    }

    .choose-service {
        margin-bottom: 12px;
        font-weight: 700;
        font-size: 16px;
    }

    .select-wrap select {
    font-size : 14px ;
        font-family: 'Open Sans';
        border-radius: 4px;
        width: 100%;
        padding: 16px;
        margin-top: 12px;
    }

    .select-coach {
        appearance: none;
        /* For modern browsers */
        -webkit-appearance: none;
        -moz-appearance: none;
        padding: 10px;
        padding-right: 30px;
        font-size: 16px;

    }

    .select-wrap {
        width: 100%;
        margin-bottom: 10px;
        position: relative;
        display: inline-block;
    }

    .select-wrap::after {
        content: "▼";
        /* hoặc dùng hình ảnh background */
        position: absolute;
        right: 10px;
        top: 60%;
        transform: translateY(-50%);
        pointer-events: none;
        font-size: 10px;
    }



    .hidden {
        display: none;
    }

    .coachlist-img-item {

        border-radius: 8px;
    }

    .coach-item-row {
        margin-top: 4px;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }

    .coach-item-row img {
        width: 48px;
        aspect-ratio: 1 / 1;
        border-radius: 8px;
    }

    .coach-list {
        background-color: #fff;
        border-radius: 8px;
        display: flex;
        gap: 16px;
        flex-direction: column;
        padding: 20px;

    }

    .coach-list h2 {
        font-family: Open Sans;
        font-size: 24px;
        font-weight: 700;
        line-height: 100%;
        color: #484848;
        border-left: 4px solid #E3B7A0;
        padding: 0px 0px 0px 8px;
    }

    .related-programs-slider-items-wrap {
        padding: 10px 0px 10px 10px;
    }

    .wrap-banner {
    z-index : 6 ;
        height:100%;
        padding: 80px 0px 100px 100px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;

    }

    .slider-item {
        height: auto;
    }


    .logo_img img {
    max-height:163px;

    }


    .welcome-page {
        height: 100vh;
        display: grid;
        grid-template-columns: 45% 55%;
        gap: 0px;
        align-items: center;
        justify-content: center;
    }
    .fade {
    opacity: 1;
    transition: opacity 0.5s ease;
    }

    .fade-out {
    opacity: 0;
    }
    .slide-up {
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.5s ease;
    }

    .slide-in {
    transform: translateY(0);
    opacity: 1;
    transition: all 0.5s ease;
    }
    .wrap-banner-img {
        margin-top: 20px;
        display: flex;
        gap: 40px;
        flex-direction: row;
        align-items: center;

    }
    /* Hiệu ứng fade chung cho các phần tử */
    .fade {
    opacity: 1;
    transition: opacity 0.5s ease;
    }

    .fade-out {
    opacity: 0;
    }

    /* Chuyển background mượt */
    .fade-bg {
    transition: background-color 0.6s ease;
    }

    /* Các class background */
    .bg-wel-1 {
    background-color: #f5f5f5; /* màu nền 1 */
    }

    .bg-wel-2 {
    background-color: #e0f7fa; /* màu nền 2 */
    }

    /* Tuỳ chọn: chuyển đổi logo kích thước */
    #welcome-page-logo {
    transition: height 0.4s ease, opacity 0.4s ease;
    }

    .wrap-banner-img img {
        max-width: calc(50% - 20px);
        cursor: pointer;
        max-height: 217px;
        border-radius: 72px 0 72px 0;
        ;
    }

    .wrap-banner p {
        color: white;
    }

    .title_banner {
    font-family:Roboto;
        font-size: 48px;
        font-weight: 800;
    }
    .welcome-page-desc{
    line-height: 24px;
        font-size: 14px;
        font-weight: 600;
        font-family: 'Open Sans';
    }
    .icon_welcome {
    z-index:6 ;
        display: flex;
        align-items: center;
        justify-content: right;
        width: 100%;
        height: 100%;
    transition: transform 0.3s ease, background-color 0.3s ease;
    }
    .image-section {

    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000; /* nền đen hoặc tùy ý */
    overflow: hidden;
    }
    .arrow-top {
    position: fixed;
    top: 50px;                  /* Cách top 50px */
    left: 50%;
    transform: translateX(-50%); /* Căn giữa ngang */

    background-color: #000;
    color: #fff;
    font-size: 24px;
    padding: 12px 15px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 1000;


    transition: opacity 0.3s ease;
    }

    .arrow-top.show {


    }


    .image-section img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* ảnh đầy đủ màn hình */
    }

    .icon_welcome i {
    transition: transform 0.3s ease, color 0.3s ease;
        display: flex;
        justify-content: center;
        width: 40px;
        height: 40px;
        align-items: center;
        border-radius: 50%;
        padding: 10px;
        background: #000;
        margin-right: 100px;
        color: #fff;
    }
    #arrow-toggle:hover,
    #arrow-toggle:focus {
    color: #E3B7A0; /* ví dụ màu cam */
    transform: translateX(3px); /* di chuyển nhẹ sang phải */
    }
    .img-active {
    border: 4px solid #E3B7A0 ;
    }
    .banner-learnmore-btn {
    transition: all 0.3s ease;
        max-width: 35%;
        display: flex;
        justify-content: center;
        padding: 17px 73.5px;
        background: #FFF7F2;
        color: #E3B7A0;
        text-decoration: none;
        border: 1px solid #E3B7A0;
        border-radius: 32px;
        font-family: Open Sans;
        font-size: 16px;
        font-weight: 700;
        line-height: 100%;
        cursor: pointer;
    }
    .banner-learnmore-btn:hover {
    background-color: #fff;
    color: #000;
    border-color: #000;
    }

    .banner-learnmore-btn:hover,
    .banner-learnmore-btn:focus {
        background: #E3B7A0;
        color: #FFF7F2;
        border-color: #E3B7A0;
        transition: all 0.4s;
        text-decoration: none;
        box-shadow: 0 2px 8px rgba(227, 183, 160, 0.15);
    }




    .banner-content {
        max-width:100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    gap:24px;

    }

    .js {
        margin: 0;
    }

    .coach-search-icon {
        font-size: 17.5px;

    }

    .wp-post-image img {
        min-height: 389.66668701171875px;
        max-height: 389.66668701171875px;
    }

    /* Coaches 9 grid ---------------------------------------*/
    .coaches9-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 32px;
        padding: 32px;

        border-radius: 8px;
    }

    .coaches9-headline {
        font-family: Open Sans;
        font-size: 24px;
        font-weight: 700;
        line-height: 100%;
        color: #484848;
        border-left: 4px solid #E3B7A0;
        padding: 0px 0px 0px 8px;
    }

    .coach9-box {
        flex: 0 1 calc(33.333% - 22px);
        border-radius: 8px;
        margin-bottom: 24px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        max-width: calc(33.333% - 22px);
    }

    .coach9-box img {
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        border-radius: 8px;
    }

    .coach9-img {
        display: block;
        width: auto;
        object-fit: fill;
        border-radius: 5px;
    }

    .coach9-img-placeholder {
        width: 100%;
        height: 180px;
        background: #eee;
        border-radius: 5px;
        margin-bottom: 10px;
    }
    .payment-option-item:has(input[type="radio"]:checked) {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);

    }
    .visa-name-country-wrap span.select2-selection.select2-selection--single{
    padding: 4px !important ;
    }
    .visa-name-country-wrap .visa-name-wrap input {
    border: 1px solid #EDEDED ;
    }
    .coach9-title {
        margin: 8px 0;
        font-family: 'Open Sans';
        font-size: 18px;
        line-height: 28px;
        font-weight: 700;
        color: #484848;
        text-align: left;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        /* Giới hạn số dòng */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        /* Hiển thị dấu ... nếu vượt quá */
        white-space: normal;
        /* Cho phép wrap theo dòng (kết hợp với line-clamp) */
        max-height: 1.4em;
    }

    .coach9-sort-select {
        margin-left: 8px;
        padding: 10px 12px;
        border: 0px;
        border-radius: 4px;
        font-size: 14px;
        color: #484848;

    }

    .coaches9-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24px;
    }

    .coaches9-header .coach9-search-input {
        padding: 10px 12px;
        width: 320px;
        border-radius: 4px;
        background: #FFFFFF;
        border: 0px;
        font-family: Montserrat;
        font-size: 14px;
        line-height: 24px;
        font-weight: 500;
    }

    .coaches9-filter .sort-title {
        font-family: Montserrat;
        font-size: 14px;
        line-height: 24px;
        font-weight: 500;
    }

    .coach9-search-input::placeholder {
        color: #C3C1C1;
        opacity: 1;
    }

    .coach9-box--hidden {
        display: none;
    }

    .coaches9-filter .sort-by-section {
        display: flex;
        align-items: center;


    }

    .coach9-sort-select option {


        font-family: 'Open Sans', sans-serif;
        font-size: 16px;
    }

    .coach9-sort-select:hover option {


        font-family: 'Open Sans', sans-serif;
        font-size: 16px;
    }

    .see-more-spinner9 {
        display: inline-block;
        width: 24px;
        height: 24px;
        border: 3px solid #E3B7A0;
        border-top: 3px solid #FFF7F2;
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
        margin-left: 8px;
    }

    .see-more-spinner9--hidden {
        display: none;
    }

    .seemore-btn9 {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px 46.5px;
        background: #E3B7A0;
        color: #fff;
        text-decoration: none;
        border: none;
        border-radius: 32px;
        font-family: Open Sans;
        font-size: 14px;
        font-weight: 600;
        line-height: 24px;
        margin-bottom: 32px;
    }

    .seemore-btn9:hover {
        background: #FFF7F2;
        color: #E3B7A0;
        border-color: #E3B7A0;

        text-decoration: none;
        box-shadow: 0 2px 8px rgba(227, 183, 160, 0.15);
    }

    .coach9-headline {
        font-family: Open Sans;
        font-size: 24px;
        font-weight: 700;
        line-height: 100%;
        color: #484848;
        border-left: 4px solid #E3B7A0;
        padding: 0px 0px 0px 8px;
    }

    .grid-cloumn-coach9 {
        display: grid;
        grid-template-columns: 45% 55%;
        gap: 48px;
    }

    .btn-back-home {
        align-items: center;
    }

    .btn-back-home-wrap a {
        padding: 12px 61.5px;
        color: #E3B7A0;
        border-radius: 32px;
        font-size: 16px;
        font-weight: 700;
        background: #FFF7F2;
        border: 1px solid #E3B7A0
    }

    .btn-back-home:hover {
        background: #E3B7A0;
        color: #FFF7F2;
        border-color: #E3B7A0;
        transition: all 0.4s;
        text-decoration: none;
        box-shadow: 0 2px 8px rgba(227, 183, 160, 0.15);
    }

    .confirm-payment-wrap {
        gap: 30px;
        display: flex;
        flex-direction: column;
        border-radius: 16px;
        z-index: 999999;
        position: fixed;
        /* Đặt vị trí cố định trên viewport */
        top: 50%;
        /* Đặt mép trên của phần tử ở giữa chiều cao màn hình */
        left: 50%;
        /* Đặt mép trái của phần tử ở giữa chiều rộng màn hình */
        transform: translate(-50%, -50%);
        /* Dịch chuyển ngược lại 50% chiều rộng và chiều cao của chính nó để căn giữa hoàn hảo */

        /* Các thuộc tính khác của bạn */

        min-height: 200px;
        /* Hoặc bỏ max-height nếu nội dung có thể dài hơn */
        padding: 32px;
        border: 1px solid #E3B7A0;
        font-size: 16px;
        font-weight: 700;
        background-color: white;
        /* Thêm màu nền để modal nổi bật */

        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        /* Thêm đổ bóng để tạo hiệu ứng nổi bật */
    }

    .confirm-payment-btn-wrap {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 20px;
    }

    #confirm-payment-button {
        display: flex;
        justify-content: center;
        padding: 10px 30px;
        color: #E3B7A0;
        border-radius: 32px;
        font-size: 16px;
        font-weight: 700;
        background: #FFF7F2;
        border: 1px solid #E3B7A0;
        cursor: pointer;
    }





    @keyframes spin {
        100% {
            transform: rotate(360deg);
        }
    }

    .payment-container .StripeElement {
        border: 1px solid rgb(237, 237, 237);
        padding: 16px;
        border-radius: 4px;
    }

    @media only screen and (max-width: 1440px) {
        .time-slot {
            padding: 4px 6px;
        }

        .time-picker {
            gap: 3px;
            margin-top: 16px;
            width: auto;
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            justify-items: center;
        }
    }

    @media only screen and (max-width: 1024px) {
        .time-slot {
            padding: 1px 2px;
            border: 1px solid #EDEDED;
            border-radius: 4px;
            cursor: pointer;
            user-select: none;
            background-color: #f3f3f3;
            font-size: 13px;
        }

        .time-picker {
            margin-top: 16px;
            width: auto;
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 2px;
            justify-items: center;
        }

         .tl-breadcrumb {
            line-height: 1.25rem;
        }
    }

    .personal-information {
        margin-right: 48px !important;
    }

    .program-number {
        top: 0;
        left: 0;
        position: absolute;

        font-size: 22px;
        font-weight: 700;
        line-height: 32px;
        letter-spacing: 0%;
        vertical-align: middle;
        padding: 8px 20px;
        border-radius: 8px 0 8px 0;
        color: #fff;
        background-image: linear-gradient(#E8C6B4, #DE9E7D);
    }

    #start-date::-webkit-input-placeholder {
        color: #999;
        /* Màu xám nhạt */
        opacity: 0.6;
        /* Làm mờ */
        font-style: italic;
    }

    #start-date::-moz-placeholder {
        color: #C3C1C1;
        opacity: 0.6;
        font-style: italic;
    }

    #start-date {
        color: #484848;
        /* Màu chữ đen */


    }

    #start-date:-ms-input-placeholder {
        color: #999;
        opacity: 0.6;
        font-style: italic;
    }

    #start-date::placeholder {
        color: #484848;
        opacity: 0.6;
        font-style: italic;
    }

    .gym-banner {
        position: relative;
        width: 100%;
        display: flex;
        align-items: center;
    }


    .gym-banner-content {
        position: relative;
        z-index: 1;

        width: 100%;
        margin: 0 auto;
        padding: 0 20px;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
    }



    .gym-left {
        color: white;
        max-width: 500px;
    }

    .gym-left h2 {
        font-family: 'Open Sans';
        font-size: 35px;
        font-weight: 700;
        margin-bottom: 16px;
        color: #fff;
    }

    .gym-left p {
        font-weight: 700;
        font-size: 25px;
        margin-bottom: 48px;
    }

    .gym-left button {
        background: #FFF7F2;
        color: #E3B7A0;
        font-weight: 700;
        padding: 17px 120px;
        border-radius: 9999px;
        border: none;
        cursor: pointer;
        font-size: 16px;
    }

    .gym-left button:hover {
        background: #E3B7A0;
        color: white;
    }

    .gym-right {
        display: flex;
        flex-direction: column;

        gap: 32px;
    }



    .gym-feature {
        display: flex;

        white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
        background: #e6e6e6;
        border-radius: 9999px;

        margin-bottom: 12px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }

    .gym-feature span {
        font-size: 20px;
        background-color: #fff;
        border-radius: 50%;
    }

    .gym-feature p {
        margin: 0;
        color: #000;
        font-weight: 700;
    }

    .icon-include-highlight {
        height: 100%;
        font-size: 20px;
        padding: 18px;
        height: 100%;
    }

    .content-include-highlight-program {
        padding: 16px 38px 16px 12px;
        font-family: Open Sans;
        font-weight: 700;
        font-size: 18px;
        line-height: 28px;
        letter-spacing: 0%;
        vertical-align: middle;
        width: 100%;
        height: 100%;

    }
    .slider-items {
    display: flex;
    transition: transform 0.4s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
    }

    .slider-item {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
    box-sizing: border-box;
    padding: 0 11px;
    }


    /* Mobile: 1 cột */
    @media (max-width: 480px) {
        .menu-sv-mobile{
            display: none !important ;
        }
        .menu-sv-mobile.active {
            position: relative;
            display: block !important;
    }
        .menu-en-mobile{
            display: none !important ;
        }
        .menu-en-mobile .active {
            position: relative;
            display: block !important;
    }
    .coaches-grid {
        flex-direction:column ;

    }
        .coach-box {
            max-width:unset;
        }
        .coaches-header{
            display: flex ;
            flex-direction:column;
            gap:20px ;
            align-items:flex-start;
        }
        .coaches-filter {
            display:flex;
            gap:5px;
            flex-direction:row;
        }
        .sort-by-section{

        }
    .book-btn {
    width : auto;
    }
        .coaches-header .coach-search-input {
            width:100% ;
        }
            .programs-header {
                flex-direction:column;
                align-items :unset ;
                gap:20px;
            }
        .program-search-wrap input {
            width:100%;
        }
        .slider-item {
        flex: 0 0 100%;
        max-width: 100%;
        }
        .programs-grid{
            grid-template-columns:1fr;
        }
    .grid-cloumn-coach {
        grid-template-columns :100% ;
    }
    .gym-right{
            gap: 20px ;
        }
        .gym-banner-content{
            flex-direction : column ;
            gap: 32px ;
        }
        .programinfo-payment {
        flex-direction : column ;
    }
    .program-image img {
        width : 100% ;
        }
    .program-header-a {
    flex-direction : column ;
    }
    .related-program-box {
            flex: 0 0 100%;
            max-width: 48%;
        }
    .containerr {
    min-width : 100%;
    max-width : 100%;
    }
    .coach9-box {
        max-width : 100% ;
        }
    .coaches9-grid {
    flex-direction: column;
    gap:10px;
    }
    .coaches9-header {
        flex-direction: column;
        align-items : unset ;
    gap : 10px ;
    }
    .coaches9-header .coach9-search-input {
    width : 80%;
    }
    .related-programs-slider-items-wrap{
    max-width: 100%;
    }

    .related-programs{
    padding: 0 ;
    }
    }
    @media (max-width: 768px) {
        .menu-sv-mobile{
            display: none !important ;
        }
        .menu-sv-mobile.active {
            position: relative;
            display: block !important;
    }
        .menu-en-mobile{
            display: none !important ;
        }
        .menu-en-mobile.active {
            position: relative;
            display: block !important;
    }
    .programs-header {
                flex-direction:column;
                align-items :unset ;
                gap:20px;
            }

    .gym-feature {
    width: 400px ;
    }
    .gym-left {
    width: 400px ;
    }
    .gym-left button {
    padding : 17px 135px ;
    }
    .grid-cloumn-coach{
    gap : 10px ;
    }
    .gym-banner-content{
    flex-direction:column ;
    gap: 20px ;
    }
    .bg-banner-program {
    height : auto ;
    }
    .coaches9-header .coach9-search-input {
    width : 80%;
    }
    .coaches9-header {
        flex-direction: column;
        align-items : unset ;
    gap : 10px ;
    }
    .coaches9-grid {
    flex-direction:column;
    gap:50px ;
    }
    .coach9-box {
    max-width:100%;
    }
    .programs-grid {
    grid-template-columns: 1fr;
    }
    .book-btn {
    width : auto;
    }
    .see-more-wrap9 {
    margin-top:100px !important;
    }
    .time-picker {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    }
    .air-datepicker-cell.-day-{
    width: unset;
    height: unset;
        line-height: unset;
        text-align: center;
        border-radius: 50%;
        font-size: unset;
        padding: unset;
    }

    .gym-banner-content {
    gap: 20px;
    }
    }
    @media (min-width: 500px) and (max-width: 750px) {
        .coaches9-grid {
            flex-direction: column;
            gap: 250px;
        }
    .view-detail {
    margin-top:100px ;
    }
    }
    @media  (max-width: 400px) {
    .bg-banner-program {
    padding : 20px ;
    }
    }
    @media  (max-width: 1440px) {
    .wrap-banner {
    padding: 30px ;
    }
    }
    @media (min-width: 1024px) and (max-width: 1170px) {
    .time-picker{
        grid-template-columns:repeat(6, 1fr)
    }
    }
    #booking-calendar {
        background-color: #F5F5F7;
    }

    #booking-calendar .btn-time-slot{
        font-family: 'Open Sans';
        font-weight: 600;
        font-size: 13px;
        line-height: 100%;
        color: #2F2F2F;
    }

    #booking-calendar .fc-daygrid-day{
        padding: 8px !important;
        border: none !important;
    }

    #booking-calendar .fc-daygrid-event {
        justify-content: center;
        border: 1px solid #EDEDED;
        padding: 8px;
        background: #FFFFFF;
        border-radius: 4px;
        cursor: pointer;
    }

    #booking-calendar .fc-daygrid-event:hover {
        background: #E3B7A0 !important;
    }

    #booking-calendar .fc-daygrid-event:hover .btn-time-slot {
        color: #ffffff !important;
    }

    #booking-calendar .fc-daygrid-event-harness {
        padding-bottom: 12px;
    }

    #booking-calendar .fc-col-header-cell {
        border: none !important;
    }

    #booking-calendar .fc-col-header-cell-cushion {
        color: #2F2F2F;
    }

    #booking-calendar .fc-day-past {
        background-color: #f0f0f0;
        opacity: 0.5;
        pointer-events: none;
    }
    #cb_add_slot_form span.select2.select2-container.select2-container--default {
    width: 10em !important ;
    }
    .image-wrap img {
        width: 100%;
        display: block;
        transition: opacity 0.4s ease, transform 0.4s ease;
    }

    .img-before {
        position: relative; /* giữ chiều cao cho .image-wrap */
        z-index: 1;
    }

    .img-after {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%; /* thêm dòng này */
        object-fit: cover; /* thêm dòng này */
        opacity: 0;
        z-index: 2;
    }
    .swiper.result-slider .swiper-wrapper {
        transition-timing-function: linear !important; /* Bắt buộc cho cuộn đều */
        will-change: transform;                        /* GPU acceleration */
    }

    .swiper.result-slider .swiper-slide {
        will-change: transform;
        backface-visibility: hidden; /* Giảm flicker trên mobile */
    }

    /* Labels */
    .label {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    z-index: 3;
    transition: opacity 0.3s ease;
    }

    .label.before {
    background: #000;
    color: #fff;
    }

    .label.after {
    background: #f5c542;
    color: #000;
    opacity: 0;
    }

    /* Hover effects */
    /* Trạng thái mặc định - show before */
    .result-card .img-before {
        opacity: 1;
        transform: scale(1);
        transition: opacity 0.6s ease, transform 0.6s ease;
    }

    .result-card .img-after {
        opacity: 0;
        transform: scale(1.03);
        transition: opacity 0.6s ease, transform 0.6s ease;
    }

    .result-card .label.before {
        opacity: 1;
        transition: opacity 0.6s ease;
    }

    .result-card .label.after {
        opacity: 0;
        transition: opacity 0.6s ease;
    }

    /* Trạng thái show-after (auto sau 3s hoặc hover) */
    .result-card.show-after .img-before {
        opacity: 0 !important;
        transform: scale(1.03);
    }

    .result-card.show-after .img-after {
        opacity: 1 !important;
        transform: scale(1);
    }

    .result-card.show-after .label.before {
        opacity: 0;
    }

    .result-card.show-after .label.after {
        opacity: 1;
    }
    .result-card .img-before {
        opacity: 1;
        transition: opacity 0.6s ease, transform 0.6s ease;
    }

    /* Ảnh after mặc định ẩn */
    .result-card .img-after {
        opacity: 0;
        transition: opacity 0.6s ease, transform 0.6s ease;
    }

    /* Khi show-after: đổi chỗ */
    .result-card.show-after .img-before {
        opacity: 0;
    }

    .result-card.show-after .img-after {
        opacity: 1;
    }
    /* ========== Swiper layout ========== */
    .swiper.result-slider {
        padding-bottom: 36px; /* chừa chỗ cho pagination */
    }

    .swiper.result-slider .swiper-wrapper {


        align-items: stretch;
        padding-top:30px;
    }

    .swiper.result-slider .swiper-slide {
        height: auto;
        display: flex;

    }
    .swiper.result-slider .swiper-slide > * {
        height: 100%;
    }
    /* Card fill height để các slide đều nhau */
    .swiper.result-slider .swiper-slide > .result-card {
        height: 100%;
    }

    /* ========== Result Card ========== */
    .result-card {
        background: #171B22;
        border-radius: 16px;
        overflow: hidden;
        border: 1px solid #252B35;
        border-top: 0;

        transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    .result-card:hover {
        transform: translateY(-4px);

    }

    /* ========== Image area + hover swap ========== */
    .result-card .image-wrap {
        position: relative;
        overflow: hidden;
        aspect-ratio: 4 / 5; /* giữ tỉ lệ đẹp, không phụ thuộc ảnh */
        background: #0b0f14;
    }

    /* Images */
    .result-card .image-wrap img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: opacity 0.45s ease, transform 0.45s ease;
    }

    .result-card .image-wrap .img-before {
        opacity: 1;
    }

    .result-card .image-wrap .img-after {
        opacity: 0;
    }

    /* Hover swap */
    .result-card:hover .image-wrap .img-before {
        opacity: 0;
        transform: scale(1.03);
    }

    .result-card:hover .image-wrap .img-after {
        opacity: 1;
        transform: scale(1.03);
    }

    /* Optional: overlay nhẹ để chữ nổi */
    .result-card .image-wrap::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
                to bottom,
                rgba(0,0,0,0.10),
                rgba(0,0,0,0.50)
        );
        pointer-events: none;
    }

    /* ========== Labels Before/After ========== */
    .result-card .label {
        position: absolute;
        top: 14px;
        left: 14px;
        padding: 6px 12px;
        border-radius: 999px;
        font-size: 14px;
        font-weight: 400;
        font-family: 'Poppins',sans-serif ;
        letter-spacing: 0.4px;
        z-index: 3;
        transition: opacity 0.25s ease, transform 0.25s ease;
        user-select: none;
    }

    .result-card .label.before {
        background: rgba(0,0,0,0.85);
        color: #fff;
        opacity: 1;
    }

    .result-card .label.after {
        background: #000;
        color: #fff;
        opacity: 0;
    }

    /* Hover đổi label */
    .result-card:hover .label.before {
        opacity: 0;
        transform: translateY(-2px);
    }

    .result-card:hover .label.after {
        opacity: 1;
        transform: translateY(-2px);
    }

    /* ========== Content ========== */
    .result-card .card-content {
        padding: 18px 18px 20px;
    }

    .result-card .title-row {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 6px;
    }

    .result-card .title-row h3 {
        margin: 0;
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        font-size: 28px;
        line-height: 100%;

        color: #fff;
    }

    .result-card .age {
        font-family: 'Poppins', sans-serif;
        font-weight:400;
        line-height:28px;
        font-size: 18px;
        color: #8B929D;
        white-space: nowrap;
    }

    .result-card .subtitle {
        margin: 0 0 12px;
        color:  #F0C777;
        font-family: 'Poppins', sans-serif;
        font-weight: 600;
        font-size: 20px;
        line-height: 32px;
    }

    .result-card .desc {
        margin: 0;
        font-family: 'Poppins', sans-serif;
        font-weight: 400;
        font-size: 18px;
        line-height: 28px;
        color: #8B929D
    }

    /* ========== Swiper Pagination ========== */
    /* Container pagination */
    .swiper.result-slider .swiper-pagination {
        bottom: 0 !important;
        text-align: center;
    }

    /* Dot mặc định */
    .swiper.result-slider .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
        background: #484848;
        border-radius: 2px; /* vuông nhẹ, nếu muốn vuông cứng → 0 */
        opacity: 1;
        margin: 0 6px !important;
        transition: background 0.3s ease, transform 0.3s ease;
    }

    /* Dot active */
    .swiper.result-slider .swiper-pagination-bullet-active {
        background: #F0C777;
        transform: scale(1.15);
    }


    /* ========== Responsive tweaks ========== */
    @media (max-width: 1024px) {
        .result-card .card-content { padding: 16px; }
        .result-card .title-row h3 { font-size: 17px; }
        .menu-sv-mobile{
            display: none !important ;
        }
        .menu-sv-mobile.active {
            position: relative;
            display: block !important;
    }
        .menu-en-mobile{
            display: none !important ;
        }
        .menu-en-mobile.active {
            position: relative;
            display: block !important;
    }
    }

    @media (max-width: 767px) {
        .swiper.result-slider { padding-bottom: 30px; }
        .result-card { border-radius: 16px; }
        .result-card .label { top: 12px; left: 12px; padding: 5px 10px; font-size: 11px; }
        .result-card .title-row h3 { font-size: 16px; }
        .result-card .desc { font-size: 13.5px; }
    }
    .testimonial-slider { padding: 18px 5px 44px; }

    .t-card{
        background:#0A0D10;
        border:1px solid rgba(255,255,255,.08);
        border-radius:16px;
        padding:40px;

        height:100%;
    }
    .testimonial-slider .swiper-wrapper {
        align-items: stretch;
    }

    .testimonial-slider .swiper-slide {
        height: auto; /* để wrapper stretch quyết định */
        display: flex; /* giúp card bên trong fill */
    }

    .testimonial-slider .swiper-slide > * {
        height: 100%;
    }
    .t-head{ display:flex; gap:12px; align-items:center; margin-bottom:32px; }
    .t-avatar{ width:100px; height:100px; border-radius:999px; object-fit:cover; border:2px solid #F0C777; }
    .t-name{ color:#F0C777; font-family: 'Poppins', sans-serif;
        font-weight: 600;
        font-size: 24px;
        line-height: 34px;
        
    }
    .t-sub{
        color:#8B929D;
        font-family: 'Poppins', sans-serif;
        font-weight: 400;
        font-size: 20px;
        line-height: 32px;

    }
    .t-quote{
        font-family: 'Poppins', sans-serif;
        font-weight: 400;
        font-size: 18px;
        line-height: 32px;
        
        color: #fff ;
    }

    /* Pagination dot vuông */
    .testimonial-slider .swiper-pagination-bullet{
        width:10px; height:10px;
        border-radius:0;
        background:#484848;
        opacity:1;
        margin:0 6px !important;
    }
    .step-coaching-slider .swiper-pagination-bullet{
        width:10px; height:10px;
        border-radius:0;
        background:#484848;
        opacity:1;
        margin:0 6px !important;
    }
    .testimonial-slider .swiper-pagination-bullet-active{
        background:#F0C777;
    }
    .step-coaching-slider .swiper-pagination-bullet-active{
        background:#F0C777;
    }
    /* Mũi tên */
    /* RESET arrow mặc định */
    .navigation-testimonials-slide .swiper-button-prev,
    .navigation-testimonials-slide .swiper-button-next,
    .navigation-testimonials-slide .swiper-pagination{
        position: static !important;
        inset: auto !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
    }

    /* Pagination không chiếm 100% */
    .navigation-testimonials-slide .swiper-pagination{
        width: auto !important;
        display: flex;
        align-items: center;
        justify-content: center;

    }
    .navigation-testimonials-slide {
        margin-top: 72px;
    }
    /* Nút prev/next gọn lại */
    .navigation-testimonials-slide .swiper-button-prev,
    .navigation-testimonials-slide .swiper-button-next{
        width: 44px;
        height: 44px;
        margin: 0 !important; /* Swiper hay set margin-top */
        color: #fff;
    }

    .navigation-testimonials-slide .swiper-button-prev::after,
    .navigation-testimonials-slide .swiper-button-next::after{
        font-size: 15px;
        font-weight: 700;
    }
    /* Wrapper flex */
    .navigation-testimonials-slide{
        display: flex;
        align-items: center;
        justify-content: center; /* pagination ở giữa */
        gap: 24px;
    }

    /* ÉP Swiper controls về layout flex (không absolute) */
    .navigation-testimonials-slide .swiper-button-prev,
    .navigation-testimonials-slide .swiper-button-next,
    .navigation-testimonials-slide .swiper-pagination{
        position: static !important;
        inset: auto !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
    }

    /* Pagination không chiếm 100% */
    .navigation-testimonials-slide .swiper-pagination{
        width: auto !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Nút prev/next gọn lại */
    .navigation-testimonials-slide .swiper-button-prev,
    .navigation-testimonials-slide .swiper-button-next{
        width: 44px;
        height: 44px;
        margin: 0 !important; /* Swiper hay set margin-top */
        color: #fff;
    }

    .navigation-testimonials-slide .swiper-button-prev::after,
    .navigation-testimonials-slide .swiper-button-next::after{
        font-size: 15px;
        font-weight: 700;
    }
    /* ❌ XÓA mọi hiệu ứng xanh từ theme */
    .swiper.testimonial-slider .swiper-button-prev *,
    .swiper.testimonial-slider .swiper-button-next *{
        filter: none !important;
    }
    .swiper.step-coaching-slider  .swiper-button-prev *,
    .swiper.step-coaching-slider  .swiper-button-next *{
        filter: none !important;
    }

    /* 1) Reset trên chính button */
    .swiper.testimonial-slider .swiper-button-prev,
    .swiper.testimonial-slider .swiper-button-next{
        filter: none !important;
        -webkit-filter: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
        outline: none !important;

        background: transparent !important;
        border: 0 !important;

        color: #fff !important; /* màu icon mặc định */
    }
    .swiper.step-coaching-slider .swiper-button-prev,
    .swiper.step-coaching-slider .swiper-button-next{
        filter: none !important;
        -webkit-filter: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
        outline: none !important;

        background: transparent !important;
        border: 0 !important;

        color: #fff !important; /* màu icon mặc định */
    }
    /* 2) Reset trên pseudo-element vẽ icon của Swiper */
    .swiper.testimonial-slider .swiper-button-prev::after,
    .swiper.testimonial-slider .swiper-button-next::after{
        color: #fff !important;
        filter: none !important;
        -webkit-filter: none !important;
        text-shadow: none !important;
    }
    .swiper.step-coaching-slider .swiper-button-prev::after,
    .swiper.step-coaching-slider .swiper-button-next::after{
        color: #fff !important;
        filter: none !important;
        -webkit-filter: none !important;
        text-shadow: none !important;
    }

    /* 3) Nếu theme dùng SVG/mask/background-image để tạo icon */
    .swiper.testimonial-slider .swiper-button-prev,
    .swiper.testimonial-slider .swiper-button-next{
        background-image: none !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }
    .swiper.step-coaching-slider .swiper-button-prev,
    .swiper.step-coaching-slider .swiper-button-next{
        background-image: none !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }
    /* 4) Nếu bên trong có SVG (một số theme inject) */
    .swiper.testimonial-slider .swiper-button-prev svg,
    .swiper.testimonial-slider .swiper-button-next svg{
        filter: none !important;
    }

    .swiper.testimonial-slider .swiper-button-prev svg * ,
    .swiper.testimonial-slider .swiper-button-next svg * {
        fill: #fff !important;
        stroke: #fff !important;
    }
    .swiper.step-coaching-slider .swiper-button-prev svg,
    .swiper.step-coaching-slider .swiper-button-next svg{
        filter: none !important;
    }

    .swiper.step-coaching-slider .swiper-button-prev svg * ,
    .swiper.step-coaching-slider .swiper-button-next svg * {
        fill: #fff !important;
        stroke: #fff !important;
    }
    .dcf-wrap{
        font-family: 'Poppins', sans-serif;
        max-width: 760px;
        margin: 0 auto;
        padding: 56px;              /* container có 56 */
        border-radius: 28px;
        background: radial-gradient(1200px 500px at 50% -10%, rgba(255,255,255,0.06), rgba(255,255,255,0.00)),
        linear-gradient(180deg, rgba(10,14,19,0.96), rgba(10,14,19,0.92));
        box-shadow: 0 30px 90px rgba(0,0,0,0.55);
        border: 1px solid rgba(255,255,255,0.06);
    }

    .dcf-form{
        display: flex;
        flex-direction: column;
        gap: 40px;                  /* gap giữa các group wrap field input */
    }

    .dcf-group{
        display: flex;
        flex-direction: column;
        gap: 14px;
        align-items: flex-start;
    }
    .dcf-group input[type=text]:focus {
        color: #fff ;
    }
    .dcf-label{
        font-size: 18px;            /* Label font-size */
        color: #fff;                /* Label color */
        font-weight: 400;           /* Label weight */
        line-height: 1.2;
        letter-spacing: 0.2px;
    }

    .dcf-input,
    .dcf-textarea{

        width: 100%;
        padding: 16px;
        border-radius: 14px;
        border: 1px solid #252B35;
        background: #0A0D10 ;
        color: #fff;
        outline: none;
        font-size: 16px;
        transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }
    input.dcf-input {
        border: 1px solid #252B35 ;
        padding: 16px;color:#fff ;
        background: #0A0D10;
    }
    .dcf-textarea{
        min-height: 150px;
        resize: vertical;
        padding-top: 16px;
        box-shadow: none;
    }

    .dcf-input::placeholder,
    .dcf-textarea::placeholder{
        font-size: 16px;            /* placeholder font-size */
        color: #8B929D;             /* placeholder color */
    }

    .dcf-input:focus,
    .dcf-textarea:focus{
        border-color: rgba(246, 208, 102, 0.65);
        box-shadow: 0 0 0 4px rgba(246, 208, 102, 0.14);
        background: rgba(0,0,0,0.22);
        color: #fff ;
    }

    .dcf-btn{
        width: 100%;
        padding: 18px 20px;
        border: 0;
        border-radius: 14px;
        cursor: pointer;
        font-family: 'Poppins', sans-serif;
        font-weight: 800;
        text-transform: uppercase;
        color: #000;
        font-size:16px;
        background: linear-gradient(90deg, #F4C86A 0%, #F7D98A 50%, #F4C86A 100%);
        box-shadow: 0 18px 40px rgba(244, 200, 106, 0.18);
        transition: transform .15s ease, filter .2s ease;
    }

    .dcf-btn:hover{ filter: brightness(1.02); transform: translateY(-1px); }
    .dcf-btn:active{ transform: translateY(0px); }

    /* Mobile */
    @media (max-width: 767px){
        .dcf-wrap{ padding: 28px; border-radius: 22px; }
        .dcf-form{ gap: 28px; }
    }
    .step-coaching-slider .swiper-wrapper{
        height: 100% ;
    }
    .step-coaching-slider .swiper-slide {
        height: auto;
        display: flex;
        flex-shrink: 0;
    }
    .item-container {
        display: flex ;
        flex-direction:column;
        gap: 56px;
    }
    .item-wrapper {
        display: flex ;
        flex-direction:column;
        gap: 12px;
        padding-left:72px ;
        border-left: 4px solid #8B929D ;
    }
    .item-wrapper p{
        font-family: 'Poppins',sans-serif;
        font-weight: 400;
        font-size: 20px;
        line-height: 32px;
        color: #A6A6A6;
    }

    .title-item-wrap {
        display: flex ;
        flex-direction:row;
        align-items:center;
        gap: 15px;
    }
    .title-item-wrap .title_item {
        font-family: 'Poppins',sans-serif;
        font-weight: 600;
        font-size: 28px;
        line-height: 100%;
        color:#A6A6A6;
    }
    .item-wrapper:hover p{
        color: #fff ;
    }
    #training-item .after {
        display: none ;
    }
    #training-item:hover .before{
        display: none ;
    }
    #training-item:hover .after{
        display: block ;
    }
    #training-item:hover  .title-item-wrap .title_item {
        color:#F0C777 ;
    }
    #training-item:hover {
        border-color: #F0C777 ;
    }
    #training-item .after {
        display: none ;
    }
    #training-item:hover .before{
        display: none ;
    }
    #training-item:hover .after{
        display: block ;
    }
    #training-item:hover  .title-item-wrap .title_item {
        color:#F0C777 ;
    }
    #training-item:hover {
        border-color: #F0C777 ;
    }
    /*item2*/
    #nutrition-item .after {
        display: none ;
    }
    #nutrition-item:hover .before{
        display: none ;
    }
    #nutrition-item:hover .after{
        display: block ;
    }
    #nutrition-item:hover  .title-item-wrap .title_item {
        color:#66E095 ;
    }
    #nutrition-item:hover {
        border-color: #66E095 ;
    }
    /*item3*/

    #mindset-item .after {
        display: none ;
    }
    #mindset-item:hover .before{
        display: none ;
    }
    #mindset-item:hover .after{
        display: block ;
    }
    #mindset-item:hover  .title-item-wrap .title_item {
        color:#EC008C ;
    }
    #mindset-item:hover {
        border-color: #EC008C ;
    }

    /*philosophy*/
    .philosophy-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 48px ;
    }
    .philosophy-item {

        background-color: #171B22;
        padding: 40px;
        border: 1px solid transparent;
        border-radius: 16px;
        background-image:  url('https://teamlidberg.techlead.vn/wp-content/uploads/2026/01/Vector-10-2.png');
        background-repeat: no-repeat;
        background-position: right 0 top 0;
        transition: box-shadow 0.3s ease;
    }
    .philosophy-item:hover {
        box-shadow: 0px 4px 32px 0px rgba(240, 199, 119, 0.25);
        border: 1px solid #F0C777 ;
    }
    .philosophy-item:hover hr {
        transform: scaleX(1);
    }
    .image-philosophy-item {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center ;

    }
    .title-philosophy-item {
        font-family: 'Poppins',sans-serif;
        font-weight: 700;
        font-size: 24px;
        line-height: 100%;
        color: #F0C777;
        margin-top: 24px;
    }
    .desc-philosophy-item {
        font-family: 'Poppins',sans-serif;
        font-weight: 400;
        font-size: 18px;
        line-height: 32px;
        color:#fff ;
    }
    .philosophy-item hr {
        transform: scaleX(0.2);
        transform-origin: left;
        transition: transform 0.3s ease;
        border: none ;
        color: #F0C877;
        height: 6px;
        margin: 24px 0;
        background: #F0C777;
    }
    .collaborative-container {
        display: flex;
        flex-direction: column ;
        gap:73px ;
        justify-content: flex-start;
        margin: 0 20%
    }
    .collaborative-item {
        display: flex;
        flex-direction: row ;
        gap:40px ;
        align-items:center;
    }
    .collaborative-item-content {
        display: flex;
        flex-direction: column ;
        gap: 16px;
    }
    .collaborative-item-content h3 {
        font-family: 'Poppins',sans-serif;
        font-weight: 600;
        font-size: 32px;
        line-height: 100%;
        color: #fff ;
    }
    .collaborative-item-content p {
        font-family: 'Poppins',sans-serif;
        font-weight: 400;
        font-size: 20px;
        line-height: 34px;
        color: #fff ;
    }
    .title-divider {
        display: flex;
        align-items: center;
        gap: 32px;
        justify-content: center ;
    }
    .title-divider .line {
        flex: 1;
        max-width: 200px;
        height: 6px;
        border: none;
        background: #F0C777;
        transition: transform 0.35s ease;
    }
    .title-divider-left {
        display: flex;
        align-items: center;
        gap: 32px;
    }
    .title-divider-left .line {
        flex: 1;
        max-width: 200px;
        height: 6px;
        border: none;
        background: #F0C777;
        transition: transform 0.35s ease;
    }
    .title-text {
        color: #fff;
        font-family: 'Poppins',sans-serif;
        font-weight: 400;
        font-size: 24px;
        line-height: 34px;
        text-align: center;
        text-transform: uppercase;
    }
    .font-weight-400 {
        font-weight:400;
    }
    .column-divider:hover .devider-active {
        width: 100% ;
    }
    #main-header {
        transition: transform 0.3s ease, background 0.3s ease;
    }

    #main-header.scrolled {
        background: #121212 !important;
    }

    .dsm-content-timeline-item-wrapper.dsm-pointer-active 
    .dsm-content-timeline-content-wrapper {
        border-color: #f0c777;
    }
    .dsm_content_timeline 
    .dsm_content_timeline_child_0.dsm-pointer-active 
    .dsm-content-timeline-content-wrapper 
    .dsm-title {
        color: #f0c777 !important ;
    }
    .dsm_content_timeline 
    .dsm_content_timeline_child_1.dsm-pointer-active 
    .dsm-content-timeline-content-wrapper 
    .dsm-title {
        color: #f0c777 !important;
    }
    .dsm_content_timeline 
    .dsm_content_timeline_child_2.dsm-pointer-active 
    .dsm-content-timeline-content-wrapper 
    .dsm-title {
        color: #f0c777 !important;
    }
    .dsm_content_timeline 
    .dsm_content_timeline_child_3.dsm-pointer-active 
    .dsm-content-timeline-content-wrapper 
    .dsm-title {
        color: #f0c777 !important;
    }
    .dsm_content_timeline 
    .dsm_content_timeline_child_4.dsm-pointer-active 
    .dsm-content-timeline-content-wrapper 
    .dsm-title {
        color: #f0c777 !important;
    }
    .dsm-image {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .vh-services {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 860px;
    }

    .vh-service {
    display: flex;
    
        flex-direction: column;
    gap: 24px;
    padding: 32px;
    border-radius: 16px;
    border: 1px solid #8B929D;
    background: transparent;
    transition: 0.18s ease;
    outline: none;
    }
    .vh-header {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 16px;
    }
    .vh-service:hover {
    transform: translateY(-1px);
    }

    .vh-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    margin-top: 2px;
    overflow: hidden;
    }

    .vh-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    }

    .vh-title {
    font-family: Poppins;
    font-weight: 600;
    font-size: 24px;
    line-height: 100%;
    margin: 0;
    color: #A6A6A6
    }

    .vh-desc {
    font-family: Poppins;
    font-weight: 400;
    color: #8B929D ;
    font-size: 20px;
    line-height: 32px;
    margin: 0;
    }

    .vh-service.is-active {
    border-color: #f0c777;
    box-shadow: 0px 4px 25px 0px rgba(240, 199, 119, 0.2);
    background: #1E1E1E ;	
    }

    .vh-service.is-active .vh-title {
    color: #f0c777;
    }
    .vh-service.is-active .vh-desc {
    color: #fff;
    }

    .vh-service.is-dim {
    opacity: 0.55;
    }
    .row-gap24 {
        display: flex;
        flex-direction: row ;
        gap: 24px;
    }
    .dsm-current-url-active {
        border-bottom: 3px solid #f0c777;
    }
    .dsm-menu-text-wrapper .dsm-menu-text {
        padding: 10px 12px;
    }
    .dsm-mega-menu-item.dsm-mega-menu-item-root .dsm-mega-menu-link.dsm-current-url-active .dsm-menu-text-wrapper .dsm-menu-text {
        color : #f0c777 !important;
    }
    .et_pb_row_0_tb_footer .dsm-mega-menu-container.dsm-mega-menu-main-wrapper  .dsm-mega-menu-item.dsm-mega-menu-item-root .dsm-mega-menu-link.dsm-current-url-active {
        border: none !important ;
    }
    .dsm-content-timeline-items-wrapper.dsm-left .dsm-pointer-wrapper {
        padding: 15px !important;
    }
    .tc-menu-toggle,
    .tc-menu-close {
        color: #fff;
        font-size: 26px;
        cursor: pointer;
    }
    .tc-menu {
    display:none;
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .tc-menu-close {
        display: none;
    }
    .tc-mobile-menu.active {
    transform: translateX(0);
    }
    .tc-mobile-menu {
        width: 100% ;
    }
    /* Header */
    .tc-menu-header {
        width: 100%;
        padding: 0 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    }
    .tc-menu {
    flex: 1;
    padding: 0 24px;
    }

    .tc-menu-link,
    .tc-menu-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 0;
    border-bottom: 1px solid #D9D9D9;
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    cursor: pointer;
    }

    /* Arrow */
    .tc-menu-title .arrow {
    width: 8px;
    height: 8px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
    transition: .3s;
    }
    .tc-header-actions a{ 
        display: none; 
        font-family: Poppins;
    font-weight: 700;
    font-size: 14px;
    line-height: 24px;
    color: #000;
        padding: 12px 19px;
        border-radius: 4px;
        margin-right: 24px;
    background: linear-gradient(
    90deg,
    #F0C877 0%,
    #F9DC76 50%,
    #FDCB6A 100%
    );
    }

    /* Submenu */
    .tc-submenu {
        z-index: 999999999999999 !important;
    display: none;
    padding: 10px 0 20px;
    }
    .tc-submenu a {
    display: flex;
        flex-direction: row ;
        gap: 12px;
        font-size: 16px;
        align-items:center;
    padding: 12px 16px;
    color: #fff;
    opacity: .8;
    border-radius: 8px;
    }

    .tc-submenu a.active {
    background: #3a3a3a;
    color: #FFC703;
    }
    .tc-submenu a.active img {
    filter: brightness(0) saturate(100%)
            invert(77%)
            sepia(92%)
            saturate(749%)
            hue-rotate(356deg)
            brightness(102%)
            contrast(102%);
    }
    .tc-menu.active {
    display:block;
    }
    /* Open state */
    .has-sub.open .tc-submenu {
    display: block;
    }
    .has-sub.open .arrow {
    transform: rotate(-135deg);
    }

    /* Footer */
    .tc-menu-footer {
        width: 35%;
        margin: 0 auto ;
        display: flex ;
    display: none;
        margin-top: 64px ;
        margin-bottom: 80px;
        justify-content:center;
    gap: 16px;
    }
    .tc-menu-footer.active {
    display: flex;
    }
    .tc-menu-footer .btn {
    flex: 1;
    padding: 14px;
    border-radius: 4px;
    text-align: center;
    font-weight: 600;
    }
    .tc-menu-footer .started-now  {
    background: linear-gradient(
    90deg,
    #F0C877 0%,
    #F9DC76 50%,
    #FDCB6A 100%
    );
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 16px;
    color: #000;
        font-size: 20px;
        font-weight:800;
        font-family: 'Poppins',sans-serif;
        padding: 20px ;
        
    } 
    /* Wrapper */
    .swiper-image {
    width: 100%;
    height: 100%;
    overflow: hidden;
    }

    /* Slide */
    .swiper-image .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    }

    /* Image */
    .swiper-image .swiper-slide img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    }
    .step-card {
        padding: 16px ;
        background: #0A0D10 ;
        border-radius: 16px;
            border: 1px solid #f0c777 ;
    }
    .step-card-title {
        color: #F0C777 ;
        font-family: 'Poppins',sans-serif ;
        font-size: 16px ;
        font-weight: 600 ;
        line-height: 26px;
    }
    .step-card-quote {
        font-family: Poppins;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: #fff ;
    }
    .tc-menu-link.active {
        color: #F0C777 ;
    }
    .tc-header-actions {
        display: flex;
        gap:24px;
        flex-direction:row;
    /* 	align-items:center ; */
    }
    .dsm-mega-menu-search-box {
        display: none;
        cursor: none;
    }
    /* CSS cho tablet */
    @media (min-width: 681px) and (max-width: 1024px) {
        .lang-dropdown.open a { margin: 0px ; display: flex !important; flex-direction: row ; justify-content: space-between; }
        .tc-menu-header {
            padding-top: 15px !important;
        }
        #shorten-menu {
            padding-top: 0px !important;
        }
        .tc-logo-link img {
            width: 200px !important ;
        }
        .dsm_content_timeline_0 .dsm-left .dsm-content-timeline-tree, .dsm_content_timeline_0 .dsm-left .dsm-pointer-wrapper {
            left: 5% !important ;
        }
        .form-step {
            width: 90% ;
        }
        body.logged-in.admin-bar .et_pb_section_0_tb_header {
            top: 0 !important;
        }
        .collaborative-container {
            margin: 0 ;
        }
        .grid-2column {
            display: grid ;
            grid-template-columns: 1fr 1fr;
        }
        .row-tablet-line {
            display: flex;
            flex-direction: row ;
        }
        .title-divider .title-text {
            font-size:18px;
            font-weight:400;line-height:100%;
        }
        .philosophy-container {
            grid-template-columns: 1fr ;
        }
        .display-row {
            display: flex;
            flex-direction:column;
        }
        .philosophy-container {
            grid-template-columns: 1fr;
        }
        .vh-title {
            font-size: 24px !important;
            line-height: 32px !important;
        }
        .vh-desc {
            font-size: 20px !important;
            line-height: 100% !important;
        }
        .vh-service {
            gap: 16px;
        }
    }
    /* CSS cho mobile */
    @media (max-width: 680px) {
        .lang-dropdown.open a {
            margin: 0px ;
            display: flex !important;
            flex-direction: row ;
            justify-content: space-between;
        }
        .menu-sv-mobile{
            display: none !important ;
        }
        .menu-sv-mobile.active {
            position: relative;
            display: block !important;
    }
        .menu-en-mobile{
            display: none !important ;
        }
        .menu-en-mobile.active {
            position: relative;
            display: block !important;
    }
        .tc-menu-header {
            padding-top: 10px !important;
        }
        #shorten-menu {
            padding-top: 0px !important;
        }
        .dcf-wrap {
            padding:24px !important ;
        }
        #testimonial-mobile {
            display: flex ;
        }
        .navigation-testimonials-slide {
            margin-top: 32px !important;
        }
        .philosophy-item {
            padding: 24px;
            background-size: 72px ;
        }
        .image-philosophy-item img {
            height: 48px !important;
            max-width: 60px !important ;
        }
        .title-philosophy-item {
            font-size:20px !important;
        }
        .desc-philosophy-item {
            font-size: 14px !important ;
            line-height: 24px !important ;
        }
        .title-divider {
            gap: 24px;
        }
        body.logged-in.admin-bar .et_pb_section_0_tb_header {
            top: 0 !important;
        }
        .title-row  h3{
            font-size: 18px !important;
        }
        .title-row .age {
            font-size: 14px !important;
        }
        .card-content .subtitle {
            font-size: 14px!important;
        }
        .desc {
            font-size:13px !important;
        }
        .vh-service {
            gap: 16px;
        }
        .vh-title {
            font-size: 16px !important;
            line-height: 26px !important;
        }
        .vh-desc {
            font-size: 14px !important;
            line-height: 24px !important;
        }
        .collaborative-item img {
            width: 56px ;
            height: 56px;
        }
        .collaborative-item {
            gap: 24px !important ;
        }
        .collaborative-item-content {
            gap: 8px !important ;
        }
        .collaborative-container {
            margin: 0 ;
        }
        .title-collaborative-item {
            padding: 0px !important ;
            font-size: 16px !important;
            line-height: 26px !important;
        }
        .description-collaborative-item {
            font-size: 14px !important;
            line-height:24px !important;
        }
        .item-wrapper p {
        font-size: 14px ;
        line-height: 24px; 
    }
        .item-wrapper {
            padding-left: 24px ;
        }
    .title_item {
        font-size: 18px !important;
        line-height: 100% !important ;
    }
        .step-coaching-slider .navigation-testimonials-slide{
            margin-top: 32px;
            
        }
        .t-name {
                    display: flex;
            text-align:center;
            justify-content: center;
            font-size: 16px ;
            line-height: 26px;
        }
        .t-sub {
            display: flex;
            justify-content: center;
            text-align:center;
            font-size: 16px ;
            line-height: 26px;
        }
        .t-quote {
            display: flex;
            justify-content: center;
            text-align:center;
            font-size: 14px ;
            line-height: 24px;
        }
        .t-head {
            flex-direction: column;
            justify-content:center ;
            align-items: center ;
            margin-bottom: 16px;
        }
        .t-meta {
            display: flex ;
            flex-direction: column;
            justify-content: center ;
        }
        .swiper-slide {
            width: 100% !important ;
        }
        .form-step {
        width: 100% ;
        }
        .tc-menu-footer {
            width: 100%; 
        }
        .tc-header-actions a {
            display: none ;
        }
        .title-divider .title-text {
            font-size: 14px;
            line-height:22px;
            flex: 0 0 50% ;
        }
        .title-divider .line.left {
            flex: 0 0 15%;
        }
        .title-divider .line.right {
            flex: 0 0 15%;
        }
        .form-group {
            flex-direction: column ;
            gap: 16px ;
        }
        .progress-bar {
            width: 100% ;
            height: 8px;
        }
        .step-label h2{
            font-size:18px;
        }
        .footer-menu {
            gap: 16px ;
        }
        .step-wrapper {
            grid-template-columns: 1fr ;
        }
        .step-column-first, .step-column-second {
        width: 100% ;
        }
        .step-column {
            flex-direction: column ;
            padding: 0px ;
        }
        .input-wrapper {
            margin: 0px ;
        }
        .philosophy-container {
            grid-template-columns: 1fr;
        }
    }
    @media (min-width:980px) and (max-width: 1440px){ 
        .lang-dropdown.open a { margin: 0px ; display: flex !important; flex-direction: row ; justify-content: space-between; }
        .dsm-mega-menu-container .dsm-root-menu .dsm-mega-menu-link .dsm-menu-text-wrapper .dsm-menu-text {
            margin-right: 0px !important ;
        }
        #shorten-menu {
            display: block !important;
        }
        /* #menu-desktop {
            display: none !important;
        } */
        #row-tranform-column {
            display: flex;
            
            gap: 20px;
        }
        #row-tranform-column  .et_pb_column{
            width: 100%;
        }
        .vh-desc {
            line-height: 150%!important;
        }
        #row-tranform-column .et_pb_image_wrap  {
            width: 100% ;
        }
        #row-tranform-column img {
            width: 100%;
        }
    }

    .custom-lang-switcher {
            position: relative;
            display: inline-block;
    }

        .lang-current {
            
            display: flex;
            align-items: center;
            gap: 8px;
            font-family:'Inter', sans-serif ;
            background: transparent;
            border: none;
            color: #fff;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            padding: 6px 0;
        }

        .lang-dropdown {
            display: none;
            position: absolute;
            top: calc(100% + 10px);
            right: 0;
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.15);
            min-width: 160px;
            padding: 8px;
            overflow: hidden;
            z-index: 9999;
            
            
    
        }


        .lang-dropdown.open {
            display: block;
        }

        .lang-option {
            display: flex ;
            font-family: 'Poppins',sans-serif !important;
            align-items: center !important;
            justify-content: space-between !important;
            padding: 10px !important;
            color: #111 !important;
            background: transparent !important;
            font-size: 14px !important;
            font-weight: 500 !important;
            text-decoration: none !important;
            transition: background 0.15s !important;
        }

        .lang-option:hover {
            background: #f5f5f5 !important;
            border-radius: 6px !important;
        }

        .lang-option.active {
            border-radius: 6px !important;
            background: #0A0D10 !important;
            color: #fff !important;
        }

        .lang-option.active svg {
            stroke: #fff;
        }
    @media(min-width:1024px) and (max-width:1300px) {
        #row-wioc {
            display: flex;
            flex-direction:column;
            gap: 30px;
        }
    }

    /* ===== TC-767 — Programs landing page (hero + 3-feature + CTA + listing) ===== */

    :is(.post-1094, .post-1447) .entry-content .et_builder_inner_content .et_pb_section_0 {
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.70) 100%), url('/wp-content/uploads/2026/08/image-21.jpg') lightgray 50% / cover no-repeat;
        padding: 11.25rem 0 0 0;
    }

    .tl-hero,
    .tl-cta {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }

    .tl-hero {
        position: relative;
        padding: 6.25rem 3.75rem 3.75rem;
        overflow: hidden;
    }

    .tl-hero__label {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    .tl-hero__label span {
        color: var(--Neutral-White, #FFF);
        text-align: center;
        font-feature-settings: 'liga' off, 'clig' off;
        font-family: Poppins;
        font-size: 1.5rem;
        font-style: normal;
        font-weight: 400;
        line-height: 2.125rem; /* 141.667% */
        text-transform: uppercase;
    }

    .tl-hero__label::before
    {
        content: "";
        flex: 0 0 12.5rem;
        height: 0.25rem;
        background: #f0c777;
    }

    .tl-hero__title {
        font-family: Poppins, sans-serif;
        font-weight: 900;
        color: #fff;
        text-transform: uppercase;
        margin: 0 0 1.5rem;
        font-size: 5.75rem;
        font-style: normal;
        line-height: 6.25rem;
    }

    .tl-hero__title span {
        color: #f0c777;
    }

    .tl-hero__desc {
        color: #fff;
        font-family: Poppins, sans-serif;
        max-width:56.875rem;
        margin-bottom: 2rem;
        font-size: 1.125rem;
        font-style: normal;
        font-weight: 300;
        line-height: 1.875rem;
    }
    .tl-hero__start {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 2rem;
    }

    .tl-hero__cta img,
    .tl-cta__btn img {
        width: 1.75rem;
        height: 1.75rem;
    }

    .tl-hero__cta {
        display: inline-flex;
        align-items: center;
        gap: 0.625rem;
        background: linear-gradient(180deg, #f0c877 0%, #f9dc76 51%, #fdcb6a 100%);
        color: #000;
        font-family: Poppins, sans-serif;
        font-weight: 800;
        text-transform: uppercase;
        text-decoration: none;
        padding: 1.125rem 2rem;
        border-radius: 0.25rem;
        height: 5.125rem;
        font-size: 1.5rem;
        line-height: 2.125rem; /* 141.667% */
    }

    .tl-hero__cta-text {
        white-space: nowrap;
    }

    .tl-hero__cta:hover {
        opacity: .88;
        color: #000;
        text-decoration: none;
    }

    .tl-features {
        display: flex;
        gap: 1.5rem;
        flex-wrap: wrap;
    }

    .tl-feature {
        position: relative;
        flex: 1;
        min-width: 13.75rem;
        text-align: center;
    }

    .tl-feature:not(:first-child) {
        padding-left: 1.5rem;
    }

    .tl-feature:not(:first-child)::before {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 1px;
        height: 60%; 
        background: rgba(240, 199, 119, 0.5);
    }

    :is(.post-1094, .post-1447) .program-search-wrap {
        background: #FFFFFF26;
        border-radius: 25px;
    }

    /* Base (không @media) — PHẢI đứng TRƯỚC mọi @media override bên dưới. @media không tăng
       specificity, cùng chọn .tl-feature__icon thì rule đứng SAU trong file thắng bất kể @media
       hay không — để base ở dưới sẽ đè mất toàn bộ responsive override, đúng bug đã gặp. */
    .tl-feature__icon {
        position: relative;
        width: 6rem;
        height: 6.25rem;
        margin: 0 auto 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: url('icons/tl-feature-hexagon.svg') center / contain no-repeat;
    }

    .tl-feature__icon img {
        position: relative;
        width: 2.5rem;
        height: 2.5rem;
        object-fit: contain;
    }

    /* Base (không @media) — chuyển lên đây (trước mọi @media) vì lý do tương tự .tl-feature__icon
       ở trên: đứng sau các @media override cùng specificity sẽ đè mất font-size responsive. */
    .tl-feature p {
        color: #fff;
        font-family: Poppins, sans-serif;
        font-weight: 700;
        font-size: 1.125rem;
        margin: 0;
    }

    /* Responsive: Mobile <768px / Tablet 768-1024px / Desktop >1024px */
    @media (min-width : 1025px) and (max-width: 1550px) {
        .tl-hero {
            padding: 2.25rem 1.5rem 1.75rem;
        }
        .tl-hero__title {
            font-size: 3.5rem;
            line-height: 4rem;
        }

        .tl-hero__cta {
            height: auto;
            font-size: 1.25rem;
            line-height: 1.75rem;
            padding: 0.75rem;
            height: 3.25rem;
        }

        .tl-feature {
            min-width: 200px;
            width: 210px;
        }

        .tl-feature p {
            font-size: 0.85rem;
        }

        .tl-feature__icon {
            width: 4rem;
            height: 4.25rem;
        }

        .tl-hero__start {
            gap: 1rem;
        }
    }
    @media (max-width: 1024px) {
        :is(.post-1094, .post-1447) .entry-content .et_builder_inner_content .et_pb_section_0 {
         padding: 1.25rem 0 0 0;
        }
        .tl-hero {
            padding: 2.25rem 1.5rem 1.75rem;
        }
        
        .tl-hero__label span {
            font-size: 1rem;
        }

        .tl-hero__label::before {
            flex: 0 0 3.75rem;
        }
        .tl-hero__title {
            font-size: 2.5rem;
        }
        
        .tl-hero__cta {
            height: auto;
            font-size: 1.25rem;
            line-height: 1.75rem;
            padding: 1rem 1.5rem;
        }

        .tl-hero__title {
            line-height: 3rem;
        }

        .tl-feature {
            width: 150px;
            min-width: 150px;
        }

        .tl-feature p {
            font-size: 0.7rem;
        }

        .tl-hero__desc {
            font-size: 1rem;
            line-height: 1.5rem;
        }

        .tl-hero__cta {
            font-size: 1rem;
            padding: 0.8rem;
            height: 2.9rem;
            line-height: 1rem;
        }
        .tl-feature__icon {
            width: 4.5rem;
            height: 4.6875rem;
        }

        .tl-feature__icon img {
            width: 2rem;
            height: 2rem;
        }
         .tl-feature:not(:first-child) {
        padding-left: 1rem;
    }
        
    }

    @media (max-width: 767px) {
        .tl-hero__start {
            flex-direction: column;
            align-items: flex-start;
        }

        .tl-features {
            width: 100%;
            gap: 1rem;
        }

        /* .tl-feature {
            min-width: 100%;
        } */

        .tl-feature:not(:first-child) {
            padding-left: 0;
        }

        .tl-feature:not(:first-child)::before {
            display: none;
        }

        .tl-feature__icon {
            width: 3.5rem;
            height: 3.6875rem;
            margin-bottom: 0.75rem;
        }

        .tl-feature__icon img {
            width: 1.75rem;
            height: 1.75rem;
        }

        .tl-hero__label span {
            font-size: 0.875rem; /* 14px, đồng bộ với các chỗ 1.5rem gốc khác */
        }

        .tl-hero__label::before {
            flex: 0 0 3.75rem;
        }

        .tl-hero__desc {
            font-size: 1rem;
            line-height: 1.5rem;
        }

        .tl-hero__cta {
            font-size: 0.875rem; 
        }
    }

    .tl-cta {
        position: relative;
        min-height: 51.5rem; /* 824px theo Figma — trước đây không set nên co lại 586px theo nội dung+padding */
        padding: 6.25rem 1.5rem;
        background: #000;
        text-align: center;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }

    .tl-cta__bg {
        position: absolute;
        inset: 0;
        background-size: cover;
        background-position: center;
        opacity: .45;
    }

    .tl-cta__label {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        margin-bottom: 1rem;
        position: relative;
    }

    .tl-cta__label span {
        color: #fff;
        font-family: Poppins, sans-serif;
        font-size: 1rem;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .tl-cta__label::before,
    .tl-cta__label::after {
        content: "";
        width: 3.75rem;
        height: 0.0625rem;
        background: #f0c777;
    }

    .tl-cta__title {
        font-family: Poppins, sans-serif;
        font-weight: 900;
        font-size: 4.5rem;
        line-height: 1.05;
        color: #fff;
        text-transform: uppercase;
        margin: 0 0 1.5rem;
        position: relative;
    }

    .tl-cta__title span {
        color: #f0c777;
    }

    .tl-cta__desc {
        color: #fff;
        font-family: Poppins, sans-serif;
        font-size: 1.125rem;
        line-height: 1.6;
        max-width: 40rem;
        margin: 0 auto 2rem;
        position: relative;
    }

    .tl-cta__btn {
        display: inline-flex;
        align-items: center;
        gap: 0.625rem;
        position: relative;
        background: linear-gradient(180deg, #f0c877 0%, #f9dc76 51%, #fdcb6a 100%);
        color: #000;
        font-family: Poppins, sans-serif;
        font-weight: 800;
        font-size: 1.125rem;
        text-transform: uppercase;
        text-decoration: none;
        padding: 1.25rem 2.25rem;
        border-radius: 0.25rem;
    }

    .tl-cta__btn:hover {
        opacity: .88;
        color: #000;
        text-decoration: none;
    }

    :is(.post-1094, .post-1447) .tl-listing-fix {
        /* padding: 2.5rem 3.75rem; */
        /* background: #121212; */
        padding: 0;
    }

    :is(.post-1094, .post-1447) .tl-listing-fix .programs-header {
        color: #fff;
        margin-bottom: 1.5rem;
    }

    :is(.post-1094, .post-1447) .tl-listing-fix .programs-header .title_page {
        font-size: 2rem;
        font-weight: 800;
        color: #fff;
    }

    :is(.post-1094, .post-1447) .tl-listing-fix .program-search-input {
        background: #0a0d10;
        border: 0.0625rem solid #252b35;
        color: #fff;
        border-radius: 1.5rem;
        padding: 0.625rem 1rem;
    }

    /* .post-1094 .tl-listing-fix .search-program-sort-select {
        background: #0a0d10;
        color: #fff;
        border: 0.0625rem solid #252b35;
        border-radius: 0.5rem;
    } */

    :is(.post-1094, .post-1447) .tl-listing-fix .top-programs-slider h3,
    :is(.post-1094, .post-1447) .tl-listing-fix .program-category-section h4 {
        color: #fff;
        font-family: Poppins, sans-serif;
        font-weight: 800;
    }

    :is(.post-1094, .post-1447) .tl-listing-fix .program-box {
        background: #0a0d10;
        border: 0.0625rem solid #252b35;
        border-radius: 1rem;
        padding: 1.5rem;
        color: #fff;
    }

    :is(.post-1094, .post-1447) .tl-listing-fix .program-box img {
        border-radius: 0.75rem;
        margin-bottom: 1rem;
    }

    :is(.post-1094, .post-1447) .tl-listing-fix .program-title {
        font-family: Poppins, sans-serif;
        font-weight: 700;
        font-size: 1.5rem;
        color: #f0c777;
        margin-bottom: 0.75rem;
    }

    :is(.post-1094, .post-1447) .tl-listing-fix .program-duration {
        color: #fff;
        font-size: 1.125rem;
        margin-bottom: 0.25rem;
    }

    :is(.post-1094, .post-1447) .tl-listing-fix .program-cost {
        color: #fff;
        font-weight: 700;
        font-size: 1.125rem;
        margin-bottom: 1rem;
    }

    :is(.post-1094, .post-1447) .tl-listing-fix .btnViewDetail {
        display: inline-block;
        width: 100%;
        text-align: center;
        background: linear-gradient(180deg, #f0c877 0%, #f9dc76 51%, #fdcb6a 100%);
        color: #000;
        font-family: Poppins, sans-serif;
        font-weight: 700;
        border-radius: 0.25rem;
        padding: 0.875rem;
        text-decoration: none;
        text-transform: uppercase;
    }

    :is(.post-1094, .post-1447) .tl-listing-fix .btnViewDetail:hover {
        opacity: 0.85;
        text-decoration: none;
        color: #000;
    }

    :is(.post-1094, .post-1447) .tl-listing-fix .programs-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
        gap: 1.5rem;
        margin-top: 1rem;
    }

    :is(.post-1094, .post-1447) .tl-listing-fix .seemore-btn {
        background: transparent;
        border: 0.0625rem solid #f0c777;
        color: #f0c777;
        padding: 0.625rem 1.5rem;
        border-radius: 0.25rem;
        margin-top: 1.5rem;
        cursor: pointer;
    }

    :is(.post-1094, .post-1447) .tl-listing-fix .seemore-btn:hover {
        background: #f0c777;
        color: #000;
    }

    :is(.post-1094, .post-1447) .tl-listing-fix .top-programs-slider .program-number {
        position: absolute;
        top: 0.75rem;
        left: 0.75rem;
        background: #f0c777;
        color: #000;
        width: 1.75rem;
        height: 1.75rem;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        z-index: 1;
    }

    /* .tl-cta__* responsive — tỷ lệ giảm lấy theo đúng bản "Start Training" đang chạy ở Home
    (128px desktop → 100px tablet ≈78% → 48px phone ≈37.5%), áp lên kích thước gốc riêng
    của khối CTA trang Programs (4.5rem, đúng theo Figma của trang này, khác Home) để vừa
    nhất quán tỷ lệ responsive dùng chung, vừa giữ đúng size đã chốt riêng cho trang. */
    @media (max-width: 1024px) {
        .tl-cta {
            min-height: 40rem;
            padding: 4.5rem 1.5rem;
        }
        .tl-cta__title {
            font-size: 3.5rem;
        }
        .tl-cta__btn {
            font-size: 0.9375rem;
        }
    }

    @media (max-width: 767px) {
        .tl-cta {
            min-height: auto; /* để nội dung tự quyết định chiều cao, tránh khoảng trắng thừa khi chữ đã co nhỏ */
            padding: 3rem 1.25rem;
        }
        .tl-cta__title {
            font-size: 1.6875rem;
        }
        .tl-cta__desc {
            font-size: 0.6875rem;
        }
        .tl-cta__btn {
            font-size: 0.75rem;
            padding: 1rem 1.5rem;
        }
        .tl-cta__label span {
            font-size: 0.75rem;
        }
    }

    /* Header trong suốt, đè lên hero — CHỈ áp dụng riêng trang Programs (page-id-1060), không đổi header ở Home/trang khác */
    .page-id-1060 #page-container {
        padding-top: 0 !important;
    }

    .page-id-1060 .et-l--header,
    .page-id-1060 .et-l--header #main-header {
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
    }

    /* Site đã có sẵn cơ chế JS (custom.js: initHeaderScroll) tự thêm class .scrolled vào #main-header khi cuộn > 1.25rem,
    kèm rule #main-header.scrolled{background:#121212!important} — rule trong suốt ở trên có specificity cao hơn nên
    đè mất hiệu ứng đó. Trả lại đúng hành vi gốc (transparent lúc đầu, #121212 khi cuộn) cho riêng trang Programs. */
    .page-id-1060 #main-header.scrolled {
        background: #121212 !important;
        background-color: #121212 !important;
    }

    /* ===== TC-767 — listing restructure (search box / split card / photo card / section heading) ===== */
    :is(.post-1094, .post-1447) .entry-content .et_builder_inner_content .et_pb_section_1 {
        background: #000;
        display: flex;
        justify-content: center;
        padding: 1.5rem;
    }

    :is(.post-1094, .post-1447) .entry-content .et_builder_inner_content .et_pb_section_1 .et_pb_row_1 {
        width: 100vw;
        margin: 0;
    }

    :is(.post-1094, .post-1447) .entry-content .et_builder_inner_content .et_pb_section_1 .et_pb_row_1 .et_pb_column_1 {
        width: 100vw;
    }

    :is(.post-1094, .post-1447) .entry-content .et_builder_inner_content .et_pb_section_1 .et_pb_row_1 {
        width: 100vw;
    }

    :is(.post-1094, .post-1447) .entry-content .et_builder_inner_content 
    .et_pb_section_1 .et_pb_row_1 .et_pb_text_1 .et_pb_text_inner{
        display: flex;
        justify-content: center;
    }

    /* Top 10 Must-Try  */
    :is(.post-1094, .post-1447) .entry-content .et_builder_inner_content .et_pb_section_2  {
        background: #121212;
        padding: 0;
    }

    :is(.post-1094, .post-1447) .entry-content .et_builder_inner_content .et_pb_section_2 .et_pb_row_2 {
        width: 100%;
        max-width: none;
        padding: 0;
    }

    :is(.post-1094, .post-1447) .entry-content .et_builder_inner_content .et_pb_section_2 .et_pb_column_4_4 .tl-listing-fix {
        padding: 0;
    }

    :is(.post-1094, .post-1447) .entry-content .et_builder_inner_content 
    .et_pb_section_2 .et_pb_row_1 .et_pb_text_1 .et_pb_text_inner{
        display: flex;
        justify-content: center;
    }

    :is(.post-1094, .post-1447) .search-programs-wrap,
    :is(.post-1094, .post-1447) .program-category-section {
        padding: 2.5rem 3.75rem;
        /* background: #121212; */
    }

    :is(.post-1094, .post-1447) .search-programs-wrap {
        padding: 2.5rem 3.75rem;
        background: #000;
    }

    :is(.post-1094, .post-1447) .program-category-section {
        padding: 2.5rem 3.75rem;
        background: #121212;
    }


    :is(.post-1094, .post-1447) .tl-programs-search-box {
        max-width: 90vw;
        width: 81.4375rem;
    /*     margin: 3.125rem; */
        padding: 2rem;
        background: transparent;
        border: 0.125rem solid #f0c777;
        border-radius: 1.5rem;
        box-shadow: 0 0.25rem 2rem 0 rgba(240, 199, 119, 0.25);
        background-image: url(https://teamlidberg.joosdigital.com/wp-content/uploads/2026/01/Frame-97761.png);
    }

    :is(.post-1094, .post-1447) .tl-programs-search-box__title {
        color: #fff;
        font-family: Poppins, sans-serif;
        font-weight: 800;
        margin-bottom: 1.25rem;
        color: #FFF;
        font-size: 2rem;
        line-height: 2.3125rem;
        text-transform: capitalize;
    }

    :is(.post-1094, .post-1447) .program-search-icon i {
        font-size: 1.4063rem;
    }

    :is(.post-1094, .post-1447) .tl-programs-search-box__row {
        display: flex;
        gap: 1rem;
        align-items: center;
    }

    :is(.post-1094, .post-1447) .tl-programs-search-box .program-search-input {
        width: 100%;
        background: rgba(255, 255, 255, 0.08);
        border: 0.0625rem solid #fff;
        color: #fff;
        border-radius: 1.875rem;
        padding: 0.875rem 3.5rem 0.875rem 2.5rem; /* padding-right đủ chỗ tránh chữ dài đè lên icon search (right:30px) */
        height: 5rem;
        font-size: 1.25rem;
        text-overflow: ellipsis;
    }

    :is(.post-1094, .post-1447) .tl-programs-search-box .program-search-input::placeholder  {
        color: #8B929D;
        /* text-align: center; */
        font-family: Poppins;
        font-size: 1.25rem;
        font-style: normal;
        font-weight: 500;
        line-height: 2.5rem; /* 200% */
    }

    :is(.post-1094, .post-1447) .tl-programs-search-box .search-program-sort-select {
        background: #343022;
        color: #fff;
        border: 0.0625rem solid #fff;
        border-radius: 1.875rem;
        padding: 0.875rem 1.25rem;
        height: 5rem;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        cursor: pointer;
        text-align: left;
        font-family: Poppins;
        font-size: 1.25rem;
        font-weight: 500;
        line-height: 2.5rem; 
        width: 9.0625rem;
        /* background: rgba(249, 220, 118, 0.15); */
        background: #343022;
        backdrop-filter: blur(0.6375rem);
    }

    :is(.post-1094, .post-1447) .tl-programs-search-box .program-sort-wrap:after {
        content: "\f078";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        font-size: 0.75rem;
        color: #fff;
    }

    :is(.post-1094, .post-1447) .tl-section-heading {
        text-align: center;
        margin-bottom: 2rem;
        padding-top: 2rem;
    }

    :is(.post-1094, .post-1447) .tl-section-heading h3,
    :is(.post-1094, .post-1447) .tl-section-heading h4 {
        color: #fff;
        font-family: Poppins, sans-serif;
        font-weight: 800;
        font-size: 2.5rem;
        text-transform: uppercase;
        margin: 0;
    }

    :is(.post-1094, .post-1447) .tl-section-heading span {
        color: #f0c777;
    }

    :is(.post-1094, .post-1447) .tl-section-heading__line {
        width: 6.25rem;
        height: 0.25rem;
        background: #f0c777;
        margin: 1rem auto 0;
        border-radius: 0.125rem;
    }

    /* Split card (ảnh khối trên + nội dung khối dưới) — Top10 + category kiểu A */
    :is(.post-1094, .post-1447) .tl-split-card {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    :is(.post-1094, .post-1447) .tl-split-card__img {
        position: relative;
        border-radius: 1rem 1rem 0 0;
        overflow: hidden;
        background: #0a0d10;
    }

    :is(.post-1094, .post-1447) .tl-split-card__img img {
        width: 100%;
        aspect-ratio: 583 / 388;
        object-fit: cover;
        display: block;
    }

    :is(.post-1094, .post-1447) .tl-split-card__img .program-number {
        position: absolute;
        top: 0.75rem;
        left: 0.75rem;
        background: #f0c777;
        color: #000;
        width: 1.75rem;
        height: 1.75rem;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        z-index: 1;
    }

    :is(.post-1094, .post-1447) .tl-split-card__body {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        background: #0a0d10;
        border: 0.0625rem solid #252b35;
        border-top: none;
        border-radius: 0 0 1rem 1rem;
        padding: 2.5rem;
    }

    :is(.post-1094, .post-1447) .tl-split-card .program-title {
        font-family: Poppins, sans-serif;
        font-weight: 700;
        font-size: 1.5rem;
        color: #f0c777;
        margin: 0;
    }

    :is(.post-1094, .post-1447) .tl-split-card__divider {
        width: 100%;
        height: 0.125rem;
        background: #f0c777;
        margin: 0;
    }

    :is(.post-1094, .post-1447) .tl-split-card .program-duration,
    :is(.post-1094, .post-1447) .tl-split-card .program-cost {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        color: #fff;
        font-size: 1.125rem;
        line-height: 1.75rem;
        margin: 0;
    }

    :is(.post-1094, .post-1447) .tl-split-card .program-duration i,
    :is(.post-1094, .post-1447) .tl-split-card .program-cost i {
        color: #f0c777;
        width: 1.25rem;
        text-align: center;
    }

    :is(.post-1094, .post-1447) .tl-split-card .btnViewDetail {
        margin-top: auto;
        align-self: center;
        display: inline-block;
        width: 10.75rem;
        text-align: center;
        background: linear-gradient(90deg, #f0c877 0%, #f9dc76 50%, #fdcb6a 100%);
        color: #000;
        font-family: Poppins, sans-serif;
        font-weight: 700;
        border-radius: 0.25rem;
        padding: 0.875rem;
        text-decoration: none;
        text-transform: uppercase;
    }

    :is(.post-1094, .post-1447) .tl-split-card .btnViewDetail:hover {
        opacity: 0.85;
        color: #000;
        text-decoration: none;
    }

    /* Grid chung cho Top10 slider + bento (kiểu A) */
    :is(.post-1094, .post-1447) .slider-items {
        display: flex;
        gap: 1.5rem;
    }

    :is(.post-1094, .post-1447) .slider-item {
        flex: 0 0 auto;
        box-sizing: border-box;
    }

    :is(.post-1094, .post-1447) .tl-bento-grid--extra {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
        gap: 1.5rem;
        margin-top: 1rem;
    }

    /* Kết quả search/sort/load-more thật (query DB qua AJAX) — dùng chung layout grid
    với .tl-bento-grid--extra vì luôn render đồng nhất 1 kiểu card (split hoặc photo) */
    :is(.post-1094, .post-1447) .tl-ajax-results {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
        margin-top: 1rem;
    }

    :is(.post-1094, .post-1447) .tl-ajax-results .tl-grid-item {
        min-width: 0;
    }

    :is(.post-1094, .post-1447) .tl-ajax-results.tl-hcard-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.25rem;
    }

    /* Photo-grid (kiểu B, VD Build Muscles Programs): đúng 2 cột cố định như Figma, không phải auto-fill */
    :is(.post-1094, .post-1447) .tl-photo-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
        margin-top: 1rem;
    }

    :is(.post-1094, .post-1447) .tl-photo-grid .tl-grid-item {
        min-width: 0;
    }

    /* Grid riêng cho "Weight Loss Program" (kiểu hcard) — gap 36px đúng Figma node 167:5273 */
    :is(.post-1094, .post-1447) .tl-photo-grid.tl-hcard-grid {
        gap: 2.25rem;
    }

    @media (max-width: 767px) {
        :is(.post-1094, .post-1447) .tl-photo-grid {
            grid-template-columns: 1fr;
        }
    }

    /* Bento (kiểu A): 1 card lớn bên trái + 2 card phụ xếp dọc bên phải, đúng bố cục Figma */
    :is(.post-1094, .post-1447) .tl-bento-grid {
        display: flex;
        gap: 1.5rem;
        margin-top: 1rem;
        align-items: stretch;
        flex-wrap: wrap;
    }

    :is(.post-1094, .post-1447) .tl-bento-grid__main {
        flex: 1 1 23.75rem;
    }

    :is(.post-1094, .post-1447) .tl-bento-grid__side {
        flex: 1 1 30rem;
        display: flex;
        flex-direction: column;
    }

    :is(.post-1094, .post-1447) .tl-bento-grid__side .tl-grid-item:first-child {
        border-bottom: 0.0625rem dashed rgba(255, 255, 255, 0.25);
    }

    /* Dải trang trí gold bên phải hàng bento — đúng Figma (chiếm chỗ riêng cuối hàng, không phải overlay) */
    :is(.post-1094, .post-1447) .tl-bento-decor {
        flex: 0 0 7.25rem;
        align-self: stretch;
        min-height: 16.25rem;
        background: linear-gradient(90deg, #f0c877 0%, #f9dc76 50%, #fdcb6a 100%);
        border-radius: 1.875rem;
    }

    @media (max-width: 1024px) {
        :is(.post-1094, .post-1447) .tl-bento-decor {
            display: none;
        }
    }

    :is(.post-1094, .post-1447) .tl-bento-grid__side .tl-grid-item {
        flex: 1;
        display: flex;
    }

    /* Side card (ảnh trái/chữ phải) — 2 card phụ bên phải trong bento */
    :is(.post-1094, .post-1447) .tl-side-card {
        display: flex;
        width: 100%;
        background: #0a0d10;
    }

    :is(.post-1094, .post-1447) .tl-side-card__img {
        flex: 0 0 45%;
        overflow: hidden;
    }

    :is(.post-1094, .post-1447) .tl-side-card__img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    :is(.post-1094, .post-1447) .tl-side-card__body {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 1.5rem;
        padding: 2.5rem;
    }

    :is(.post-1094, .post-1447) .tl-side-card .program-title {
        font-family: Poppins, sans-serif;
        font-weight: 700;
        font-size: 1.5rem;
        color: #f0c777;
        margin: 0;
    }

    :is(.post-1094, .post-1447) .tl-side-card .program-duration,
    :is(.post-1094, .post-1447) .tl-side-card .program-cost {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        color: #fff;
        font-size: 1.125rem;
        line-height: 1.75rem;
        margin: 0;
    }

    :is(.post-1094, .post-1447) .tl-side-card .program-duration i,
    :is(.post-1094, .post-1447) .tl-side-card .program-cost i {
        color: #f0c777;
        width: 1.25rem;
        text-align: center;
    }

    :is(.post-1094, .post-1447) .tl-side-card .btnViewDetail {
        align-self: flex-start;
        display: inline-block;
        width: 10.75rem;
        text-align: center;
        background: linear-gradient(90deg, #f0c877 0%, #f9dc76 50%, #fdcb6a 100%);
        color: #000;
        font-family: Poppins, sans-serif;
        font-weight: 700;
        border-radius: 0.25rem;
        padding: 0.875rem;
        text-decoration: none;
        text-transform: uppercase;
    }

    :is(.post-1094, .post-1447) .tl-side-card .btnViewDetail:hover {
        opacity: 0.85;
        color: #000;
        text-decoration: none;
    }

    /* Photo card (ảnh nền full + chữ đè, gradient tối) — category "Build muscles" (giữ nguyên) */
    :is(.post-1094, .post-1447) .tl-photo-card {
        position: relative;
        display: block;
        width: 100%;
        aspect-ratio: 804 / 501;
        border-radius: 1rem;
        background-size: cover;
        background-position: center;
        text-decoration: none;
        overflow: hidden;
    }

    :is(.post-1094, .post-1447) .tl-photo-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0) 60%);
    }

    :is(.post-1094, .post-1447) .tl-photo-card__body {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 2.5rem;
    }

    :is(.post-1094, .post-1447) .tl-photo-card .program-title {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #fff;
        font-family: Poppins, sans-serif;
        font-weight: 700;
        font-size: 1.5rem;
        margin: 0 0 0.625rem;
    }

    :is(.post-1094, .post-1447) .tl-photo-card__meta {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
    }

    :is(.post-1094, .post-1447) .tl-photo-card__meta span {
        color: #f0c777;
        font-size: 1.5rem;
    }

    /* Hcard (ảnh trái + panel tối bên phải) — CHỈ riêng category "Weight Loss Program", theo Figma node 167:5273 (2026-08-10) */
    :is(.post-1094, .post-1447) .tl-hcard {
        display: flex;
        align-items: stretch;
        min-height: 18.75rem;
    }

    :is(.post-1094, .post-1447) .tl-hcard__img {
        display: block;
        flex: 1 0 0;
        min-width: 0;
        max-height: 21.9375rem;
        overflow: hidden;
        border-radius: 1rem 0 0 1rem;
        background-color: #0a0d10;
    }

    :is(.post-1094, .post-1447) .tl-hcard__img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
    }

    :is(.post-1094, .post-1447) .tl-hcard__body {
        flex: 1 0 0;
        min-width: 0;
        max-height: 21.9375rem;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 0.75rem;
        padding: 0 2.5rem;
        background: #252b35;
        border-radius: 0 1rem 0 0;
    }

    :is(.post-1094, .post-1447) .tl-hcard .program-title {
        display: block;
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #f0c777;
        font-family: Poppins, sans-serif;
        font-weight: 700;
        font-size: 1.5rem;
        line-height: 100%;
        letter-spacing: 0%;
        text-align: left;
        margin: 0;
    }

    :is(.post-1094, .post-1447) .tl-hcard .program-duration,
    :is(.post-1094, .post-1447) .tl-hcard .program-cost {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        color: #fff;
        font-family: Poppins, sans-serif;
        font-weight: 400;
        font-size: 1.125rem;
        line-height: 1.75rem;
        letter-spacing: 0%;
        margin: 0;
    }

    :is(.post-1094, .post-1447) .tl-hcard .program-duration i,
    :is(.post-1094, .post-1447) .tl-hcard .program-cost i {
        color: #f0c777;
        width: auto;
        text-align: center;
        font-size: 0.875rem;
    }

    :is(.post-1094, .post-1447) .tl-hcard .btnViewDetail {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        align-self: center;
        width: 11.25rem;
        padding: 1rem 1.5rem;
        background: #f0c777;
        color: #0e0e0e;
        font-family: 'Outfit', sans-serif;
        font-weight: 600;
        font-size: 1rem;
        line-height: 1.625rem;
        border-radius: 2rem;
        text-decoration: none;
        text-transform: none;
    }

    :is(.post-1094, .post-1447) .tl-hcard .btnViewDetail:hover {
        opacity: 0.85;
        color: #0e0e0e;
        text-decoration: none;
    }

    @media (max-width: 1400px) {
        :is(.post-1094, .post-1447) .tl-hcard__body {
            padding: 0 1.5rem;
        }
    }

    @media (max-width: 1300px) {
        :is(.post-1094, .post-1447) .tl-hcard .program-cost {
            padding: 0.5rem 0.5rem 0.5rem 0;
        }
        :is(.post-1094, .post-1447) .tl-hcard .btnViewDetail {
            padding: 0.5rem;
        }
    }

    :is(.post-1094, .post-1447) .tl-card--hidden {
        display: none;
    }

    :is(.post-1094, .post-1447) .tl-view-more-wrap {
        display: flex;
        justify-content: center;
        margin-top: 2rem;
    }

    :is(.post-1094, .post-1447) .tl-view-more-btn {
        background: linear-gradient(180deg, #f0c877 0%, #f9dc76 51%, #fdcb6a 100%);
        color: #000;
        font-family: Poppins, sans-serif;
        font-weight: 700;
        text-transform: uppercase;
        border: none;
        border-radius: 0.375rem;
        padding: 0.875rem 2.5rem;
        cursor: pointer;
    }

    :is(.post-1094, .post-1447) .tl-view-more-btn:hover {
        opacity: 0.85;
    }

    @media (max-width: 900px) {
        :is(.post-1094, .post-1447) .search-programs-wrap,
        :is(.post-1094, .post-1447) .program-category-section {
            /* padding: 2rem 1.25rem; */
        }
        :is(.post-1094, .post-1447) .tl-section-heading h3,
        :is(.post-1094, .post-1447) .tl-section-heading h4 {
            font-size: 1.75rem;
        }
    }

    /* Responsive cho ô search/sort Programs — trước đây chỉ có 1 breakpoint (900px, chỉ chỉnh
    heading), chưa co chữ/khung cho search box + sort select nên vỡ chữ ở màn hình nhỏ.
    Theo đúng mốc chuẩn của trang: Desktop >1024px / Tablet 768-1024px / Mobile <768px. */
    @media (max-width: 1024px) {
        :is(.post-1094, .post-1447) .entry-content .et_builder_inner_content .et_pb_section_1 {
            /* margin: 1.5rem;       */
        }
        :is(.post-1094, .post-1447) .tl-programs-search-box {
            padding: 1.5rem;
        }
        :is(.post-1094, .post-1447) .tl-programs-search-box__title {
            font-size: 1.5rem;
            line-height: 1.75rem;
        }
        :is(.post-1094, .post-1447) .tl-programs-search-box .program-search-input {
            height: 3.5rem;
            font-size: 1rem;
            padding: 10px 60px 10px 18px; 
        }

        :is(.post-1094, .post-1447) .tl-programs-search-box .search-program-sort-select {
            height: 3.5rem;
            font-size: 1rem;
            padding: 10px 18px;
        }
        :is(.post-1094, .post-1447) .tl-programs-search-box .program-search-input::placeholder {
            font-size: 1rem;
            line-height: normal;
        }
        /* Tablet vẫn giữ lưới 2 cột (.tl-photo-grid chỉ về 1 cột ở ≤767px) — card hẹp hơn nên
        giảm nhẹ chữ tiêu đề/mô tả trong card + padding nút View More cho khỏi chật/vỡ dòng. */
        :is(.post-1094, .post-1447) .tl-photo-card .program-title {
            font-size: 1.125rem;
        }
        :is(.post-1094, .post-1447) .tl-hcard .program-title {
            font-size: 1.125rem;
        }
        :is(.post-1094, .post-1447) .tl-view-more-btn {
            padding: 0.75rem 1.75rem;
        }
    }

    @media (max-width: 767px) {
        :is(.post-1094, .post-1447) .tl-programs-search-box {
            margin: 1rem;
            padding: 1.25rem;
        }
        :is(.post-1094, .post-1447) .tl-programs-search-box__title {
            font-size: 1.25rem;
            line-height: 1.5rem;
            margin-bottom: 0.875rem;
        }
        :is(.post-1094, .post-1447) .tl-programs-search-box__row {
            flex-direction: column;
            align-items: stretch;
        }
        :is(.post-1094, .post-1447) .tl-programs-search-box .search-program-sort-select {
            width: 100%;
        }
        :is(.post-1094, .post-1447) .tl-section-heading h3,
        :is(.post-1094, .post-1447) .tl-section-heading h4 {
            font-size: 1.375rem;
        }
        :is(.post-1094, .post-1447) .tl-photo-card .program-title {
            font-size: 1.0625rem;
        }
        :is(.post-1094, .post-1447) .tl-photo-card__meta span {
            font-size: 0.8125rem;
        }
        :is(.post-1094, .post-1447) .tl-hcard {
            flex-direction: column;
            aspect-ratio: unset;
        }
        :is(.post-1094, .post-1447) .tl-hcard__img {
            aspect-ratio: 401 / 350;
            border-radius: 1rem 1rem 0 0;
        }
        :is(.post-1094, .post-1447) .tl-hcard__body {
            border-radius: 0 0 1rem 1rem;
            padding: 1.5rem;
            gap: 1rem;
        }
        :is(.post-1094, .post-1447) .tl-hcard .program-title {
            font-size: 1.125rem;
        }
        :is(.post-1094, .post-1447) .tl-hcard .program-duration,
        :is(.post-1094, .post-1447) .tl-hcard .program-cost {
            font-size: 0.9375rem;
        }
    }
    /* Fix xung đột: rule .slider-item cũ (kế thừa từ bản port borisgym-wp, dòng ~2593) ép flex-basis:33.3333%
    + padding 0 0.6875rem cố định 3-card/hàng — thắng cả min-width/max-width JS tính responsive (custom.js initSlider),
    khiến slider không hoạt động đúng. Neutralize riêng cho trang Programs, để JS toàn quyền set width qua inline style. */
    :is(.post-1094, .post-1447) .slider-item {
        flex: 0 0 auto;
        max-width: none;
        padding: 0;
    }

    /* Top 10 carousel — Swiper (thay slider tự viết tay bằng thư viện Swiper đã enqueue sẵn) */
    .tc-program-carousel {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .tc-programs-swiper {
        flex: 1;
        overflow: hidden;
    }

    .tc-program-carousel-btn {
        /* flex: 0 0 auto; */
        width: 4.375rem;
        height: 4.375rem;
        border-radius: 50%;
        background: #fff;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        position: absolute;
        z-index: 2;
    }

    .tc-program-carousel-btn.swiper-button-disabled {
        cursor: default;
    }

    .tc-program-carousel-prev {
        left : 0;
        margin-left: 2.1875rem;
    }
    .tc-program-carousel-next {
        right: 0;
        margin-right: 2.1875rem;
    }

    .tc-program-carousel-icon {
        width: 1.25rem;
        height: 1.25rem;
        fill: none;
        stroke: #f0c777;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .tc-program-card {
        height: auto;
    }

    .tc-program-card-link {
        display: flex;
        flex-direction: column;
        height: 100%;
        text-decoration: none;
    }

    .tc-program-card-media {
        position: relative;
        margin: 0;
        border-radius: 1rem 1rem 0 0;
        overflow: hidden;
        background: #0a0d10;
    }

    .tc-program-card-media img {
        width: 100%;
        aspect-ratio: 523.33 / 408;
        object-fit: cover;
        display: block;
    }

    .tc-program-card-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        background: transparent;
        border: none;
        border-radius: 0 0 1rem 1rem;
        padding: 2.5rem;
    }

    .tc-program-card-body h3 {
        font-family: Poppins, sans-serif;
        font-weight: 700;
        font-size: 1.5rem;
        color: #f0c777;
        margin: 0;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .tc-program-card-divider {
        width: 100%;
        height: 0.125rem;
        background: #f0c777;
        margin: 0;
    }

    .tc-program-card-meta {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        color: #fff;
        font-size: 1.125rem;
        line-height: 1.75rem;
        margin: 0;
    }

    .tc-program-card-meta i {
        color: #f0c777;
        width: 1.25rem;
        text-align: center;
    }

    .tc-program-card-cta {
        margin-top: auto;
        align-self: center;
        display: inline-block;
        width: 10.75rem;
        text-align: center;
        background: linear-gradient(90deg, #f0c877 0%, #f9dc76 50%, #fdcb6a 100%);
        color: #000;
        font-family: Poppins, sans-serif;
        font-weight: 700;
        border-radius: 0.25rem;
        padding: 0.875rem;
        text-transform: uppercase;
        text-decoration: none;
    }

    .tc-program-card-cta:hover {
        opacity: 0.85;
    }

    /* Responsive cho slider "Top 10 Must-Try Programs" — nút prev/next tròn 4.375rem (70px)
    + card padding/chữ không hề co lại ở màn nhỏ, đè lên cả tiêu đề card, nhìn vô lý. */
    @media (max-width: 1024px) {
        .tc-program-carousel-btn {
            width: 3.25rem;
            height: 3.25rem;
        }
        .tc-program-carousel-icon {
            width: 1rem;
            height: 1rem;
        }
        .tc-program-card-body {
            padding: 1.75rem;
            gap: 1rem;
        }
        .tc-program-card-body h3 {
            font-size: 1.25rem;
        }
    }

    @media (max-width: 767px) {
        .tc-program-carousel-btn {
            width: 2.5rem;
            height: 2.5rem;
        }
        .tc-program-carousel-prev {
            margin-left: 0.625rem;
        }
        .tc-program-carousel-next {
            margin-right: 0.625rem;
        }
        .tc-program-carousel-icon {
            width: 0.875rem;
            height: 0.875rem;
        }
        .tc-program-card-body {
            padding: 1.25rem;
            gap: 0.75rem;
        }
        .tc-program-card-body h3 {
            font-size: 0.875rem; /* 14px, từ 1.5rem gốc */
        }
        .tc-program-card-meta {
            font-size: 0.875rem; /* 14px, đồng bộ */
        }
        .tc-program-card-cta {
            width: 100%;
            font-size: 0.875rem;
            padding: 0.75rem;
        }
    }

    /* ===============================================================
    Carousel "Most Attended" trên Home (Figma node 167:2310) — tái dùng
    nguyên class .tc-program-card... của Top 10, chỉ thêm modifier
    --featured để viền vàng + badge khi hover vào card.
    =============================================================== */
    .tc-program-carousel--featured .swiper-wrapper {
        /* Swiper mặc định không set align-items → trình duyệt dùng stretch, ép cả 3 slide cao
        bằng slide cao nhất (card active), làm card thường bị kéo giãn nhìn "bằng nhau" hết.
        Figma dùng items-center: mỗi card giữ chiều cao tự nhiên riêng, xếp căn giữa theo chiều dọc. */
        align-items: center;
    }

    .tc-program-carousel--featured .tc-program-card {
        position: relative;
        display: flex;
        flex-direction: column;
        height: auto; /* không ép 100% container — để mỗi card tự cao theo nội dung/width riêng */
        border: 0.625rem solid transparent; /* 10px */
        border-radius: 1rem;
        transition: border-color .35s ease, box-shadow .35s ease;
    }

    .tc-program-carousel--featured .swiper-slide {
        /* Mọi slide cùng 1 width cố định — không còn slide nào phóng to nữa.
        3×32% + 2×gap = 99% (chừa 1% dự phòng sai số làm tròn của Swiper) -> gap 1.5%. */
        width: 32%;
    }

    /* Viền vàng + shadow giờ theo HOVER (không theo slide active của Swiper nữa).
    .swiper-slide và .tc-program-card nằm CHUNG 1 thẻ <article> nên phải viết liền không cách. */
    .tc-program-carousel--featured .swiper-slide.tc-program-card:hover {
        border-color: #f0c777;
        box-shadow: 0 0.25rem 2rem 0 rgba(240, 199, 119, 0.25);
    }

    .tc-program-carousel--featured .tc-programs-swiper {
        /* chừa chỗ phía trên để badge của slide active nhô lên mà không bị .swiper overflow:hidden cắt mất */
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .tc-program-carousel--featured {
        position: relative; /* để 2 nút mũi tên absolute định vị theo đúng khung carousel này */
    }

    .tc-program-carousel--featured .tc-program-carousel-btn {
        /* Căn dọc giữa theo TOÀN BỘ chiều cao khung (position:absolute nên không ăn theo
        align-items:center của flex cha) — top:50%+translateY thay vì dựa vào flex. */
        top: 50%;
        transform: translateY(-50%);
    }

    .tc-program-carousel--featured .tc-program-carousel-prev {
        margin-left: -2.1875rem; /* nút đè ra ngoài mép khung, khớp Figma (không nằm thụt vào trong) */
    }

    .tc-program-carousel--featured .tc-program-carousel-next {
        margin-right: -2.1875rem;
    }

    .tc-featured-badge {
        display: none;
        position: absolute;
        top: -1.5rem;
        left: 50%;
        transform: translateX(-50%);
        background: #f0c777;
        color: #0a0d10;
        font-family: Poppins, sans-serif;
        font-weight: 600;
        font-size: 1rem;
        text-transform: capitalize;
        padding: 0.75rem 1.5rem;
        border-radius: 2rem;
        white-space: nowrap;
        z-index: 3;
    }

    .tc-program-carousel--featured .swiper-slide.tc-program-card:hover .tc-featured-badge {
        display: block;
    }

    @media (max-width: 1024px) {
        .tc-program-carousel--featured .swiper-slide {
            width: 100%;
        }
    }

    /* ===============================================================
    Program Detail / Register / Success — trang mới, không chung post
    ID với listing nên không cần scope .post-1094 (class đủ riêng biệt).
    Mỗi trang khai riêng theo post ID của nó (1088/1089/1090) — KHÔNG dùng
    lại rule .et_pb_section_1/_2 theo index của trang listing (search-box=1,
    listing=2) vì cấu trúc section không giống nhau, áp nhầm sẽ hỏng layout.
    =============================================================== */
    :is(.post-1203, .post-1208) .entry-content .et_builder_inner_content .et_pb_section_0,
    :is(.post-1211, .post-1244) .entry-content .et_builder_inner_content .et_pb_section_0,
    :is(.post-1250, .post-1256) .entry-content .et_builder_inner_content .et_pb_section_0 {
        background: #121212;
    }
    :is(.post-1203, .post-1208) .entry-content .et_builder_inner_content .et_pb_section_1,
    :is(.post-1211, .post-1244) .entry-content .et_builder_inner_content .et_pb_section_1,
    :is(.post-1250, .post-1256) .entry-content .et_builder_inner_content .et_pb_section_1  {
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.70) 100%), url('/wp-content/uploads/2026/08/image-21.jpg') lightgray 50% / cover no-repeat;
        padding: 11.25rem 0 0 0;
    }

    /* Section nội dung (info card + related / form / success card) — nền tối
    toàn trang, không kèm hack width:100vw vì nội dung ở đây không phải search-box */
    :is(.post-1203, .post-1208) .entry-content .et_builder_inner_content .et_pb_section_2,
    :is(.post-1211, .post-1244) .entry-content .et_builder_inner_content .et_pb_section_2,
    :is(.post-1250, .post-1256) .entry-content .et_builder_inner_content .et_pb_section_2  {
        background: #121212;
        padding: 3.75rem 3.75rem 4rem 3.75rem;
    }

    :is(.post-1203, .post-1208) .entry-content .et_builder_inner_content .et_pb_section_1,
    :is(.post-1211, .post-1244) .entry-content .et_builder_inner_content .et_pb_section_1 {
        /* background: #121212; */
        padding:0;
    }

    :is(.post-1203, .post-1208) .entry-content .et_builder_inner_content .et_pb_section_1 .et_pb_row_1,
    :is(.post-1211, .post-1244) .entry-content .et_builder_inner_content .et_pb_section_1 .et_pb_row_1,
    :is(.post-1250, .post-1256) .entry-content .et_builder_inner_content .et_pb_section_1 .et_pb_row_1  {
        width: 100vw;
        margin: 0;
    }

    :is(.post-1203, .post-1208) .entry-content .et_builder_inner_content .et_pb_section_1 .et_pb_row_1 .et_pb_column_1,
    :is(.post-1211, .post-1244) .entry-content .et_builder_inner_content .et_pb_section_1 .et_pb_row_1 .et_pb_column_1,
    :is(.post-1250, .post-1256) .entry-content .et_builder_inner_content .et_pb_section_1 .et_pb_row_1 .et_pb_column_1 {
        width: 100vw;
    }

    :is(.post-1203, .post-1208) .entry-content .et_builder_inner_content .et_pb_section_2 .tl-listing-fix {
        background: #121212;
    }

    .tl-breadcrumb {
        color: #f0c777;
        font-family: Poppins, sans-serif;
        font-size: 2rem;
        font-weight: 500;
        margin: 0 0 2rem;
        padding-left:7.9375rem;
        padding-top:6rem;
        padding-bottom:4rem !important;
        line-height: 3rem;
    }

    :is(.post-1211, .post-1244) .tl-breadcrumb  {
        padding:0;
    }

    .tl-program-detail {
        position: relative;
        display: flex;
        gap: 2.5rem;
        background: #1f1f1f;
        border-radius: 1.875rem;
        padding: 5.375rem 5.25rem;
        /* margin : 0 7.9375rem 4rem 7.9375rem; */
        margin:0;
        overflow: hidden;
    }

    .tl-program-register {
        position: relative;
        display: flex;
        gap: 2.5rem;
        /* background: #000; */
        border-radius: 1.875rem;
        padding: 0 5.25rem;
        /* margin : 0 7.9375rem 4rem 7.9375rem; */
        margin:0;
        overflow: hidden;
    }

    .tl-program-detail::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 120%;
        max-width: 111.875rem;
        height: 100%;
        background: radial-gradient(closest-side, #77550633, transparent 100%);
        pointer-events: none;
        z-index: 1;
    }

    .tl-program-register__info {
        position: relative;
        background-color: #1F1F1F;
        border-radius: 40px;
    }

    .tl-program-register__info:before {
        content: '';
        position: absolute;
        top: 0%;
        left: 50%;
        transform: translate(-50%, 0%);
        width: 100%;
        max-width: 111.875rem;
        height: 50%;
        background: radial-gradient(closest-side, #77550633, transparent 100%);
        pointer-events: none;
        z-index: 1;
    }

    .tl-program-detail__info,
    .tl-program-register__info {
        flex: 1 1 30rem;
        display: flex;
        flex-direction: column;
        gap: 3.1875rem;
        z-index: 2;
        padding: 31px 41px;
    }

    .tl-program-detail__body {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
        z-index: 2;
    }

    .tl-program-register__img {
        width: 100%;
        aspect-ratio: 1 / 1;
        background-size: cover;
        background-position: center;
        border-radius: 1.25rem;
        z-index: 2;
    }

    .tl-program-detail__title-wrap {
        display: flex;
        flex-direction: column;
        gap: 1.125rem;
        z-index: 2;
    }

    .tl-program-detail__title {
        color: #f0c777;
        font-family: Poppins, sans-serif;
        font-weight: 700;
        font-size: 2rem;
        margin: 0;
    }

    .tl-program-detail__divider {
        width: 100%;
        height: 0.125rem;
        background: #f0c777;
    }

    .tl-program-detail__meta-row {
        display: flex;
        gap: 4.3125rem;
        flex-wrap: wrap;
    }

    .tl-program-detail__meta {
        display: flex;
        gap: 0.625rem;
        font-size: 1.5rem;
    }

    .tl-program-detail__meta .tl-field-label,
    .tl-program-detail__block .tl-field-label {
        color: #f0c777;
        font-weight: 700;
        font-family: Poppins, sans-serif;
        font-size: 1.5rem;
    }

    .tl-program-detail__meta .value {
        color: #fff;
        font-weight: 500;
    }

    .tl-program-detail__block {
        display: flex;
        flex-direction: column;
        gap: 0.625rem;
    }

    .tl-program-detail__block .value {
        color: #fff;
        margin: 0;
        font-size: 1.5rem;
        font-weight: 400;
        line-height: 1.6;
    }

    .tl-program-detail__button-register {
        display: flex;
        justify-content: center;
    }
    .tl-program-detail__register-btn {
    /*     display: inline-block; */
    /*     align-self: flex-start; */
        width: fit-content;
        text-align: center;
        background: linear-gradient(90deg, #f0c877 0%, #f9dc76 50%, #fdcb6a 100%);
        color: #000;
        font-family: Poppins, sans-serif;
        font-weight: 700;
        border-radius: 0.25rem;
        padding: 1rem;
        text-decoration: none;
        text-transform: uppercase;
        border: none;
        cursor: pointer;
        font-size: 1rem;
        margin-top: 0.5rem;
    }

    #tl-confirm-payment-btn {
        align-self: center;
    }

    .tl-program-detail__register-btn:hover {
        opacity: 0.85;
        color: #000;
    }

    .tl-program-detail__img {
        flex: 1 1 30rem;
        align-self: flex-start;
        border-radius: 1.25rem;
        background-size: cover;
        background-position: center;
        min-height: 25rem;
        z-index: 2;
    }

    /* Related Programs */
    .tl-related-programs {
        margin : 10.75rem 4.375rem 0 4.375rem;
        padding-bottom: 19.938rem;
    }
    .tl-related-programs__heading {
        text-align: center;
        margin-bottom: 4.5rem;
    }

    .tl-related-programs__heading h2 {
        font-family: Poppins, sans-serif;
        font-weight: 800;
        font-size: 3rem;
        text-transform: uppercase;
        color: #fff;
        margin: 0 0 1rem;
    }

    .tl-related-programs__heading h2 span {
        color: #f0c777;
    }

    .tl-related-programs__line {
        width: 11rem;
        height: 0.125rem;
        background: #f0c777;
        margin: 0 auto;
    }

    .tl-related-programs__empty {
        text-align: center;
        color: #fff;
    }

    .tl-related-programs__grid {
        display: flex;
        gap: 1.5rem;
        flex-wrap: wrap;
    }

    .tl-related-programs__grid .tl-split-card {
        flex: 1 1 18.75rem;
    }

    /* Register form */
    .tl-program-register__form {
        flex: 1 1 35rem;
        background: #171b21;
        border-radius: 1.875rem;
        padding: 2rem;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .tl-form-section {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .tl-form-section h3 {
        color: #f0c777;
        font-family: Poppins, sans-serif;
        font-weight: 600;
        font-size: 1.25rem;
        margin: 0;
    }

    .tl-form-row {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
    }

    .tl-form-field {
        flex: 0 1 auto;
        display: flex;
        flex-direction: column;
        gap: 0.375rem;
    }

    /* Chỉ field nằm trong .tl-form-row (hàng ngang First/Last/Email, Phone/Country/Language)
    mới cần giãn ngang chia đều cột. Field đứng riêng trong .tl-form-section (Start Date,
    Subscription Duration, Monthly amount...) không được flex-grow, tránh bị giãn dọc ăn hết
    khoảng trống dư của cột (nguyên nhân gây khoảng cách lớn bất thường giữa các field). */
    .tl-form-row > .tl-form-field {
        flex: 1 1 10rem;
    }

    .tl-form-field label {
        color: #fff;
        font-size: 0.75rem;
    }

    .tl-form-field .req {
        color: #ff383c;
    }

    .tl-form-field input,
    .tl-form-field select {
        background: #252b35;
        border: 0.0625rem solid #2f2f2f;
        border-radius: 0.75rem;
        color: #ffffffb2;
        font-size: 0.875rem;
        padding: 0.75rem 1rem;
        font-family: Poppins, sans-serif;
    }

    .tl-form-field input:read-only {
        background: #343d4b;
        color : #ffffffb2;
    }

    /* Icon lịch của input[type=date] mặc định màu tối, gần như không thấy trên nền tối #252b35 */
    .tl-form-field input[type="date"]::-webkit-calendar-picker-indicator {
        filter: invert(1);
        cursor: pointer;
    }

    .tl-form-field input:focus,
    .tl-form-field select:focus {
        outline: none;
        border-color: #E4A223;
        box-shadow: 0 0 0 0.125rem rgba(228, 162, 35, 0.35);
        color: #ffffffb2;
    }

    .tl-form-field .select2-container--default.select2-container--focus .select2-selection--single,
    .tl-form-field .select2-container--default.select2-container--open .select2-selection--single {
        outline: none;
        border-color: #E4A223;
        box-shadow: 0 0 0 0.125rem rgba(228, 162, 35, 0.35);
    }

    .tl-payment-options {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
    }

    .tl-payment-option {
        flex: 1 1 12.5rem;
        height: 5.6875rem; /* 91px */
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.625rem;
        background: #252b35;
        border: 0.0625rem solid #2f2f2f;
        border-radius: 0.75rem;
        padding: 0.875rem 1.25rem;
        cursor: pointer;
        color: #fff;
    }

    .tl-payment-option .tl-payment-option__radio {
        display: flex;
        gap: 10px;
    }

    .tl-payment-option input[type="radio"] {
        accent-color: #c2840c;
    }

    .tl-payment-option.is-active {
        background: #f3ddb2;
        color: #000;
    }

    .tl-payment-option__price {
        font-weight: 500;
        font-size: 1.125rem;
    }

    .tl-total-fee-wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding-top: 1.5rem;
        border-top: 0.125rem dashed #f0c777;
    }

    .tl-total-fee-wrap span:first-child {
        color: #f0c777;
        font-size: 1.125rem;
    }

    .tl-total-fee {
        background: #f2af2a;
        color: #fff;
        font-weight: 500;
        font-size: 1.125rem;
        border-radius: 1.25rem;
        padding: 0.625rem 1.25rem;
    }

    .tl-form-error {
        color: #ff383c;
        font-size: 0.875rem;
        margin: 0;
    }

    .tl-field-error {
        display: none;
        color: #ff383c;
        font-size: 0.8125rem;
        margin: 0.25rem 0 0;
    }

    /* Payment success */
    .tl-payment-success {
        margin: 0 7.9375rem;
        background: #171b21;
        border-radius: 1.875rem;
        padding: 4rem 2.5rem;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.25rem;
        margin-bottom: 4rem;
    }

    .tl-payment-success__logo {
        height: 2.75rem;
        width: auto;
    }

    .tl-payment-success h1 {
        color: #fff;
        font-family: Poppins, sans-serif;
        font-weight: 800;
        font-size: 2rem;
        text-transform: uppercase;
        margin: 0;
        max-width: 50rem;
    }

    .tl-payment-success h1 span {
        color: #f0c777;
    }

    .tl-payment-success p {
        color: #fff;
        font-size: 1.25rem;
        max-width: 43.75rem;
        margin: 0;
    }

    .tl-payment-success__icon {
        max-width: 31.8125rem;
        width: 100%;
        height: auto;
    }

    .tl-payment-success__copyright {
        font-size: 0.875rem;
        opacity: 0.7;
    }
    :is(.post-1094, .post-1447) .entry-content .et_builder_inner_content .et_pb_section_3,
    :is(.post-1203, .post-1208) .entry-content .et_builder_inner_content .et_pb_section_2{
        padding: 0;
    }

    :is(.post-1094, .post-1447) .entry-content .et_builder_inner_content .et_pb_section_3 .et_pb_row_3,
    :is(.post-1203, .post-1208) .entry-content .et_builder_inner_content .et_pb_section_2 .et_pb_row_2,
    :is(.post-1211, .post-1244) .entry-content .et_builder_inner_content .et_pb_section_2 .et_pb_row_2,
    :is(.post-1250, .post-1256) .entry-content .et_builder_inner_content .et_pb_section_2 .et_pb_row_2 {
        padding: 0;
    }

    @media (max-width: 900px) {
        .tl-program-detail,
        .tl-program-register {
            flex-direction: column;
            padding: 0;
            margin: 0;
        }
    }

    @media (max-width: 1440px) {
        .tl-breadcrumb {
            font-size: 1.25rem;
            padding-top: 2rem;
            padding-bottom: 0 !important;
        }

        .tl-related-programs {
            margin : 5rem 4.375rem 0 4.375rem;
            padding-bottom: 5rem;

        }
        .tl-related-programs__heading {
            margin-bottom: 2rem;
        }
    }
    /* Theo yêu cầu: các @media để cuối file/khối, không xen giữa các rule gốc.
    Responsive cho Detail/Register/Payment/Success — trước đây gần như chưa có gì ngoài
    rule 900px ở trên (chỉ đổi flex-direction), các giá trị padding/margin/font cố định
    theo rem gốc (desktop) không hề co lại, đặc biệt `.tl-payment-success` margin 2 bên
    127px cố định gần như nuốt hết màn hình điện thoại. */
    @media (max-width: 1024px) {
        .tl-breadcrumb {
            padding-left: 1.875rem; 
            font-size: 0.875rem;
        }
        :is(.post-1203, .post-1208) .entry-content .et_builder_inner_content .et_pb_section_0,
        :is(.post-1211, .post-1244) .entry-content .et_builder_inner_content .et_pb_section_0,
        :is(.post-1250, .post-1256) .entry-content .et_builder_inner_content .et_pb_section_0 {
            padding: 6rem 0 0 0; /* từ 11.25rem (180px) */
        }
        .tl-program-detail,
        .tl-program-register {
            padding: 0 2rem; 
            gap: 1.5rem;
        }
        .tl-program-detail__title {
            font-size: 1.5rem; /* từ 2rem */
        }
        .tl-program-detail__img {
            min-height: 18rem; /* từ 25rem */
        }
        .tl-related-programs {
            margin: 0 2rem; /* từ 4.375rem */
        }
        .tl-related-programs__heading h2 {
            font-size: 2rem; /* từ 3rem */
        }
        .tl-payment-success {
            margin: 0 2rem; /* từ 7.9375rem (127px) — quá rộng, gần hết màn tablet nhỏ */
            padding: 3rem 1.5rem;
        }
        .tl-payment-success h1 {
            font-size: 1.5rem; /* từ 2rem */
        }
        .tl-payment-success p {
            font-size: 1rem; /* từ 1.25rem */
        }
    }

    @media (max-width: 767px) {
        .tl-breadcrumb {
            padding-left: 1.875rem; 
            font-size: 0.875rem;
        }
        .tl-program-detail,
        .tl-program-register {
            padding: 1.875rem; /* 30px, thay vì 0 hoàn toàn ở mốc 900px phía trên */
        }
        .tl-program-detail__meta,
        .tl-program-detail__meta .tl-field-label,
        .tl-program-detail__block .tl-field-label,
        .tl-program-detail__block .value {
            font-size: 0.875rem; /* 14px, từ 1.5rem */
        }
        :is(.post-1203, .post-1208) .entry-content .et_builder_inner_content .et_pb_section_0,
        :is(.post-1211, .post-1244) .entry-content .et_builder_inner_content .et_pb_section_0,
        :is(.post-1250, .post-1256) .entry-content .et_builder_inner_content .et_pb_section_0 {
            padding: 3.75rem 0 0 0;
        }
        .tl-program-detail__title {
            font-size: 1.25rem;
        }
        .tl-program-detail__img {
            min-height: 12.5rem;
        }
        .tl-related-programs {
            margin: 0 1rem;
        }
        .tl-related-programs__heading h2 {
            font-size: 1.5rem;
        }
        .tl-related-programs__line {
            width: 6rem;
        }
        .tl-payment-option__price,
        .tl-total-fee-wrap span:first-child,
        .tl-total-fee {
            font-size: 0.875rem;
        }
        .tl-payment-success {
            margin: 0 1rem; /* từ 7.9375rem (127px) — gần như xoá hết nội dung trên phone nếu giữ nguyên */
            padding: 2rem 1.25rem;
        }
        .tl-payment-success h1 {
            font-size: 1.25rem;
        }
        .tl-payment-success p {
            font-size: 0.875rem;
        }
        .tl-payment-success__icon {
            max-width: 100%;
        }
    }

    /* Đè cứng animation Divi (fade/zoom) bị kẹt opacity:0 do search JS gây layout-shift làm lệch
    toạ độ trigger cuộn của Divi (xem context/system-issues hoặc log TC-767) — luôn hiện, bỏ hẳn hiệu ứng. */
    :is(.post-1094, .post-1447) .et_pb_section_3,
    :is(.post-1094, .post-1447) .et_pb_section_3 .et_pb_row_0 {
        opacity: 1 !important;
        transform: none !important;
    }

    /* Loading khi search/filter AJAX ở section category */
    :is(.post-1094, .post-1447) .tl-results-loading {
        grid-column: 1 / -1;
        display: flex;
        justify-content: center;
        padding: 2.5rem 1rem;
    }
    :is(.post-1094, .post-1447) .tl-results-spinner {
        display: inline-block;
        width: 28px;
        height: 28px;
        border: 3px solid rgba(240, 199, 119, 0.3);
        border-top: 3px solid #F0C777;
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }
    /* ===== END TC-767 ===== */

    /* Fix: DSM mega-menu (footer) chỉ tự sinh CSS màu/font cho 6 mục đầu tiên (index 0-5) —
    mục thứ 7 trở đi (bất kể tên/thứ tự nào rơi vào vị trí đó) không được style, dù
    thuộc tính cấu hình giống hệt các mục khác. Ghi đè chung cho TOÀN BỘ menu footer
    (không nhắm theo href/index cụ thể) để không phụ thuộc thứ tự/số lượng mục sau này. */
    .et-l--footer .dsm-mega-menu-link .dsm-menu-text {
        color: #FFFFFF !important;
        font-family: 'Poppins', Helvetica, Arial, Lucida, sans-serif !important;
        font-weight: 600 !important;
        font-size: 16px !important;
        line-height: 26px !important;
    }
    .et-l--footer .dsm-mega-menu-link:hover .dsm-menu-text {
        color: #f0c777 !important;
    }

    /* Select2 cho Country/Language ở form Register-Payment (TC-767) — form nền tối
    (.tl-form-field select gốc bg #252b35), Select2 mặc định render theo style sáng
    dùng chung site (xem rule .select2-container--default phía trên) nên phải ghi đè
    riêng cho đúng theme tối của form này. */
    .tl-form-field .select2-container {
        width: 100% !important;
    }

    .select2-container--default .select2-results__option--selected  {
        background: #252b35;
    }

    .tl-form-field .select2-container--default .select2-selection--single {
        background: #252b35;
        border: 0.0625rem solid #2f2f2f;
        border-radius: 0.75rem;
        height: auto;
        min-height: 2.75rem;
        padding: 0.75rem 1rem;
    }

    .tl-form-field .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: #ffffffb2 !important;
        font-weight: 400;
        font-family: Poppins, sans-serif;
        font-size: 0.875rem;
        line-height: 1.25rem;
        padding: 0 1.25rem 0 0;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .tl-form-field .select2-container--default .select2-selection--single .select2-selection__placeholder {
        /* Khớp đúng màu placeholder chung của site (input::placeholder, dòng ~364) */
        color: #C3C1C1 !important;
        font-weight: 400 !important;
    }

    .tl-form-field .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 100%;
        right: 0.75rem;
    }

    .tl-form-field .select2-container--default .select2-selection--single .select2-selection__arrow b {
        border-color: #fff transparent transparent transparent;
    }

    .tl-form-field .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
        border-color: transparent transparent #fff transparent;
    }

    .tl-form-field .select2-dropdown {
        background: #252b35;
        border: 0.0625rem solid #2f2f2f;
        border-radius: 0.75rem;
        overflow: hidden;
    }

    .tl-form-field .select2-search--dropdown {
        background: #252b35;
        padding: 0.5rem;
    }

    .tl-form-field .select2-search--dropdown .select2-search__field {
        background: #343d4b;
        border: 0.0625rem solid #2f2f2f;
        border-radius: 0.5rem;
        color: #fff;
        padding: 0.5rem;
    }

    .tl-form-field .select2-results ul {
        list-style-type: none;
        padding: 0;
    }
    .tl-form-field .select2-results__option {
        color: #fff;
        font-family: Poppins, sans-serif;
        font-size: 0.875rem;
        padding: 0.5rem 0.75rem;
    }

    .tl-form-field .select2-container--default .select2-results__option--highlighted[aria-selected] {
        background: #f0c777;
        color: #0A0D10;
    }

    .tl-form-field .select2-container--default .select2-results__option[aria-selected="true"] {
        background: #343d4b;
        color: #fff;
    }

    /* Thanh scroll dropdown Select2 — mặc định trình duyệt render trắng, lệch hẳn nền tối #252b35 */
    .tl-form-field .select2-results__options {
        scrollbar-width: thin;
        scrollbar-color: #4a5261 #252b35;
    }

    .tl-form-field .select2-results__options::-webkit-scrollbar {
        width: 0.5rem;
    }

    .tl-form-field .select2-results__options::-webkit-scrollbar-track {
        background: #252b35;
    }

    .tl-form-field .select2-results__options::-webkit-scrollbar-thumb {
        background: #4a5261;
        border-radius: 0.25rem;
    }

    .tl-form-field .select2-results__options::-webkit-scrollbar-thumb:hover {
        background: #6b7280;
    }

    @media (min-width: 1441px) and (max-width: 1600px) {
        header #menu-desktop {
            padding-left: 1% !important;
            padding-right: 1% !important;
        }
        header #menu-desktop .et_pb_column_1_tb_header .et_pb_module_inner .dsm-mega-menu-item {
                margin-right: 10px;
        }
        
        header #menu-desktop .et_pb_column_2_tb_header {
            gap: 12px;
            width: 245px !important;
        }
        .tl-breadcrumb {
            line-height: 3rem;
        }
    }

    @media (min-width: 1300px) and (max-width: 1440px) {
        header #menu-desktop .et_pb_column_1_tb_header .et_pb_module_inner .dsm-mega-menu-item {
                margin-right: 10px;
        }
        header #menu-desktop {
            padding-left: 1% !important;
            padding-right: 1% !important;
        }
        header #menu-desktop .et_pb_column_0_tb_header {
            width: 200px !important;
        }

        header #menu-desktop .et_pb_column_0_tb_header .et_pb_module {  
            height: 44px !important;
            display: flex !important;
            align-items: center !important; 
        }

        header #menu-desktop .et_pb_column_0_tb_header .et_pb_module img {  
            width: 200px;
        }
        header #menu-desktop .et_pb_column_1_tb_header .et_pb_module_inner ul li .dsm-menu-text {
            padding: 10px 15px;
            margin: 0px;
            font-size: 14px !important;
        }
            header #menu-desktop .et_pb_column_2_tb_header {
            gap: 12px;
            width: 220px !important;
        }

        header #menu-desktop .et_pb_column_2_tb_header .lang-current {
            font-size: 14px;
        }
        header #menu-desktop .et_pb_column_2_tb_header .lang-dropdown {
            font-size: 12px;
        }
        header #menu-desktop .et_pb_column_2_tb_header .et_pb_button_0_tb_header_wrapper a {
            font-size: 12px;
        }
         .tl-breadcrumb {
            line-height: 2rem;
        }
    }


    @media (min-width: 981px) and (max-width: 1300px) {
        header #menu-desktop .et_pb_column_1_tb_header .et_pb_module_inner .dsm-mega-menu-item {
                margin-right: 10px;
        }
        header #menu-desktop {
            padding-left: 1% !important;
            padding-right: 1% !important;
        }
        header #menu-desktop .et_pb_column_0_tb_header {
            width: 150px !important;
        }

        header #menu-desktop .et_pb_column_0_tb_header .et_pb_module {  
            height: 44px !important;
            display: flex !important;
            align-items: center !important; 
        }

        header #menu-desktop .et_pb_column_0_tb_header .et_pb_module img {  
            width: 150px;
        }
        header #menu-desktop .et_pb_column_1_tb_header .et_pb_module_inner ul li .dsm-menu-text {
            padding: 10px 0;
            margin: 0;
            font-size: 13px !important;
        }
            header #menu-desktop .et_pb_column_2_tb_header {
            gap: 12px;
            width: 220px !important;
        }

        header #menu-desktop .et_pb_column_2_tb_header .lang-current {
            font-size: 14px;
        }
        header #menu-desktop .et_pb_column_2_tb_header .lang-dropdown {
            font-size: 12px;
        }
        header #menu-desktop .et_pb_column_2_tb_header .et_pb_button_0_tb_header_wrapper a {
            font-size: 12px;
        }
        
        .tl-breadcrumb {
            line-height: 2rem;
        }
    }
/* Privacy Policy / Terms and Condition page content (TC-1839, teamlidberg dark theme) */
.tl-policy {
    margin: 0 7.688rem 0 7.688rem;
    padding-bottom:2.375rem;
    color: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
}
@media (max-width: 1024px) {
    .tl-policy {
        margin: 0 50px;
    }
}
@media (max-width: 767px) {
    .tl-policy {
        margin: 0 20px;
    }
}
.tl-policy__updated {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 36px;
    text-align: right;
    margin: 0 0 15px;
}
.tl-policy h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 36px;
    color: #FFFFFF;
    margin: 0;
    padding: 0;
}
.tl-policy--terms h3 {
    color: #FAAD4F;
}
.tl-policy h4 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-style: italic;
    font-size: 14px;
    line-height: 28px;
    color: #FFFFFF;
    margin: 12px 0 0;
}
.tl-policy .tl-policy__subhead-plain {
    font-family: 'Montserrat', sans-serif;
    font-style: italic;
    font-weight: 400;
    font-size: 14px;
    line-height: 28px;
    margin: 8px 0 0 8px;
}
.tl-policy p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 28px;
    margin: 0;
}
.tl-policy__bullet {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 28px;
    margin: 0 0 0px;
}
.tl-policy__indent {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 28px;
    margin: 0 0 4px;
    padding-left: 24px;
}

/* Banner "PRIVACY POLICY"/"TERMS OF USE" trên đầu trang (TC-1839) — ảnh nền + overlay đen + title */
.tl-policy-hero {
    position: relative;
    height: 283px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}
.tl-policy-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
}
.tl-policy-hero__title {
    position: relative;
    z-index: 1;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 48px;
    letter-spacing: 4.8px;
    text-transform: uppercase;
    color: #F0C877;
    text-align: center;
    padding: 3.125rem 0 0.938rem;
}
@media (max-width: 1024px) {
    .tl-policy-hero__title {
        font-size: 36px;
    }
}
@media (max-width: 767px) {
    .tl-policy-hero {
        height: 200px;
    }
    .tl-policy-hero__title {
        font-size: 24px;
    }
}