/************** variable **************/
/*
    màu sáng chủ đạo: #55acee;
    màu đậm chủ đạo: #4371a3;
    màu xám chủ đạo: #f2f2f2;
    màu đỏ chủ đạo: #e73838;
    màu xanh lá chủ đạo: #73bf43;
*/

ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.type-page ul,
.type-product ul,
.post-container ul {
    list-style: disc;
}

.type-page ul li h4,
.type-product ul li h4,
.post-container ul li h4 {
    display: inline;
}

.clearfix:after{
    content: "";
    display: block;
    clear: both;
}


/********************** linh tinh **********************/
.box {
    margin-bottom: 0 !important;
}

.cover-background,
.cover-background-fullscreen,
.cover-scrolltop-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 130;
    display: none;
}

.cover-background-fullscreen {
    z-index: 230;
}

.cover-scrolltop-background {
    z-index: 180;
}

.invalid {
    border-color: #e73838 !important;
}

/********************** horizontal_slider **********************/
.g-scrolling-carousel .items {
    padding: 5px 0;
}
.g-scrolling-carousel .items .item_scroll {
    display: inline-block; /* notice the comments between inline-block items */
    margin-right: 2px;
    text-align: center;
}
.g-scrolling-carousel .items .item_scroll:last-of-type {
    margin-right: 0;
}

.g-scrolling-carousel .items .item_scroll .woocommerce-product-gallery__image {
    display: block;
}

.g-scrolling-carousel .items .item_scroll img {
    height: 100px;    
}


/********************** select box **********************/
.select-field {
    position: relative;
    display: inline-block;
}
.select-field input[type="text"] {
    display: block;
    padding: 5px 20px 5px 10px;
    box-sizing: border-box;
}
.select-field i {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translate(0, -50%);
}
.select-field select {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}


/********************** checkbox field **********************/
.checkbox_field {}
.checkbox_field input[type="checkbox"] {
    width: 0;
    height: 0;
    position: absolute;
}
.checkbox_field .checkbox_field_label {
    height: 29px;
    display: inline-block;
    padding-left: 30px;
    line-height: 30px;
}
.checkbox_field .checkbox_field_label {
    background: url("../images/icons/icon-checkbox.png") no-repeat left top;
    background-size: 29px 58px;
}
.checkbox_field input[type="checkbox"]:checked + .checkbox_field_label {
    background-position: 0px -29px;
}


/********************** radio field **********************/
.radio_field {}
.radio_field input[type="radio"] {
    width: 0;
    height: 0;
    position: absolute;
}
.radio_field .radio_field_label {
    height: 29px;
    display: inline-block;
    padding-left: 30px;
}
.radio_field .radio_field_label.checkbox_style {
    background: url("../images/icons/icon-checkbox.png") no-repeat left top;
    background-size: 29px 58px;
}
.radio_field input[type="radio"]:checked + .radio_field_label {
    background-position: 0px -29px;
}


/********************** custom-dropdown **********************/
.custom-dropdown {
    position: relative;
    display: inline-block;
}
.custom-dropdown > i {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translate(0, -50%);
}
.custom-dropdown .toggle-dropdown {
    cursor: pointer;
    display: block;
    padding: 5px 20px 5px 5px;
    box-sizing: border-box;
}
.custom-dropdown .dropdown-menu {
    padding: 0;
    border: 1px solid #4371a3;
    text-align: left;
    margin-top: 0;
    min-width: unset;
    width: 100%;
}
.custom-dropdown .dropdown-menu .dropdown-item {
    padding: 5px;
    color: #515151;
    font-weight: 500;
    line-height: 21px;
    border: 1px solid #f2f2f2;
    display: block;
    cursor: pointer;
}

/* dropdown style 2 arrows */
.custom-dropdown.up-down-arrow input[type="text"] {
    width: 211px;
    height: 33px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid #4371a3;
    border-radius: 5px;
}
.custom-dropdown.up-down-arrow.open input[type="text"] {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.custom-dropdown.up-down-arrow i {
    transform: none;
    font-size: 22px;
    color: #4371a3;
}
.custom-dropdown.up-down-arrow i.fa-caret-up {
    top: 0;
}
.custom-dropdown.up-down-arrow i.fa-caret-down {
    top: unset;
    bottom: 0px;
}

/* select2 2 arrows up-down */
.select2 .select2-selection .select2-selection__arrow {
    height: 32px;
}
.select2 .select2-selection .select2-selection__arrow i {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: none;
    font-size: 22px;
    color: #4371a3;
}

.select2 .select2-selection .select2-selection__arrow i.fa-caret-up {
    top: 0;
}
.select2 .select2-selection .select2-selection__arrow i.fa-caret-down {
    top: unset;
    bottom: 0px;
}


/********************** table **********************/
.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
    background-color: #f2f2f2;
}


/********************** preview img **********************/
.wrap_preview_img {}
.wrap_preview_img .choose_preview_img {
    display: none;
}
.wrap_preview_img .preview_img {}
.wrap_preview_img .preview_img i {}
.wrap_preview_img .preview_img img {}


/********************** preview img **********************/
.list_preview_img {
    margin-bottom: 25px;
    font-size: 0;
}
.list_preview_img .pre_img_wrap {
    position: relative;
    display: inline-block;
    float: none !important;
    vertical-align: top;
    margin-top: 10px;
}

.list_preview_img .pre_img_wrap button {
    position: absolute;
    color: #fff;
    border: 0;
    background: #e73838;
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 0;
    right: 0;
    top: -10px;
    font-size: 16px;
    padding: 0;
}


/********************** from - to datepicker **********************/
.search-range {
    overflow: hidden;
}
.search-range label {
    width: auto;
}
.search-range label input {
    width: 130px;
}


.custom_calender {
    position: relative;
    cursor: pointer;
}
.custom_calender input {
    height: 35px;
    border: 1px solid #55acee;
    padding-left: 9px;
    cursor: pointer;
}
.custom_calender i {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 35px;
    background: #55acee;
    color: #fff;
    padding-top: 8px;
    text-align: center;
    font-size: 19px;
}


/********************** loading **********************/
.wrap-loading {
    position: relative;
    overflow: hidden;
    display: inline-block;
}
.loading_img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    text-align: center;
    background: rgba(255, 255, 255, 0.6);
    z-index: 100;
    display: none;
}

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


/********************** slider **********************/
.slick-slider {
    margin-top: 17px;
}
.slick-slider .slick-arrow {
    top: -15px;
}
.slick-slider .slick-arrow:before {
    display: none;
}

.slick-slider .slick-arrow i {
    font-size: 19px;
    color: white;
    background: #d4d4d4;
    border-radius: 50%;
    width: 20px;
    height: 20px;
}

.slick-slider .slick-arrow.slick-prev {
    left: unset;
    right: 25px;
}
.slick-slider .slick-arrow.slick-next {
    right: 0;
}

.slick-dots li.slick-active {
    font-weight: bold;
}

.wp-media-buttons-icon:before {
    font: 400 18px/1 dashicons;
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\f104";
}


/********************** message tooltips & layerpopup **********************/
.ajax_result_msg {
    color: #46bc72;
    font-size: 15px;
}
.ajax_result_msg.error_msg {
    color: #e73838;
}

/********************** tooltips **********************/
.custom-tooltips {
    position: relative;
}
.custom-tooltips .toggle-tooltips-click,
.custom-tooltips .toggle-tooltips-hover {
    cursor: pointer;
}
.custom-tooltips .custom-tooltips-container {
    display: none;
    position: absolute;
    top: 38px;
    left: -180px;
    background: #f2f2f2;
    z-index: 5;
    box-shadow: 0 0 10px 0 #bbb;
}
.custom-tooltips .custom-tooltips-container.tooltips-bottom {
    top: 38px;
    left: -180px;
}
.custom-tooltips .custom-tooltips-container.tooltips-right:before {
    content: " ";
    height: 0;
    position: absolute;
    width: 0;
    top: -14px;
    right: 33px;
    border: 7px solid transparent;
    border-bottom-color: #fff;
}
.custom-tooltips .custom-tooltips-container:after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 100%;
    height: 14px;
}
.custom-tooltips .custom-tooltips-container .toggle-tooltips-body {
    overflow: hidden;
}
.custom-tooltips .custom-tooltips-container .toggle-tooltips-foot {
    background: #fff;
    text-align: center;
}


/* small_tooltips */
.small_tooltips {
    position: relative;
    z-index: 2;
}
.small_tooltips:hover .small_tooltips_toggle {
    cursor: pointer;
    border: 2px solid #4371a3;
    padding: 5px;
}

.small_tooltips .small_tooltips_toggle.dot {
    height: 10px;
    width: 10px;
    background: #55acee;
    border-radius: 100%;
    display: block;
    position: absolute;
    left: 50%;
    bottom: 31px;
    transform: translate(-50%, 0);
}
.small_tooltips .small_tooltips_cnt {
    position: absolute;
    left: 50%;
    bottom: 42px;
    transform: translate(-50%, 0);
    line-height: 11px;
    display: none;
}

.small_tooltips .small_tooltips_cnt:after{
    content: "\f0d7";
    font-family: FontAwesome;
    color: #55acee;
    position: relative;
    top: -3px;
    font-size: 29px;
}

.small_tooltips .small_tooltips_cnt p {
    margin: 0;
    border: 1px solid #55acee;
    border-radius: 5px;
    line-height: 15px;
    padding: 10px;
    background: #fff;
    z-index: 1;
    position: relative;
}

.small_tooltips:hover .small_tooltips_cnt {
    display: block;
}





/********************** layer popup **********************/
.toggle-popup-image {
    cursor: pointer;
}
.layerpopup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 300;
    display: none;
}
.layerpopup .popup-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 33px;
    border-radius: 5px;
}

.layerpopup .popup-container .popup-close {
    position: absolute;
    background: transparent;
    border: 0;
    font-weight: normal;
    padding: 0;
    right: -62px;
    top: -10px;
    font-size: 68px;
    color: #fff;
    width: auto;
    height: auto;
    outline: none;
}
.layerpopup .popup-container .popup-close i {
    width: auto;
    height: auto;
    display: block;
}


/********************** item add to cart animation **********************/
.item_to_cart {
    height: 70px;
    width: 70px;
    position: fixed;
    background: red;
    border-radius: 100%;
    transform: translate(-50%,-50%);
    opacity: 0;
    border: 2px solid #000;
    z-index: 100;
}

.item_to_cart img {
    border-radius: 100%;   
}


/********************** Woocommerce font **********************/
.widefat mark {
    display: block;
    text-indent: -9999px;
    position: relative;
    height: 1em;
    width: 1em;
    background: 0 0;
    font-size: 1.4em;
    margin: 0 auto
}

.widefat mark.cancelled::after,
.widefat mark.completed::after,
.widefat mark.failed::after,
.widefat mark.on-hold::after,
.widefat mark.pending::after,
.widefat mark.processing::after,
.widefat mark.refunded::after,
table.wp-list-table .status_head::after {
    font-family: WooCommerce;
    speak: none;
    font-weight: 400;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    text-indent: 0px;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    text-align: center;
    content: "î€";
    font-variant: normal;
    margin: 0px;
}

.status_head{
    display:block;
    text-indent:-9999px;
    position:relative;
    height:1em;
    width:1em;
    margin:0 auto
}

table.wp-list-table .status_head::after {
    content: '\e011';
}

.widefat mark.processing::after {
    content: '\e011';
    color: #73a724
}

.widefat mark.pending::after {
    content: '\e012';
    color: #ffba00
}

.widefat mark.completed::after {
    content: '\e015';
    color: #2ea2cc
}

.widefat mark.on-hold::after {
    content: '\e033';
    color: #999
}

.widefat mark.failed::after {
    content: '\e016';
    color: #d0c21f
}

.widefat mark.cancelled::after {
    content: '\e013';
    color: #a00
}

.widefat mark.processing::after {
    content: '\e011';
    color: #73a724
}

.widefat mark.refunded::after {
    content: '\e014';
    color: #999
}

/********************** icon **********************/
.icon-sales-percent {
    background: url("../images/icons/icon-sales-percent.png") no-repeat;
    background-size: contain;
    width: 36px;
    height: 36px;
    display: inline-block;
}

.icon-sales-percent {
    background: url("../images/icons/icon-sales-percent.png") no-repeat;
    background-size: contain;
    width: 36px;
    height: 36px;
    display: inline-block;
}

.icon-call {
    background: url("../images/icons/icon-call.png") no-repeat;
    background-size: contain;
    width: 36px;
    height: 36px;
    display: inline-block;
}
.icon-chat {
    background: url("../images/icons/icon-chat.png") no-repeat;
    background-size: contain;
    width: 36px;
    height: 36px;
    display: inline-block;
}
.icon-heart {
    background: url("../images/icons/icon-heart.png") no-repeat;
    background-size: contain;
    width: 36px;
    height: 36px;
    display: inline-block;
}
.icon-messenger {
    background: url("../images/icons/icon-messenger.png") no-repeat;
    background-size: contain;
    width: 36px;
    height: 36px;
    display: inline-block;
}
.icon-zalo-circle {
    background: url("../images/icons/icon-zalo-circle.png") no-repeat;
    background-size: contain;
    width: 36px;
    height: 36px;
    display: inline-block;
}
.icon-zalo-circle2 {
    background: url("../images/icons/icon-zalo-circle2.png") no-repeat;
    background-size: contain;
    width: 36px;
    height: 36px;
    display: inline-block;
}
.icon-close {
    background: url("../images/icons/icon-close.png") no-repeat;
    background-size: contain;
    width: 36px;
    height: 36px;
    display: inline-block;
}
.icon-close-white {
    background: url("../images/icons/icon-close-white.png") no-repeat;
    background-size: contain;
    width: 36px;
    height: 36px;
    display: inline-block;
}
.icon-angle-up {
    background: url("../images/icons/icon-angle-up.png") no-repeat;
    background-size: contain;
    width: 36px;
    height: 36px;
    display: inline-block;
}
.icon-zalo-circle3 {
    background: url("../images/icons/icon-zalo-circle3.png") no-repeat;
    background-size: contain;
    width: 36px;
    height: 36px;
    display: inline-block;
}
.icon-pinterest-circle {
    background: url("../images/icons/icon-pinterest-circle.png") no-repeat;
    background-size: contain;
    width: 36px;
    height: 36px;
    display: inline-block;
}
.icon-youtube-circle {
    background: url("../images/icons/icon-youtube-circle.png") no-repeat;
    background-size: contain;
    width: 36px;
    height: 36px;
    display: inline-block;
}
.icon-facebook-png-circle {
    background: url("../images/icons/icon-facebook-circle.png") no-repeat;
    background-size: contain;
    width: 36px;
    height: 36px;
    display: inline-block;
}
.icon-facebook-circle {
    background: url("../images/icons/icon-facebook-circle.svg") no-repeat;
    background-size: contain;
    width: 36px;
    height: 36px;
    display: inline-block;
}
.icon_pdf {
    background: url("../images/icons/icon_pdf.png") no-repeat;
    background-size: contain;
    width: 36px;
    height: 36px;
    display: inline-block;
}
.icon-zalo-text {
    background: url("../images/icons/icon-zalo-text.png") no-repeat;
    background-size: contain;
    width: 36px;
    height: 36px;
    display: inline-block;
}

.icon-user-blue {
    background: url("../images/icons/icon-user-blue.png") no-repeat;
    background-size: contain;
    width: 36px;
    height: 36px;
    display: inline-block;
}
.icon-doanh-so {
    background: url("../images/icons/icon-doanh-so.png") no-repeat;
    background-size: contain;
    width: 36px;
    height: 36px;
    display: inline-block;
}
.icon-doanh-thu {
    background: url("../images/icons/icon-doanh-thu.png") no-repeat;
    background-size: contain;
    width: 36px;
    height: 36px;
    display: inline-block;
}
.icon-don-hang {
    background: url("../images/icons/icon-don-hang.png") no-repeat;
    background-size: contain;
    width: 36px;
    height: 36px;
    display: inline-block;
}
.icon-rating-1 {
    background: url("../images/icons/icon-rating-1.png") no-repeat;
    background-size: contain;
    width: 36px;
    height: 36px;
    display: inline-block;
}
.icon-rating-2 {
    background: url("../images/icons/icon-rating-2.png") no-repeat;
    background-size: contain;
    width: 36px;
    height: 36px;
    display: inline-block;
}
.icon-rating-3 {
    background: url("../images/icons/icon-rating-3.png") no-repeat;
    background-size: contain;
    width: 36px;
    height: 36px;
    display: inline-block;
}
.icon-tui-tien {
    background: url("../images/icons/icon-tui-tien.png") no-repeat;
    background-size: contain;
    width: 36px;
    height: 36px;
    display: inline-block;
}
.icon-talking {
    background: url("../images/icons/icon-talking.png") no-repeat;
    background-size: contain;
    width: 36px;
    height: 36px;
    display: inline-block;
}
.icon-youtube {
    background: url("../images/icons/icon-youtube.png") no-repeat;
    background-size: contain;
    width: 36px;
    height: 36px;
    display: inline-block;
}
.icon-tiktok {
    background: url("../images/icons/icon-tiktok.png") no-repeat;
    background-size: contain;
    width: 36px;
    height: 36px;
    display: inline-block;
}
