:root {
    --gtt-primary-color: #55acee;
    --gtt-light-bg: #f1f1f1;
    --gtt-accent-color: #4371a3;
    --gtt-border-radius: 10px;
    --gtt-border-radius-large: 30px;
    --gtt-border-color: #838383;
    --gtt-disabled-field-color: #dddddd;
    /* --gtt-border-light-color: #f2f2f2; */
    --gtt-border-light-color: #dddddd;
    --gtt-pink-red-color: #EE4F6B;
    --gtt-transition: 0.3s;
    --gtt-font-family: "Montserrat";
    --gtt-font-size: 14px;
    --gtt-font-size-lg: 20px;
    --gtt-font-size-xl: 28px;
    --gtt-avatar-sm: 30px;
    --gtt-avatar: 43px;
    --gtt-product-thumb-sm: 30px;
    --gtt-product-thumb: 43px;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, textarea, button, input, select, option {
    font-family: "Montserrat";
}

html, body {
    background: var(--gtt-light-bg);
    font-size: var(--gtt-font-size);
}

#main-content {
    position: relative;
    padding-bottom: 50px;
}

/*************** style ***************/
.blur {
    filter: blur(5px);
    user-select: none;
}

/*************** badge ***************/
.badge.badge-text-gtt-primary {
    color: var(--gtt-primary-color);
    border-color: var(--gtt-primary-color);
}
.badge.badge-default { background: var(--gtt-light-bg); border-color: var(--gtt-light-bg); }


/*************** button ***************/
button {
    border: 1px solid var(--gtt-border-color);
    cursor: pointer;
    background: #fff;
    border-radius: 65px;
    padding: 5px 15px;
    outline: 0;
}
button:disabled {
    color: var(--gtt-border-color) !important;
}

.btn-large {
    height: 40px;
}

.btn-xlarge {
    height: 55px;
    font-size: 25px;
}

.btn-square {
    border-radius: var(--gtt-border-radius);
}

.btn-primary {
    background: #55acee;
    border: 0;
    color: #fff;
}

.btn-danger {
    background: var(--bs-danger);
    border: 0;
    color: #fff;
}

.btn-success {
    background: var(--bs-teal);
    border: 0;
    color: #fff;
}

.btn-link {
    color: var(--gtt-primary-color);
    border: 0;
    background: transparent;
}
.btn-link.minify {
    padding: 0;
}

button.disabled {
    background: var(--gtt-disabled-field-color) !important;
}
button.btn-link.disabled {
    background: transparent !important;
    color: var(--gtt-border-color) !important;
}

label {
    cursor: pointer;
}

/*************** width ***************/
.w_auto {width: auto !important;}
.w_100p {width: 100% !important;}
.w_50p {width: 50% !important;}
.w_25p {width: 25% !important;}

/*************** ul ***************/
ol li:last-child, ul li:last-child {
    margin-right: 0 !important;
}

/*************** table ***************/
.table thead th.sort {
    cursor: pointer;
}

.table thead th button {
    border: 0;
    background: transparent;
    padding: 0;
    transition: var(--gtt-transition);
}

.table thead th.active {
    /* background: var(--gtt-primary-color);
    color: #fff; */
}

.table thead th.active button {
    color: var(--gtt-primary-color);
}

.table thead th.asc button {
    transform: rotate(180deg);
}

.table th, .table td {
    padding: 7px 5px;
    border: 0;
    text-align: center;
    vertical-align: middle;
    font-size: var(--gtt-font-size);
    position: relative;
}

.table td button {
    font-size: var(--gtt-font-size);
}

.table tbody {
}

.table tbody tr {}

.wrap_table + .table_foot,
.table + .table_foot {
    text-align: center;
    margin-top: 15px;
}
.list_table_foot_actions {
    text-align: center;
    margin-top: 15px;
}
.list_table_foot_actions button[data-action*="loadmore-"] {
    display: none;
}

.table.table_no_head {
}

.table .action_column button {
}

.table .action_column button i {
}

/* new table */
.table_head {
    display: flex;
    align-items: center;
    /* margin-top: 15px; */
}

.table_head .table_head_left {
}

.table_head .table_head_right {
    margin-left: auto;
}

.table_head .table_head_right button {
}

.wrap_table {
    background: #fff;
    border-radius: var(--gtt-border-radius-large);
    overflow: hidden;
}
.wrap_table.shadow {
    box-shadow: 0px 3px 20px rgb(0 0 0 / 10%);
}

.wrap_table.simple_table {
    border-radius: var(--gtt-border-radius);
}
.wrap_table.simple_table thead {
    background: var(--gtt-border-light-color);
    /* border-bottom: 1px solid var(--gtt-border-color); */
}
.wrap_table.simple_table th {
    color: var(--bs-body-color);
    font-weight: normal;
    padding: 9px 5px;
    border-bottom: 1px solid rgb(131 131 131 / 20%);
}
.wrap_table.simple_table th,
.wrap_table.simple_table td {
    border: 1px solid var(--gtt-border-light-color);
}

.wrap_table .table_title {
    display: flex;
    margin: 10px 15px;
    border-bottom: 1px solid var(--gtt-light-bg);
    padding-bottom: 10px;
    padding-left: 10px;
    --height: 43px;
}

.wrap_table .td_with_action .intable_favorite_btn {
    border: 0;
    padding: 0;
    font-size: 20px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
}
.wrap_table .td_with_action .intable_favorite_btn i {
    width: 22px;
    height: 22px;
}
.wrap_table .td_with_action .intable_favorite_btn.active i {
    background: url("../../images/icons/bookmarked.png") no-repeat;
    background-size: contain;
}

.table thead {
    background: #fff;
    color: var(--gtt-primary-color);
}

.table thead th {
    font-weight: 700;
    font-size: var(--gtt-font-size);
    border-bottom: 1px solid var(--gtt-light-bg);
    padding: 21px 5px;
}

.table.sm_head thead th {
    padding: 0 5px;
    font-size: var(--gtt-font-size);
}

.table.md_head thead th {
    padding: 5px;
}

/*************** wrap circle percent ***************/
.wrap_circle_percent {
    position: relative;
    --circle-size: 96px;
    height: var(--circle-size);
    width: var(--circle-size);
    fill: var(--gtt-primary-color);
    stroke: rgb(255 255 255 / 70%);
}

.wrap_circle_percent .circle_percent {
    stroke-linecap: round;
    width: var(--circle-size);
    height: var(--circle-size);
}

.wrap_circle_percent .circle_center {
    opacity: 0.1;
}

.wrap_circle_percent .circle_border {
    fill: none;
    transform-origin: 50% 50%;
    animation: load-gauge 1s ease both;
    animation-delay: 250ms;
    transform: rotate(-87.9537deg);
}

.wrap_circle_percent .circle_content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--gtt-font-size);
    color: #fff;
    text-align: center;
}

.wrap_circle_percent .circle_content .kpi_percent {
}

.wrap_circle_percent .circle_content .kpi_txt {
}

@keyframes load-gauge {
    from {
        stroke-dasharray: 0 352;
    }
}

/*************** wrap_loading ***************/
.wrap_loading, .global_black_cover {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(0 0 0 / 80%);
    display: none;
    z-index: 1002;
}

.wrap_loading .loading {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

.wrap_loading .loading img {
    width: 60px;
    height: 60px;
}

/*************** .wrap-dropdown ***************/
.wrap-dropdown {
    position: relative;
    z-index: 1;
}

.wrap-dropdown .dropdown-toggler {
}

.wrap-dropdown .dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: -15px;
    min-width: 300px;
    background: #fff;
    border: 1px solid var(--gtt-border-color);
    margin-top: 12px;
}

.wrap-dropdown .dropdown:before {
    content: "";
    width: 0;
    height: 0;
    border-left: 13px solid transparent;
    border-right: 13px solid transparent;
    border-bottom: 10px solid var(--gtt-border-color);
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translate(-50%, 0);
}

/*************** tagify ***************/
.tagify {
    --gtt-tag-inset-shadow-size: #dc354559;
}
.tagify .tagify__tag.is_new:not(.tagify--notAllowed)>div:before {
    box-shadow: 0 0 0 10em var(--gtt-primary-color) inset;
}
.tagify .tagify__tag__removeBtn:hover+div::before {
    box-shadow: 0 0 0 10em var(--gtt-tag-inset-shadow-size) inset !important;
}
.tagify .tagify__tag:focus div::before,
.tagify .tagify__tag:hover:not([readonly]) div::before {
    box-shadow: 0 0 0 10em var(--gtt-primary-color) inset;
}
.tagify .tagify__tag.is_new {}
.tagify .tagify__tag:focus x,
.tagify .tagify__tag:hover x,
.tagify .tagify__tag:focus:not([readonly]) > div,
.tagify .tagify__tag:hover:not([readonly]) > div,
.tagify .tagify__tag.is_new x,
.tagify .tagify__tag.is_new>div {
    color: #fff;
}

/*************** input ***************/
.checkbox, .radio {
    display: inline-block;
    vertical-align: middle;
    --size: 25px;
    width: var(--size);
    height: var(--size);
    position: relative;
}
.checkbox.disabled:after,
.radio.disabled:after {
    content: "";
    position: absolute;
    top: 2px;
    left: 0;
    width: calc(var(--size) - 4px);
    height: calc(var(--size) - 4px);
    background: var(--gtt-disabled-field-color);
    z-index: -1;
    border-radius: 6px;
}
.checkbox input[type="checkbox"],
.checkbox input[type="radio"] {
    width: 0;
    height: 0;
    position: absolute;
}
.checkbox :disabled + .icon_input {
    background: url('../../images/icons/checkbox.png') no-repeat top left var(--gtt-disabled-field-color);
    border-radius: 7px;
    width: 21px;
}
.checkbox .icon_input {
    background: url('../../images/icons/checkbox.png') no-repeat top left;
    width: var(--size);
    height: var(--size);
    display: inline-block;
    background-size: var(--size);
}

.checkbox .icon_input {
    background-position: 0px 0px;
}

.checkbox.white .icon_input {
    background: url('../../images/icons/checkbox_w.png') no-repeat top left;
}

.checkbox input[type="radio"]:checked + .icon_input {
    background-position: 0px -40px;
}
.checkbox input[type="checkbox"]:checked + .icon_input {
    background-position: 0px -40px;
}

.checkbox.bookmark i {
    width: 22px;
    height: 22px;
}

.checkbox.bookmark input[type="radio"]:checked + i,
.checkbox.bookmark input[type="checkbox"]:checked + i {
    background: url("../../images/icons/bookmarked.png") no-repeat;
    background-size: contain;
}

.radio input[type="checkbox"],
.radio input[type="radio"] {
    width: 0;
    height: 0;
    position: absolute;
}

.radio .icon_input {
    background: url('../../images/icons/radio.png') no-repeat top left;
    width: calc(var(--size) + 1px);
    height: calc(var(--size) + 1px);
    background-size: 25px;
    display: inline-block;
}

.radio .icon_input {
    background: url('../../images/icons/radio.png') no-repeat top left;
}

.radio .icon_input {
    background-position: 0 0;
}

.radio.white .icon_input {
    background: url('../../images/icons/radio_w.png') no-repeat top left;
}

.radio input[type="checkbox"]:checked + .icon_input {
    background-position: 0px -32px;
}
.radio input[type="radio"]:checked + .icon_input {
    background-position: 0px -40px;
}

input[type="text"], input[type="password"], input[type="email"] {
    border-radius: var(--gtt-border-radius);
    border: 1px solid var(--gtt-border-color);
    height: 40px;
    padding: 10px 10px;
    font-size: var(--gtt-font-size);
}
input[type="text"]:disabled, input[type="password"]:disabled, input[type="email"]:disabled {
    background: var(--gtt-light-bg);
    border-color: var(--gtt-light-bg);
}

select {
    border-radius: var(--gtt-border-radius);
    border: 1px solid var(--gtt-border-color);
    /* height: 40px; */
    padding: 10px 10px;
    font-size: var(--gtt-font-size);
    overflow: auto;
    cursor: pointer;
}

.invalid {
    border-color: var(--bs-danger) !important;
}

/*************** toggle-button ***************/
.wrap-toggle-switch {
    display: flex;
    align-items: center;
}

.wrap-toggle-switch .toggle-switch {
    position: relative;
    display: flex;
    /* Width of the switch */
    /* Height of the switch */
    /* height: 50px; */
}

.wrap-toggle-switch .toggle-switch input[type="checkbox"] {
    display: none;
}

.wrap-toggle-switch .toggle-switch .toggle-label {
    display: block;
}

.wrap-toggle-switch .toggle-switch .toggle-button {
    position: relative;
    cursor: pointer;
    margin: 0 10px;
    background-color: #ccc;
    transition: 0.05s;
    border-radius: 15px;
    height: 26px;
    width: 50px;
}

.wrap-toggle-switch .toggle-switch .toggle-button:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

.wrap-toggle-switch .toggle-switch input:checked + .toggle-button {
    background-color: var(--gtt-primary-color);
}

.wrap-toggle-switch .toggle-switch input:checked + .toggle-button:before {
    transform: translateX(24px);
}

/*************** select2 ***************/
#master_layout .select2 {
}

#master_layout .select2 .select2-selection {
    height: 42px;
    border: 1px solid var(--gtt-border-color);
    border-radius: var(--gtt-border-radius);
}
#master_layout .select2-container--default.select2-container--disabled .select2-selection--single {
}

#master_layout .select2 .select2-selection__rendered {
    line-height: 43px;
    height: 40px;
    font-size: var(--gtt-font-size);
    color: #000;
}

#master_layout .select2 .select2-selection__rendered i {
    margin-right: 5px;
    margin-top: -5px;
    height: 30px;
    width: 30px;
    vertical-align: middle;
}

#master_layout .select2 .select2-selection__clear {
    height: 42px;
    font-size: 23px;
    /* display: none; */
    /* padding: 0; */
    margin-right: 28px;
}

#master_layout .select2 .select2-selection__arrow {
    height: 42px;
    right: 7px;
}

#master_layout .select2 .select2-selection__arrow b {
    border-width: 6px 6px 0 6px;
    border-color: #000 transparent transparent transparent;
}

#master_layout .select2-container .select2-results__option i {
    height: 30px;
    width: 30px;
    vertical-align: middle;
    margin-right: 5px;
}

/*********** page ***********/
.page_head {
    margin-top: 0;
    margin-bottom: 40px;
}

.page_head h2 {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
}

.page_body {
    position: relative;
}

.page_fixed_actions {
    position: fixed;
    right: 0;
    bottom: 25px;
    padding: 0;
    z-index: 1;
    width: 100%;
}
.page_fixed_actions ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    right: -53px;
    bottom: 0;
}
.page_fixed_actions ul.left {
    left: -53px;
    right: unset;
}
.page_fixed_actions ul li {
    /* margin-right: 10px; */
    margin-bottom: 25px;
    text-align: center;
}
.page_fixed_actions ul li:last-child {
    margin-bottom: 0;
}
.page_fixed_actions ul li button {
    position: relative;
    background: transparent;
    border: 0;
    padding: 0;
    font-size: 23px;
}
.page_fixed_actions ul li button i {
    font-size: 30px;
}
.page_fixed_actions ul li button[data-action="show-popup-material-cart"] {}
.page_fixed_actions ul li button[data-action="show-popup-material-cart"] .count_items_in_cart {
    position: absolute;
    top: -15px;
    right: -15px;
    background: var(--gtt-primary-color);
    color: #fff;
    font-size: 12px;
    width: 21px;
    height: 21px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.page_fixed_actions ul li button[data-action="show-popup-material-cart"] .count_items_in_cart.empty {
    filter: grayscale(1);
}
.page_fixed_actions ul li button[data-action="show-popup-material-cart"] .count_items_in_cart.nhap_kho {
    background: var(--bs-teal);
    right: 1px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.page_fixed_actions ul li button[data-action="show-popup-material-cart"] .count_items_in_cart.xuat_kho {
    background: var(--bs-danger);
    right: -20px;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}


/*********** search_form ***********/
.search_form {
    display: flex;
    margin: 10px 15px;
    border-bottom: 1px solid var(--gtt-light-bg);
    padding-bottom: 10px;
    --height: 43px;
}

.search_form .search_left {
    display: flex;
    align-items: center;
    position: relative;
}

.search_form .search_left .fields-actions {
}

.search_form .search_left input[type="text"] {
    width: 325px;
    height: var(--height);
    padding: 10px 15px;
    font-size: var(--gtt-font-size);
    border-radius: var(--gtt-border-radius-large);
    color: var(--gtt-primary-color);
    background: var(--gtt-light-bg);
    border: 0;
}
.search_form .search_left.btn_on_field {
    width: 465px;
}
.search_form .search_left.btn_on_field input {width: 100%;}
.search_form .search_left.btn_on_field button {
    position: absolute;
    right: 0;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 800;
}
.search_form .search_left.btn_on_field button i {
    margin-left: 10px;
}

.search_form .search_right {
    margin-left: auto;
    display: flex;
    position: relative;
}

.search_form .search_right .filters {
    display: flex;
    height: 100%;
    align-items: center;
    margin-right: 10px;
    padding-bottom: 5px;
    position: relative;
    bottom: -3px;
}

.search_form .search_right .filters li {
    margin-right: 20px;
}

.search_form .search_right .filters li>label {
    font-size: var(--gtt-font-size);
    cursor: pointer;
    display: flex;
    align-items: center;
}

.search_form .search_right .filters li .radio {
    display: flex;
    margin-right: 5px;
}

.search_form .search_right .filter_actions {
    display: flex;
    margin-left: auto;
}
.search_form .search_right .filter_actions li {
    margin-right: 10px;
    width: 110px;
}
.search_form .search_right .filter_actions li button {
    height: 100%;
    width: 100%;
}

.search_form .search_right .search_right_button {
    border: 0;
    /* background: var(--gtt-light-bg); */
    padding: 0;
    height: var(--height);
    width: var(--height);
    border-radius: var(--gtt-border-radius);
    font-size: 20px;
    margin-right: 5px;
}
.search_form .search_right .search_right_button:hover {
    color: var(--gtt-primary-color);
}

.search_form .search_right .fields-actions {
    display: flex;
    height: 100%;
    align-items: center;
    margin-right: 10px;
}

.search_form .search_right .fields-actions li {
    margin-right: 20px;
}

.search_form .search_right .fields-actions li .field-action {
}

.search_form .search_right .fields-actions li .field-action input {
    height: var(--height);
    padding: 10px 25px;
    font-size: var(--gtt-font-size);
    border-radius: var(--gtt-border-radius-large);
    color: var(--gtt-primary-color);
    text-align: center;
}

.search_form .search_right .fields-actions li .field-action button {
    height: var(--height);
    width: 110px;
}

.search_form .icon_action {
    border: 0;
    font-size: 23px;
}

.search_form .icon_action i {
}

/*************** popup ***************/
.wrap_popup {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgb(0 0 0 / 80%);
    z-index: 1001;
    display: none;
}

.wrap_popup .popup_container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    background: #fff;
    border: 2px solid var(--gtt-primary-color);
    padding: 20px;
    border-radius: var(--gtt-border-radius);
    min-height: 400px;
}
.wrap_popup .popup_container:not(.no_scroll) {
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}

.wrap_popup .popup_container.empty_container {
    background: transparent;
    border: 0;
    width: auto;
    padding: 0;
}

.wrap_popup .popup_container.width_auto {
    width: auto;
    padding: 20px 40px;
}

.wrap_popup .popup_container.sm_container {
    width: 700px;
    min-height: auto;
}

.wrap_popup .popup_container.md_container {
    width: 920px;
    min-height: auto;
}
.wrap_popup .popup_head {
    position: relative;
}

.wrap_popup .popup_head .popup_head_title {
}

.wrap_popup .popup_head .popup_head_title h3 {
    text-align: center;
    font-size: 20px;
    font-size: var(--gtt-font-size-xl);
    font-weight: bold;
    text-transform: uppercase;
    color: var(--gtt-primary-color);
}

.wrap_popup .popup_head .popup_head_title .popup_head_sub_title {
    font-size: var(--gtt-font-size-lg);
    text-transform: none;
    margin-bottom: 7px;
}


/* .popup_container.xl_container */
.wrap_popup .popup_container.xl_container {
    height: calc(100% - 40px);
    width: 100%;
    padding: 10px;
}
.wrap_popup .popup_container.xl_container.height_auto {
    height: auto;
    min-height: auto;
}
.wrap_popup .popup_container.xl_container .model_detail_title {
    text-transform: uppercase;
    color: var(--gtt-primary-color);
    font-size: 29px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 10px;
}
.wrap_popup .popup_container.xl_container .wrap_model_detail {
    display: flex;
    height: 100%;
    width: calc(100% - 70px);
}
.wrap_popup .popup_container.xl_container .wrap_model_detail .model_detail_left {
    width: 470px;
    /* padding: 0 60px; */
}
.wrap_popup .popup_container.xl_container .wrap_model_detail .model_detail_right {
    width: calc(100% - 470px);
    position: relative;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 15px;
}

.wrap_popup .close_popup {
    border: 0;
    color: #fff;
    padding: 0;
    position: absolute;
    right: -45px;
    top: 5px;
    background: transparent;
    font-size: 32px;
}

.wrap_popup .wrap_table.move_top {
    margin-top: -17px;
}

.wrap_popup .popup_body {
    height: 100%;
}
.wrap_popup .popup_container:not(.no_scroll) .popup_body {
    flex: 1 1 auto;
    overflow: auto;
    max-height: none;
    height: auto;
}

.wrap_popup .popup_foot {
    flex-shrink: 0;
    margin-top: 7px;
}

.wrap_popup .popup_foot .pagination {
    margin-bottom: 0;
    margin-top: 0;
}

.wrap_popup .popup_body .wrap_tab_togglers ul {
    justify-content: center;
}

.wrap_popup .popup_section {
    margin: 20px auto 0 auto;
}

.wrap_popup .popup_section.input_as_title {
    display: flex;
    justify-content: center;
}

.wrap_popup .popup_section.input_as_title input {
    position: relative;
    width: calc(100% - 325px);
    /* margin-right: auto; */
    background: var(--gtt-light-bg);
    border-radius: var(--gtt-border-radius);
    padding: 10px 0 10px 15px;
    border: 0;
    font-size: var(--gtt-font-size);
}


.popup_section.input_with_text {
    display: flex;
    justify-content: center;
    width: calc(100% - 325px);
    border-radius: var(--gtt-border-radius);
    border: 0;
    font-size: var(--gtt-font-size);
    background: var(--gtt-light-bg);
    padding-top: 0;
}
.popup_section.input_with_text .input_with_text_wrap {
    position: relative;
    display: flex;
    width: calc(100% - 125px);
    padding: 10px 0 10px 15px;
}
.popup_section.input_with_text .input_with_text_wrap .input_title {}
.popup_section.input_with_text .input_with_text_info {
    margin-left: auto;
    display: flex;
    align-items: center;
    padding-right: 15px;
}
.popup_section.input_with_text .input_with_text_info span {
    margin: 0 5px;
}
.popup_section.input_with_text input {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--gtt-border-light-color);
    padding: 0;
    height: auto;
    width: 35px;
    margin-left: 0;
    text-align: center;
}
.popup_section.input_with_text input.datepicker {
    width: 110px;
    text-align: center;
    margin: 0 0px;
}


.wrap_popup .popup_section.comment_body .wrap_comment_box {
    display: flex;
    justify-content: center;
}

.wrap_popup .popup_section .popup_section_title {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    /* text-transform: uppercase; */
    color: var(--gtt-primary-color);
    margin-bottom: 10px;
}

.wrap_popup .popup_section .nhan_vien_users {
    /* margin-bottom: 20px; */
}
.wrap_popup .popup_section .multi_options ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.wrap_popup .popup_section .multi_options li {
    position: relative;
    text-align: center;
    margin: 5px;
}

/* Multi options small_space */
.wrap_popup .popup_section .multi_options.small_space {
    margin-bottom: -15px;
}
.wrap_popup .popup_section .multi_options.small_space ul {
    gap: 10px;
}
.wrap_popup .popup_section .multi_options.small_space .cover_avatar {
    width: calc(100% / 10);
    min-width: 55px;
}



.wrap_popup .popup_section .multi_options .cover_avatar {
    width: calc(100% / 6);
    margin: 0 0 15px 0;
}
.wrap_popup .xl_container .popup_section .multi_options .cover_avatar {
    width: calc(100% / 12);
}

.wrap_popup .popup_section .multi_options .cover_avatar .option_covered {
    border-radius: 100%;
    overflow: hidden;
    position: relative;
    display: inline-block;
    width: var(--gtt-avatar);
    height: var(--gtt-avatar);
}
.wrap_popup .popup_section .multi_options .cover_avatar.add_new button {
    --width: var(--gtt-avatar);
}
.wrap_popup .popup_section .multi_options .cover_avatar.add_new button i {
    background: var(--gtt-border-color);
    color: #fff;
    font-size: 26px;
    height: var(--width);
    width: var(--width);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    margin: auto;
}
.wrap_popup .popup_section .multi_options .cover_avatar.add_new button span {
    font-size: var(--gtt-font-size);
    line-height: 21px;
}


.wrap_popup .popup_section .nhan_vien_users .nhan_vien_user .option_covered img {
}

.wrap_popup .popup_section .multi_options button {
    position: relative;
    /* padding: 0; */
    height: 42px;
    overflow: hidden;
}

.wrap_popup .popup_section .multi_options .cover_avatar button {
    border: 0;
    padding: 0;
    overflow: initial;
}

.wrap_popup .popup_section .nhan_vien_users .nhan_vien_user .san_xuat_popup_action .nhan_vien_name {
    font-size: var(--gtt-font-size);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 126px;
}

.wrap_popup .popup_section .nhan_vien_users .nhan_vien_user .san_xuat_popup_action .nhan_vien_ky_nang {
    font-size: var(--gtt-font-size);
}

.wrap_popup .popup_section .multi_options .active .option_covered:after {
    content: "\f00c";
    font-family: 'FontAwesome';
    color: var(--bs-success);
    font-size: 27px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    background: rgb(0 0 0 / 80%);
    /* height: var(--gtt-avatar); */
    /* width: var(--gtt-avatar); */
    height: 100%;
    width: 100%;
    overflow: hidden;
    /* border-radius: 100%; */
    text-align: center;
    line-height: var(--gtt-avatar);
}
.wrap_popup .popup_section .multi_options .added_user .option_covered:after {
    content: "\21";
    font-family: 'FontAwesome';
    color: var(--bs-warning);
    font-size: 27px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    background: rgb(0 0 0 / 80%);
    /* height: var(--gtt-avatar); */
    /* width: var(--gtt-avatar); */
    height: 100%;
    width: 100%;
    overflow: hidden;
    /* border-radius: 100%; */
    text-align: center;
    line-height: var(--gtt-avatar);
}
.wrap_popup .popup_section.popup_actions {
    text-align: center;
}
.wrap_popup .popup_section.sm_input_center {
    text-align: center;
}

.wrap_popup .popup_section.sm_input_center input,
.wrap_popup .popup_section.sm_input_center .tagify {
    position: relative;
    width: calc(100% - 325px);
    background: var(--gtt-light-bg);
    border-radius: var(--gtt-border-radius);
    padding: 10px 0 10px 15px;
    border: 0;
    font-size: var(--gtt-font-size);
}
.wrap_popup .popup_section.sm_input_center .tagify {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    min-height: 40px;
}
.wrap_popup .popup_section.sm_input_center .tagify .tagify__tag {
    height: calc(100% - 10px);
}
.wrap_popup .popup_section.sm_input_center .tagify .tagify__tag.invalid-tag {
    text-decoration: line-through;
}
.wrap_popup .popup_section.sm_input_center .tagify .tagify__input {
    text-align: left;
    margin: 0;
    height: calc(100% - 10px);
    line-height: 22px;
    margin-top: 3px;
}

.wrap_popup .popup_section.lg_input_center {
    text-align: center;
}

.wrap_popup .popup_section.lg_input_center input {
    width: 250px;
    height: 50px;
    display: inline-block;
    border-radius: var(--gtt-border-radius-large);
    text-align: center;
    font-size: var(--gtt-font-size-xl);
    border: 1px solid var(--gtt-primary-color);
    color: var(--gtt-primary-color);
    font-weight: 600;
}

.wrap_popup .popup_section .sm_input_center {
    display: flex;
    justify-content: center;
}

.wrap_popup .popup_section .sm_input_center input {
    border-radius: var(--gtt-border-radius-large);
    text-align: center;
    margin: 0 7px;
    width: calc(100% / 4);
    font-size: var(--gtt-font-size);
}

.wrap_popup .popup_section .sm_input_center select {
    border-radius: var(--gtt-border-radius-large);
    text-align: center;
    margin: 0 7px;
    min-width: 120px;
    font-size: var(--gtt-font-size);
}

.wrap_popup .popup_body .no_permission {
    font-size: var(--gtt-font-size);
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

/* simple_popup */
.popup_container.simple_popup_containter {
    width: auto;
    padding: 20px 40px;
    min-height: auto;
}

.wrap_simple_popup .simple_popup {
    margin: 20px auto 20px auto;
    padding: 25px;
}

.wrap_simple_popup .simple_popup {
    width: 320px;
    margin: 20px auto 20px auto;
    background: var(--gtt-primary-color);
    color: #fff;
    padding: 25px;
    border-radius: var(--gtt-border-radius-large);
    font-size: var(--gtt-font-size);
    position: relative;
}


.wrap_popup .popup_container:not(.width_auto) .wrap_simple_popup .simple_popup {
    width: auto;
}
.wrap_simple_popup .simple_popup .field-row {
    margin: 10px 0;
}

.wrap_simple_popup .simple_popup .field-row p {
}

.wrap_simple_popup .simple_popup .field-row input {
    width: 100%;
}
.wrap_simple_popup .simple_popup .field-row input.flash-border-invalid {
    border-width: 2px;
}

.wrap_simple_popup .simple_popup .field-row strong {
    display: block;
}

.wrap_simple_popup .simple_popup .field-row select {
    width: 100%;
}

.wrap_simple_popup .simple_popup_actions {
    text-align: center;
}

.wrap_simple_popup .simple_popup_actions button {
}




.popup_content_left_right {
    display: flex;
    height: 100%;
    width: calc(100% - 60px);
}
.popup_content_left_right .popup_content_left {
    width: 470px;
    /* padding: 0 60px; */
    position: relative;
    height: 100%;
}

/* order_marks */
.popup_content_left_right .popup_content_left .order_marks { position: absolute; top: 55px; left: 0; z-index: 1;}
.popup_content_left_right .popup_content_left .order_marks .order_mark {
    display: none;
    margin-bottom: 10px;
}
.popup_content_left_right .popup_content_left .order_marks .order_mark .order_mark_wrap {
    width: 50px;
    display: flex;
    flex-wrap: wrap;
}
.popup_content_left_right .popup_content_left .order_marks .order_mark .order_mark_wrap .order_mark_title {background: var(--gtt-pink-red-color);border-radius: var(--gtt-border-radius);color: #fff;width: 50px;height: 50px;text-align: center;align-items: center;justify-content: center;display: flex;z-index: 1;margin-bottom: 10px;flex-wrap: wrap;}
.popup_content_left_right .popup_content_left .order_marks #is_don_hang_si {}
.popup_content_left_right .popup_content_left .order_marks #is_don_mua_ngoai {height: 60px;}
.popup_content_left_right .popup_content_left .order_marks #percent_gia_von_don_hang {
    display: none;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: var(--gtt-light-bg);
    height: 25px;
    border-radius: var(--gtt-border-radius);
    font-size: var(--gtt-font-size);
    color: var(--gtt-pink-red-color);
    font-weight: 600;
    border: none;
    width: 50px;
    padding: 10px 0;
}

.popup_content_left_right .popup_content_right {
    width: calc(100% - 470px);
    position: relative;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 15px;
}
.popup_content_left_right .popup_content_right.big {
    padding-top: 0;
}
.popup_content_left_right .popup_content_right_title {
    text-transform: uppercase;
    color: var(--gtt-primary-color);
    font-size: 29px;
    font-weight: 700;
    margin-bottom: 10px;
    position: relative;
}
.popup_content_left_right .popup_content_right_title_wrap_actions {
    position: relative;
    /* height: 43px; */
    text-transform: none;
}
.popup_content_left_right .popup_content_right_title_wrap_actions.fixed {
    position: absolute;
    right: 0;
    top: 13px;
}
.popup_content_left_right .popup_content_right_title_wrap_actions.fixed ul {
    height: 21px;
    overflow: hidden;
    line-height: 12px;
}
.popup_content_left_right .popup_content_right_title_wrap_actions .popup_content_right_title_actions {
    display: flex;
    justify-content: end;
    margin-bottom: 19px;
}
.popup_content_left_right .popup_content_right_title_actions li {
    /* margin-left: 15px; */
    position: relative;
}
.popup_content_left_right .popup_content_right_title_actions:not(.no_border) li::after {
    content: "";
    position: absolute;
    width: 2px;
    height: 100%;
    background: var(--gtt-border-color);
}
.popup_content_left_right .popup_content_right_title_wrap_actions .popup_content_right_title_actions li button,
.popup_content_left_right .popup_content_right_title_wrap_actions .popup_content_right_title_actions li a {
    border: 0;
    font-size: var(--gtt-font-size);
    margin: 0 14px;
    padding: 0;
    color: var(--bs-body-color);
    font-weight: 600;
    background: transparent;
    text-decoration: none;
}
.popup_content_left_right .popup_content_left_title {
    text-transform: uppercase;
    color: var(--gtt-primary-color);
    font-size: 29px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 10px;
    position: relative;
}
.popup_content_left_right .popup_content_left_title.left {
    text-align: left;
}
.popup_content_left_right .popup_content_left.border_right {
    width: 440px;
    margin-right: auto;
    /* box-shadow: 0px 0px 20px 0 #00000042; */
    /* overflow-y: auto; */
    /* overflow-x: hidden; */
}
.popup_content_left_right .popup_content_left.border_right:after {
    content: "";
    position: absolute;
    top: 0;
    right: -17px;
    width: 2px;
    height: 100%;
    background: #0000000d;
    box-shadow: 0 0 20px 0 #0000006e;
}
.popup_content_left_right .popup_content_left_title .popup_content_left_title_tabs {
    position: absolute;
    top: 50%;
    right: 0;
    display: flex;
    align-items: center;
    margin-top: 0;
    transform: translate(0, -50%);
}
.popup_content_left_right .popup_content_left_title .popup_content_left_title_tabs ul {
    --height: 21px;
    height: var(--height);
    overflow: hidden;
}
.popup_content_left_right .popup_content_left_title .popup_content_left_title_tabs ul li {
    line-height: 13px;
}
.popup_content_left_right .popup_content_left_title .popup_content_left_title_tabs ul li:after {
    height: var(--height);
}
.popup_content_left_right .popup_content_left_title .popup_content_left_title_tabs ul li button {
        border: 0;
        font-size: var(--gtt-font-size);
        margin: 0 14px;
        padding: 0;
        font-weight: 600;
        background: transparent;
        text-decoration: none;
}
.popup_content_left_right .popup_content_left_title p {}
.popup_content_left_right .popup_content_left_title p span {}
.popup_content_left_right .inline_label_value {
    background: var(--gtt-light-bg);
    padding: 6px 16px;
    border-radius: var(--gtt-border-radius);
    width: calc(100% - 120px);
    margin: 0 auto 12px auto;
}
.popup_content_left_right .inline_label_value ul {}
.popup_content_left_right .inline_label_value ul li {
    display: flex;
    width: 100%;
    font-size: 12px;
    font-weight: 700;
    align-items: start;
    position: relative;
}
.popup_content_left_right .inline_label_value ul li.divider {
    position: relative;
    height: 1px;
    margin: 5px 0;
    overflow: hidden;
}

.popup_content_left_right .inline_label_value ul li.divider::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    border-top: 2px dashed var(--gtt-border-color);
    height: 0;
}
.popup_content_left_right .inline_label_value ul li .label {
    width: 125px;
    text-align: left;
}
.popup_content_left_right .inline_label_value ul li .label.long_label {
    min-width: 190px;
}
.popup_content_left_right .inline_label_value ul li p {
    margin-left: auto;
    width: calc(100% - 115px);
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.popup_content_left_right .inline_label_value ul li.tong_tien_thanh_toan p {
    width: 165px;
}
.popup_content_left_right .inline_label_value ul li #receiver_address {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.popup_content_left_right .inline_label_value ul li #order_remain {
    color: var(--gtt-primary-color);
    font-size: 16px;
}

/* popup_content_right_body */
.popup_content_left_right .popup_content_right_body {
    /* height: calc(100% - 220px); */
    height: calc(100% - 225px);
    overflow: auto;
    display: flex;
    flex-direction: column;
}

.popup_content_left_right .order_items_table {
    margin-bottom: 10px;
}

/* popup_content_right_foot */
.popup_content_left_right .popup_content_right_foot {
    position: absolute;
    bottom: 0;
    width: calc(100% + 70px);
}


/* popup_content_left_foot */
.popup_content_left_right .popup_content_left_foot {
    text-align: center;
    position: relative;
    margin-top: 10px;
}
.popup_content_left_right .popup_content_left_foot .btn-large.btn-primary {
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 800;
}

/* popup_content_right_foot_info */
.popup_content_left_right .popup_content_right_foot_info {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    width: calc(100% - 70px);
}
.popup_content_left_right .popup_content_right_foot_info .popup_content_right_foot_info_list {
    display: flex;
}
.popup_content_left_right .popup_content_right_foot_info .popup_content_right_foot_info_list li {margin-right: 5px;transform: scale(0.9);}
.popup_content_left_right .popup_content_right_foot_info .popup_content_right_foot_info_list li.include_button {padding-right: 30px;}
.popup_content_left_right .popup_content_right_foot_info .popup_content_right_foot_info_list li button {
    border: 0;
    background: transparent;
    padding: 0 5px;
    color: var(--gtt-primary-color);
    font-size: 17px;
}
.popup_content_left_right .popup_content_right_foot_info_upload_file_content {
    margin-left: auto;
    margin-bottom: 3px;
    text-align: right;
    line-height: 31px;
    display: flex;
    /* flex-direction: column; */
    align-items: end;
}
.popup_content_left_right #wrap_file_hop_dong #upload_file_hop_dong {display: flex;}
.popup_content_left_right .popup_content_right_foot_info_upload_file_content input[type="file"] {
    width: 275px;
}
.popup_content_left_right .popup_content_right_foot_info_upload_file_content button {
    margin-left: auto;
}
.popup_content_left_right .popup_content_right_foot_info_wrap_upload_file {
    margin-left: auto;
    text-align: right;
    line-height: 31px;
    width: 380px;
}
.popup_content_left_right .popup_content_right_foot_info_wrap_upload_file .upload_file_info { display: flex; line-height: 20px; font-size: 13px; }
.popup_content_left_right .popup_content_right_foot_info_wrap_upload_file a {
    position: relative;
}
.popup_content_left_right .popup_content_right_foot_info_wrap_upload_file a:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--gtt-primary-color);
}
.popup_content_left_right .popup_content_right_foot_info_wrap_upload_file span {
    font-weight: 600;
    max-width: 140px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}
.popup_content_left_right .popup_content_right_foot_info_wrap_upload_file .upload_file_name {
    position: relative;
}
.popup_content_left_right .popup_content_right_foot_info_wrap_upload_file .upload_file_time { margin-left: auto; }
.popup_content_left_right .popup_content_right_foot_info_wrap_upload_file [data-action="delete-file-upload"] {
    position: absolute;
    top: -4px;
    right: -15px;
    padding: 0;
}


/*************** preview_img ***************/
.wrap_preview_img {
    position: relative;
    display: inline-flex;
}

.wrap_preview_img input[type="file"] {
    display: none;
}

.wrap_preview_img .preview_img {
    height: 45px;
    max-width: 100px;
    object-fit: contain;
    margin-left: auto;
    margin-right: auto;
}

.wrap_preview_img .preview_img_title {
    cursor: pointer;
}

.wrap_preview_img .preview_img_title i {
    font-size: 28px;
    display: block;
}

.wrap_preview_img .preview_img_title .preview_txt {
    margin-top: 3px;
    display: inline-block;
}

.wrap_preview_img .delete_preview_img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 20px;
    width: 20px;
    line-height: 20px;
    background: red;
    border: 0;
    padding: 0;
    margin: 0;
    display: none;
}

/*************** error ***************/
.error {
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}

.error_message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 35px;
    text-align: center;
    width: 100%;
}

/*************** user_avatar ***************/
.user_avatar {
    height: var(--gtt-avatar-sm);
    width: var(--gtt-avatar-sm);
    display: inline-block;
    overflow: hidden;
    border-radius: 100%;
    object-fit: cover;
    background: #fff;
}

.user_avatar_lg {
    height: var(--gtt-avatar);
    width: var(--gtt-avatar);
    display: inline-block;
    overflow: hidden;
    border-radius: 100%;
    object-fit: contain;
}

/*************** product_thumbnail ***************/
.product_thumbnail {
    height: var(--gtt-product-thumb);
    width: var(--gtt-product-thumb);
    display: inline-block;
    overflow: hidden;
    object-fit: cover;
    background: #fff;
    cursor: pointer;
}

.product_thumbnail_lg {
    height: var(--gtt-product-thumb-lg);
    width: var(--gtt-product-thumb-lg);
    display: inline-block;
    overflow: hidden;
    border-radius: 100%;
    object-fit: contain;
}

/*************** payment_method ***************/
.icon_payment_method {
    width: 30px;
    height: 30px;
}

/*************** bubble_buttons right sidebar ***************/
.bubble_buttons {
    display: flex;
    flex-wrap: wrap;
}

.bubble_buttons .bubble_button .bubble_button_actions {
    position: absolute;
    left: 0;
    top: -5px;
    width: 100%;
}

.bubble_buttons .bubble_button .bubble_button_actions button {
    border: 0;
    background: var(--gtt-light-bg);
    border-radius: 100%;
    padding: 0;
    width: 25px;
    height: 25px;
    position: absolute;
}

.bubble_buttons .bubble_button .bubble_button_actions .remove_bubble {
}

.bubble_buttons .bubble_button .bubble_button_actions .edit_bubble {
    right: 0;
}

.bubble_buttons .bubble_button {
    width: calc((100% - 20px) / 2);
    background: var(--gtt-light-bg);
    position: relative;
    border-radius: var(--gtt-border-radius-large);
    padding-top: 18px;
    padding-bottom: 5px;
    margin-bottom: 25px;
    min-height: 133px;
    margin-top: 15px;
}

.bubble_buttons .bubble_button:nth-child(2n+2) {
    margin-left: auto;
    margin-right: 5px;
}

.bubble_buttons .bubble_button.brighten {
    z-index: 1100;
}

.bubble_buttons .bubble_button.add_new {
}

.bubble_buttons .bubble_button.add_new button {
    background: transparent;
    border: 0;
    height: 100%;
    width: 100%;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    font-size: 65px;
}

.bubble_buttons .slick-single-slide {
    width: calc((100% - 15px) / 2);
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.bubble_buttons .slick-single-slide .bubble_button {
    /* width: 100%; */
}

.bubble_buttons .bubble_button_members {
    display: flex;
    justify-content: center;
    position: absolute;
    width: 100%;
    top: -15px;
}

.bubble_buttons .bubble_button_members .bubble_button_member {
}

.bubble_buttons .bubble_button_members .bubble_button_member img {
}

.bubble_buttons .bubble_button_title {
    text-align: center;
    font-size: var(--gtt-font-size);
    font-weight: 600;
    color: var(--gtt-primary-color);
}

.bubble_buttons .bubble_button_content {
    padding: 0 15px;
    margin-top: 5px;
    text-align: center;
}

.bubble_buttons .bubble_button_orders {
    padding: 0 15px;
    margin-top: 5px;
}

.bubble_buttons .bubble_button_orders ul {
    display: flex;
    flex-wrap: wrap;
    min-height: 90px;
    align-content: flex-start;
}

.bubble_buttons .bubble_button_orders ul li, .bubble_buttons .bubble_button_orders ul .draggable_order_id {
    width: calc((100% - 10px) / 2);
    text-align: center;
    border: 1px solid var(--gtt-primary-color);
    border-radius: var(--gtt-border-radius-large);
    font-size: var(--gtt-font-size);
    text-overflow: ellipsis;
    /* overflow: hidden; */
    padding: 0 5px;
    margin-bottom: 10px;
    margin-right: 10px;
    height: 25px;
    line-height: 25px;
    cursor: pointer;
    position: relative;
    background: #fff;
}

.bubble_buttons .bubble_button_orders ul li:nth-child(2n+2) {
    margin-right: 0;
}

.bubble_buttons .bubble_button_orders ul li.new_added, .bubble_buttons .bubble_button_orders ul .draggable_order_id {
    background: var(--gtt-primary-color);
    color: #fff;
}

.bubble_buttons .bubble_button_orders ul li .san_xuat_popup_action {
    border: 0;
    background: var(--gtt-light-bg);
    border-radius: 100%;
    padding: 0;
    width: 15px;
    height: 15px;
    position: absolute;
    top: -5px;
    left: -5px;
}

.bubble_buttons .bubble_button.primary, .bubble_buttons .bubble_button.primary .bubble_button_actions button {
    background: var(--gtt-primary-color);
    color: #fff;
}

.bubble_buttons .bubble_button.primary .bubble_button_title {
    color: #fff;
}

.bubble_buttons .bubble_button .bubble_button_bot_actions {
    position: absolute;
    bottom: -12px;
    right: -5px;
}

.bubble_buttons .bubble_button .bubble_button_bot_actions button {
    background: transparent;
    border: none;
    padding: 0;
}

.bubble_buttons .bubble_button .bubble_button_bot_actions button i {
    width: 22px;
    height: 22px;
}

/*************** thiet_lap_options right sidebar ***************/
.thiet_lap_options .table {
}

.thiet_lap_options .table thead {
}

.thiet_lap_options .table tfoot {
}

.thiet_lap_options .table .user_name {
    font-size: var(--gtt-font-size);
}

.thiet_lap_options .table .user_name input {
    border-radius: var(--gtt-border-radius-large);
    border-color: var(--gtt-primary-color);
    text-align: center;
    font-size: var(--gtt-font-size);
    width: 100%;
    height: 32px;
}

.thiet_lap_options .table .dinh_khoan_name {
}

.thiet_lap_options .table .dinh_khoan_name button,
.thiet_lap_options .table .dinh_khoan_type_name button {
    border: 0;
    padding: 0;
    /* font-size: var(--gtt-font-size); */
}

.thiet_lap_options .table .dinh_khoan_name button:hover {
    color: var(--gtt-primary-color);
}

.thiet_lap_options .table .dinh_khoan_type {
    /* display: none; */
}

.thiet_lap_options .table .ky_nang_user {
}

.thiet_lap_options .table .ky_nang_user select {
    border: 0;
    font-size: var(--gtt-font-size);
}

.thiet_lap_options .table .hieu_suat {
}

.thiet_lap_options .table .hieu_suat input {
    border-radius: var(--gtt-border-radius-large);
    border-color: var(--gtt-primary-color);
    text-align: center;
    font-size: var(--gtt-font-size);
    width: 90px;
    height: 32px;
}

.tab_content .tab_actions .open_create_popup {
    width: 100%;
    background: var(--gtt-light-bg);
    height: 45px;
    font-size: var(--gtt-font-size);
    margin: 10px 0 25px 0;
}

.thiet_lap_options .table .open_create_popup i {
    margin-right: 5px;
}

/*************** comment ***************/
.wrap_comment {
    /* display: flex; */
}

.wrap_comment .wrap_comment_box {
    display: flex;
    margin-bottom: 18px;
    margin-bottom: 0;
    width: 100%;
    /* height: 400px; */
}

.wrap_comment_box .media_box {
    position: relative;
    width: calc(100% - 325px);
    /* margin-right: auto; */
    background: var(--gtt-light-bg);
    border-radius: var(--gtt-border-radius);
    border: 1px solid var(--gtt-light-bg);
    padding: 10px 0 10px 15px;
    height: 110px;
}

.wrap_comment_box .media_box .comment_box_title {
    line-height: 40px;
    /* padding-bottom: 16px; */
    font-size: 16px;
    font-weight: 700;
}

.wrap_comment_box .media_box textarea {
    border: 0;
    background: transparent;
    width: calc(100% - 65px);
    outline: 0;
    resize: none;
    display: block;
    height: calc(100% - 40px);
}

.wrap_comment_box .media_box .comment_action {
    border: 0;
    background: transparent;
    font-size: 27px;
    padding: 0;
    position: absolute;
    bottom: 10px;
    right: 15px;
}

.wrap_comment_box .media_box .comment_wrap_images {
    position: absolute;
    right: 15px;
    top: 15px;
    text-align: right;
    display: flex;
}
.wrap_comment_box .media_box .comment_wrap_images > div[id] {
    display: flex;
    gap: 7px;
    border: 1px solid transparent;
}
.wrap_comment_box .media_box .comment_wrap_images #order_comment_files {
    display: flex;
    /* flex-direction: column; */
    justify-content: right;
    margin-bottom: 15px;
    flex-wrap: wrap;
    max-width: 280px;
}

.wrap_comment_box .media_box .comment_wrap_images #yeu_cau_comment_files {
    display: flex;
    /* flex-direction: column; */
    justify-content: right;
    margin-bottom: 15px;
    flex-wrap: wrap;
    max-width: 280px;
}

.wrap_comment_box .media_box .comment_wrap_images .wrap_preview_img {
    /* margin-left: 7px; */
    justify-content: center;
    height: 30px;
    align-items: center;
    /* margin-bottom: 5px; */
}

.wrap_comment_box .media_box .comment_wrap_images .wrap_preview_img .preview_img {
    height: 30px;
    max-width: 60px;
}

.wrap_comment_box .media_box .comment_wrap_images .preview_img_title i {
    font-size: 28px;
}

.wrap_comment_box .uploaded_images {
    width: 315px;
    margin-left: auto;
}

.wrap_comment_box .uploaded_images .g-scrolling-carousel .items {
    font-size: 0;
}

.wrap_comment_box .uploaded_images .g-scrolling-carousel .items .item_scroll img {
    height: 110px;
    display: block;
    cursor: pointer;
}

/*************** .list_comments ***************/
.list_comments {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    width: calc(100% - 10px);
    margin-top: auto;
    margin-bottom: 15px;
}

.list_comments .one_comment {
    display: flex;
    width: 100%;
    margin-bottom: 15px;
}

.comment_images ul {
    display: flex;
    flex-wrap: wrap;
}

.comment_images ul li {
    margin-right: 5px;
}

.comment_images ul li img {
    max-height: 45px;
    cursor: pointer;
    max-width: 100px;
}

.list_comments .seller_avatar {
    margin-right: 7px;
}

.list_comments .seller_avatar img {
    /* height: 50px; */
    /* border-radius: 100%; */
}

.list_comments .seller_comment {width: 100%;}

.list_comments .seller_comment .comment_head {
    display: flex;
    margin-top: 3px;
}

.list_comments .seller_comment .seller_name {
    color: var(--gtt-primary-color);
    margin-right: 10px;
}

.list_comments .seller_comment .comment_time {
    position: relative;
}

.list_comments .seller_comment .comment_time .payment_method {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    margin-left: 10px;
}

.list_comments .seller_comment .comment_content {
    margin-bottom: 5px;
}

.list_comments .seller_comment .comment_content p {}

/* my comment */
.list_comments .one_comment.my_comment {
    margin-left: auto;
    flex-direction: row-reverse;
}

.list_comments .one_comment.my_comment .comment_head {
    flex-direction: row-reverse;
}

.list_comments .one_comment.my_comment .comment_time .payment_method {
    right: 100%;
    margin-right: 10px;
    margin-left: 0;
}

.list_comments .one_comment.my_comment .comment_head .seller_name {
    margin-right: 0;
    margin-left: 10px;
}

.list_comments .one_comment.my_comment .comment_title,
.list_comments .one_comment.my_comment .comment_content {
    text-align: right;
}
/* comment_warehouse_in_out_log */
.list_comments .one_comment .comment_warehouse_in_out_log .materials_table {
    width: 95%;
}
.list_comments .one_comment.my_comment .comment_warehouse_in_out_log .materials_table {margin-left: auto;}
.list_comments .one_comment .comment_warehouse_in_out_log .materials_table .material_name {
    padding-left: 15px;
}



.list_comments .one_comment .comment_chat_lieus_phu_kiens {
    display: flex;
    gap: 7px;
    margin-bottom: 5px;
}
.list_comments .one_comment.my_comment .comment_chat_lieus_phu_kiens {
    display: flex;
    justify-content: end;
}
.list_comments .one_comment .comment_vat_tu {
}
.list_comments .one_comment .comment_vat_tu .comment_vat_tu_title {}
.list_comments .one_comment .comment_vat_tu .comment_vat_tu_imgs {
    display: inline-flex;
    border: 1px solid var(--gtt-border-light-color);
    padding: 5px 5px;
    border-radius: var(--gtt-border-radius);
}
.list_comments .one_comment .comment_vat_tu .comment_vat_tu_img {
    max-width: 85px;
    text-align: center;
    line-height: 14px;
}
.list_comments .one_comment .comment_vat_tu .comment_vat_tu_img img {
    height: 60px;
    width: 60px;
    object-fit: cover;
    border-radius: 100%;
    display: block;
    margin: auto;
}
.list_comments .one_comment .comment_vat_tu .comment_vat_tu_img span {
    font-size: 12px;
}
.list_comments .my_comment .seller_avatar {
    margin-left: 7px;
    margin-right: 0;
}

.list_comments .my_comment .comment_images ul {
    /* flex-direction: row-reverse; */
    justify-content: flex-end;
}

/*************** wrap_tab_togglers ***************/
.wrap_tab_togglers {
    text-align: center;
    margin-top: 6px;
    position: relative;
}

.wrap_tab_togglers ul {
    display: inline-flex;
    width: 100%;
    justify-content: center;
}

.wrap_tab_togglers ul li {
    position: relative;
}

.wrap_tab_togglers ul li:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
    height: 23px;
    width: 1px;
    background: var(--gtt-border-color);
}

.wrap_tab_togglers ul li:last-child:after {
    display: none;
}
.wrap_tab_togglers ul li button {
    border: 0;
    font-size: var(--gtt-font-size);
    font-weight: 600;
    color: var(--bs-body-color);
    background: transparent;
}

.wrap_tab_togglers ul li.active {}

.wrap_tab_togglers ul li.active button {
    color: var(--gtt-primary-color);
}
.wrap_tab_togglers.round-togglers ul {}
.wrap_tab_togglers.round-togglers li {
    width: 180px;
}
.wrap_tab_togglers.round-togglers li.active:last-child {
    margin-left: -35px;
}
.wrap_tab_togglers.round-togglers ul li:after {
    display: none;
}
.wrap_tab_togglers.round-togglers li button {
    /* color: var(--gtt-primary-color); */
    display: block;
    width: 100%;
    line-height: 33px;
    font-size: var(--gtt-font-size);
    border: 1px solid var(--gtt-border-light-color);
    background: var(--gtt-border-light-color);
}
.wrap_tab_togglers.round-togglers li.active {
    z-index: 1;
}
.wrap_tab_togglers.round-togglers li.active button {
    width: calc(100% + 35px);
    background: var(--gtt-primary-color);
    color: #fff;
}

.wrap_tab_togglers .head_tab_actions {
    position: absolute;
    right: 0;
    top: 0;
}

.wrap_tab_togglers .head_tab_actions button {
    border: 0;
    padding: 4px 0;
    font-size: 16px;
}

/*************** wrap_tab_contents ***************/
.wrap_tab_contents {
    margin-top: 30px;
    width: 100%;
}

.wrap_tab_contents .tab_content {
    display: none;
    position: relative;
}

.tab_content .tab_content_title {
    text-align: center;
    text-transform: uppercase;
    font-size: var(--gtt-font-size);
    font-weight: 600;
    margin-bottom: 10px;
}

.wrap_tab_contents .tab_content.active {
    display: block;
}
.wrap_tab_contents .wrap_thiet_lap_options {
    /* border-bottom: 1px solid var(--gtt-border-light-color); */
}
.wrap_tab_contents .wrap_thiet_lap_options:last-child {
    border-bottom: 0;
}
.wrap_tab_contents .thiet_lap_options {
    margin-top: 20px;
    min-height: 300px;
    margin-bottom: 20px;
    max-height: 400px;
    overflow: auto;
}

.wrap_tab_contents .thiet_lap_options table {
}

.wrap_tab_contents .thiet_lap_options table th {
    color: #000;
    font-size: var(--gtt-font-size);
    padding: 5px 5px;
}

.wrap_tab_contents .tab_actions {
    text-align: center;
}

.wrap_tab_contents .tab_actions .save_thiet_lap {
    text-transform: uppercase;
    font-size: var(--gtt-font-size);
    height: 68px;
    width: 300px;
    font-weight: 600;
}

/*************** pagination ***************/
.pagination {
    margin-top: 15px;
}

.pagination ul {
    display: flex;
    justify-content: center;
    align-items: center;
}

.pagination ul li {
    margin: 0 5px;
}

.pagination ul li.page-empty {
    letter-spacing: 1px;
}

.pagination ul li button {
    border: 1px solid var(--gtt-primary-color);
    border-radius: var(--gtt-border-radius);
    height: 35px;
    width: 35px;
    padding: 0;
    font-size: var(--gtt-font-size);
}

.pagination ul li button.active {
    background: var(--gtt-primary-color);
    color: #fff;
}

/* air-datepicker */
.air-datepicker-global-container {
    z-index: 2000;
}

/************* timepicker *************/
.timepicker {
    display: flex;
    align-items: center;
    font-size: 18px;
    border: 1px solid var(--gtt-border-color);
    border-radius: var(--gtt-border-radius);
    padding: 5px 10px;
    /* width: 93px; */
    /* justify-content: space-between; */
    background-color: white;
    height: 25px;
}

.timepicker.no_border {
    border: 0;
}

.timepicker input {
    width: 20px;
    text-align: center;
    height: 100%;
    border: none;
    outline: none;
    background: transparent;
    padding: 0;
}

.timepicker .colon {
    pointer-events: none; /* Ngăn user chọn dấu : */
    position: relative;
    width: 4px;
}
.timepicker .colon::after,
.timepicker .colon::before {
    content: ".";
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    height: 1px;
}
.timepicker .colon::after {
    bottom: 13px;
}
.timepicker .colon::before {
    top: -19px;
}


/*************** Scrollbar ***************/
::-webkit-scrollbar {
    width: 8px; /* Đặt độ rộng thanh cuộn nhỏ lại */
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background-color: var(--gtt-primary-color); /* Màu của thanh kéo cuộn */
    border-radius: 4px; /* Bo tròn thanh kéo */
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--gtt-primary-color); /* Màu khi di chuột qua thanh kéo */
}

::-webkit-scrollbar-track {
    background-color: #f1f1f1; /* Màu nền của thanh cuộn */
    border-radius: 4px;
}


/* list round buttons */
.wrap_list_round_buttons {
    position: relative;
    height: 100%;
}
.wrap_list_round_buttons .list_round_buttons {
    display: flex;
    flex-wrap: wrap;
    /* overflow: hidden; */
    gap: 0 15px;
    overflow: auto;
    height: 100%;
    padding: 0 10px;
}
.wrap_list_round_buttons .list_round_buttons li {
    /* margin-right: 5px; */
    width: calc((100% - 75px) / 6);
    margin-bottom: 15px;
}
.wrap_list_round_buttons .list_round_buttons li.no_data {
    width: 100% !important;
    text-align: center;
}
.wrap_list_round_buttons .list_round_buttons.col_4 li {
    width: calc((100% - 45px) / 4);
}
.wrap_list_round_buttons .list_round_buttons li:last-child {
    margin-right: 0;
}
.wrap_list_round_buttons .list_round_buttons li button {
    text-align: center;
    background: transparent;
    border: 0;
    font-weight: 500;
    position: relative;
    font-size: var(--gtt-font-size);
    padding: 0;
    border: 1px solid var(--gtt-border-light-color);
    /* height: 35px; */
    border-radius: var(--gtt-border-radius);
    width: 100%;
    position: relative;
    padding-bottom: 7px;
}
/* .wrap_list_round_buttons .list_round_buttons li button:before {
    content: "\f00c";
    font-family: fontawesome;
    color: #55acee;
    display: none;
} */
.wrap_list_round_buttons .list_round_buttons li button.toggle_active:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200px;
    background: rgb(0 0 0 / 60%);
    border-radius: var(--gtt-border-radius);
}
.wrap_list_round_buttons .list_round_buttons li button.toggle_active.active:after {
    display: none;
}
.wrap_list_round_buttons .list_round_buttons li button .list_round_button_sticker {
    position: absolute;
    top: 158px;
    left: 50%;
    transform: translate(-50%, 0);
    display: none;
    background: #fff;
    border-radius: 20px;
    width: 52px;
    height: 32px;
    line-height: 32px;
    min-width: 90px;
    z-index: 1;
}
.wrap_list_round_buttons .list_round_buttons li button .list_round_button_sticker.opacity70 {
    background: rgba(255, 255, 255, 0.70);
}
.wrap_list_round_buttons .list_round_buttons li button .list_round_button_sticker.dark_bg {
    background: rgb(241 241 241 / 50%);
    width: 160px;
    font-size: 18px;
}
.wrap_list_round_buttons .list_round_buttons li button .list_round_button_sticker i {
    width: 30px;
    height: 30px;
    margin-top: 1px;
}
.wrap_list_round_buttons .list_round_buttons li button .list_round_button_sticker.active {
    display: block;
}
.wrap_list_round_buttons .list_round_buttons li.active button {
    color: #55acee;
    color: #55acee;
    border-color: #55acee;
}
.wrap_list_round_buttons .list_round_buttons li button img {
    display: block;
    margin: auto;
    margin-bottom: 5px;
    height: 200px;
    /* max-width: 70px; */
    width: 100%;
    object-fit: cover;
    border-radius: var(--gtt-border-radius);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.wrap_list_round_buttons .list_round_buttons {
    position: relative;
    height: 100%;
}
.wrap_list_round_buttons .wrap_list_round_button_search {}
.wrap_list_round_buttons .wrap_list_round_button_search .list_round_button_search_left {
    position: absolute;
    top: -75px;
    left: 15px;
    height: 44px;
    width: 270px;
}
.wrap_list_round_buttons .wrap_list_round_button_search .list_round_button_search_right {
    position: absolute;
    top: -75px;
    right: 17px;
    height: 44px;
    min-width: 200px;
}
.wrap_list_round_buttons .wrap_list_round_button_search .list_round_button_search_left input {
    width: 100%;
    border-radius: 65px;
    border-color: var(--gtt-border-light-color);
}
.wrap_list_round_buttons .wrap_list_round_button_search .list_round_button_search_right select {
    width: 100%;
    border-radius: 65px;
    border-color: var(--gtt-border-light-color);
}
.wrap_list_round_buttons .list_round_buttons.no-border li button {
    border: 0;
    /* border-radius: var(--gtt-border-radius); */
    transition: transform 0.3s ease;
}
.wrap_list_round_buttons .list_round_buttons.no-border li button img {
    border-radius: var(--gtt-border-radius);
}


/* list_thong_bao_work */
.list_thong_bao_work {
    margin: 10px 0 50px 0;
    text-align: center;
}
.list_thong_bao_work .hide_complete_noti_checkbox {margin: 15px;display: block;}
.list_thong_bao_work .thong_bao_work_title {
    text-align: center;
    font-size: var(--gtt-font-size);
    font-weight: 600;
    text-transform: uppercase;
}
.list_thong_bao_work .list_side_work {}
.list_thong_bao_work .list_side_work li {
    display: flex;
    align-items: center;
    background: var(--gtt-light-bg);
    margin: 12px 0;
    padding: 7px 45px 7px 20px;
    height: 40px;
    border-radius: var(--gtt-border-radius-large);
    position: relative;
}
.list_thong_bao_work .list_side_work li .work_name {
    text-overflow: ellipsis;
    overflow: hidden;
    /* white-space: nowrap; */
}
.list_thong_bao_work .list_side_work li .work_name button {
    border: 0;
    background: transparent;
    padding: 0;
    text-align: left;
}
.list_thong_bao_work .list_side_work li .work_name button:hover {
    color: var(--gtt-primary-color);
}
.list_thong_bao_work .list_side_work li .work_status {
    position: absolute;
    top: 8px;
    right: 10px;
}
.list_thong_bao_work .list_side_work li .work_status input[type="checkbox"]{}



/*************** main_content_wrapper ***************/
.main_content_wrapper .page_head {}

/* main_content_left */
.main_content_wrapper .content_design {
    display: flex;
    align-items: flex-start;
}
.main_content_wrapper .main_content_left {
    width: calc(100% - 477px);
}
.main_content_wrapper .main_content_left .table {}
.main_content_wrapper .ngay_giao {
    font-size: var(--gtt-font-size);
}
.main_content_wrapper .ngay_giao .ngay_giao_detail {
    font-size: var(--gtt-font-size);
}
.main_content_wrapper .ngay_giao span {}
.main_content_wrapper .page_head {}
.main_content_wrapper .main_content_left .table {}
.main_content_wrapper .ngay_giao {
    font-size: var(--gtt-font-size);
}
.main_content_wrapper .ngay_giao .ngay_giao_detail {
    font-size: var(--gtt-font-size);
}
.main_content_wrapper .ngay_giao span {}
.main_content_wrapper .main_content_left #orders_san_xuat_complete .point {}
.main_content_wrapper .main_content_left #orders_san_xuat_complete .order_status {}
.main_content_wrapper .main_content_left #orders_san_xuat_complete .order_status .btn {}

/* main_content_right */
.main_content_wrapper .main_content_right {
    width: 460px;
    margin-left: auto;
    position: relative;
}
.main_content_wrapper .main_content_right.sticky {
    position: sticky;
    top: 20px;
}
.main_content_wrapper .main_content_right .main_content_right_content {    
    background: #fff;
    border-radius: var(--gtt-border-radius-large);
    padding: 25px 10px;
}
.main_content_wrapper .main_content_right .main_content_right_title {
    text-transform: uppercase;
    font-size: var(--gtt-font-size-lg);
    text-align: center;
    font-weight: 700;
    border-bottom: 1px solid var(--gtt-light-bg);
    padding-bottom: 8px;
    margin-bottom: 16px;
}
.main_content_wrapper .main_content_right .main_content_right_body {}
.main_content_wrapper .main_content_right .main_content_right_body .main_content_right_body_section {
    margin-bottom: 15px;
}
.main_content_wrapper .main_content_right .main_content_right_body .main_content_right_body_section_title {
    text-align: center;
    font-size: var(--gtt-font-size-lg);
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.main_content_wrapper .main_content_right .filter_orders_by_area {}
.main_content_wrapper .main_content_right .filter_orders_by_area ul {
    display: flex;
}
.main_content_wrapper .main_content_right .filter_orders_by_area ul li {width: 50%;}
.main_content_wrapper .main_content_right .filter_orders_by_area ul li button {
    color: var(--gtt-primary-color);
    display: block;
    width: 100%;
    line-height: 33px;
    font-size: var(--gtt-font-size);
    border: 1px solid var(--gtt-primary-color);
}
.main_content_wrapper .main_content_right .filter_orders_by_area ul li.active {
    z-index: 1;
    /* width: calc(100% + 35px); */
}
.main_content_wrapper .main_content_right .filter_orders_by_area ul li.active:last-child {
    margin-left: -35px;
}
.main_content_wrapper .main_content_right .filter_orders_by_area ul li.active button {
    width: calc(100% + 35px);
    background: var(--gtt-primary-color);
    color: #fff;
}
.main_content_wrapper .main_content_right .filter_design_by_status {
    text-align: center;
    margin-top: 6px;
}
.main_content_wrapper .main_content_right .filter_design_by_status ul {display: inline-flex;}
.main_content_wrapper .main_content_right .filter_design_by_status ul li {
    position: relative;
}
.main_content_wrapper .main_content_right .filter_design_by_status ul li:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
    height: 23px;
    width: 1px;
    background: var(--gtt-border-color);
}
.main_content_wrapper .main_content_right .filter_design_by_status ul li:last-child:after {
    display: none;
}
.main_content_wrapper .main_content_right .filter_design_by_status ul li button {
    border: 0;
    font-size: var(--gtt-font-size);
    font-weight: 600;
    color: var(--gtt-border-color);
}
.main_content_wrapper .main_content_right .filter_design_by_status ul li.active {}
.main_content_wrapper .main_content_right .filter_design_by_status ul li.active button {
    color: var(--gtt-primary-color);
}

/******** gtt_section_badge ********/
.gtt_section_badge {
    border: 1px solid var(--gtt-primary-color);
    border-radius: var(--gtt-border-radius);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--gtt-light-bg);
    padding: 15px 15px;
    position: relative;
}
.gtt_wrap_badges {
    display: flex;
    flex-wrap: wrap;
}
.gtt_wrap_badges.col_2 {
    --gap: 15px;
    gap: var(--gap);
}
.gtt_wrap_badges.col_2 .gtt_section_badge {
    width: calc((100% - var(--gap)) / 2);
}
.gtt_wrap_badges .gtt_section_badge.primary {
    color: var(--gtt-primary-color);
}
.gtt_wrap_badges .gtt_section_badge .badge_title {font-size: var(--gtt-font-size);}
.gtt_wrap_badges .gtt_section_badge .badge_content {
    font-size: var(--gtt-font-size-xl);
}
.gtt_wrap_badges .gtt_section_badge .badge_content span {font-weight: 700;}


/*********** hide_info_overlay ***********/
.hide_info_overlay {
    position: absolute;
    height: calc(100% + 20px);
    width: calc(100% - 14px);
    top: -10px;
    left: -10px;
    background: rgb(0 0 0 / 80%);
    z-index: 1;
    border-top-left-radius: var(--gtt-border-radius);
    border-bottom-left-radius: var(--gtt-border-radius);
    display: none;
}
.popup_content_left_right .popup_content_left.border_right .hide_info_overlay {
    width: 465px;
}
.hide_info_overlay [data-action="close-bao-hanh-overlay"] {
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 39px;
    position: absolute;
    right: 0;
    top: 0;
}
.hide_info_overlay .hide_info_content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /* width: 332px; */
    width: 100%;
    text-align: center;
}
.hide_info_overlay .hide_info_content button {
    border: 0;
    padding: 0;
    background: transparent;
    width: 100%;
}
.hide_info_overlay .hide_info_content button:hover {
    animation: heartbeat 0.8s ease-in-out infinite;
}
.hide_info_content .hide_info_thumb {width: 290px;}
.hide_info_content .hide_info_info {}
.hide_info_info .hide_info_title {
    border: 0;
    background: transparent;
    color: #fff;
    font-size: var(--gtt-font-size-xl);
    font-style: normal;
}
.hide_info_info .hide_info_title i {
    width: 30px;
    height: 30px;
    vertical-align: middle;
}
.hide_info_info .hide_info_expire {
    text-align: center;
}
.hide_info_info .hide_info_expire .hide_info_text {
    color: #fff;
    font-style: italic;
}
.hide_info_info .hide_info_expire .hide_info_text span {}


/************* progress_bar *************/
.wrap_gtt_progress_bars {
    display: flex;
    position: relative;
}
.wrap_gtt_progress_bars .gtt_progress_bars {
    width: 100%;
}
.wrap_gtt_progress_bars .gtt_progress_bars .gtt_progress_bar_row {
    display: flex;
    font-size: var(--gtt-font-size);
    line-height: 30px;
    align-items: center;
    margin-bottom: 7px;
    min-width: 130px;
    --label-width: 125px;
}
.wrap_gtt_progress_bars .gtt_progress_bars .gtt_progress_bar_row.no_data {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--gtt-font-size-lg);
    z-index: 1;
    width: 100%;
    text-align: center;
    display: block;
}
.wrap_gtt_progress_bars .gtt_progress_bars .gtt_progress_bar_row .gtt_progress_row_label {
    display: flex;
    z-index: 1;
    min-width: var(--label-width);
}
.wrap_gtt_progress_bars .gtt_progress_bars .gtt_progress_bar_row .gtt_progress_row_label img {}
.wrap_gtt_progress_bars .gtt_progress_bars .gtt_progress_bar_row .gtt_progress_row_label p {
    margin-left: 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
    text-align: left;
}
.wrap_gtt_progress_bars .gtt_progress_bars .gtt_progress_bar_row .gtt_progress {
    position: relative;
    height: 32px;
    width: 100%;
}
.wrap_gtt_progress_bars .gtt_progress_bars .gtt_progress_bar_row .gtt_progress:before {
    content: "";
    position: absolute;
    background: var(--gtt-primary-color);
    height: 100%;
    width: 50px;
    left: 0;
    border-radius: var(--gtt-border-radius-large);
}
.wrap_gtt_progress_bars .gtt_progress_bars .gtt_progress_bar_row .gtt_progress .gtt_progress_bar {
    border-radius: var(--gtt-border-radius-large);
    min-width: 50px;
    background: var(--gtt-primary-color);
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    cursor: pointer;
    /* z-index: 1; */
}
.wrap_gtt_progress_bars .gtt_progress_bars .gtt_progress_bar_row .gtt_progress .gtt_progress_bar.estimation {
    z-index: 1;
    background: rgb(85 172 238 / 30%);
}
.wrap_gtt_progress_bars .gtt_progress_bars .gtt_progress_bar_row .gtt_progress .gtt_progress_bar.estimation .gtt_progress_bar_tool_tip {
    position: absolute;
    left: 100%;
    margin-left: 10px;
    color: #fff;
    background: rgb(131 131 131 / 60%);
    border-radius: var(--gtt-border-radius);
    padding: 1px 10px;
    z-index: 1;
    display: none;
}
.wrap_gtt_progress_bars .gtt_progress_bars .gtt_progress_bar_row .gtt_progress .gtt_progress_bar.estimation:hover .gtt_progress_bar_tool_tip {
    display: block;
}
.wrap_gtt_progress_bars .gtt_progress_bars .gtt_progress_bar_row .gtt_progress_amount {
    color: #fff;
    z-index: 1;
    display: inline-block;
    line-height: 32px;
    position: absolute;
    left: 10px;
}
.wrap_gtt_progress_bars .gtt_progress_bars .gtt_progress_bar_row .gtt_progress_amount_end_row {
    position: absolute;
    right: 0;
    font-weight: 600;
}
.wrap_gtt_progress_bars .gtt_progress_bars .gtt_progress_bar_row .sales_seller_reward {
    position: absolute;
    display: none;
    top: 0;
    right: 12px;
}
.wrap_gtt_progress_bars .gtt_progress_bars .gtt_progress_bar_row .sales_seller_reward.active {
    display: flex;
    z-index: 5;
}
.wrap_gtt_progress_bars .gtt_progress_bars .gtt_progress_bar_row .sales_seller_reward button {
    border: 0;
    background: 0;
    padding: 0;
    height: 30px;
    /* filter: contrast(0.3); */
    filter: brightness(1.2);
    opacity: 0.5;
}
.wrap_gtt_progress_bars .gtt_progress_bars .gtt_progress_bar_row .sales_seller_reward button.is_mine {
    opacity: 1;
    filter: none;
}
.wrap_gtt_progress_bars .gtt_progress_bars .gtt_progress_bar_row .sales_seller_reward img {
    height: 45px;
    position: relative;
    top: -10px;
    /* filter: brightness(1.5); */
}

/* Hover show move down effect */
.hover_show_move_down {
    position: relative;
}

.hover_show_move_down .move_up {
    transition: transform 0.3s ease;
}

.hover_show_move_down .move_down {
    position: absolute;
    top: 50%;
    left: 50%;
    /* width: 100%; */
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: all 0.3s ease;
    visibility: hidden;
    z-index: -1;
}

.hover_show_move_down .move_up:hover {
    transform: translateY(-3px);
}

.hover_show_move_down .move_up:hover + .move_down {
    transform: translate(-50%, 20px);
    opacity: 1;
    visibility: visible;
    z-index: 0;
}