:root{
	--font-family: Pangea,-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;
    --bg-color: #7FBE25;
    --color-text: #000000;
    --color-text-white: #ffffff;
    --color-primary: #1e7ac0;
    --color-secondary: #198754;
    --color-third: #467602;
}
@media(min-width:992px){
	:root{
		--font-size-title: 18px;
		--font-size-title-small: 16px;
		--font-size-title-medium: 20px;
		--font-size-title-large: 22px;
		--font-size-title-xlarge: 24px;
		
		--font-size-content: 16px;
		--font-size-content-small: 14px;
		--font-size-content-medium: 16px;
		--font-size-content-large: 18px;
		--font-size-content-xlarge: 20px;
		
		--font-size--body: 16px;
		--font-size--body-small: 14px;
		--font-size--body-medium: 16px;
		--font-size--body-large: 18px;
		--font-size--body-xlarge: 20px;
		
		--font-weight--semibold: 900;
		--font-weight--bold: 700;
		--font-weight--regular: 500;
		--font-weight--light: 300;
		
		--font-size-h1: 26px;
		--font-size-h2: 24px;
		--font-size-h3: 22px;
		--font-size-h4: 20px;
		--font-size-h5: 18px;
		--font-size-h6: 16px;
	}
}
@media screen and (min-width: 1200px) {
	:root{
		--font-size-title: 20px;
		--font-size-title-small: 18px;
		--font-size-title-medium: 22px;
		--font-size-title-large: 24px;
		--font-size-title-xlarge: 26px;
		
		--font-size-content: 16px;
		--font-size-content-small: 14px;
		--font-size-content-medium: 16px;
		--font-size-content-large: 18px;
		--font-size-content-xlarge: 20px;
		
		--font-size--body: 16px;
		--font-size--body-small: 14px;
		--font-size--body-medium: 16px;
		--font-size--body-large: 18px;
		--font-size--body-xlarge: 20px;
		
		--font-weight--semibold: 900;
		--font-weight--bold: 700;
		--font-weight--regular: 500;
		--font-weight--light: 300;
		
		--font-size-h1: 28px;
		--font-size-h2: 26px;
		--font-size-h3: 24px;
		--font-size-h4: 22px;
		--font-size-h5: 20px;
		--font-size-h6: 18px;
	}
}
@media(max-width:991px){
	:root{
		--font-size-title: 18px;
		--font-size-title-small: 16px;
		--font-size-title-medium: 20px;
		--font-size-title-large: 22px;
		--font-size-title-xlarge: 24px;
		
		--font-size-content: 14px;
		--font-size-content-small: 12px;
		--font-size-content-medium: 14px;
		--font-size-content-large: 16px;
		--font-size-content-xlarge: 18px;
		
		--font-size--body: 14px;
		--font-size--body-small: 12px;
		--font-size--body-medium: 14px;
		--font-size--body-large: 16px;
		--font-size--body-xlarge: 18px;

		--font-size-h1: 26px;
		--font-size-h2: 24px;
		--font-size-h3: 22px;
		--font-size-h4: 20px;
		--font-size-h5: 18px;
		--font-size-h6: 16px;
	}
	
}
@media(max-width:767px){
	:root{
		--font-size-title: 18px;
		--font-size-title-small: 16px;
		--font-size-title-medium: 20px;
		--font-size-title-large: 22px;
		--font-size-title-xlarge: 24px;
		
		--font-size-content: 14px;
		--font-size-content-small: 12px;
		--font-size-content-medium: 14px;
		--font-size-content-large: 16px;
		--font-size-content-xlarge: 18px;
		
		--font-size--body: 14px;
		--font-size--body-small: 12px;
		--font-size--body-medium: 14px;
		--font-size--body-large: 16px;
		--font-size--body-xlarge: 18px;

		--font-size-h1: 26px;
		--font-size-h2: 24px;
		--font-size-h3: 22px;
		--font-size-h4: 20px;
		--font-size-h5: 18px;
		--font-size-h6: 16px;
	}
}
@media(max-width:576px){
	:root{
		--font-size-title: 16px;
		--font-size-title-small: 14px;
		--font-size-title-medium: 18px;
		--font-size-title-large: 20px;
		--font-size-title-xlarge: 22px;
		
		--font-size-content: 12px;
		--font-size-content-small: 10px;
		--font-size-content-medium: 12px;
		--font-size-content-large: 14px;
		--font-size-content-xlarge: 16px;
		
		--font-size--body: 12px;
		--font-size--body-small: 10px;
		--font-size--body-medium: 12px;
		--font-size--body-large: 14px;
		--font-size--body-xlarge: 16px;

		--font-size-h1: 24px;
		--font-size-h2: 22px;
		--font-size-h3: 20px;
		--font-size-h4: 18px;
		--font-size-h5: 16px;
		--font-size-h6: 14px;
	}
}
body, html{
	font-family:var( --font-family);
	font-size:var(--font-size-content);
	font-weight:300;
}
.hight-light-span{
	padding-inline: 5px;
	color:var( --color-text-white);
    background: var(--color-primary);
	border-radius: 3px
}
/* Không cho tương tác vào phần tử con bên trong button và thẻ a */
/* button:not(.navbar-tool-cart,.btn-no) *, */
/* a.not-click-sub{ */
    /* pointer-events: none;  */
    /* user-select: none;        */
    /* -webkit-user-select: none; */
    /* -ms-user-select: none; */
/* } */

/* (Khuyến nghị) Bỏ highlight xanh khi tap trên mobile */
button,
a {
    -webkit-tap-highlight-color: transparent;
}
.id_register {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 12px;
}
.code_product{
    font-size: 12px;
}
/*************CLEAR INPUT SAMPLE APPLE*******************/
.clearButton {
    position: absolute;
    top: 50%;
    right: 5px;
	z-index:99;
    transform: translateY(-50%);
    border: 0;
    border-radius: 5px !important;
    -moz-border-radius: 5px !important;
    -webkit-border-radius: 5px !important;
    text-transform: capitalize;
    background: #a3a3a3;
    color: #fff;
    padding: 2px 4px;
    font-size: 12px;
    cursor: pointer;
    height: calc(100% - 10px);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
}
/*************CLEAR INPUT SAMPLE APPLE*******************/
video {
    max-width: 100%;
}
.disabled, .btn-pro-detail.disabled{
    opacity: .4;
    pointer-events: none;
}
.quantity_html.text-small {
    font-size: 20px;
    color: #ff8013;
    font-weight: bold;
}
iframe{max-width:100%;}

/******Coupon********/
.coupons{width:100%;}
.coupons span.start_time {
    font-size: 12px;
    color: red;
    display: inline-block;
}
.coupon_item {
	 position: relative;
	 background: #e9f4fd;
	 filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, .15));
	 padding: 10px;
	 display: inline-flex;
    border-radius: 5px;
	min-height: 100px;
	/* height:100%; */
	width:100%;
}
.coupon_item .coupon_icon {
    width: 65px;
    flex: 0 0 65px;
    position: absolute;
    right: 10px;
    border-radius: 50%;
    height: 65px;
    overflow: hidden;
    background: #fff;
    z-index: 1;
    align-items: center;
    justify-content: center;
    display: flex;
}
.coupon_item .coupon_icon:after {
    content: "";
    display: block;
    position: relative;
    z-index: 2;
    padding-top: 100%;
}

.coupon_item .coupon_icon>img {
    z-index: 1;
    -o-object-fit: contain;
    object-fit: contain;
    position: absolute;
    width: 100% !important;
    height: 100% !important;
    top: 0;
    left: 0;
}
 .coupon_item:before {
	 content: "";
	 position: absolute;
	 top: 0;
	 left: -3px;
	 height: 100%;
	 width: 10px;
	 color: #e9f4fd;
	 background-clip: padding-box;
	     background: repeating-linear-gradient(#e5e5e5,#e5e5e5 5px,transparent 0,transparent 9px,#e5e5e5 0,#e5e5e5 10px) 0/1px 100% no-repeat,radial-gradient(circle at 0 7px,transparent,transparent 2px,#e5e5e5ee 0,#e5e5e5 3px,currentColor 0) 1px 0/100% 10px repeat-y;

}
 .coupon_item:after {
	 bottom: -4px;
	 top: auto;
}

.coupon_item .coupon_body{
    display: flex;
    /* width: calc(100% - 65px); */
	width: 100%;
    flex-direction: column;
    justify-content: space-between;
    padding: 5px 5px 5px 5px;
	    position: relative;
    z-index: 10;
}
.coupon_item .coupon_body.coupon_info_full{
	width: 100%;
	padding-left:0;
}
@media(max-width: 767px){
	.coupon_item {
		margin: 4px auto;

	}
}
 .coupon_item .coupon_body .coupon_title {
	font-size: var(--font-size-title-small);
	 color: #1b8fe9;
	 font-weight: 300;
	 margin:0;
}
 .coupon_item .coupon_body .coupon_title>span{
	  font-weight: bold;
 }
 .coupon_item .coupon_body .coupon_desc {
    font-size: 13px;
    line-height: 1.2;
    color: #111;
    margin-bottom: 7px;
    transition: color .25s ease-in-out;
    text-decoration: none;
    display: -webkit-box;
    height: 33px;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    -webkit-line-clamp: 2;
    font-weight: 500;
    overflow: hidden;
}
.coupon_copy{
	background:#d82e4d;
	color: #fff;
	padding: 5px 10px !important;
}
.coupon_copy:hover{
		color: #fff;
		filter: brightness(1.1)
}
.coupon_item .coupon_copy {
    border: none;
    padding: 3px 15px 3px;
    margin-bottom: 3px;
}
.coupon_item .coupon_body button {
	display: inline-block;
    line-height: 1.3em;
    height: auto;
    font-size: 12px;
    width: auto;
}
 .coupon_item.no-icon .coupon_body {
	 width: 100%;
}
.coupon_info{
	display: none;
}
.coupon_descsmall {
    color: red;
    line-height: 1.3em;
    font-size: 12px;
}
.coupon_descsmall span.min_price_order {
    font-size: 12px;
    font-weight: bold;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    white-space: normal;
    -webkit-line-clamp: 1;
    overflow: hidden;
}
.btn-main.coupon_copy:hover,.btn-main.coupon_copy:active, .btn-main.coupon_copy:focus{
    color: #fff;
    background: #d82e4d;
}
.coupon_info_toggle {
    font-size: 12px;
    text-decoration: underline;
    color: #2E72D2;
    cursor: pointer;
    margin-bottom: 3px;
}
.coupon_time {
    font-size: 12px;
    font-weight: 500;
    color: #727272;
    margin-bottom: 3px;
	display:block;
}
.coupon_time .start_time {
    color: red;
    display: inline-block;
}
.coupon_code{display:none;}
.copy_coupon_modal {
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px dashed #ccc;
    text-align: right;
}
.modal-coupon .modal-body{background:#ffffff;
	border-bottom-left-radius: var(--bs-modal-inner-border-radius);
    border-bottom-right-radius: var(--bs-modal-inner-border-radius);
}
.modal-coupon .modal-header{padding:10px; padding-right:25px;}
.modal-coupon .modal-title{font-size:18px; font-weight:bold;}
.modal-coupon .modal-header .btn-close {
    background: none;
    right: 10px;
    position: absolute;
    font-size: 22px;
    top: 10px;
    color: #d82e4d;
    background: #ffffff;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    display: flex;
}
.order-summary section.section_coupons .section_coupons_list {
    width: 100%;
    display: block;
    max-height: 330px;
    overflow: auto;
}
.order-summary section.section_coupons .coupons_list_item {
    width: 100%;
}
@media(max-width:767px){
	.order-summary section.section_coupons {
		overflow: auto;
	}
	.order-summary section.section_coupons .section_coupons_list {
		width: max-content;
		display: flex;
		flex-wrap: nowrap;
	}
	.order-summary section.section_coupons .coupons_list_item {
		width: 300px;
	}
	.order-summary section.section_coupons .coupons_list_item{
		width: 265px;
	}
}
.order-summary .coupons {
    width: 95%;
    margin: 0 auto;
}
/******End Coupon********/
/*******START formbuilder*******/
[class^="formbuilder"] p{
	font-size: var(--font-size--body-xs);
}
[class^="formbuilder"] label{
    font-weight: 500; 
}
[class^="formbuilder"] span.formbuilder-required {
    color: red;
    margin-left: 5px;
}
.rendered-form {
    box-shadow: 0 2px 10px 5px rgb(0 0 0 / 5%);
   -moz-box-shadow: 0 2px 10px 5px rgb(0 0 0 / 5%);
    -webkit-box-shadow: 0 2px 10px 5px rgb(0 0 0 / 5%);
    border: 1px solid #e7e7e7;
    padding: 15px;
    border-radius: 5px;
	width:500px;
	max-width:100%;
	margin:0 auto;
}
.modal-content .rendered-form {
    width: 100%;
    background: #fff;
}

.rendered-form h1,.rendered-form h2,.rendered-form h3,.rendered-form h4,.rendered-form h5,.rendered-form h6{
	font-weight:bold;
	font-size:20px;
}
.form-group{margin-top:20px;position: relative;}
.form-group:first-child{margin-top:20px;}
.form-group>label{margin-bottom:5px;}
/*******END formbuilder*******/
/*******start progress*******/
form{position:relative;}
.progress {
    text-align: center;
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0,0,0,0.005) !important;
    transition: width .3s;
    top: 0;
    left: 0;
    z-index: 10;
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.progress.progress-rating{
    position: relative !important;
    height: 4px !important;
}
.progress.progress-rating .progress-bar{
	height:100%;
}
.progress>.text{
	 background: rgba(0,0,0,0.5);
	padding: 5px 10px;
	border-radius: 20px;
}
/*******end progress*******/
/**************/

.btn.btn-viewmorepage {
    font-size: 18px;
    font-weight: normal;
    text-transform: inherit;
    margin-bottom: 20px;
    border-radius: 5px;
}
/******.swal2*******/
.swal2-container{
	z-index: 10800000000 !important;
}
.swal2-container .swal2-icon{margin:0.8em auto .6em !important;}
.swal2-container.swal2-center>.swal2-popup{padding:25px 25px 15px 25px;}
.swal2-container .swal2-actions{
	margin:0;
}
body .swal2-container .swal2-title{
    font-size: 22px;
	    padding-top: 0;
}

.swal2-styled.swal2-cancel {
	border: 0;
    border-radius: 0.25em;
    background: transparent !important;
    color: #f00 !important;
    font-size: 22px !important;
    position: absolute;
    right: 0;
    top: 0;
    padding: 5px 10px 5px 10px;
    line-height: 1em;
    box-shadow: none !important;
}
/******.swal2*******/
/********CountDown Buy Flash Sale Detail**********/
.flash-sale-wp{
	overflow: hidden;
	 border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}
.flash-sale-header {
    padding: 10px;
    background: linear-gradient(-90deg,#f0451e 9%,#f32424 96%);
    color: #fff;
	 border-radius:5px 5px 0 0;
}
.flash-sale-info {
    padding: 10px;
    background: #fafafa;
    border: 3px solid #f23321;
    border-radius: 0 0 5px 5px;
    border-top: 0;
}
.old-price{
	font-size: 1rem;
	text-decoration: line-through;
	color: #929292;
	margin-right: 10px;
}
.new-price{
	font-size: 1.875rem;
	font-weight: bold;
	color: #d0011b;
	line-height:1.2em;
}
.precent-price{
	margin-left: 15px;
	font-size: .75rem;
	color: #fff;
	text-transform: uppercase;
	background: #ee4d2d;
	border-radius: 2px;
	padding: 2px 4px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}
.shopee-countdown-timer .time {
    width: 28px;
    text-align: center;
}
span.shopee-countdown-timer {
	background: #000;
	padding: 2px 15px;
	border-radius: 3px;
	font-weight: bold;
}
.shopee-countdown-timer .countdown {
    gap: 2px;
}
.countdown-text {
    width: 100%;
    text-align: center;
    line-height: 16px;
    font-size: 12px;
    color: #ffffff;
    position: relative;
    margin: 5px auto 0;
    padding: 1px 3px 3px;
	background: #FF0900;
    background-image: linear-gradient(to right , rgba(255,153,0,1), rgba(255,0,0,1));
}
.countdown .time {
    display: inline-block;
    background: #000;
    padding: 2px 4px;
    line-height: 1.4em;
    font-weight: 500;
    border-radius: 5px;
    font-size: 16px;
}
@media(max-width:450px){
	.countdown-text{font-size:10px;}
}
/**************Image Full**********/
.image-full {
    position: relative;
    -webkit-transition: opacity .3s ease-out;
    transition: opacity .3s ease-out;
    overflow: hidden;
    display: block;
}

.image-full:after {
    content: "";
    display: block;
    position: relative;
    z-index: 2;
    padding-top: 100%;
}

.image-full>img {
    z-index: 1;
    -o-object-fit: contain;
    object-fit: contain;
    position: absolute;
    width: 100% !important;
    height: 100% !important;
    top: 0;
    left: 0;
}

.image-full-cover>img{
    -o-object-fit: cover;
    object-fit: cover;
}

.video-full {
    position: relative;
    -webkit-transition: opacity .3s ease-out;
    transition: opacity .3s ease-out;
    overflow: hidden;
    display: block;
}

.video-full:after {
    content: "";
    display: block;
    position: relative;
    z-index: 1;
    padding-top: 100%;
}
.video-full-popup:after {
    padding-top: 56.5%;
}
.video-full>video{
    z-index: 2;
    -o-object-fit: contain;
    object-fit: contain;
    position: absolute;
    width: 100% !important;
    height: 100% !important;
    top: 0;
    left: 0;
}

.video-full-cover>video{
    -o-object-fit: cover;
    object-fit: cover;
}
.video-play-gallery{display:block; position:relative;height:100%;}
.video-play-gallery .playButton {
    position: absolute;
    width: 90px;
    height: 90px;
    top: 50%;
    left:50%;
    transform: translate3d(-50%,-50%,0);
    z-index: 10;
    border: 0;
    background: transparent;
}
/**************END Image Full**********/

/********CountDown List Flash Sale**********/
.countdown-product {
	background: #da251c;
	padding: 8px;
	color:#fff;
	width:100%;
}
.product-single .countdown-product {
    padding: 10px 12px;
}
.countdown-price .product-price{margin-bottom:0;}
.countdown-text p {
	font-size: 12px;
	line-height: 1.3em;
}
.countdown-price>*{display:block;}
.countdown-product .product-price,.countdown-product .old-price{color:#ffffff;}
.countdown-product .text-sale {
    border: 1px solid #ffffff;
    color: #ffffff;
    padding: 0;
    border: 0;
    margin: 0;
    margin-right: 7px;
} 
.countdown-product .product-price {
    margin-bottom: 0;
   font-size: var(--font-size-title-small);
    color: #fff;
    font-weight: 700;
    line-height: 1.5em;
    height: auto;
}
.countdown-product del.old-price {
    display: inline-block;
    font-weight: 400;
    font-size: 14px;
    color: #ffffff;
    margin-left: 5px;
}
/********End CountDown List Flash Sale**********/
/********Buyed Đã bán**********/
.start_buy {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 3px 10px;
	width:100%;
}
.sp-da-ban {
    width: auto;
    text-align: center;
    line-height: 16px;
    font-size: 12px;
    color: #fff;
    border-radius: 20px;
    position: relative;
    display: inline-block;
    padding-left: 18px;
}
.sp-da-ban:before{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 13px;
    height: 20px;
    background: url(../../img/fs-iconfire.png) no-repeat;
    background-size: contain;
    z-index: 10;
}
.buyed-text {
    position: relative;
    z-index: 300;
    color: #391c02;
}
.btn-affiliate-wp~.btn-addtocardpage .buyed-text{color:#ffffff;}
@media(max-width:576px){
	.sp-da-ban {
		line-height: 12px;
		font-size: 10px;
		padding-left: 12px;
	}
	.sp-da-ban:before{height:15px; width:10px;}
}
@media(max-width:450px){
	.start_buy {
		justify-content: space-between;
		padding: 3px 5px;
	}
}
@media(max-width:410px){
	.start_buy {
		justify-content: center;
		padding: 3px 5px;
	}
	.star-rating{margin-right:2px !important;}
}
/********END Buyed Đã bán**********/
/********Back to top**********/
#back-top {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    position: fixed;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    z-index: 100000;
    bottom: 90px;
    right: 25px;
    width: 45px;
    height: 45px;
    border: none;
    border-radius: 25px;
    padding: 0 6px; 
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    cursor: pointer;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    background:var(--color-primary);
	 font-size: 20px;
}
#back-top i{color:#ffffff;}
#back-top svg{
	display: block;
    /* fill: #FFFFFF; */
}
#back-top:hover {
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
}
@media(max-width:992px){
    #back-top {
        bottom: 93px;
        right: 15px
    }
}
@media(max-width:576px){
	#back-top {
        bottom: 105px;
        right: 15px;
    }
}
/********Back to top**********/
/* jarallax */
.jarallax {
  position: relative;
  z-index: 0;
}
.jarallax > .jarallax-img {
  position: absolute;
  object-fit: cover;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
/* end jarallax */
body .swal2-title {
    font-size: 22px;
    /* text-transform: uppercase; */
	padding:0;
}

.btn-addtocard{
    align-self: end;
    align-items: end;
    position: absolute;
    bottom: 0;
}
.btn-addtocard,.btn-addtocard:focus{
	position: relative;
    display: inline-block;
    padding: 5px 15px 5px 20px;
   font-size: var(--font-size-title-small);
    text-transform: uppercase;
    letter-spacing: inherit;
    color: #ffffff;
    background-color: var(--color-primary);
    line-height: 1.5em;
    border: none;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    -ms-border-radius: 60px;
    border-radius: 60px;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    transition: all 0.4s ease;
    font-weight: bold;
    margin: 7px 0;
}
.btn-addtocard i{margin-right:5px;font-size:18px;}
.btn-addtocard:before{content:'';position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);-o-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:calc(100% + 12px);height:calc(100% + 12px);background-color:rgba(89,157,213,0.1);-webkit-border-radius:60px;-moz-border-radius:60px;-ms-border-radius:60px;border-radius:60px;-webkit-transition:all 0.4s ease;-moz-transition:all 0.4s ease;transition:all 0.4s ease;}
.btn-addtocard:hover{
	background:#000; 
	color:#fff;
}
.has-zoomable.loaded-img,.post-content .fancybox-thumb{
	   cursor: pointer;
    position: relative;
	display:inline-block;
}
.has-zoomable.loaded-img:before, .post-content .fancybox-thumb:before {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    background: transparent;
    border-radius: 4px;
    color: #d7d7d7;
    content: "\f00e";
    display: inline-block;
    font-family: "Font Awesome Pro";
    font-size: 26px;
    font-weight: 300;
    padding: 8px;
    position: absolute;
    pointer-events: none;
    right: 10px;
    text-rendering: auto;
    top: 10px;
}
/********TABLE RESPONSIVE***********/
@media screen and (max-width: 992px) {
table.table-mobile-responsive {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
}

table.table-mobile-responsive caption {
  font-size: 1.5em;
  margin: .25em 0 .75em;
}

table.table-mobile-responsive tr {
    background: #e7e7e7;
    border: 1px solid #e7e7e7;
    padding: 0.35em;
}

table.table-mobile-responsive th, table.table-mobile-responsive td {
  padding: .625em;
  text-align: center;
}

table.table-mobile-responsive th {
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
}

table.table-mobile-responsive td img { text-align: center; }

	table.table-mobile-responsive { border: 0; }

	table.table-mobile-responsive caption { font-size: 1.3em; }

	table.table-mobile-responsive thead { display: none; }

	table.table-mobile-responsive tr {
	  border-bottom: 3px solid #f1f1f1;
	  display: block;
	  margin-bottom: .625em;
	}
	table.table-mobile-responsive tr th{
		 border-bottom: 1px solid #000000;
	}
	table.table-mobile-responsive td {
	  border-bottom: 1px solid #d9d9d9;
	  display: block;
	  font-size: .8em;
	  text-align: right;
	}
	table.table-mobile-responsive td:before {
	  content: attr(data-label);
	  float: left;
	  font-weight: bold;
	  text-transform: uppercase;
	  padding-right:15px;
	}

	table.table-mobile-responsive td:last-child { border-bottom: 0; }
}
/********TABLE RESPONSIVE***********/
/*=================== action filter ===============*/
.total-info-filter-wp {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.sidebarFilterDT{
    padding: 0;
    border: 0;
    border-radius: 0;
}
.config-filter{
    position: relative;
}
.config-filter-wp {
    padding: 0;
    display: flex;
    border: 1px solid #f1f1f1;
    border-top: 0;
}
.toolBarTopSearch .config-filter-wp{
	 width: max-content;
}
.offcanvas-body .config-filter-wp{
    padding: 0 0 10px 0;
    width: 100%;
    display: block;
    border: 1px solid #ddd;
    border-top: none;
}
.btn-show-filter{
    font-size: var(--font-size--body);
    color: #000;
    display: inline-flex;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    margin: 0 8px 0px 0;
    border-radius: 5px;
    padding: 8px 10px;
    background: transparent;
    min-height: 50px;
}
.show:not(.offcanvas) .btn-show-filter{
	border-radius: 5px 5px 0 0;
}
.btn-show-filter::after {
    content: "\f078";
    font-family: "Font Awesome Pro";
    font-weight: 300;
    width: auto;
    height: auto;
    display: inline-block;
    vertical-align: middle;
    line-height: 1em;
	font-size: var(--font-size--body);
}
.btn-show-filter:hover,.btn-show-filter.active{
	border: 1px solid #4a90e2;
}
.filter-position{
	display: none;
	background-color: #fff;
	box-shadow:0 2px 20px rgb(0 0 0 / 50%);
	border-radius: 4px;
	width: max-content;
	white-space: normal;
	z-index: 102;
	flex-flow: row wrap;
}
.inputchangepost.inputchangepost-search {
    min-height: 50px;
    border-radius: 0;
    border-color: #ebebeb;
}
@media(max-width:767px){
	.filter-position{
		max-width: 100%;
		min-width: 100%;
	}
}
.filter-position.show{
	display: inline-flex;
}
@media(max-width:767px){
	.filter-list{
		max-width: 100%;
		min-width: 100%;
	}
}

.filter-list .filter-item{
	width:100%;
	position:relative;
}
.filter-list .filter-item.filter-color {
    width: 40px;
    height: 40px;
    border: 1px solid;
}
.filter-list .filter-item.filter-color{}
.filter-list .filter-item span.name{
    border: 0;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: start;
    line-height: 1.3em;
    margin-bottom: 0;
    padding: 8px 9px;
    font-size: var(--font-size-content-large);
    position: relative;
    padding-left: 25px;
    width: 100%;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
	min-height:32px;
}
.filter-list .filter-item.filter-color span.name {
    padding: 0;
    background: inherit;
    color: inherit;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
	padding: 8px 9px;
}
.filter-list .filter-item.filter-color:hover span.name{
	border: 2px solid #fff;
}
.filter-list .filter-item.filter-color span.name>span.name-text {
    display: none;
}
.filter-list .filter-item>input[type="checkbox"],.filter-list .filter-item>input[type="radio"]{
	display:none;
}
.filter-list .filter-item:not(.filter-color)>span.name:before{
	font-family: "Font Awesome Pro";
	font-size: var(--font-size-title-large);
    content: "\f0c8";
    
}
.filter-list .filter-item:not(.filter-color)>span.name:before {
    position: absolute;
    top: 0px;
    left: 0px;
}
.filter-list .filter-item:not(.filter-color)>span.name:before{
    position: absolute;
    top: 8px;
    left: 0px;
	
}
.filter-list .filter-item:not(.filter-color)>input:checked~ span.name{
	background: #ffffff;
	border-color:#f57224;
}
.filter-list .filter-item:hover{
	border-color:var(--color-primary);
}
.filter-list .filter-item:hover>span.name:before, .filter-list .filter-item:hover>span.name {
    color: #090909;
    border-color: #000;
}
.filter-list .filter-item>input:checked~span.name:before{
	font-family: "Font Awesome Pro";
	content:"\f14a";
	font-weight:900;
	color: #000000;
}
.filter-list .filter-item.filter-color>input:checked~span.name {
    border: 2px solid #fff;
}
.filter-list .filter-item.filter-color>input:checked~span.name:before{
	content:"\f00c";
	font-weight:300;
}
.filter-selected-info{display:none;}
.filter-selected-info.show{display:block;white-space: nowrap;}
.filter-selected-wp.show{display:flex;flex-wrap: wrap;}
.filter-selected-wp{
    overflow: hidden;
    overflow-x: auto;
}
.filter-selected-wp .filter-selected{
	display: flex;
    flex-wrap: nowrap;
    width: max-content;
}
.filter-selected .item-selected {
    padding: 3px 8px 5px;
    display: inline-block;
    cursor: pointer;
    margin: 0 5px 5px 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: 16px;
    border: 1px solid #e0e0e0;
    position: relative;
    padding-right: 25px;
    color: #333;
    background: #ffffff;
    line-height: 1.5em;
}
.filter-selected .item-selected::after {
    content: "\f00d";
    font-weight: 300;
    font-family: "Font Awesome Pro";
    display: inline-block;
    margin-left: 0;
    line-height: 1.1em;
    position: absolute;
    right: 6px;
    top: 6px;
    font-size: 18px;
}
.config-filter-sitebar .group-filter{
	border-bottom: 1px solid #f1f1f1;
    margin-top: 0;
    border-radius: 0;
    box-shadow: none;
}
.config-filter-sitebar .group-filter:last-child{
	border-bottom:0;
}
.config-filter-sitebar .group-filter select {
   font-size: var(--font-size-title-small);
}
.config-filter-sitebar .group-filter, .config-filter-sitebar .group-filter .btn-show-filter {
	width: 100%;
	text-align: left;
	justify-content: start;
}
span.filter-position-close {
    display: block;
    width: 100%;
    text-align: center;
    padding: 5px;
    background: #f1f1f1;
    border-radius: 0 0 2px 2px !important;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-title-small);
}
span.filter-position-close:hover {
    background: #e6e6e6;
}
.config-filter-sitebar .group-filter .btn-show-filter {
	border: 0;
	font-size: 16px;
	font-weight: 700;
	margin-right: 0;
}
.config-filter-sitebar .group-filter .btn-show-filter.active {
    border-radius: 0;
    background: #ebebeb;
}
.config-filter-sitebar .filter-position {
	position: static;
	width: 100%;
	min-width: 0;
	border: 0;
	box-shadow: none;
}
.config-filter-sitebar .btn-show-filter{
	position:relative;
}
.config-filter-sitebar .btn-show-filter::after {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
}
.config-filter-sitebar .filter-position .filter-list{
    position: static;
	display:none;
    max-width: 100%;
    width: 100%;
    min-width: 0;
    border: 1px solid #f1f1f1;
    border-top: 0;
    border-radius: 0;
	max-height:400px;
	overflow:auto;
}
.config-filter-sitebar .filter-position .filter-list.filter-color {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.config-filter-sitebar .filter-position .filter-list.show{display:block;}
.pointer-events-none{pointer-events:none !important; opacity:0.8 !important;}
.btn-search-filter .total_search {
    font-size: var(--font-size-content-small);
    line-height: 1.5em;
    font-weight: normal;
    text-transform: math-auto;
	 color: red;
}
.offcanvas .btn-search-filter {
	font-size: var(--font-size-title-small);
    flex-basis: 50%;
    flex-grow: 1;
    min-height: 52px;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 16px;
    cursor: pointer;
    background-color: #000;
    color: #fff;
    border: none;
    border-radius: 0;
}
.config-filter-wp-loading {
    color: #000;
    position: absolute;
    width: 100%;
    height: 100%;
    background: #f1f1f1;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    opacity: 0.6;
    top: 0;
    left: 0;
}
.btn-dell-filter-all:not(.btn){
	 line-height: 1.5em;
	font-size: 14px;
	color: #0068ff;
	cursor: pointer;
	padding: 3px;
}
.divpagebtnmore{text-align:center;}
button.btn.btn-viewmorepage {
    width: 50% !important;
    background: transparent;
    color: #000;
    border: 1px solid;
}
button.btn.btn-viewmorepage:hover{
    color: #ffffff;
  border: 1px solid var(--color-primary);
   background:var(--color-primary);
}
.boxSearchFilter {
	width: 100%;
    padding: 10px;
    background: transparent;
    border: 1px solid #f1f1f1;
}
.boxSearchFilter>.searchBox {
    border-radius: 0 !important;
    min-height: 50px;
}
.resultFilter{display:none;} 
.toolBarTopSearch .resultFilter {
    display: flex;
    align-items: center;
}
.sidebarFilterDT .title-filter {
   font-size: var(--font-size-title-small);
    font-weight: bold;
    margin-bottom: 10px;
}
.sidebarFilterDT .title-filter i {
    font-size: 24px; 
}
@media(max-width:767px){
	.toolBarTopSearch .resultFilter {
		display: block;
	}
}
.offcanvas-filter{
	    overflow: hidden;
}
.offcanvas-footer {
    border-top: 1px solid #d7d7d7;
}
.offcanvas-filter .offcanvas-title {
    font-size: var(--font-size-title-medium);
    font-weight: bold;
}
.offcanvas-filter .offcanvas-title i{
    font-size: var(--font-size-title);
}
.offcanvas-filter .offcanvas-header {
    background: #f1f1f1;
    box-shadow: 0 2px 5px 0px rgba(0, 0, 0, 0.2);
    position: relative;
    text-align: left;
    font-weight: 900;
    color: #0f1111;
    margin: 0 auto;
    border-bottom: solid 1px #d9d9d9;
    border-top: solid 1px #d9d9d9;
    padding: 20px;
    min-height: 59px;
    background-color: #fff;
    width: 100%;
    text-align: left;
    border: none;
}
.offcanvas-filter .btn-close:after{
	content: "\f00d";
	font-weight: 300;
	font-family: "Font Awesome Pro";
	display: inline-block;
	margin-left: 0;
	line-height: 1em;
	font-size: 20px;
}
.offcanvas-filter .btn-close {
    background: #a5a5a5;
    opacity: 1;
    color: #000000;
    padding: 0;
    background: transparent;
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    margin: 0;
}
.offcanvas-filter .btn-close:focus,.offcanvas-filter .btn-close:active{box-shadow:none;}
.offcanvas-body .sidebarFilterDT {
    padding: 0;
    border: 0;
}
/*=================== action filter ===============*/
/*=================== Start filter Top ===============*/
.toolBarTopSearch .widget-title {
   font-size: var(--font-size-title-small);
    text-transform: uppercase;
    font-weight: 300;
}
.toolBarTopSearch .config-filter-in {
    overflow: hidden;
    overflow-x: auto;
}
.toolBarTopSearch .sidebarFilterDT .config-filter-sitebar .group-filter {
    width: auto;
    margin: 0;
	margin-right: 10px;
	border:0;
}
.toolBarTopSearch .sidebarFilterDT .config-filter-sitebar .group-filter>*{
	height:100%;
}
.toolBarTopSearch .sidebarFilterDT .config-filter-sitebar .group-filter .btn-show-filter {
	font-size: 14px;
    font-weight: 500;
    padding: 5px 10px;
    padding-right: 30px;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    cursor: pointer;
}
.toolBarTopSearch .sidebarFilterDT .config-filter-sitebar .group-filter .btn-show-filter.active {
    background: #767676;
    color: #fff;
}
.toolBarTopSearch .sidebarFilterDT .config-filter-sitebar .filter-position {
    position: absolute;
    left: 0;
    min-width: 0;
    border: 0;
    box-shadow: none;
	overflow: hidden;
    top: 100%;
	box-shadow: 0 3px 5px 7px rgba(0,0,0,0.05);
	-webkit-box-shadow: 0 3px 5px 7px rgba(0,0,0,0.05);
	-moz-box-shadow: 0 3px 5px 7px rgba(0,0,0,0.05);
	    width: max-content;
    white-space: normal;
	    max-width: 100%;
    min-width: 382px;
    
}
.toolBarTopSearch  .boxSearchFilter{
	background:transparent;
}
.toolBarTopSearch .sidebarFilterDT .config-filter-sitebar .filter-position .filter-list .filter-item{ width:auto;}
.toolBarTopSearch .sidebarFilterDT .config-filter-sitebar .filter-position .filter-list{border:0}
.toolBarTopSearch .filter-position-close {
    display: block;
    width: 100%;
    text-align: center;
    padding: 10px;
    background: #f1f1f1;
	cursor:pointer;
}
.toolBarTopSearch .title-filter {
   font-size: var(--font-size-title-small);
    font-weight: bold;
}
/*=================== End  filter Top ===============*/
/*=================== loading ===============*/
.loading {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.6);
	padding: 10px;
	display: none;
	z-index:9000;
}
.vs-loading__load {
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	-webkit-flex-direction: column;
	flex-direction: column;
	position: absolute;
	margin: auto;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
}
.lds,
.vs-loading__load {
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
}
.lds {
	width: 40px;
	height: 40px;
	position: relative;
	-webkit-transform: scale(1.5);
	-ms-transform: scale(1.5);
	transform: scale(1.5);
}
.vs-loading__progress__bar {
	background: #72bf00;
	height: 100%;
	position: relative;
	border-radius: 0 10px 10px 0;
}
.vs-loading--default .lds {
	border-radius: 50%;
}
.vs-loading--default .lds__1 {
	position: absolute;
	width: 100%;
	height: 100%;
	border: 2px solid #72bf00;
	border-radius: inherit;
	border-top: 2px solid rgba(0, 0, 0, 0) !important;
	border-left: 2px solid rgba(0, 0, 0, 0) !important;
	border-right: 2px solid rgba(0, 0, 0, 0) !important;
	-webkit-animation: rotate 0.8s ease infinite;
	animation: rotate 0.8s ease infinite;
	top: 0;
}
.vs-loading--default .lds__2 {
	top: 0;
	position: absolute;
	width: 100%;
	height: 100%;
	border: 2px dashed #72bf00;
	border-radius: inherit;
	border-top: 2px solid rgba(0, 0, 0, 0) !important;
	border-left: 2px solid rgba(0, 0, 0, 0) !important;
	border-right: 2px solid rgba(0, 0, 0, 0) !important;
	-webkit-animation: rotate 0.8s linear infinite;
	animation: rotate 0.8s linear infinite;
	opacity: 0.4;
}
@-webkit-keyframes rotate {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(1turn);
		transform: rotate(1turn);
	}
}
@keyframes rotate {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(1turn);
		transform: rotate(1turn);
	}
}
label.error{
    text-transform: none;
    font-size: 10px;
    color: red !important;
    position: absolute;
    left: 0;
    bottom: auto;
	top: 100%;
    height: auto;
    z-index: 999;
    border-radius: 0 0 8px 8px !important;
    -moz-border-radius: 0 0 8px 8px !important;
    -webkit-border-radius: 0 0 8px 8px !important;
    padding: 2px 5px;
    opacity: 1;
    width: 100%;
	transform:none !important;
    box-sizing: border-box;
    border: 0px;
    background: #f1f1f1;
    white-space: nowrap;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    overflow: hidden;
		display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    -webkit-line-clamp: inherit;
    margin-top: -7px;
    box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.2);
    line-height: 1.3em;
    border: 1px solid #dee2e6;
    border-top: 0;
}
label.error:first-letter{text-transform: uppercase;	}
label.error:after{display:none;}
.form-check-input~label.error {
    background: transparent;
    box-shadow: none;
    left: 0;
    padding-top: 2px;
    text-align: left;
    padding-left: 20px;
	border:0;
}
.form-check-input[type=checkbox]~div > * {
    background: transparent;
    box-shadow: none;
    border: 0;
}
/*=================== badge ===============*/
/*=================== badge ===============*/
/*=================== uploader file ===============*/
/**************** Stylesheet cho Multi-file Uploader (Hỗ trợ Grid & List) ******************/
.multifile-container {
    display: block;
    width: 100%;
}

/* Khu vực nút bấm kích hoạt chọn file */
.upload-trigger-zone {
    display: inline-block;
    margin-bottom: 8px;
}

.upload-trigger-zone .js-drop-zone {
    cursor: pointer;
    color: #1a73e8;
    font-size: 15px;
    font-weight: 500;
    transition: opacity 0.2s ease;
	outline: none;
}
.upload-trigger-zone .js-drop-zone input.input__upload{display:none;}
.upload-trigger-zone .js-drop-zone i {
    font-size: 18px;
    vertical-align: middle;
    margin-right: 4px;
}

.upload-trigger-zone .js-drop-zone span {
    color: #5f6368;
    font-weight: normal;
}

/* Vùng chứa danh sách xem trước tổng thể */
.preview-zone {
    display: flex;
    flex-wrap: wrap;
}
.upload-note {
    font-size: 12px;
    opacity: 1;
    margin-top: 4px;
    line-height: 1.5em;
    color: #333;
}
ul.upload-note-list {
    display: inline-flex;
	flex-wrap:wrap;
    margin: 0;
    padding: 0;
}
ul.upload-note-list li {
    margin-left: 10px;
    padding-left: 10px;
    list-style: none;
    list-style-position: inside;
    position: relative;
}
ul.upload-note-list li:first-child{
	margin:0;
}
ul.upload-note-list li:before {
    content: '•';
    position: absolute;
    left: 0;
    top: 0;
}
/* Lớp bổ trợ khi hàm Javascript kích hoạt cấu hình chế độ danh sách 'list' */
.preview-zone.flex-column {
    flex-direction: column !important;
}


/* ==================== 1. STYLE CHO CHẾ ĐỘ HIỂN THỊ DẠNG LƯỚI (GRID) ==================== */

/* Từng ô item ảnh/video (Kích thước 70x70 vuông góc bo tròn theo ảnh mẫu) */
.preview-zone .uploader-list {
    position: relative;
    width: 70px;
    height: 70px;
    margin-bottom: 8px;
    margin-right: 8px;
}

.preview-zone .uploader-list .uploader {
    width: 100%;
    height: 100%;
}
.preview-zone .uploader-list .uploader .uploader-label i{
	 color: initial;
}
/* Định dạng thẻ a bao bọc hình ảnh/video */
.preview-zone .uploader-list .image,
.preview-zone .uploader-list .video-preview-btn {
    display: block;
    width: 100%;
    height: 100%;
}

/* Định dạng hình ảnh hiển thị */
.preview-zone .uploader-list img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

/* Định dạng khối phát video preview nhỏ */
.preview-zone .uploader-list .video-preview-btn .video-full-cover {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e0e0e0;
    background: #000;
}

.preview-zone .uploader-list .video-preview-btn video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Nút xóa (X) hình tròn nhỏ nằm đè ở góc trên bên phải trong chế độ Grid */
.preview-zone .uploader-list .js-remove-file {
    position: absolute;
    top: -5px;
    right: 0;
    background: #ffe8e8cf;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    z-index: 5;
    transition: background 0.2s;
}
.preview-zone .uploader-list .js-remove-file:hover {
    background: rgba(255, 255, 255, 1);
}
.preview-zone .uploader-list .js-remove-file i {
    font-size: 14px;
    color: #ff0000;
}
/* ==================== 2. STYLE CHO CHẾ ĐỘ HIỂN THỊ DANH SÁCH (LIST) ==================== */
/* Ghi đè lại kích thước của uploader-list khi ở cấu hình danh sách hàng ngang */
.preview-zone.flex-column .uploader-list {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin-right: 0;
}

/* Khối bọc hiển thị icon và text tên file */
.preview-zone.flex-column .uploader-list .uploader-label > div {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    width: 100%;
    box-sizing: border-box;
    transition: background-color 0.2s;
}

.preview-zone.flex-column .uploader-list .uploader-label > div:hover {
    background: #f1f3f4;
}
.preview-zone:not(.flex-column) .item-file .uploader-label {
    display: flex;
    align-items: center;
    height: 100%;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 5px;
}
.preview-zone:not(.flex-column) .item-file .uploader-label>.name_file{
    font-weight: 500;
    line-height: 1.3em;
    font-size: 16px;
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}
/* Định dạng text tên file bị dài quá sẽ tự động tạo dấu 3 chấm (...) */
.preview-zone.flex-column .uploader-list .name_file {
    font-size: 14px;
    color: #3c4043;
    max-width: calc(100% - 40px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: middle;
}

/* Chỉnh lại vị trí nút xóa (X) nằm canh giữa dọc bên phải của thanh danh sách */
.preview-zone.flex-column .uploader-list .js-remove-file {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    z-index: 5;
    transition: all 0.2s;
}

.preview-zone.flex-column .uploader-list .js-remove-file:hover {
    background: #fdeded;
}

.preview-zone.flex-column .uploader-list .js-remove-file i {
    font-size: 12px;
    color: #dc3545; /* Đổi icon X sang màu đỏ trong chế độ danh sách tạo điểm nhấn */
}
.review-attach-list {
    background: #fff;
    padding: 13px;
    border-radius: 5px;
    border: 1px solid #f1f1f1;
}
.image-error-message{font-size:13px;}
/*=================== end uploader file ===============*/
/* ==================== 3. POPUP XEM VIDEO ĐẦY ĐỦ (FANCYBOX) ==================== */
.video-full-popup video {
    display: block;
    width: 100%;
}
/*=================== review ===============*/
.review-info-short {
    font-size: 14px;
	color:#000;
}
.review-info-short>div {
    border-right: 1px solid #adadad;
    padding-right: 10px;
    margin-right: 10px;
    pointer-events: none;
}
.review-info-short>div:last-child {
    padding-right: 0;
    border-right: 0;
}
.flex-review .review-content-in {
    background-color: #f4f9fd;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 10px;
    width: 100%;
}
.flex-review .image-review-name {
    width: 40px;
    height: 40px;
    text-align: center;
    background: #1c79bf;
    align-items: center;
    color: #fff;
    display: flex;
    justify-content: center;
    border-radius: 50%;
    font-size: 20px;
    line-height: 0;
    text-transform: uppercase;
}
.flex-review .image-review-name.image_admin {
    background:#68bd4c;
    color: #fff;
}
.flex-review .rating-symbol-foreground span,.flex-review .rating-symbol-background:before{
	line-height:1.2em;
}
.flex-review .rating-symbol {
    cursor: pointer;
}
.flex-review .libs_image a{display:inline-block; width:50px; margin-left:5px;}
.flex-review .libs_image a:first-child{margin-left:0;}
.flex-review .product-review {
    border-top: 1px solid #d1cccc;
}
.flex-review .image-user {
    width: 50px;
    height: 50px;
}
.flex-review .review-attach-list {
    display: block;
}
.flex-review .bg-comment{
	background:#f1f1f1;
}

.load-review  .rating-star__review_sort ul li.star {
    background-color: #EEEEEE;
	color:#333333;
    border-radius: 10px;
    cursor: pointer;
	margin:0 5px 10px;
}
.load-review .rating-star__review_sort ul li.star>.click_view {
    padding: 5px 10px;
    display: inline-block;
    border: 0;
    border-radius: 10px;
    color: #404040;
}
.load-review .rating-star__review_sort ul li.star>i{
	color:#ccc;
}
.load-review .rating-star__review_sort ul li.active.star>.click_view {
    color: rgb(0 0 0);
    background: rgb(255 247 223);
}
.load-review  .rating-star__review_sort ul li.active.star>.click_view:before{
	font-family: "Font Awesome 5 Pro";
	font-weight: 300;
	content: "\f00c";
	margin-right:11px;
}
.load-review  .rating-star__review_sort ul li.active.star i{
	color:#FFD52E;
}
.load-review  .rating-star__review_sort ul li.star i {
    padding-left: 5px;
}
.flex-review .review-btns {
    text-align: -webkit-right;
}
.flex-review .review-name-date {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: space-between;
    font-size: 12px;
}
.flex-review .rating-name {
    margin-right: 5px;
    font-size: 1em;
    font-weight: normal !important;
    text-transform: capitalize !important;
    margin: 0;
}
.flex-review .flex-review-content {
    margin-left: 5px;
}
.flex-review .rating-content {
    font-size: 16px;
    font-weight: normal;
    margin-top: 8px;
}
.flex-review .rating-wp{
	font-size: 12px;
}
.review-wp .form-control, .review-wp .btn-primary{
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}
.btn-send-review {
    background: transparent;
    padding: 5px 15px;
    text-transform: uppercase;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: #f1f1f1;
    font-weight: 600;
    width: auto;
    color: #000000;
    box-shadow: 2px 2px 0 0 #ccc;
}
@media(max-width:767px){
	.flex-review .rating-name {
		margin-right: 5px;
		font-size: 14px;
	}
	.flex-review .rating-date {
		font-size: 12px;
	}
	.flex-review .rating-content{
		font-size: 15px;
	}
	.flex-review .image-review-name{
		width:32px;
		height:32px;
		font-size:18px;
	}
	.flex-review .review-content-in{padding:10px;}
}
/*=================== review ===============*/
.js_rating_star_insert_attach{
    color: rgb(244, 7, 7);
    font-weight: 700;
    padding: 5px 0 5px 0;
    display: block;
    cursor: pointer;
}
.js_rating_star_insert_attach i{font-size:26px;}
/************upload update file 2208202307542***************/
@media (max-width: 992px) {
	.mySwiperScrollBar {
		max-height: 55vh;
	}
	.row-page-register .mySwiperScrollBar{
		max-height: 50vh;
	}
}

@media (min-width: 992px) {
	.mySwiperScrollBar{
		max-height: 620px;
	}
	.row-page-register .mySwiperScrollBar{
		max-height: 620px;
	}
}
/************end upload update file 2208202307542***************/
/*=================== uploader file ===============*/
/*=================== Menu Desktop===============*/
.filter-items.search-ul li a {
   font-size: var(--font-size-title-small);
    font-weight: 500;
    color: #333;
}
.filter-items.search-ul li a:hover {
  color: #2879fe;
}
.filter-items.search-ul li {
    padding: 8.5px 3px;
}
.filter-items>li:not(:last-child) {
    border-bottom: 1px solid #eee;
}
.menu,
.menu ul,
.mobile-menu,
.mobile-menu ul{
    list-style-type: none;
    margin: 0;
    padding: 0
}
.menu {
    display: flex;
    align-items: center;
	width:max-content;
}

.menu a {
    display: inline-block
}

.menu .menu-title {
    margin-bottom: 1rem; 
    padding: 0 1rem;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase
}

.menu ul {
    padding:15px 0;
    background: #fff;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
    color: #666
}

.menu li {
    position: relative;
    line-height: 1.5
}

.menu li a {
    padding: 5px 0;
	display:block;
	color:#333;
}
.menu li a span.note-menu, .mobile-menu li a span.note-menu {
    font-size: small;
    display: block;
    color: #6c6c6c;
}
.menu li>ul,
.menu li .megamenu {
    position: absolute;
    top: -9999px;
    left: 100%;
    margin: 0;
    box-shadow: 0 2px 35px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
    transition: transform .2s ease-out;
    transform: translate3d(0, -10px, 0)
}
.menu li.submenu>ul {
    min-width: 16.6rem;
    background: #fff;
    -webkit-box-shadow: 1px 1px 15px rgb(0 0 0 / 15%);
    box-shadow: 1px 1px 15px rgb(0 0 0 / 15%);
    border: 2px solid #ddd;
}
/******mega-menu*******/
.menu li.mega-menu.submenu>ul {
    width: 38.6em;
    display: flex;
    left: -100%;
	padding:10px;
}
.menu li.mega-menu.submenu>ul>li {
    width: 33.3%;
	padding:0 0.5rem
}
.menu li.mega-menu.mega-menu-25.submenu>ul>li{
	width: 25%;
	padding:0 0.5rem
}
.menu li.mega-menu.mega-menu-50.submenu>ul>li{
	width: 50%;
	padding:0 0.5rem
}
.menu li.mega-menu.submenu>ul>li>a{
	font-weight:bold;
}
.menu li.mega-menu.submenu ul li>a::after{
	display:none;
}
.menu li.submenu.mega-menu li ul {
	position: static;
    width: 100%;
    border: 0;
    box-shadow: none;
    padding: 0;
    min-width: 0;
    visibility: visible;
    opacity: 1;
    top: 0;
    transform: translate3d(0, 0, 0);	
}
.menu li.submenu.mega-menu li ul>li{
	padding:0;
}
/******End mega-menu*******/
.menu>li.submenu:after, .menu>li.submenu:before {
    bottom: -2px;
    z-index: 1000;
    opacity: 0;
    left: 50%;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.menu>li.submenu:hover:before {
    z-index: 1000;
    border-width: 11px;
    margin-left: -11px;
    border-bottom-color: #ddd;
    -webkit-transition: opacity .25s;
    -o-transition: opacity .25s;
    transition: opacity .25s;
    opacity: 1;
}
.menu>li.submenu:hover:after {
    border-color: rgba(221,221,221,0);
    border-bottom-color: #fff;
    border-width: 8px;
    margin-left: -8px;
    -webkit-transition: opacity .25s;
    -o-transition: opacity .25s;
    transition: opacity .25s;
    opacity: 1;
}
.menu li>ul {
    min-width: 235px;
    background: #fff;
	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
}

.menu li>ul li {
    padding: 0 15px
}

.menu li:hover>a:not(.menu-title),
.menu .active>a:not(.menu-title) {
    color: var(--color-primary)
}

.menu li:hover>ul,
.menu li:hover .megamenu,
.menu .show .megamenu {
    visibility: visible;
    opacity: 1;
    top: -2rem;
    transform: translate3d(0, 0, 0)
}

.menu>li {
    margin-right: 1.5rem
}

.menu>li:last-child {
    margin-right: 0
}

.menu>li>a {
    position: relative;
    padding: 1.3rem 0;
    font-weight: 700;
    letter-spacing: inherit;
    line-height: 1;
    text-transform: uppercase;
	color:#355278;
	font-size:16px;
}
.menu li .class_menu_icon {
	position:relative;
    padding-left: 33px;
}
@media(max-width:1200px){
	.menu>li>a{font-size: var(--font-size--body);}
	/* .submenu>a::after{margin-top:-2px;} */
}
.menu>li>a::after {
    margin-left: .5rem
}

.menu>li>ul,
.menu>li .megamenu {
    left: -1.9rem
}

/* .menu>li:hover>ul, */
/* .menu>li:hover .megamenu, */
/* .menu>li.show>ul, */
/* .menu>li.show .megamenu { */
    /* top: 100% */
/* } */

.menu>li:hover>ul,
.menu>li:hover .megamenu{
    top: 100%
}

.menu .submenu>a {
    position: relative;
    display: block
}

.menu>.submenu>a {
    z-index: 1001;
    padding-right: 15px;
}

.menu>.submenu>a::after {
	content: "\f078";
	font-weight: 900;
   font-family: "Font Awesome Pro";
}

.menu.no-arrow>li>a::after {
    content: none
}
.menu .submenu>a {
    position: relative;
    display: block
}

.menu>.submenu>a {
    z-index: 1001
}
.submenu>a::after {
    display: inline-block;
    position: absolute;
    right: 0;
    top: 50%;
	transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
    line-height: 0;
    vertical-align: middle;
    font-size: 0.7rem;
    color: inherit;
	content: "\f054";
	font-weight: 900;
   font-family: "Font Awesome Pro";
}
ul li.menu_level .class_menu_icon {
    padding-left: 30px;
}
.menu-icon {
    position: absolute;
    left: 0;
    width: 30px;
    top: 50%;
    transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
.menu li>ul li.submenu>a{
	padding-right:7px;
}
.menu li>ul li.submenu>a:after {
    top: 20px;
    transform: none;
    margin: 0;
}
/*Menu Desktop*/
/*Menu Mobile*/

.d-icon-times:before {
    content: "Ă—";
}
ul.mobile-menu li.menu_level .class_menu_icon {
    padding-left: 40px;
}
ul.mobile-menu .menu-icon{
	left:15px;
	width: 25px;
}
@media(max-width:767px){
	ul.mobile-menu .menu-icon{
		width: 23px;
	}
}
.mobile-menu-toggle,.cart-mobile-toggle{
    display: none;
    margin-right: 2rem;
    font-size: 2.5rem;
    color: #333333;
	cursor: pointer;
}
.mobile-menu-toggle:focus,.mobile-menu-toggle:active{box-shadow:none;}
.mobile-menu-toggle {
    margin-left: 5px;
    background: #f1f1f1;
    color: #8c8b8b;
    padding: 0 8px;
    border-radius: 5px;
}
.mobile-menu-toggle>i {
    color: #8c8b8b;
    line-height: 1.5rem;
	font-size:24px;
}
.mobile-menu li ul{
    left: -99999px;
    opacity: 0;
    position: fixed;
    transform: translateX(-10px);
    transition: background-color .6s, transform .3s, opacity .3s;
}
.mobile-menu li.show>ul{
    left: -99999px;
    opacity: 0;
    position: fixed;
    transform: translateX(-10px);
    transition: background-color .6s, transform .3s, opacity .3s;
}
.mobile-menu li.show>ul{
    left: auto;
    opacity: 1;
    position: inherit;
    transform: translateX(0);
}
.mobile-menu li .class_menu_icon {
    padding-left: 45px !important;
}
@media (max-width: 991px) {
    .mobile-menu-toggle,.cart-mobile-toggle{
        display: flex; margin:0;
    }
}
.mobile-menu-toggle {
    margin-left: 5px;
    height: 40px;
    width: 40px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.toggle-btn {
    display: flex;
    position: absolute;
    padding: 6px;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    opacity: .6;
    width: 35px;
    height: 35px;
    align-items: center;
    justify-content: center;
}
.toggle-btn::before {
    font-size: 1rem;
    transition: transform .5s;
}
.show>a .toggle-btn::before {
    transform:rotate(90deg);
}
.mobile-menu-toggle.menu-bar::before,
.mobile-menu-toggle.menu-bar::after {
    content: '';
    display: block;
    width: 100%
}

.mobile-menu-toggle.menu-bar::before {
    height: 11px;
    border-top: 2px solid;
    border-bottom: 2px solid
}

.mobile-menu-toggle.menu-bar::after {
    height: 9px;
    border-bottom: 2px solid
}


.mobile-menu-wrapper {
    visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10005;
    transition: visibility .4s
}
.mobile-menu-heder {
    background: #f1f1f1;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1;
    box-shadow: 0 0 5px 0px rgba(0,0,0,0.2);
}
.mobile-menu-heder-in{position:relative;}
a.navbar-brand.navbar-brand-menu {
    /* background: #ffffff; */
    border-radius: 5px;
    display: inline-block;
    overflow: hidden;
    padding: 0;
    box-sizing: border-box;
}
.navbar-brand>img{margin:0 auto;}
.mobile-menu-wrapper a.navbar-brand.navbar-brand-menu{
	padding:10px 5px;
}
.mobile-menu-wrapper a.navbar-brand.navbar-brand-menu {
	width:100%;
}
.mobile-menu-container{
    max-width: 280px;
    padding:0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background: #ffffff;
    box-shadow: 1px 0 5px rgba(0, 0, 0, 0.5);
    transform: translateX(-20rem);
    transition: transform .4s
}

.mobile-menu-container .input-wrapper {
    display: flex;
    margin-bottom: .6rem;
    height: 4rem
}

.mobile-menu-container .input-wrapper .form-control {
    min-height: 4rem;
    color: #7a8088;
    border: 1px solid;
    border-color: #f1f1f1;
    border-right: 0;
    background-color: transparent
}

.mobile-menu-container .input-wrapper .btn-search {
    padding: 0;
    width: 4rem;
    background-color: #ffffff;
    border-color: #ffffff;
    color: #000000;
    font-size: 1.4rem;
}

.mobile-menu-container .input-wrapper .btn-search i {
    margin: 0 0 .5rem;
    font-size: inherit
}

.mobile-menu-container .mobile-menu {
	margin-bottom: 0;
    padding: 0 15px;
}
.mobile-menu-container .mobile-menu>li.active>a{
    color: var(--color-primary);
}
.mobile-menu li.active ul{display:block;}
.mobile-menu li li.active a {
    color: var(--color-primary);
}
.mobile-menu-container .tab {
    margin-top: 3rem
}

.mobile-menu-container .tab-content {
    background-color: transparent
}

.mobile-menu-container .nav {
    border-width: 2px
}

.mobile-menu-container .nav-link {
    margin-bottom: -2px;
    color: #fff;
    font-size: 13px;
    padding: 10px
}

.mobile-menu-container .tab-pane {
    padding-top: 10px
}

.mobile-menu-container .nav-item:hover .nav-link {
    color: #fff;
    border-color: transparent
}

.mobile-menu-container .nav-item.show .nav-link,
.mobile-menu-container .nav-item .nav-link.active {
    color: #26c;
    border-color: #26c
}

.mobile-menu-container .nav-item+.nav-item {
    margin-left: 1px
}

.mobile-menu-container.scrollable::-webkit-scrollbar-thumb,
.mobile-menu-container .sidebar-content::-webkit-scrollbar-thumb {
    margin-right: 2px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 7px;
    cursor: pointer
}

.mobile-menu {
    text-transform: uppercase;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -.025em;
    color: #e1e1e1;
    text-transform: uppercase;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -.025em;
}
@media(max-width:767px){
	.mobile-menu{
		padding-bottom:120px !important;
	}
}
.mobile-menu ul {
    width: 100%;
    border-top: 1px solid #f1f1f1;
}
.mobile-menu ul li.show ul{display:block;}
.mobile-menu>li:first-child {
    padding-top: .5rem
}

.mobile-menu>li:last-child {
    padding-bottom: .5rem
}

.mobile-menu li a {
	display: block;
    position: relative;
    padding: 10px;
    color: #333333;
    text-transform: uppercase;
    font-size:var(--font-size-title-medium);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -.025em;
}
.mobile-menu li a:hover{
	color:#000000;
}
.mobile-menu li i {
    display: inline-block;
    margin-bottom: 1px;
    font-size: 2rem;
    margin-right: 1rem;
    line-height: 0;
    vertical-align: middle
}

.mobile-menu li li a {
    padding-left: 20px;
    text-transform: initial;
	 font-size:var(--font-size-title);
    font-weight: 500;
}

.mobile-menu li li li a {
    padding-left: 2.2rem
}

.mobile-menu li:not(:last-child) {
    border-bottom: 1px solid #f1f1f1
}

.mobile-menu-title {
    margin-bottom: .5rem;
    text-transform: uppercase;
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff
}

.mobile-menu-overlay {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: #000;
    opacity: 0;
    transition: opacity .4s
}

.mobile-menu-close {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
    transition: opacity .3s;
    opacity: 0;
    padding: 5px 10px;
    background: rgba(0,0,0,0.4);
    color: #fff;
    border-radius: 0 0 0 10px;
	border:0;
}

.mobile-menu-close i {
    font-size:18px;
    color: #ffffff;
}
.mmenu-anim,
.mmenu-anim>li {
    transition: transform .4s, opacity .3s;
    transition-timing-function: cubic-bezier(0.5, 0, 0.3, 1)
}

.mmenu-active {
    overflow: hidden
}

.mmenu-active .mobile-menu-wrapper {
    visibility: visible
}

.mmenu-active .mobile-menu-container {
transform: translateX(0);
    position: relative;
}

.mmenu-active .mobile-menu-overlay{
    opacity: .8
}

.mmenu-active .mobile-menu-close {
    opacity: 1
}
/*=================== Menu Desktop===============*/
/*=================== Muc Luc===============*/
.side-menu .btn.fade-blur,.side-menu .btn.unfade-blur  {
    -webkit-transition-property: opacity,filter;
    transition-property: opacity,filter;
}
.side-menu .btn.fade-blur {
    opacity: .3;
    filter: blur(1px);
    -webkit-transition:opacity 3s ease-in;
    transition:opacity 3s ease-in;
}
.side-menu .btn.unfade-blur {
    opacity: 1;
    filter: blur(0);
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition:opacity .5s ease-out;
    transition:opacity .5s ease-out;
}

.menu-fixed {
    padding:10px 15px;
    background: rgba(243,243,243,0.95);
    text-align: left;
	display:none;
}
.menu-fixed>.toc-header, .menu-fixed>h2{
    font-weight: 700;
    display: block;
    overflow: hidden;
    text-align: left;
    margin: 0;
    text-transform: uppercase;
    margin-bottom: 0;
	font-size:20px;
	cursor:pointer;
}
.menu-fixed>.toc-header i, .menu-fixed>h2 i{
	font-size:20px;
	line-height:1.5em;
}

.menu-fixed>h2,.menu-fixed>.toc-header{position:relative;}
.menu-fixed>h2:after, .menu-fixed>.toc-header:after {
    position: absolute;
    right: 0;
    top: 50%;
    content: "\f078";
    font-family: "Font Awesome Pro";
    font-weight: 300;
    line-height: 1em;
    transform: translateY(-50%);
}
.side-menu-body .toc-header {
    color: #000000;
    font-size: 22px;
    text-transform: uppercase;
    font-weight: bold;
}
@media(max-width:767px){
	.toc-header, .menu-fixed>h2{font-size:20px;}
}
.menu-fixed ul.toc{
    color: #333;
    font-size: 12px;
    line-height: 1.5em;
    width: 100%;
    -webkit-transition: background 0.3s;
    transition: background 0.3s; 
	font-size: 11px;
	color: #353535;
}
.menu-fixed ul.toc {
    text-align: left;
}
.menu-fixed ul.toc li a{font-size:16px; color:#333333; text-decoration:none; font-weight:bold;}
.menu-fixed ul.toc li li{margin-top:5px;}
.menu-fixed ul.toc li li a{font-size:13px; color:#333333; text-decoration:none; font-weight:500;}
.side-menu {
    position: fixed;
    pointer-events: none;
    left: 0;
    top: 0;
    z-index: 10000;
    display: flex;
    height: 100vh;
}
.side-menu .side-menu-body {
	height: 100%;
    overflow-y: scroll;
    transform: translateX(-100%);
    transition: all .2s ease-in-out;
    pointer-events: all;
    width: 500px;
	max-width:100%;
}
.side-menu .side-menu-body [data-toc]{
	display:block !important;
}
.side-menu .btn {
	transition: all .2s ease-in-out;
    pointer-events: all;
    position: relative;
    margin-left: 1.5rem;
    right: calc(100% - 5.05rem);
    padding: 0;
    width: 50px;
    height: 50px;
    box-sizing: border-box; 
	display:block;
}
.side-menu .btn .image {
    display: block;
    width: 100%;
    font-size: 28px;
    line-height: 1.2em;
}
.side-menu .btn:hover .image{
	color:#ffffff;
}
.side-menu .btn .icon, .side-menu .btn i {
    margin: 0 !important;
    transition: all .2s ease-in-out;
	width:100%;
}
.side-menu .btn .icon:last-child , .side-menu .btn i:last-child {
    position: absolute;
    opacity: 0;
	top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.side-menu .btn.active {
    right: 0
}
.side-menu .btn.active .image>.icon:first-child, .side-menu .btn.active .image>i:first-child{
    opacity: 0
}
.side-menu .btn.active .image>.icon:last-child,.side-menu .btn.active .image>i:last-child {
    opacity: 1
}
.side-menu .btn.active+.side-menu-body {
    transform: translateX(0)
}

.side-menu .nav-link {
    color: #555a64
}

.side-menu .nav-link:not(.active),
.side-menu .nav-link:not(:hover) {
    opacity: .5
}

.side-menu .nav-link.active,
.side-menu .nav-link:hover {
    color: #009b72;
    opacity: 1
}
body .side-menu .btn {
	position: absolute;
    bottom: 270px;
    right: calc(100% - 70px);
	border:0;
}
body .side-menu .btn.btn-site-menu:hover{
	-webkit-box-shadow: 0px 6px 8px rgb(0 0 0 / 20%);
    box-shadow: 0px 6px 8px rgb(0 0 0 / 20%);
}
body .side-menu .btn.active{right:-65px;}
body .side-menu [data-toc]{}
@media all and (max-width: 767px) {
	body .side-menu .btn {
		width: 40px;
		height: 40px;
		right: calc(100% - 75px);
	}
}
body.bodywp.fade-blur {
    overflow: hidden;
}
.bodywp:after {
    content: "";
    background: rgba(0,0,0,0.3);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
	z-index: 9999;
	visibility:hidden;
	opacity:0;
	-webkit-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}
.bodywp.fade-blur:after {
	visibility:visible;
	opacity:1;
}
[data-toc]{
	padding-left:20px;
	margin:0;
}
[data-toc]>li>a{
	font-weight:700;
}
[data-toc] li ul{
	padding-left:20px;
}

[data-toc] li a.active{color:red;}
[data-toc] li a {
   font-size: var(--font-size-title-small);
    line-height: 1.3em;
    color: #000;
}
[data-toc] li{
	margin:5px 0;
}
[data-toc] li ul li a{
	font-size: var(--font-size--body);
}
.side-menu .btn+.side-menu-body>h2{
	font-size: 22px;
    text-transform: uppercase;
    font-weight: bold;
}
@media(max-width:767px){
	[data-toc]{padding-left:20px;}
	[data-toc] li a{
		font-size:16px;
		line-height:1.3em;
	}
	[data-toc] li ul li a{font-size:14px;}
	.side-menu .side-menu-body{
		padding-bottom: 130px !important;
	}
}
@media(max-width:576px){
	.side-menu .btn{margin-right:1rem;}
	.side-menu .side-menu-body{
		min-width: 200px;
		max-width: 300px;
	}
}

@media(max-width:380px){
	.side-menu .btn{margin-right:1rem;}
	.side-menu .side-menu-body{
		min-width: 200px;
		max-width: 260px;
	}
}

@media(max-width:320px){
	.side-menu .btn{margin-right:1rem;}
	.side-menu .side-menu-body{
		min-width: 200px;
		max-width: 230px;
	}
}
/*=================== END Muc Luc===============*/
/*=================== Start [data-readmore]===============*/
[data-readmore]{
    position: relative;
}
[data-btnreadmore] {
    text-align: left;
    cursor: pointer;
    position: absolute;
    z-index: 10;
    bottom: 0;
    width: 100%;
    padding-bottom: 10px;
    background: transparent;
    color: #e67e22;
    font-weight: 700;
    display: flex;
    padding: 10px;
    height: 150px;
    background: linear-gradient(to bottom, rgba(255 255 255 / 0), rgba(255 255 255 / 0.4), rgba(255 255 255 / 0.7), rgba(255 255 255 / 0.85), rgba(255 255 255 / 1));
    align-items: end;
    justify-content: center;
    bottom: 0;
	border:0;
}
[data-btnreadmore]:focus,[data-btnreadmore]:active{
	outline:none !important;
	box-shadow:none !important;
	border:0 !important;
}
[data-btnreadmore]>span {
	font-size: 20px;
	position: relative;
	padding-left:30px;
	text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 3px 3px 5px #333;
	pointer-events:none;
}
[data-btnreadmore]>span i {
	font-size: 26px;
	position: absolute;
	top: 0px;
	left: 0px;
	line-height: 1.2em;
}
@media(max-width:767px){
	[data-btnreadmore]>span{font-size: 16px;}
	[data-btnreadmore]>span i {font-size: 18px;}
}
[data-btnreadmore].read-more>span i {
	animation: fade-right 1.5s infinite linear;
}
[data-btnreadmore].read-less {
    position: relative;
    justify-content: center;
    height: auto;
}
@keyframes fade-right {
	0% {
	-webkit-transform: translateX(0);
	transform: translateX(0);
	opacity: 1
	}

	75% {
	-webkit-transform: translateX(15px);
	transform: translateX(15px);
	opacity: 0
	}
}
/*=================== END [data-readmore]===============*/
/*=================== Muc Luc===============*/
/*******Cart Form**********/
.choose_attribute select {
    padding: 1px 3px 2px;
    font-size: 12px;
    border-radius: 5px;
}
.choose_attribute .item-select label {
    display: block;
    font-size: 12px;
}

.woocommerce-cart {
    padding: 20px 0;
    overflow: hidden;
}

.woocommerce-cart .wcmc-cart-box .wcmc-cart-tbody .wcmc-cart__item {
    display: flex;
    justify-content: flex-start;
    border-bottom: none;
    position: relative;
    transition: all 0.3s ease-out 0s;
    height: auto;
    width: 100%;
    padding: 20px 0 10px;
    border-top: 1px solid #f1f1f1;
}
.woocommerce-cart .wcmc-cart-box .wcmc-cart-tbody .wcmc-cart__item .cart_item__img {
    display: flex;
    justify-content: start;
    flex-direction: column;
    align-items: center;
    flex: 1 1 0%;
    width: 70px;
    height: auto;
    min-width: 70px;
    padding: 0 5px 0 0;
    position: relative;
    z-index: 1;
    transition: all 0.5s ease 0s;
    opacity: 1;
}
.woocommerce-cart .wcmc-cart-box .wcmc-cart-tbody .wcmc-cart__item:first-child{border-top:0;}
.woocommerce-cart .wcmc-cart-box .wcmc-cart-tbody .wcmc-cart__item .cart_item__img img {
    width: 100%;
    height: auto;
}
.woocommerce-cart .wcmc-cart-box .wcmc-cart-tbody .wcmc-cart__item .number_infor{
	display: flex;
    justify-content: flex-start;
    border-bottom: none;
    position: relative;
	width: calc(100% - 110px);
    padding:0px 20px 10px 5px;
	
}
.woocommerce-cart .wcmc-cart-box .wcmc-cart-tbody .wcmc-cart__item .cart_item__quantity {
    display: flex;
    transition: all 0.3s ease-out 0s;
    opacity: 1;
	width:auto;
	-ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.woocommerce-cart .wcmc-cart-box .wcmc-cart-tbody .wcmc-cart__item .cart_item__quantity .cart_item__quantity_in{
	display:inline-flex;
   transition: all 0.3s ease-out 0s;
    opacity: 1;
	-ms-flex-wrap: wrap; 
    flex-wrap: wrap;
	 align-items: start;
}
.woocommerce-cart .wcmc-cart-box .wcmc-cart-tbody .wcmc-cart__item .number-price .cart_item__quantity .cart_item__quantity_in{
	background: #f1f1f1;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}
.woocommerce-cart .wcmc-cart-box .wcmc-cart-tbody .wcmc-cart__item .cart_item__quantity .btn-plus{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 100%;
    cursor: pointer;
    position: relative;
    z-index: 1;
	/* order:1; */
}
.woocommerce-cart .wcmc-cart-box .wcmc-cart-tbody .wcmc-cart__item .cart_item__quantity .btn-cart .icon svg g{
	fill: #333;
}
.woocommerce-cart .wcmc-cart-box .wcmc-cart-tbody .wcmc-cart__item .cart_item__quantity .btn-cart .icon {
    display: block;
    align-items: center;
    justify-content: center;
	text-align:center;
    width: 15px;
    height: auto;
    margin: 0;
    color: #4d4e4f;
}
.woocommerce-cart .wcmc-cart-box .wcmc-cart-tbody .wcmc-cart__item .cart_item__quantity .quantity-number{
    width: 40px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    position: relative;
}
.woocommerce-cart .wcmc-cart-box .wcmc-cart-tbody .wcmc-cart__item .cart_item__quantity .quantity-number .quantity-number .qty {
    display: inline-block;
    width: 100%;
    text-align: center;
    border: 0;
}
.woocommerce-cart .wcmc-cart-box .wcmc-cart-tbody .wcmc-cart__item .cart_item__quantity .quantity-number .number,.woocommerce-cart .wcmc-cart-box .wcmc-cart-tbody .wcmc-cart__item .cart_item__quantity>.cart_item__quantity_in>.number{
   font-size: var(--font-size-title-small);
    color: #000;
	width:100%;
	border:0;
	height:100%;
	text-align:center;
    background: #e8e8e8;
}
.woocommerce-cart .wcmc-cart-box .wcmc-cart-tbody .wcmc-cart__item .cart_item__quantity>.cart_item__quantity_in>.number{
	width: 40px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    position: relative;
	font-size:16px;
}

.woocommerce-cart .wcmc-cart-box .wcmc-cart-tbody .wcmc-cart__item .cart_item__quantity .btn-minus {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 100%;
    cursor: pointer;
    position: relative;
    z-index: 1;
	/* order:3; */
}
.woocommerce-cart .wcmc-cart-box .wcmc-cart-tbody .wcmc-cart__item .cart_item__quantity .btn-minus .icon {
    display: inline-block;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: auto;
    margin: 0;
    color: #4d4e4f;
}
.woocommerce-cart .wcmc-cart-box .wcmc-cart-tbody .wcmc-cart__item .cart_item__info {
    transition: all 0.3s ease-out 0s;
	padding-top:0;
}
.woocommerce-cart .wcmc-cart-box .wcmc-cart-tbody .wcmc-cart__item .number-price {
    gap: 5px;
    align-items: center;
}
.woocommerce-cart .wcmc-cart-box .wcmc-cart-tbody .wcmc-cart__item .number-price~.choose_attribute{margin-top:5px;}
.woocommerce-cart .wcmc-cart-box .wcmc-cart-tbody .wcmc-cart__item .choose_attribute .item-select {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.woocommerce-cart .wcmc-cart-box .wcmc-cart-tbody .wcmc-cart__item .pr-name {
    flex-flow: column;
}
.woocommerce-cart .wcmc-cart-box .wcmc-cart-tbody .wcmc-cart__item .pr-name .code_product {
    font-size: 12px;
}
.woocommerce-cart .wcmc-cart-box .wcmc-cart-tbody .wcmc-cart__item .pr-name .name {
    margin: 0;
    padding-bottom: 0;
    font-size: 16px;
    color: #363636;
    line-height: 1.5em;
    text-transform: capitalize;
    margin-bottom: 5px;
}
.woocommerce-cart .wcmc-cart-box .wcmc-cart-tbody .wcmc-cart__item .cart_item__info .pr-price {
    color: #333333;
    font-size: 14px;
	 font-weight: 500;
}
.woocommerce-cart .wcmc-cart-box .wcmc-cart-tbody .wcmc-cart__item .cart_item__info .badge{
	display: inline-block;
    font-weight: normal;
	padding:0;
    color: #212529;
    background: transparent !important;
    box-shadow: none;
}
.woocommerce-cart .wcmc-cart-box .wcmc-cart-tbody .wcmc-cart__item .number_infor .choose_attribute .item-select label{
	font-weight: bold;
}
.woocommerce-cart .wcmc-cart-box .wcmc-cart-tbody .wcmc-cart__item .cart_item__info .pr-price-sum{
	 color: #df1204;
    font-size: 16px;
    font-weight: 500;
}
.woocommerce-cart .wcmc-cart-box .wcmc-cart-tbody .wcmc-cart__item .cart_item__trash {
    width: auto;
    height: auto;
	position: absolute;
	right: 0;
    cursor: pointer;
    transition: all 0.3s ease-out 0s;
}
.siteCart-mobile .woocommerce-cart .wcmc-cart-box .wcmc-cart-tbody .wcmc-cart__item .cart_item__trash {
    position: absolute;
    right: 0;
    bottom: 4px;
}
.woocommerce-cart .wcmc-cart-box .wcmc-cart-tbody .wcmc-cart__item .cart_item__trash_top{
	top: 0;
}
.woocommerce-cart .wcmc-cart-box .wcmc-cart-tbody .wcmc-cart__item .cart_item__trash_bottom{
	bottom: 10px; right:5px;
}
.woocommerce-cart .wcmc-cart-box .wcmc-cart-tbody .wcmc-cart__item .cart_item__trash .icon {
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto; 
    margin: 0;
    color: #000;
    display: inline-flex;
    justify-content: center;
    line-height: 1.5em;
    font-size: 14px;
    color: red;
    border-radius: 5px;
}
.woocommerce-cart .wcmc-cart-box .wcmc-cart-tbody .wcmc-cart__item .cart_item__trash .icon>span {
    padding-left:3px;
}
.woocommerce-cart .wcmc-cart-box .wcmc-cart-tbody .wcmc-cart__item .cart_item__trash .icon svg g{
	fill:#ffffff;
}
.woocommerce-cart .wcmc-cart-box .wcmc-cart-tbody .wcmc-cart__item .cart_item__trash_popover {
	position: absolute;
    top: 0;
    right: 0;
    padding: 10px;
    z-index: 50;
    height: 100%;
    width: calc(100% - 70px);
    background: #fff;
    padding-top: 11px;
    transition: all 0.3s ease-in-out 0s;
    transform: translateX(100%);
    visibility: hidden;
    max-width: 330px;
    border: 1px solid #f1f1f1;
    opacity: 0;
    box-shadow: -2px -2px 8px 0px rgb(0 0 0 / 20%);
}
.woocommerce-cart .wcmc-cart-box .wcmc-cart-tbody .wcmc-cart__item .cart_item__trash_popover.active {
    transform: translateX(0);
    visibility: visible;
	opacity:1;
}
.woocommerce-cart .wcmc-cart-box .wcmc-cart-tbody .wcmc-cart__item .cart_item__trash_popover .submit-button {
    width: 100%;
    display: inline-flex;
    text-transform: capitalize;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    transition: all 0.3s ease-out 0s;
    white-space: nowrap;
    border-radius: 3px;
    cursor: pointer;
    position: relative;
    z-index: 10;
    height: auto;
    line-height: 1.5em;
    padding: 5px 20px;
	background-color: #ffffff;
    color: #fff;
    flex: 1 1 0%;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 12%), 0 0 1px 0 rgb(0 0 0 / 14%), 0 2px 1px -1px rgb(0 0 0 / 12%);
}
.js_cart_item__trash_text{
    font-size: 14px;
    line-height: 24px;
    margin-bottom: 3px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    -webkit-line-clamp: 2;
    font-weight: 500;
    line-height: 1.3em;
    color: #000000;
}
.js_cart_item__trash_button{
    display: flex;
    justify-content: space-between;
    gap: 10px;
}
.woocommerce-cart .wcmc-cart-box .wcmc-cart-tbody .wcmc-cart__item .cart_item__trash_popover .submit-button.js_cart_item__trash_agree{
	font-size: 14px; line-height: 1.5em; background-color: #f33; color:#ffffff;
}
.js_cart_item__trash_close{
	font-size: 13px; letter-spacing: 1.1px; text-transform: uppercase;color:#333333;
}
.woocommerce-cart .wcmc-cart-box .wcmc-cart-tbody .wcmc-cart__item .cart_item__quantity{
	min-height:25px;
}
.woocommerce-cart .wcmc-cart-box .wcmc-cart-tbody .wcmc-cart__item .cart_item__quantity .btn-minus,.woocommerce-cart .wcmc-cart-box .wcmc-cart-tbody .wcmc-cart__item .cart_item__quantity .btn-plus,.woocommerce-cart .wcmc-cart-box .wcmc-cart-tbody .wcmc-cart__item .cart_item__quantity>.cart_item__quantity_in>.number{width:30px;}
@media(max-width:767px){
	.woocommerce-cart .wcmc-cart-box .wcmc-cart-tbody .wcmc-cart__item{
		padding: 20px 10px;
	}
	.alert-note{font-size:14px;}
	.woocommerce-cart .wcmc-cart-box .wcmc-cart-tbody .wcmc-cart__item .cart_item__info .pr-price{
		font-size: 12px;
	}
	.woocommerce-cart .wcmc-cart-box .wcmc-cart-tbody .wcmc-cart__item .pr-name .name {
		font-size: 12px;
		line-height: 1.3em;
			display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		white-space: initial;
		overflow: hidden;
	}
	.woocommerce-cart .wcmc-cart-box .wcmc-cart-tbody .wcmc-cart__item .pr-name .code_product{
		font-size: 10px;
	}
	.woocommerce-cart .wcmc-cart-box .wcmc-cart-tbody .wcmc-cart__item .number_infor{
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		padding:0;
		width: calc(100% - 100px);
	}
	.woocommerce-cart .wcmc-cart-box .wcmc-cart-tbody .wcmc-cart__item .cart_item__quantity{
		min-height:35px;
	}
	.woocommerce-cart .wcmc-cart-box .wcmc-cart-tbody .wcmc-cart__item .cart_item__quantity .cart_item__quantity_in{display:inline-flex; width:auto;background:#f1f1f1; border-radius:7px;}
	.woocommerce-cart .wcmc-cart-box .wcmc-cart-tbody .wcmc-cart__item .cart_item__quantity{display:flex; margin-top:5px;}
	.woocommerce-cart .wcmc-cart-box .wcmc-cart-tbody .wcmc-cart__item .cart_item__quantity>.cart_item__quantity_in>.number{
		height: 100%;
		line-height: 1.5em;
	}
	.woocommerce-cart .wcmc-cart-box .wcmc-cart-tbody .wcmc-cart__item .cart_item__trash_bottom{
		bottom: 10px;
		right: calc(100% + 14px);
		position: absolute;
		z-index:10;
		position: static;
        margin-top: 10px;
	    width: 100%;
        text-align: right;
	}
	.woocommerce-cart .wcmc-cart-box .wcmc-cart-tbody .wcmc-cart__item .cart_item__trash .icon {
		font-size: 12px;
		padding: 2px 5px;
	}
	.woocommerce-cart .wcmc-cart-box .wcmc-cart-tbody .wcmc-cart__item .cart_item__quantity{
		min-height:0;
	}
	.woocommerce-cart .wcmc-cart-box .wcmc-cart-tbody .wcmc-cart__item .cart_item__quantity .btn-minus,.woocommerce-cart .wcmc-cart-box .wcmc-cart-tbody .wcmc-cart__item .cart_item__quantity .btn-plus,.woocommerce-cart .wcmc-cart-box .wcmc-cart-tbody .wcmc-cart__item .cart_item__quantity>.cart_item__quantity_in>.number{width:26px; border-radius: 0 !important;font-size: 12px;}
}
.section-page-cart .form-check-input, .section-page-footer .form-check-input {
    width: 20px;
    height: 20px;
    border-color: #b3b3b3;
	box-shadow: none !important;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}
.section-page-cart .form-check-input:checked, .section-page-footer .form-check-input:checked{
    background-color: #ee4d2d;
    border-color: #ee4d2d;
}
.cart-page .form-check-input:hover {
    box-shadow: inset 0 2px 1px 0 rgba(0, 0, 0, .09);
}

.cart-page .btn-pro-detail {
    background: #fb6e2e;
    color: #fff;
    background: linear-gradient(180deg, #f79429, #f7712e);
    border-radius: 5px;
	min-width: 200px;
    max-width: 100%;
    padding: 5px 10px;
    position: relative;
    height: 100%;
    min-height: 50px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: bold;
}
.section-page-cart {
    padding: 10px;
    background: #fff;
}
.cart-page .form-check-pay .form-check-input {
    margin-top: 0;
}
@supports ((position:-webkit-sticky) or (position:sticky)) {
   .cart-page  .section-page-footer {
        bottom: 0;
        position: -webkit-sticky;
        position: sticky;
        z-index: 1000;
        box-shadow: 0 0 6px 0 rgba(0, 0, 0, .09);
    }
}

.cart-page .btn-pro-detail{
    min-height: 30px;
    font-weight: normal;
	font-size: var(--font-size--body);
}

.cart-page .col-form-pay {
    background: #fff3ed;
    padding: 10px;
}

.cart-page .numberCountPay {
   font-size: var(--font-size-title-small);
    line-height: 1.5em;
    position: relative;
    padding-top: 25px;
}
.cart-page .numberCountPay .textSumPrice {
   font-size: var(--font-size-title-small);
    line-height: 1.3em;
}
@media(max-width:576px) {
	.cart-page .numberCountPay .textSumPrice {
		font-size: 14px;
	}
}
.cart-page .form-check-pay .form-check-label {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    -webkit-line-clamp: 1;
}

.cart-page .text-total {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    -webkit-line-clamp: 1;
    font-size: 14px;
    position: absolute;
    top: 5px;
    left: 0;
    line-height: 1.2em;
    font-style: italic;
    width: 100%;
}

.cart-page .priceSumary {
    font-size: 20px;
}
.cart-page .form-check.form-check-pay{
    min-height: 1.5rem;
    padding-left: 1.7em;
	margin: 0;
}
.cart-page .form-check.form-check-pay .form-check-input{
	    margin-left: -1.7em;
}
.cart-page .btnPay .btn-pro-detail>div{
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: normal;
		-webkit-line-clamp: 1;
}

@media(max-width:1200px) {
    .cart-page .form-check-pay {
        width: 300px;
        max-width: 100%;
    }
}

@media(max-width:992px) {
	.cart-page .priceSumary {
		font-size: 18px;
	}
}
@media(max-width:767px) {
	.cart-page .btnPay {
		width: 135px !important;
	}

	.cart-page .btnPay-info {
		padding-right: 5px;
	}
	.cart-page .btn-pro-detail {
		min-width: 0;
		width: 100%;
	}
}
@media(max-width:350px) {
	.cart-page .btnPay {
		width: 130px !important;
	}
   .cart-page .numberCountPay {
        width: 100%;
        justify-content: space-between;
    }

    .cart-page .priceSumary {
       font-size: var(--font-size-title-small);
        width: 100%;
        justify-content: space-between;
    }

    .cart-page .btnPay{
        width: 100%;
    }
}
/*******Start Cart Mobile**********/
/*== CART MINI MOBILE ==*/
:root {
    --shop-color-bg: #ffffff;
    --shop-color-main: #1b4ea0;
    --shop-color-text: #252a2b;
    --shop-color-title: #000;
    --shop-color-hover: #1b4ea0;
    --shop-color-button: #1b4ea0;
    --shop-color-border: #ccc;
    --home-category-bg-1: #faf1ff;
    --home-category-bg-2: #faf4eb;
    --home-category-bg-3: #f4e6e5;
    --home-category-bg-4: #e6f2f4;
    --home-category-bg-5: #fff6f6;
    --home-collection1-bg: #dd0303;
    --home-collection1-icon: #ffff00;
    --home-collection1-color-text: #ffffff;
    --home-collection2-bg: #fff6f6;
    --home-collection3-bg: #ccf0dd;
    --home-collection3-title: #dd0303;
    --footer-bg-color-1: #f5f5f5;
    --footer-bg-color-2: #ffffff;
    --footer-bg-color-copyright: #ffffff;
    --footer-color-title: #333333;
    --footer-color-text: #656565;
    --footer-color-hover: #1b4ea0
}
div#loadpro{position:relative;}
.loading-page {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.05);
    z-index: 10;
    border-radius: 6px;
    padding: 14px;
    align-items: end;
    display: flex;
    justify-content: center;
    line-height: 1.5em;
}
.loading-page.text-center>i {
    position: relative;
    top: -3px;
    left: -5px;
}
.divLoading {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.25);
    z-index: 100;
    color: #fff;
}
.sitenav-cart .product.product-cart{
	padding:15px;
}
.sitenav-cart table {
    border-spacing: 0;
    width: 100%;
    border-collapse: collapse
}

.sitenav-cart .cart-view-scroll .mini-cart__item .mini-cart__right .mini-cart__title .mnc-title {
    display: block;
    font-size: 12px;
    font-weight: 500;
    padding-right: 28px;
    color: var(--shop-color-text)
}

.sitenav-cart .cart-view-scroll .mini-cart__item .mini-cart__right .mini-cart__title .mnc-variant {
    display: block;
    font-size: 13px;
    margin: 0 0 7px
}

.sitenav-cart .cart-view-total .mnc-total {
    font-weight: 500;
    color: #252a2b;
    padding: 0
}

.sumPrice {
    letter-spacing: -1px;
    color: #F33;
    font-weight: bold;
}

.sitenav-cart .table-total .sumPrice{
    font-weight: 600;
    font-size: 18px;
    color: red
}
.infoNumberCart {
    font-size: 14px;
    color: #5c5c5c;
}
.offcanvas-body .infoNumberCart .sumPrice {
    color: #5c5c5c;
    font-weight: normal;
}
.siteCart-mobile .siteCart-mobile__header .boxinfo.sumPrice{
	color:#ffffff;
	font-size:20px;
}
.sitenav-cart .cart-view-line {
    width: 100%;
    border-top: 1px solid #f1f1f1;
    margin: 0 0 2px;
}

.sitenav-cart .cart-view-scroll .mini-cart__item td {
    padding-top: 12px;
    padding-bottom: 12px;
    position: relative
}

.sitenav-cart .cart-view-scroll .mini-cart__item .mini-cart__right {
    padding-left: 5px
}

.mini-cart__infor {
    display: flex;
    justify-content: space-between
}

.sitenav-cart .button {
    position: relative;
    display: inline-block;
    z-index: 1;
    overflow: hidden;
    padding: 12px 28px;
    line-height: normal;
    color: #fff;
    background-color: var(--shop-color-hover);
    border: 1px solid var(--shop-color-button);
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    letter-spacing: 1px;
    text-transform: uppercase;
    outline: 0 !important;
    -webkit-transition: color .45s cubic-bezier(.785, .135, .15, .86), border .45s cubic-bezier(.785, .135, .15, .86);
    transition: color .45s cubic-bezier(.785, .135, .15, .86), border .45s cubic-bezier(.785, .135, .15, .86);
}
.sitenav-cart .mini-cart__button .button span {
    display: block;
    width: 100%;
    text-align: center;
    margin: 0 auto;
}
@media(min-width:576px){
	.sitenav-cart .mini-cart__button .button span {
		width: 140px;	
	}
}

.sitenav-cart .cart-view-total .mini-cart__button a.linktocart,
.sitenav-cart .cart-view-total .mini-cart__button a.linktocheckout {
    margin: 5px 0 10px;
    font-size: 12px;
    padding: 10px;
    width: 100%;
    background-color: #000;
    border-color: #000
}
.sitenav-cart .cart-view-total .mini-cart__button a.linktocart{
    color: #000;
    min-height: 42px;
    font-size: 14px;
    padding: 4px 10px;
    margin-left: 0;
    margin-top: 10px;
    background-color: #fff !important;
    border-color: #09213e !important;
    border: 1px solid #09213e;
    line-height: 1.5em;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sitenav-cart .cart-view-total .mini-cart__button a.linktocheckout {
    background-color: var(--shop-color-hover);
    border: 1px solid var(--shop-color-button);
	background: #2f80ed;
    box-shadow: 0 0.5rem 1.125rem -0.5rem rgb(47 128 237);
    border-color: #2f80ed;
}

.sitenav-cart .cart-view-scroll .mini-cart__item .mini-cart__right .mini-cart__price {
    display: flex;
    display: -ms-flex;
    justify-content: flex-end;
    -ms-justify-content: flex-end;
    flex-direction: column;
    -ms-flex-direction: column
}

.sitenav-cart .cart-view-scroll .mini-cart__item .mini-cart__right .mini-cart__price .mnc-price {
    display: block;
    text-align: right;
    float: right;
    line-height: 26px;
    font-weight: 600;
    color: var(--shop-color-text)
}

.sitenav-cart .cart-view-scroll .mini-cart__item .mini-cart__right .mini-cart__quantity .qty-value {
    width: 28px;
    height: 28px;
    background: #f7f7f7;
    text-align: center;
    font-size: 13px;
    line-height: 1;
    margin-right: 8px;
    margin-left: 8px;
    color: #252a2b;
    border: 0
}

.siteCart-mobile {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10000000;
    background:0 0;
}

.siteCart-mobile__dialog {
    margin: 0 auto;
    max-width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: padding-box #fff;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    -webkit-transition: transform .35s, bottom .25s, visibility;
    transition: transform .35s, bottom .25s, visibility;
    border-radius: 16px 16px 0 0;
    box-shadow: rgba(0, 0, 0, .15) 0 1px 18px;
    display: flex;
    flex-direction: column;
	max-height: 80vh;
}

.siteCart-mobile__content {
    height: 100%;
    overflow: hidden;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column
}

.siteCart-mobile__header {
    padding: 0 8px;
    cursor: pointer;
    border-bottom: 1px solid #dee2e6;
    background: var(--color-primary);
    color: #fff;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: start;
    align-items: start;
    -ms-flex-pack: space-between;
    justify-content: space-between
}

.siteCart-mobile__header .boxinfo {
    padding: 12px 3px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.siteCart-mobile__header .boxinfo.p-price {
    padding: 0;
    text-align: left;
   font-size: var(--font-size-title-small);
}
.siteCart-mobile__header .boxinfo.p-count {
	font-size: var(--font-size--body);
}
.siteCart-mobile__header .boxinfo:nth-child(2) {
    font-weight: 600;
}

.siteCart-mobile__header .boxinfo:nth-child(3) {
    text-align: right
}
.siteCart-mobile__header .boxinfo.close {
    font-size: 14px;
    font-weight: normal;
}
.siteCart-mobile__body {
    position: relative;
    overflow: hidden;
    visibility: hidden;
    background: #fff;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column
}

.siteCart-mobile__body .sitenav-content {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    overflow: hidden
}

.siteCart-mobile.show-cart .boxtitle,
.siteCart-mobile.show-cart>.siteCart-mobile__header,
.siteCart-mobile__body .cart-view-total .mini-cart__button .mnc-cta:last-child,
.siteCart-mobile__body .sitenav-content__title {
    display: none
}

.siteCart-mobile__body .cart-view {
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    -ms-flex-direction: column;
    flex-direction: column
}

.siteCart-mobile__body .cart-view-scroll {
	padding: 0 15px;
    overflow-y: scroll;
	position:relative;
    max-height: calc(100vh - 335px);
}

.siteCart-mobile__body .cart-view-scroll .mini-cart__empty td {
    padding-top: 20px;
    padding-bottom: 20px
}

.siteCart-mobile__body .cart-view-scroll .mini-cart__item {
    background: #fff
}

.siteCart-mobile__body .cart-view-line {
    margin-top: auto;
    position: relative;
    z-index: 1
}

.siteCart-mobile__body .cart-view-total {
    padding: 0 12px 5px
}

.siteCart-mobile__body .cart-view-total .mini-cart__button .mnc-cta {
    flex: 0 0 100%;
    -ms-flex: 0 0 100%;
    max-width: 100%
}

.siteCart-mobile__overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    z-index: -1;
    background-color: rgba(0, 0, 0, .5);
    opacity: 0;
    visibility: hidden;
    transition: .4s cubic-bezier(.645, .045, .355, 1)
}

.siteCart-mobile>.siteCart-mobile__header {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    transform: translateY(0)
}

.siteCart-mobile.show-cart {
    top: 0 !important;
    -webkit-transition-delay: 0s;
    transition-delay: 0s
}

.siteCart-mobile.show-cart .siteCart-mobile__dialog {
    bottom: 0;
    
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
    -webkit-transition-duration: .3s;
    transition-duration: .3s
}

.siteCart-mobile.show-cart .siteCart-mobile__dialog .siteCart-mobile__body {
    visibility: visible
}

.siteCart-mobile.show-cart .siteCart-mobile__header {
    border-radius: 16px 16px 0 0;
    -webkit-transition: visibility;
    transition: visibility
}

.siteCart-mobile.show-cart .siteCart-mobile__header:before {
    content: "";
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    top: -14px;
    width: 48px;
    height: 6px;
    border-radius: 3px;
    background: #fff
}

.siteCart-mobile.show-cart .siteCart-mobile__overlay {
    display: block;
    opacity: 1;
    visibility: visible;
    pointer-events: auto
}

@media (max-width:991px) {

    .siteCart-mobile,
    body:not(.mainBody-mbcart) .siteCart-mobile {
        display: block
    }

    body.body-showcart {
        overflow: hidden
    }

    .mainHeader .header-wrap-action .header-action .header-action-item.header-action_cart .box-triangle,
    .mainHeader .header-wrap-action .header-action .header-action-item.header-action_cart .header-action_dropdown {
        display: none !important
    }

    body:not(.mainBody-mbcart) .siteCart-mobile>.siteCart-mobile__header {
        display: none
    }

    body.mainBody-mbcart .mainBody-product+.siteCart-mobile:not(.show-cart) {
        opacity: 0;
        visibility: hidden
    }

    body.mainBody-mbcart .mainBody-product.scroll-down+.siteCart-mobile {
        opacity: 1;
        visibility: visible
    }
}
/*******End Cart Mobile**********/
/*******END Cart Form**********/

/*******Phone Ring**********/
.btn-fixed-left {
    position: fixed;
    left: 3px;
    bottom: 3px;
    z-index: 100;
    display: flex;
}
.btn-click-social{
    text-decoration: none;
    font-weight: 500;
    border-radius: 30px;
    transition: .25s;
    height: 46px
}
.phone-ring {
	display: flex;
    width: auto;
    line-height: 40px;
    background-color: #9d0202;
    box-shadow: 0 0 3px rgba(0, 0, 0, .5);
    color: #fff !important;
    font-size: 18px;
    padding: 3px;
    padding-right: 20px;
    align-items: center;
	border-radius: 9999px;
	text-decoration:none;
}

.phone-ring .phone-circle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: #fff;
    border-radius: 100%;
    margin-right: 5px
}

.phone-ring .phone-circle i {
    font-size: 25px;
    color: #c00
}

.phone-ring .phone-circle .animation {
    -webkit-animation: 1s ease-in-out infinite ring-anim;
    animation: 1s ease-in-out infinite ring-anim
}

.phone-ring .phone-text {
	font-weight:bold;
	display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    -webkit-line-clamp: 1;
}

.phone-ring.pricequote {
    width: unset;
    left: 243px;
    padding: 3px 10px 3px 7px
}

.btn-fixed-right {
    position: fixed;
        right: 25px;
        bottom: 95px;
    z-index: 100000;
}
.btn-click-social{margin-bottom:15px; position:relative;}
.btn-click-social:last-child{margin-bottom:0;}
.btn-click-social {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    line-height: 36px;
    background: #0068ff;
    color: #fff
}
.phone-number-default {
    background: red;
    animation: inherit !important;
    position: relative;
}
.phone-number-default>strong {
    position: absolute;
    color: #fff;
    background: rgba(237, 29, 36, 0.8);
    display: inline-block;
    vertical-align: middle;
    padding: 0 20px;
    border-radius: 5px;
    position: absolute;
    right: 100%;
    margin-right: 5px;
    white-space: nowrap;
    font-weight: 500;
    font-size: 18px;
    line-height: 37px;
    top: 50%;
    margin-top: -18px;
}
.phone-number-default>strong:before {
  content: '';
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-left: 8px solid rgba(237, 29, 36, 0.8);
  border-bottom: 6px solid transparent;
  position: absolute;
  right: -8px;
  top: 50%;
  margin-top: -6px; }
@media(max-width:992px){
	.phone-number-default>strong{display:none;}
}  
.btn-click-social.animation {
    animation: 1s ease-in-out infinite
}

.btn-click-social i.animation {
    animation: 1s ease-in-out infinite ring-anim;
}

.btn-click-social.animation::after {
    animation: 1s ease-in-out infinite sonar-anim;
}
.chat-messenger.animation, .phone-zalo.animation{
	    animation: 1s ease-in-out infinite ring-anim;
}
.btn-click-social::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #0068ff;
    z-index: -1
}
.phone-number-default:after{
	  background: rgba(237, 29, 36, 0.8);
}
.btn-click-social:hover {
    color: #fff
}

.chat-messenger {
	background-color: transparent;
    font-size: 38px;
}


@keyframes sonar-anim {
    0% {
        opacity: 1;
        transform: scale(1)
    }

    100% {
        transform: scale(1.8);
        opacity: 0
    }
}

@keyframes ring-anim {

    0%,
    100%,
    50% {
        transform: rotate(0) scale(1) skew(1deg)
    }

    10%,
    30% {
        transform: rotate(-25deg) scale(1) skew(1deg)
    }

    20%,
    40% {
        transform: rotate(25deg) scale(1) skew(1deg)
    }
}

@media (min-width:992px) {
	.btn-fixed-left-item{margin-left:10px;}
	.btn-fixed-left-item:first-child{margin-left:0;}
}
@media (max-width:992px) {
	
	.btn-fixed-left {
		left: 0;
		bottom: 0;
		width: 100%;
	}
	.btn-fixed-left-item{
		position: relative !important;
		flex-grow: 1;
		flex-shrink: 1;
		flex-basis: 0;
		text-align: center;
		width: auto !important;
		left: initial !important;
		border-radius: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        /* flex-direction: column; */
        box-shadow: none
	}
    .phone-ring::after {
        position: absolute;
        width: 1px;
        height: 30px;
        top: 50%;
        right: 0;
        content: "";
        display: block;
        background-color: rgba(255, 255, 255, .5);
        transform: translateY(-50%)
    }

    .phone-ring .phone-text {
        line-height: 1;
        font-size: 80%
    }

    .phone-ring .phone-circle {
        width: 30px;
		height: 30px;
    }

    .phone-ring .phone-circle i {
        font-size: 18px;
        animation: none !important
    }
	
	.btn-fixed-right{
		right: 15px;
        bottom: 130px;
	}
	.btn-click-social{
		width:43px;
		height:43px;
	}
}
@media (max-width:576px) {
	.btn-fixed-right {
		right: 10px;
		width: auto;
		display: flex;
		justify-content: center;
		padding: 0;
	}
	.btn-click-social {

		margin: 0 7px;
	}
}
/*******END Phone Ring**********/
/*******Start Data Chat**********/
[data-chat] {
  width: 200px;
  z-index: 1000;
  background-color: #fff;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  transition: right .35s;
  position: fixed;
  top: 50%;
  right: -144px;
  transform: translateY(-50%);
  box-shadow: 0 2px 4px #0000001a
}

[data-chat]:hover {
  right: 0
}

[data-chat] .item {
  justify-content: space-between;
  padding: 10px;
  display: flex;
  position: relative;
      align-items: center;
}

[data-chat] .item+.item {
  border-top: 1px solid #e5e5e5
}

[data-chat] .item__icon {
	width: 36px;
    height: 36px;
    transform: perspective(1px)translateZ(0);
    font-size: 24px;
}
[data-chat] .item__icon i {
	width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid;
    border-radius: 50%;
    font-size: 20px;
    background: #0D6EFD;
    color: #fff;
}
[data-chat] .item__icon img {
  width: 100%;
  height: auto
}

[data-chat] .item__desc {
  width: calc(100% - 46px)
}

[data-chat] .item__desc p { 
font-weight: 700;
    margin: 0;
    font-size: 18px;
	line-height:1.3em;
}

[data-chat] .item__desc p+p {
  color: #6e6e73;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px
}

[data-chat] .item__link {
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0
}

[data-chat] .item:hover .item__icon {
  animation-name: hvr-bob-float, hvr-bob;
  animation-duration: .3s, 1.5s;
  animation-timing-function: ease-out, ease-in-out;
  animation-iteration-count: 1, infinite;
  animation-direction: normal, alternate;
  animation-delay: 0s, .3s;
  animation-fill-mode: forwards
}

@media (max-width:992px) {
  [data-chat] {
    visibility: hidden;
    opacity: 0;
    border-radius: 10px;
    transition: all .35s;
    top: auto;
    bottom: 66px;
    right: 16px;
    transform: translateY(0)
  }

  [data-chat].opened {
    opacity: 1;
    visibility: visible
  }

  [data-chat]:hover {
    right: 16px
  }

  [data-chat] .item {
    padding: 8px
  }

  [data-chat] .item__icon {
    width: 35px;
    height: 35px
  }
	
  [data-chat] .item__desc {
    width: calc(100% - 43px)
  }

  [data-chat] .item__desc p+p {
      font-size: 14px;
    line-height: 14px;
  }
}

[data-toggle-chat] {
  width: 36px;
  height: 36px;
  z-index: 1000;
  background: #084ea3;
  border: none;
  border-radius: 50%;
  transition: background-color .35s;
  display: none;
  position: fixed;
  bottom: 24px;
  right: 16px;
box-shadow: 0px 2px 4px 5px #0000001a;
    transition: all 0.2s;
}

[data-toggle-chat] .icon {
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  transition: opacity .35s;
  display: flex;
  position: absolute;
  top: 0;
  left: 0
}
[data-toggle-chat] .icon svg {
    width: 30px;
    height: 30px;
}
[data-toggle-chat] .icon--chat .dot {
  animation: wave 1.3s linear infinite
}

[data-toggle-chat] .icon--chat .dot:nth-child(2) {
  animation-delay: -1.1s
}

[data-toggle-chat] .icon--chat .dot:nth-child(1) {
  animation-delay: -.9s
}

[data-toggle-chat] .icon--x {
  opacity: 0
}

[data-toggle-chat].opened {
background-color: #1d1d1f;
    width: 35px;
    height: 35px;
    bottom: 140px;
    right: 10px;
}

[data-toggle-chat].opened .icon--chat {
  opacity: 0
}

[data-toggle-chat].opened .icon--x {
  opacity: 1
}

@media (max-width:992px) {
  [data-toggle-chat] {
    display: block;
    width: 45px;
    height: 45px;
    bottom: 105px;
    right: 20px;
}
}

.overlay {
  width: 100%;
  height: 100%;
  z-index: 1010;
  background-color: #1d1d1f80;
  display: none;
  position: fixed;
  top: 0;
  left: 0
}

.overlay--cart-drawer {
  z-index: 1030
}

[data-aos=fade-up] {
  transform: translateY(20px)
}

@keyframes hvr-bob {
  0% {
    transform: translateY(-8px)
  }

  50% {
    transform: translateY(-4px)
  }

  to {
    transform: translateY(-8px)
  }
}

@keyframes hvr-bob-float {
  to {
    transform: translateY(-8px)
  }
}

@media (min-width:992px) {
  [data-group-hover] [data-item-hover] {
    transition: opacity .35s
  }

  [data-group-hover] [data-item-hover].mouse-over {
    opacity: 1
  }

  [data-group-hover] [data-item-hover].mouse-out {
    opacity: .5
  }
}

@keyframes wave {

  0%,
  60%,
  to {
    -webkit-transform: initial;
    transform: none
  }

  30% {
    transform: translateY(-5px)
  }
}
/*****HTML
<div data-chat="" id="chat">
		<div class="item">
		<div class="item__icon"> <img src="images/phone.png" alt="Phone"> </div>
		<div class="item__desc">
			<p>0966657161</p>
			<p>9h - 21h</p>
		</div>
		<a class="item__link" href="tel:0966657161" title="0966657161">
		0866.105.107			</a>
	</div>

	<div class="item">
		<div class="item__icon"> <img src="images/messenger.png" alt="Messenger"> </div>
		<div class="item__desc">
			<p>Messenger</p>
			<p>9h - 21h</p>
		</div>
		<a class="item__link" href="https://m.me/hangnauychamcom" title="Messenger">
		Messenger			</a>
	</div>
</div>

<button type="button" data-toggle-chat="" data-id="chat">
	<span class="icon icon--chat">
		<svg xmlns="http://www.w3.org/2000/svg"
			width="20"
			height="20"
			viewbox="0 0 20 20"
			fill="none">
			<path d="M18.25 6.61C17.81 5.56 17.18 4.62 16.37 3.81C15.56 3 14.62 2.37 13.57 1.93C12.5 1.48 11.36 1.25 10.18 1.25H10.14C8.96 1.26 7.81 1.49 6.73 1.95C5.69 2.4 4.76 3.03 3.96 3.84C3.16 4.65 2.53 5.58 2.1 6.63C1.65 7.71 1.42 8.86 1.43 10.05C1.44 11.41 1.76 12.75 2.37 13.95V16.92C2.37 17.42 2.77 17.82 3.27 17.82H6.24C7.44 18.43 8.79 18.75 10.14 18.76H10.18C11.35 18.76 12.48 18.53 13.55 18.09C14.59 17.65 15.53 17.03 16.34 16.23C17.15 15.43 17.78 14.5 18.22 13.46C18.68 12.38 18.92 11.24 18.92 10.05C18.94 8.85 18.71 7.7 18.25 6.61Z"
				fill="white"></path>
			<g>
				<path d="M13.4 10.09C13.4 10.75 13.94 11.29 14.6 11.29C15.27 11.29 15.8 10.75 15.8 10.09C15.8 9.43001 15.26 8.89001 14.6 8.89001C13.94 8.89001 13.4 9.43001 13.4 10.09Z"
					fill="#084EA3"
					class="dot"></path>
				<path d="M9.17999 10.09C9.17999 10.75 9.71999 11.29 10.38 11.29C11.04 11.29 11.58 10.75 11.58 10.09C11.58 9.43001 11.04 8.89001 10.38 8.89001C9.71999 8.89001 9.17999 9.43001 9.17999 10.09Z"
					fill="#084EA3"
					class="dot"></path>
				<path d="M4.96002 10.09C4.96002 10.75 5.50002 11.29 6.16002 11.29C6.82002 11.29 7.36002 10.75 7.36002 10.09C7.36002 9.43001 6.82002 8.89001 6.16002 8.89001C5.50002 8.89001 4.96002 9.43001 4.96002 10.09Z"
					fill="#084EA3"
					class="dot"></path>
			</g>
		</svg>
	</span>
	<span class="icon icon--x">
		<svg xmlns="http://www.w3.org/2000/svg"
			width="18"
			height="18"
			viewbox="0 0 18 18"
			fill="none">
			<path d="M3.8293 4.18738C3.72472 4.08141 3.66609 3.93852 3.66609 3.78964C3.66609 3.64075 3.72472 3.49786 3.8293 3.39189C3.93527 3.28731 4.07817 3.22867 4.22705 3.22867C4.37593 3.22867 4.51883 3.28731 4.6248 3.39189L14.1707 12.9378C14.2753 13.0438 14.334 13.1867 14.334 13.3356C14.334 13.4845 14.2753 13.6274 14.1707 13.7333C14.0648 13.8379 13.9219 13.8965 13.773 13.8965C13.6241 13.8965 13.4812 13.8379 13.3752 13.7333L3.8293 4.18738Z"
				fill="white"></path>
			<path d="M4.22714 13.8964C4.37602 13.8964 4.51891 13.8378 4.62488 13.7332L14.1708 4.18726C14.2754 4.08129 14.334 3.93839 14.334 3.78951C14.334 3.64062 14.2754 3.49773 14.1708 3.39176C14.0649 3.28718 13.922 3.22854 13.7731 3.22854C13.6242 3.22854 13.4813 3.28718 13.3753 3.39176L3.82939 12.9377C3.72481 13.0437 3.66617 13.1866 3.66617 13.3354C3.66617 13.4843 3.72481 13.6272 3.82939 13.7332C3.93536 13.8378 4.07825 13.8964 4.22714 13.8964Z"
				fill="white"></path>
		</svg>
	</span>
</button>
***********/
/*******END Data Chat**********/
/*******Start addThis_listSharing button click show contact all fixed**********/
/* ════════════════ addThis LIST SHARING — giữ nguyên HTML gốc ════════════════ */
:root {
    --brand-red: #012770;
    --brand-red-dark: #011a4d;
    --brand-yellow: #ffc200;
    --brand-blue: #229CD1;
    --ink: #071433;
    --text: #333333;
    --muted: #777777;
    --line: #ececec;
    --bg: #ffffff;
    --bg-alt: #f1f5fc;
    --radius: 20px;
}
.addThis_iconContact { position: fixed; right: 22px; bottom: 22px; z-index: 1041; }

.addThis_iconContact {
	animation: iconContactPulse 2s ease-in-out infinite;
	transform-origin: center;
}

@keyframes iconContactPulse {
	0%,
	70%,
	100% {
		transform: translateY(0) scale(1);
	}

	78% {
		transform: translateY(-3px) scale(1.06);
	}

	86% {
		transform: translateY(1px) scale(0.98);
	}

	93% {
		transform: translateY(-1px) scale(1.02);
	}
}

@media (prefers-reduced-motion: reduce) {
	.addThis_iconContact {
		animation: none;
	}
}
.addThis_iconContact .box-contact {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 58px;
  padding: 7px 17px 7px 8px;
  color: #fff;
  background: var(--brand-red);
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--brand-yellow);
  cursor: pointer;
  transition: transform .18s, box-shadow .18s, background .18s;
}
@media(max-width:767px){
	.addThis_iconContact .box-contact{
		padding: 7px 8px 7px 8px;
	}
}
.addThis_iconContact:hover .box-contact { background: var(--brand-red-dark); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--brand-yellow); }
.addThis_iconContact:focus-visible { outline: 3px solid var(--brand-yellow); outline-offset: 4px; border-radius: 999px; }
.addThis_iconContact .svgico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--ink);
  background: var(--brand-yellow);
  border-radius: 50%;
}
.addThis_iconContact .svgico > i:first-child::before {
  content: '';
  display: block;
  width: 17px;
  height: 14px;
  border: 2px solid currentColor;
  border-radius: 50%;
  box-shadow: -5px 5px 0 -3px var(--brand-yellow), -5px 5px 0 -1px currentColor;
}
.addThis_iconContact .svgico--close { display: none; }
.addThis_iconContact .text small { display: block; font-size: 14px; font-weight: 800; line-height: 1; }
@media(max-width:767px){
	.addThis_iconContact .text{
		display:none;
	}
}
.addThis_listSharing { position: fixed; inset: 0; z-index: 1040; display: none; }
.addThis_listSharing.active { display: block; }
.listSharing_overlay { position: absolute; inset: 0; background: rgba(7, 20, 51, .2); }
.listSharing_action {
  position: absolute;
  right: 22px;
  bottom: 96px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 11px;
}
.addThis_listing { display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; list-style: none; }
.addThis_item--icon { position: relative; display: flex; align-items: center; justify-content: flex-end; color: var(--ink); }
.addThis_item--icon .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  overflow: hidden;
  color: var(--ink);
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 14px;
  box-shadow: 3px 3px 0 var(--brand-yellow);
  transition: transform .18s, box-shadow .18s;
}
.addThis_item--icon .icon img { width: 100%; height: 100%; padding: 7px; object-fit: contain; }
.addThis_item--icon .icon svg { width: 22px; height: 22px; }
.addThis_item--icon:hover .icon, .addThis_item--icon:focus .icon { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--brand-yellow); }
.addThis_item--icon .tooltip-text {
  position: absolute;
  right: 62px;
  display: grid;
  gap: 1px;
  min-width: max-content;
  max-width: min(270px, calc(100vw - 110px));
  padding: 8px 11px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 2px 2px 0 rgba(7, 20, 51, .12);
  font-size: 11px;
  line-height: 1.2;
  opacity: 0;
  pointer-events: none;
  transform: translateX(5px);
  transition: opacity .18s, transform .18s;
}
.addThis_item--icon .tooltip-text span:first-child { color: var(--brand-red); font-size: 12px; font-weight: 800; }
.addThis_item--icon .tooltip-text span:last-child { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.addThis_item--icon:hover .tooltip-text, .addThis_item--icon:focus .tooltip-text { opacity: 1; transform: translateX(0); }
.addThis_close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 2px;
  color: var(--ink);
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 50%;
  box-shadow: 2px 2px 0 var(--brand-yellow);
}
.addThis_close:hover { color: #fff; background: var(--brand-red); }
.addThis_close svg { width: 25px; height: 25px; fill: currentColor; }
@media (max-width: 575.98px) {
  .addThis_iconContact { right: 14px; bottom: 40px; }
  .addThis_iconContact .box-contact { min-height: 54px; padding-right: 7px; }
  .addThis_iconContact .svgico { width: 36px; height: 36px; }
  .listSharing_action { right: 14px; bottom: 82px; }
  .addThis_listing { gap: 8px; }
  .addThis_item--icon .icon { width: 44px; height: 44px; border-radius: 13px; }
  .addThis_item--icon .tooltip-text { right: 56px; }
}

/* Hiển thị danh sách addThis dạng thẻ liên hệ, giữ nguyên cấu trúc HTML gốc */
.listSharing_action {
  display: block;
  width: min(360px, calc(100vw - 32px));
  max-height: none;
  padding: 20px;
  overflow: visible;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 20px;
  box-shadow: 7px 7px 0 var(--brand-yellow);
}
.listSharing_action::before, .listSharing_action::after { display: none; }
.header_addThis { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.header_addThis > div { padding-right: 4px; }
.header_addThis span, .header_addThis strong { display: block; }
.header_addThis span { color: var(--brand-red); font-size: 10px; font-weight: 800; line-height: 1.3; letter-spacing: .14em; }
.header_addThis strong {
    margin-top: 2px;
    color: var(--ink);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.25;
    white-space: normal;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-decoration: none;
    height: auto;
}
.addThis_close {
    position: absolute;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    margin: 0;
    border: 1px solid var(--line);
    box-shadow: none;
    top: 5px;
    right: 5px;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.addThis_listing_wp {
  max-height: calc(100vh - 225px);
  margin-top: 14px;
  padding-right: 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--brand-red) transparent;
}
.addThis_listing_wp::-webkit-scrollbar { width: 5px; }
.addThis_listing_wp::-webkit-scrollbar-thumb { background: var(--brand-red); border-radius: 999px; }
.addThis_listing { gap: 7px; margin: 0; }
.addThis_item--icon {
  justify-content: flex-start;
  gap: 11px;
  padding: 8px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: transform .18s, border-color .18s, background .18s;
}
.addThis_item--icon:hover, .addThis_item--icon:focus {
  color: var(--ink);
  background: var(--bg-alt);
  border-color: var(--brand-red);
  transform: translateX(3px);
}
.addThis_item--icon .icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  box-shadow: none;
}
.addThis_item--icon .icon img { padding: 5px; }
.addThis_item--icon .icon svg { width: 19px; height: 19px; }
.addThis_item--icon:hover .icon, .addThis_item--icon:focus .icon { transform: none; box-shadow: none; }
.addThis_item:nth-child(1) .icon { color: #fff; background: #536276; }
.addThis_item:nth-child(2) .icon { background: #1877f2; }
.addThis_item:nth-child(3) .icon { background: #101010; }
.addThis_item:nth-child(4) .icon { background: #ff0000; }
.addThis_item:nth-child(5) .icon { background: #0068ff; }
.addThis_item:nth-child(6) .icon { background: var(--brand-red); }
.addThis_item:nth-child(7) .icon { background: #299b57; }
.addThis_item--icon .tooltip-text {
  position: static;
  display: grid;
  gap: 1px;
  min-width: 0;
  max-width: calc(100% - 45px);
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: 11px;
  line-height: 1.25;
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.addThis_item--icon .tooltip-text span:first-child { color: var(--ink); font-size: 13px; font-weight: 800; }
.addThis_item--icon .tooltip-text span:last-child { max-width: 100%; color: var(--muted); }
@media (max-width: 575.98px) {
  .listSharing_action { right: 14px; bottom: 82px; padding: 17px; }
  .addThis_item--icon .icon { width: 34px; height: 34px; }
}

/*******END addThis_listSharing button click show contact all fixed**********/
/******List readmore********/
.list_items_more .list_items {
	  display: none;
	}

	.list_items_more .list_items.visible {
	  display: block;
	}
	
	.list_items_more .buttons {
		text-align: center;
		margin-top: 20px;
		font-size: var(--font-size--body);
	}
	.list_items_more .buttons button {
		border: 0;
		background: transparent;
		margin: 0 auto;
		padding: 10px;
		background: rgba(0, 0, 0, 0.05);
		border-radius: 6px;
		position: relative;
		width: 100%;
	}
	.list_items_more .buttons .show-less {
	  display: none;
	}
	.list_items_more .buttons button:after{
		 content: "\f107";
		font-weight: 300;
		padding-left: 5px;
		font-family: "Font Awesome Pro";
		/* position: absolute; */
		/* top: 50%; */
		/* right: 5px; */
		/* transform: translateY(-50%);*/
	}
	.list_items_more .buttons button.show-less:after{
		content: "\f106";
	}
/******End List readmore********/
span.badge-status-order {
	font-weight: normal;
    font-size: 12px;
    box-shadow: none;
    padding: 3px 10px;
}
.modal-title span.badge-status {
    font-size: 14px;
    font-weight: normal;
    padding: 5px 10px 5px;
}
span.badge-status-order.bg-warning {
    color: #000;
}
/*********List Address Admin**********/
.list-address-item .badge {
    font-size: 12px;
    font-weight: normal;
}
.list-address-title {
   font-size: var(--font-size-title-small);
    font-weight: 500;
    margin-bottom: 11px;
}
.list-address .list-address-item {
    border: 1px solid #ccc;
    padding: 10px;
    height: 100%;
    border-radius: 5px;
    background: #fff;
}
.list-address .list-address-item .infor-address li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 5px;
    font-size: 14px;
    color: #727272;
	line-height:1.5em;
}
.infor-address li span {
    display: block;
}
.list-address-item .badge {
    box-shadow: none;
}
.list-address-item .status-address .badge {
    box-shadow: none;
    border: 1px solid #ee4d2d;
    color: #ee4d2d;
    background: transparent !important;
    border-radius: 2px;
}
.list-address .list-address-item .infor-address li span.fullname{
	color:#000000;
	font-size:16px;
}
.list-address .list-address-item  .infor-address li span~span{padding-left:3px;}
/********END List Address Admin******/
/********Table Order Admin******/
span.pro-attribute {
    font-size: 13px;
    text-decoration: underline;
	color: #000;
    font-style: italic;
}

.text-price{
    color: #d9242f;
   font-size: var(--font-size-title-small);
    font-weight: bold;
    letter-spacing: -1px;
} 
.total-bill-sumary .text-price{font-size: var(--font-size--body);color: inherit; font-weight:normal;}
.total-bill-sumary .text-price-bill{ color: #d9242f; font-size:18px; font-weight:bold;}
.text-price-info{font-size: var(--font-size--body);}
table tr td .text-price {
    font-size: 14px;
    color: inherit;
    font-weight: normal;
}
table tr td .text-total-price{
	  color: #d9242f;
}
.icon-name{
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1* var(--bs-gutter-y));
    margin-right: calc(-.5* var(--bs-gutter-x));
    margin-left: calc(-.5* var(--bs-gutter-x));
	 --bs-gutter-y: 0.25rem;
	-bs-gutter-x: 0.25rem;
	align-items: center;
}
.icon-name>*{
	flex: 0 0 auto;
    width: auto;
	flex-shrink: 0;
    padding-right: calc(var(--bs-gutter-x)* .5);
    padding-left: calc(var(--bs-gutter-x)* .5);
    margin-top: var(--bs-gutter-y);
}
.image-full.contain img {
    height: 90%;
    width: 90%;
    margin: 0 auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 0;
	-o-object-fit: contain;
    object-fit: contain;
}
.image-full.cover img{
	-o-object-fit: cover;
    object-fit: cover;
}
.btn-member-dropdown {
    width: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 0;
    justify-content: end;
    background: none !important;
    border: none !important;
}
.btn-member-dropdown .img-thumbnail.img-thumbnail-account {
    width: 40px;
    height: 40px;
}
.btn-member-dropdown .member_info{width:auto;}
.btn-member-dropdown .title-member{font-size: var(--font-size--body); height:auto;}
.btn-member-dropdown::after{
	display:none;
}
.btn-member-dropdown .dropdown-item.active,.btn-member-dropdown .dropdown-item:active{
	background:transparent !important;
}
.link-login {
    color: #333;
    text-transform: capitalize;
    font-size: 26px;
    padding: 2px 8px;
}
/********END Table Order Admin******/
button.btn-cookie-setting {
    background: transparent;
    color: #fff;
    font-size: 13px;
    border: 0;
    padding: 0;
}
/* ====================== [ End Helper Classes  ] ====================== */
/*=============================
    Preloader
===============================*/
:root {
  --bg-color-load: #ffffff;
  --line-color-load: #68bd4c;
}
.preloader {
  height: 100%;
  width: 100%;
  position: fixed;
  margin-top: 0px;
  top: 0px;
  background: var(--bg-color-load);
  z-index: 9999;
}
.preloader .loader .loader-container {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 150px;
  height: 150px;
  border: 3px solid var(--bg-color-load);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}
.preloader.bg-white-load .loader .loader-container {
    border-color: var(--bg-color-white-load);
}
.preloader .loader .loader-container::before {
  position: absolute;
  content: "";
  display: block;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-top: 3px solid var(--line-color-load);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  animation: loaderspin 1.8s infinite ease-in-out;
  -webkit-animation: loaderspin 1.8s infinite ease-in-out;
}
.preloader .loader .loader-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
}
.preloader .loader .loader-icon img {
  animation: loaderpulse alternate 900ms infinite;
  width: 70%;
}
.preloader.black-bg .loader-container, .preloader.black2-bg .loader-container {
  border: 3px solid #1a1a1a;
}

@keyframes loaderspin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@-webkit-keyframes loaderspin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes loaderpulse {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}
   /*=============================
    END Preloader
===============================*/
   /* ==============================
  START copyright
   ============================== */
.copyright-text, .copyright-text a,footer .copyright-text a,.footer .copyright-text a {
    font-size: 13px;
    color: #a5a5a5;
}
.designby, .designby * {
    font-size: 12px;
    opacity: 0.5;
    filter: blur(5px);
}
/* ==============================
  END copyright
   ============================== */
 /* ==============================
MEMBER
============================== */ 
.btn-login{
	height:100%;
	width:100%;
	font-size: var(--font-size-content-large);
    display: flex;
    align-items: center;
    justify-content: center;
}
.btnLoginGoogle{
	position:relative;
}
.btnLoginGooglein {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.0000001;
	z-index:1000;
}
.btn-login-google{
	background:#EA4335;
	color:#ffffff;
	border:1px solid;
}
.btn-login-google:hover{
	background:#ffffff;
	color:#EA4335;
	outline: 2px solid;
}
.btn-login-facebook{
	background:#1977F3;
	color:#ffffff;
	border:1px solid;
}
.btn-login-facebook:hover{
	background:#ffffff;
	color:#1977F3;
}
.btn-login-zalo{background:#0068FF;color:#ffffff;}
.btn-login-zalo img {
    height: 25px;
    margin-right: 5px;
}
.btn-login-zalo:hover{
	background:#ffffff;
	color:#1773EA;
}
@media(max-width:576px){
	.btn-login-zalo img {
		height: 20px;
	}
}
/* ==============================
END MEMBER
 ============================== */
 /* ==============================
START MEPTAP
 ============================== */
 div#titleprofile {
    text-transform: uppercase;
}
.link_view_wp{
	 font-size: 12px; color:#fff;
	border-top: 3px solid #000000;
	text-align:center;
}
a.link_view {
    color: #32be8f;
    transition: color .25s ease-in-out;
    text-decoration: none;
    display: -webkit-box;
    height: auto;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    -webkit-line-clamp: 1;
    font-weight: 400;
    line-height: 1.3em;
    font-size: 12px;

}
a.link_view:hover{
	color:#38d39f;
}
.image-profile{
    width: 38px;
}
.metap-icon{overflow:hidden;}
.metap-icon img{width:26px;}
.ps-3.info-profile {
    width: calc(100% - 38px);
    word-break: break-all;
}

.metap-item {
    padding: 10px 10px;
    border: 1px dashed;
    background: #fff;
}
.metap-item:hover{
	background:#fffcf0;
}
.ui-sortable-helper{
	background:#f5ebc5;
}
.metap-item{position:relative;}
.metap-input {
	width: calc(100% - 46px);
}
.info-item-icon{
	width:38px;
	height:38px;
	color: rgb(255, 255, 255);
	background-color: rgb(0, 0, 0);
}
.info-item-icon svg,.info-item-icon img {
	width:26px;
	height:26px;
}
.info-item-name{
	font-size: 1rem;
}
.info-item-des{
    font-size: 0.9rem;
    line-height: 1.3em;
}
.infor-people-wp {
    border: 5px solid #000000;
    background: #1a1a1a;
	color:#fff;
}
.info-item-list {
    border-top: 3px solid #000000;
	color:#ffffff;
	line-height: 1.5em;
}
.info-item-list:hover{color:#ffffff;}
.text-lg {
    font-size: 1.125rem;
}
.text-sm {
    font-size: .875rem;
}
.image-cover {
    height: 5rem;
    width: 5rem;
	background:#ffffff;
}
.object-cover {
    object-fit: cover;
}
.drag-handle {
    position: absolute;
    right: 35px;
    top: 0;
    width: 30px;
    height: 30px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    touch-action: none;
    cursor: grab;
}
#sortable {
    overflow: hidden;
}
button.btn-removetab {
    color: red;
    opacity: 1;
    font-size: 26px;
    border-radius: 0;
    width: 50px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    background: transparent;
}
span.drag-handle, button.btn-removetab {
    background: #f1f1f1;
}
.cursor-move .drag-handle{
    cursor: move;
}
.label-div{
	pointer-events:none;
	-webkit-user-select: none; /* iOS Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE/Edge cũ */
    user-select: none;         /* chuẩn */
    -webkit-touch-callout: none; /* iOS: tắt menu copy */
}
 /* ==============================
END MEPTAP
 ============================== */
 /* ==============================
 TABLE RESPOSIVE
 ============================== */
 @-webkit-keyframes reverseBounceAlpha {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0px) scale(0.9);
        transform: translateX(0px) scale(0.9);
    }

    25% {
        opacity: 0;
        -webkit-transform: translateX(-10px) scale(1);
        transform: translateX(-10px) scale(1);
    }

    26% {
        opacity: 0;
        -webkit-transform: translateX(10px) scale(1);
        transform: translateX(10px) scale(1);
    }

    55% {
        opacity: 1;
        -webkit-transform: translateX(0px) scale(0.9);
        transform: translateX(0px) scale(0.9);
    }
}

@keyframes reverseBounceAlpha {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0px) scale(0.9);
        transform: translateX(0px) scale(0.9);
    }

    25% {
        opacity: 0;
        -webkit-transform: translateX(-10px) scale(1);
        transform: translateX(-10px) scale(1);
    }

    26% {
        opacity: 0;
        -webkit-transform: translateX(10px) scale(1);
        transform: translateX(10px) scale(1);
    }

    55% {
        opacity: 1;
        -webkit-transform: translateX(0px) scale(0.9);
        transform: translateX(0px) scale(0.9);
    }
}

 @-webkit-keyframes bounceAlpha {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0px) scale(1);
        transform: translateX(0px) scale(1)
    }

    25% {
        opacity: 0;
        -webkit-transform: translateX(10px) scale(0.9);
        transform: translateX(10px) scale(0.9)
    }

    26% {
        opacity: 0;
        -webkit-transform: translateX(-10px) scale(0.9);
        transform: translateX(-10px) scale(0.9)
    }

    55% {
        opacity: 1;
        -webkit-transform: translateX(0px) scale(1);
        transform: translateX(0px) scale(1)
    }
}

@keyframes bounceAlpha {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0px) scale(1);
        transform: translateX(0px) scale(1)
    }

    25% {
        opacity: 0;
        -webkit-transform: translateX(10px) scale(0.9);
        transform: translateX(10px) scale(0.9)
    }

    26% {
        opacity: 0;
        -webkit-transform: translateX(-10px) scale(0.9);
        transform: translateX(-10px) scale(0.9)
    }

    55% {
        opacity: 1;
        -webkit-transform: translateX(0px) scale(1);
        transform: translateX(0px) scale(1)
    }
}
.element {
    animation: bounceAlpha 2s infinite;
}

.element-reverse {
    animation: reverseBounceAlpha 2s infinite;
}
.custom-table-wrapper {
    
    width: 100%;
    max-width: 100%;
    scroll-behavior: smooth;
    position: relative;
    display: block;
}
.custom-table-wrapper-in{
	overflow-x: auto;
    white-space: nowrap;
	scroll-behavior: smooth;
}
.custom-table-wrapper table {
    width: max-content;
    border-collapse: collapse;
    min-width: 100%;
}

.custom-table-wrapper th,.custom-table-wrapper  td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: left;
}

.custom-table-wrapper .custom-scroll-btn {
  position: absolute;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    font-size: 18px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: none;
    opacity: 0.7;
    transition: opacity 0.3s, transform 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 100%;
}
.custom-table-wrapper .custom-scroll-btn:focus, .custom-table-wrapper .custom-scroll-btn:active{
	outline:none;
	box-shadow:none;
	-webkit-box-shadow:none;
	-moz-box-shadow:none;
}
.custom-table-wrapper .custom-scroll-btn.left {
    left: 0;
     background: rgba(72, 72, 72, 0.8);
    background: -moz-linear-gradient(left, rgba(72, 72, 72, 0.8) 0%, rgba(209, 209, 209, 0.08) 90%, rgba(209, 209, 209, 0) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(72, 72, 72, 0.8)), color-stop(90%, rgba(209, 209, 209, 0.08)), color-stop(100%, rgba(209, 209, 209, 0)));
    background: -webkit-linear-gradient(left, rgba(72, 72, 72, 0.8) 0%, rgba(209, 209, 209, 0.08) 90%, rgba(209, 209, 209, 0) 100%);
    background: -o-linear-gradient(left, rgba(72, 72, 72, 0.8) 0%, rgba(209, 209, 209, 0.08) 90%, rgba(209, 209, 209, 0) 100%);
    background: -ms-linear-gradient(left, rgba(72, 72, 72, 0.8) 0%, rgba(209, 209, 209, 0.08) 90%, rgba(209, 209, 209, 0) 100%);
    background: linear-gradient(to right, rgba(72, 72, 72, 0.8) 0%, rgba(209, 209, 209, 0.08) 90%, rgba(209, 209, 209, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#030303', endColorstr='#d1d1d1', GradientType=1 );
	
}
.custom-table-wrapper .custom-scroll-btn.left>i{
	animation: reverseBounceAlpha 2s infinite;
}
.custom-table-wrapper .custom-scroll-btn.right {
    right: 0;
    background: rgba(209, 209, 209, 0);
    background: -moz-linear-gradient(left, rgba(209, 209, 209, 0) 0%, rgba(209, 209, 209, 0.08) 10%, rgba(72, 72, 72, 0.8) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(209, 209, 209, 0)), color-stop(10%, rgba(209, 209, 209, 0.08)), color-stop(100%, rgba(72, 72, 72, 0.8)));
    background: -webkit-linear-gradient(left, rgba(209, 209, 209, 0) 0%, rgba(209, 209, 209, 0.08) 10%, rgba(72, 72, 72, 0.8) 100%);
    background: -o-linear-gradient(left, rgba(209, 209, 209, 0) 0%, rgba(209, 209, 209, 0.08) 10%, rgba(72, 72, 72, 0.8) 100%);
    background: -ms-linear-gradient(left, rgba(209, 209, 209, 0) 0%, rgba(209, 209, 209, 0.08) 10%, rgba(72, 72, 72, 0.8) 100%);
    background: linear-gradient(to right, rgba(209, 209, 209, 0) 0%, rgba(209, 209, 209, 0.08) 10%, rgba(72, 72, 72, 0.8) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1d1d1', endColorstr='#030303', GradientType=1 );
    
}
.custom-table-wrapper .custom-scroll-btn.right>i{
	animation: bounceAlpha 2s infinite;
}
 /* ==============================
END  TABLE RESPOSIVE
 ============================== */
.addThis_iconContact,.addThis_listSharing,.btn-fixed-right,#back-top{
	 z-index: 1000000;
}
#back-top{
	z-index: 1000;
}
 /* ==============================
 MEMBER LOGIN REGISTER
 ============================== */
.password-toggle input {
    padding-right: 35px !important;
}
input~.toggle-password.password-toggle-btn{min-width:40px !important;}
.heading .title{
	font-size:16px;
}
 /* ==============================
END  MEMBER LOGIN REGISTER
 ============================== */
.toolbarSearch .form-control-search {
    border-radius: 30px !important;
    padding-left: 40px;
}
.toolbarSearch  .btn-search {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    border: 0;
    background: transparent;
    width: 45px;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
}
 /* ==============================
 START  Status Log Order
 ============================== */
.status_order {
    margin: 0;
    padding: 0;
	list-style: none;
}
.status_order_title{
	font-size:var(--font-size-title-large);
	font-weight:bold;
	margin-bottom:15px;
}

.status_order__step {
    margin: 1.5em 0;
    padding-left: 1.5rem;
    position: relative;
	color:#6f6f6f;
}
.status_order__step:first-child{
	margin-top:0;
}
.status_order__step::before {
    content: "";
    width: 16px;
    height: 16px;
    background: #d8d8d8;
    position: absolute;
    left: 2px;
    top: 0;
    font-weight: 500;
    line-height: 1.3em;
    border-radius: 50%;
}
.status_order__step:after{
    content: "";
    display: block;
    position: absolute;
    background: #d8d8d8;
    width: 1px;
    inset: 16px auto -25px 9px;
}
.status_order__step:last-child:after{
	display:none;
}
.status_order__step .info{
	font-size:var(--font-size--body);
	color: inherit;
}
.status_order__step .info>.date {
	color: inherit;
    font-size: var(--font-size--body-small);
    line-height: 1.2em;
}
.status_order__step .info>.info-detail{
	 line-height: 1.2em;
	 color: inherit;
}
.status_order__step.active{color:#000000;}
.status_order__step.active .info>.date{
	color:#000000cc;
}
.status_order__step.active.success{
	color:#26aa99;
}
.status_order__step.active.success::before {
    background: #26aa99;
    color: #fff;
    line-height: 1em;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
	content: "\f00c";
	font-family: "Font Awesome Pro";
}
.status_order > li:nth-last-child(1 of .visible):after{
	display:none;
}
.section-tracking-order span.read-more-btn-text {
    color: #000;
    font-size: var(--font-size--body);
}
.section-tracking-order [data-btnreadmore]>span i{
	font-size: 22px;
    top: 2px;
    left: 3px;
    line-height: 1em;
}
 /* ==============================
 END  Status Log Order
 ============================== */
 
/* ==============================
 START  Form Register
 ============================== */
.pw-rules {
    margin: 5px 0;
	margin-top:10px;
    padding: 0;
    list-style-position: inside;
    list-style: none;
    margin: 0;
    padding-left: 10px;
}
.pw-rules li {
  color: #999;
  font-size: 13px;
  transition: 0.2s;
  padding-left:12px;
  position:relative;
}
.pw-rules li:before {
    content: "\f111";
    position: absolute;
    left: 2px;
    top: 6px;
    border-radius: 5px;
    font-family: "Font Awesome Pro";
    font-weight: 900;
    font-size: 5px;
}
.pw-rules li.valid {
  color: #28a745; /* xanh */
}

.pw-rules li.invalid {
  color: #dc3545; /* đỏ (tuỳ chọn) */
}
/* ==============================
 END  Form Register
 ============================== */
 .date_flash_sale {
    font-size: 12px;
    color: #ffffff;
    background:red;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    -webkit-line-clamp: 1;
    animation: pulse 2s ease-in-out infinite;
	border-radius: 2px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
}
@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
    }
    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 6px rgba(255, 0, 0, 0);
    }
    100% {
        transform: scale(1);
    }
}
.form-control, input, textarea, select{
	font-size: var(--font-size-content);
}
@media(max-width:767px){
	.form-control, input, textarea, select{
		font-size: var(--font-size-content-xlarge);
	}
}
/******start closeNotification********/
button.close.closeNotification {
    width: 40px;
    height: 40px;
    z-index: 1000;
    color: #fff;
    background: rgb(255 0 0 / 60%);
    border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    opacity: 1;
    position: absolute;
    right: 3px;
    top: 3px;
    font-size: 27px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box
}

.closeNotification:after {
    font-family: "Font Awesome Pro";
    font-weight: 100;
    content: "\f00d"
}
/******end closeNotification********/
/******START FAQPage********/
.FAQPage .title>h2 {
    font-size: var(--font-size-title-medium);
    font-weight: 700;
    margin-bottom: 10px
}

.FAQPage .accordion {
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 15px;
    background: #f7f7f7 !important;
}

.FAQPage .accordion>.accordion-item {
	padding: 10px 0 10px 15px;
	background: transparent;
}
.FAQPage .accordion>.accordion-item:first-child {
    /* padding-top: 0; */
}
.FAQPage .accordion-header button.accordion-button {
    font-size: var(--font-size-title);
    font-weight: 700;
    background: 0 0;
	box-shadow: none;
    border: 0;
    outline: none;
	padding-right:30px !important;
}
.FAQPage .accordion-header button.accordion-button::after {
width: 2.125rem;
    height: 2.125rem;
    border-radius: 50%;
    background-position: center;
    background-color: #f3f5f9;
    background: 0 0;
    font-family: "Font Awesome Pro";
    text-align: center;
    font-weight: 700;
    content: "\-";
    font-size: 16px;
    position: absolute;
    top: -5px;
    right: 0;
    line-height: 1.5em;
    transform: translateY(0px) rotate(-180deg);
    transition: all 0.15s ease-in-out;
	display: inline-flex;
    align-items: center;
    justify-content: center;
}
.FAQPage button.accordion-button.collapsed::after {
	content: "\+";
    transform: translateY(0px) rotate(0);
}

.FAQPage .accordion-body {
    padding: 10px 0 !important
}

.FAQPage .accordion-body,
.FAQPage .accordion-body * {
    padding-top: 0;
    font-size: var(--font-size-content-large)
}
/******END FAQPage********/

/******NEW FAQPage********/
 :root{
	--schema-faq-how-ink: #173A3D;
    --schema-faq-how-ink-soft: #4D6669;
    --schema-faq-how-sea-deep: #1b78bf;
    --schema-faq-how-sea: #1C7C86;
    --schema-faq-how-sea-light: #E4F2F1;
    --schema-faq-how-aqua: #1b78bf;
    --schema-faq-how-coral: #277fc2;
    --schema-faq-how-paper: #FBF8F3;
    --schema-faq-how-line: #D8E6E4;
    --schema-faq-how-shadow: 0 6px 22px #1b78bf1a;
}

  /* khoang cach giua cac khoi FAQ / HowTo */
  .cke-faqhowto-out{ margin:28px 0; }

  /* ---- tieu de khoi ---- */
  .cke-faqhowto-out > .title h2{
    font-weight:700;
    color:var(--schema-faq-how-sea-deep);
    margin:0 0 16px;
  }

.cke-faqhowto-out .accordion-flush {
    width: 100%;
    background: transparent !important;
    border-radius: initial;
    margin: initial;
    overflow: initial;
}
  .cke-faqhowto-out .accordion-item.faq-item{
    background:#fff;
    border:1px solid var(--schema-faq-how-line);
    border-radius:14px;
    margin-bottom:10px;
    overflow:hidden;          /* moi thu giu trong khung */
    box-sizing:border-box;
    transition:border-color .2s ease, box-shadow .2s ease;
	padding: inherit
  }
  .cke-faqhowto-out .accordion-item.faq-item:hover{ border-color:var(--schema-faq-how-aqua); box-shadow:var(--schema-faq-how-shadow); }

  /* nut: flex + box-sizing, khong absolute => khong tran khoi khung tren mobile
     dung !important de thang class p-0 cua bootstrap */
  .cke-faqhowto-out .faq-question .accordion-button.p-0{
    width:100% !important;
    box-sizing:border-box !important;
    display:flex !important;
    align-items:center;
    gap:10px;
    background:transparent !important;
    border:0 !important;
    padding:14px 16px !important;
    font-family:'Inter',sans-serif;
    font-weight:600;
    line-height:1.4;
    color:var(--schema-faq-how-ink);
    text-align:left;
    box-shadow:none !important;
  }
  .cke-faqhowto-out .faq-question .accordion-button::after{ display:none !important; } /* an chevron bootstrap */
  .cke-faqhowto-out .faq-question .accordion-button[aria-expanded="true"]{ color:var(--schema-faq-how-sea-deep); }

  /* dau cong/dau x cho khoi FAQ (khong co step-num) - tao bang ::before */
  .FAQPage.cke-faqhowto-out .faq-question .accordion-button::before{
    content:"+";
    flex:0 0 24px;
    width:24px; height:24px;
    border-radius:50%;
    background:var(--schema-faq-how-sea-light);
    color:var(--schema-faq-how-sea-deep);
    font-size:.95rem;
    font-weight:700;
    display:flex; align-items:center; justify-content:center;
    transition:transform .25s ease, background .25s ease, color .25s ease;
  }
  .FAQPage.cke-faqhowto-out .faq-question .accordion-button[aria-expanded="true"]::before{
    content:"×";
    background:var(--schema-faq-how-coral);
    color:#fff;
    transform:rotate(90deg);
  }

  /* step-num cua HowTo: span co san trong cau truc, chi style lai
     inline-flex, khong absolute => khong the tran */
  .cke-faqhowto-out .step-num{
    width:26px; height:26px;
    border-radius:50%;
    background:linear-gradient(150deg,var(--schema-faq-how-sea-deep),var(--schema-faq-how-sea));
    color:#fff;
    font-family:'Fraunces',serif;
    font-weight:700;
    font-size:.85rem;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
  }
  .HowTo .faq-question .accordion-button[aria-expanded="true"] .step-num{
    background:linear-gradient(150deg,var(--schema-faq-how-coral),#ff8a6e);
  }

  /* noi dung tra loi / buoc */
  .cke-faqhowto-out .faq-answer.p-0{
    padding:0 16px 16px 16px !important;
    box-sizing:border-box;
    line-height:1.65;
    color:var(--schema-faq-how-ink-soft);
    word-wrap:break-word;
    overflow-wrap:anywhere;
  }
  .cke-faqhowto-out .faq-answer ul{ margin:8px 0 0; padding-left:18px; }
  .cke-faqhowto-out .faq-answer strong{ color:var(--schema-faq-how-sea-deep); }

  /* khi co step-num, can le noi dung cho thang voi chu trong nut */
  .HowTo .accordion-item:has(.step-num) .faq-answer{ padding-left:42px !important; }

  /* focus & responsive */
  .cke-faqhowto-out .accordion-button:focus-visible{ outline:2px solid var(--schema-faq-how-coral); outline-offset:2px; }

  @media (max-width:480px){
    .cke-faqhowto-out .faq-question .accordion-button.p-0{padding:12px 12px !important; gap:8px; }
    .cke-faqhowto-out .faq-answer.p-0{padding:0 12px 14px 12px !important; }
    .HowTo .accordion-item:has(.step-num) .faq-answer{ padding-left:38px !important; }
    .cke-faqhowto-out .step-num, .FAQPage .faq-question .accordion-button::before{ width:22px; height:22px; font-size:.8rem; }
  }

  @media (prefers-reduced-motion: reduce){
    .cke-faqhowto-out .accordion-item.faq-item,.cke-faqhowto-out .accordion-button::before{ transition:none; }
  }
/******END NEW FAQPage********/

/******START REVIEW********/
div#hiformreview {
    padding: 10px 10px 4px;
    border: 1px solid #f1f1f1;
    border-radius: 5px;
}
form .form-label{
	font-size:var(--font-size-content);
}
.rating-wp .rating-symbol * {
    font-size: 30px !important;
    line-height: 1.5em;
}
.rating-symbol>div:before {
    color: #ffc107;
}
.alert-review {
    font-size: var(--font-size-content-small);
}
/******END REVIEW********/
span.btn-small-text {
    display: block;
    font-size: 12px;
    line-height: 1.3em;
    text-transform: none;
    font-weight: normal;
}

/***********ckeditor plugins************/
/***********start gallery-layouts ckeditor************/
.responsive-justified-gallery {
	--rjg-gap: 8px;
	--rjg-radius: 14px;
	--rjg-loading-height: 260px;

	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
}

/*
 * Loading xuất hiện ngay khi HTML được tải.
 * Không cần thêm thẻ loading trong HTML.
 */
.responsive-justified-gallery:not(.rjg-ready)::before {
	content: "Đang tải thư viện ảnh...";

	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	min-height: var(--rjg-loading-height);

	border-radius: var(--rjg-radius);
	background:
		radial-gradient(
			circle at center,
			#252525 0,
			#1b1b1b 65%
		);

	color: #aaa;
	font-size: 15px;
	text-align: center;
}

/*
 * Vòng xoay loading.
 */
.responsive-justified-gallery:not(.rjg-ready)::after {
	content: "";

	position: absolute;
	top: calc(var(--rjg-loading-height) / 2 - 45px);
	left: 50%;

	width: 38px;
	height: 38px;

	border: 3px solid rgba(255, 255, 255, 0.16);
	border-top-color: #fff;
	border-radius: 50%;

	transform: translateX(-50%);
	animation: rjg-loading-spin 0.8s linear infinite;
}

@keyframes rjg-loading-spin {
	from {
		transform:
			translateX(-50%)
			rotate(0deg);
	}

	to {
		transform:
			translateX(-50%)
			rotate(360deg);
	}
}

/*
 * Danh sách nguồn được ẩn.
 *
 * Các ảnh đang hiển thị sẽ được JavaScript
 * chuyển từ .rjg-items sang .rjg-render.
 *
 * Các ảnh còn lại vẫn nằm trong .rjg-items
 * để Fancybox có thể mở đủ toàn bộ gallery.
 */
.responsive-justified-gallery > .rjg-items {
	display: none;
}

/*
 * Vùng gallery do JavaScript tạo.
 */
.responsive-justified-gallery > .rjg-render {
	display: none;
	flex-direction: column;
	gap: var(--rjg-gap);
	width: 100%;
}

.responsive-justified-gallery.rjg-ready > .rjg-render {
	display: flex;
}

.responsive-justified-gallery > .rjg-title {
	display: none;
	margin: 0 0 18px;
	color: inherit;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.3;
}

.responsive-justified-gallery.rjg-has-title > .rjg-title {
	display: block;
}

.responsive-justified-gallery .rjg-row {
	display: flex;
	gap: var(--rjg-gap);
	width: 100%;
	overflow: hidden;
}

.responsive-justified-gallery .rjg-item {
	position: relative;
	display: block;
	min-width: 0;
	height: 100%;
	overflow: hidden;

	border-radius: var(--rjg-radius);
	background: #222;

	color: inherit;
	cursor: pointer;
	text-decoration: none;

	isolation: isolate;
}

.responsive-justified-gallery .rjg-item img {
	display: block;
	width: 100%;
	height: 100%;

	object-fit: cover;

	transition:
		transform 0.45s ease,
		filter 0.45s ease;
}

.responsive-justified-gallery .rjg-item:hover img {
	transform: scale(1.05);
	filter: brightness(0.86);
}

.responsive-justified-gallery .rjg-more {
	position: absolute;
	inset: 0;
	z-index: 3;

	display: flex;
	align-items: center;
	justify-content: center;

	background: rgba(0, 0, 0, 0.58);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);

	color: #fff;
	font-size: clamp(34px, 6vw, 68px);
	font-weight: 700;
	letter-spacing: -0.04em;

	pointer-events: none;
	border-radius: var(--rjg-radius);
}

.responsive-justified-gallery.rjg-theme-dark {
	color: #fff;
}

.responsive-justified-gallery.rjg-theme-dark .rjg-item {
	background: #222;
}

.responsive-justified-gallery.rjg-theme-light {
	color: #222;
}

.responsive-justified-gallery.rjg-theme-light .rjg-item {
	background: #eee;
}

.responsive-justified-gallery.rjg-theme-light:not(
	.rjg-ready
)::before {
	background: #f1f1f1;
	color: #666;
}

.responsive-justified-gallery.rjg-theme-light:not(
	.rjg-ready
)::after {
	border-color: rgba(0, 0, 0, 0.15);
	border-top-color: #222;
}

@media (max-width: 767px) {


	.responsive-justified-gallery {
		--rjg-loading-height: 210px;
	}

	.responsive-justified-gallery > .rjg-title {
		margin-bottom: 14px;
		font-size: 23px;
	}

	.responsive-justified-gallery:not(.rjg-ready)::after {
		top: calc(var(--rjg-loading-height) / 2 - 43px);
	}
}
/***********end gallery-layouts ckeditor*************/
/***********start compare image ckeditor*************/
/* image-compare.css — style frontend cho .image-compare / .icv
   Dùng cùng image-compare.js. CSS dưới đây gồm cả fallback chống layout shift. */

/* Khung */
.image-compare,
.icv {
    position: relative;
    display: inline-block;
    max-width: 100%;
    line-height: 0;
    overflow: hidden;
    user-select: none;
    touch-action: none;
}
.image-compare img,
.icv .icv__img {
    display: block;
    max-width: 100%;
    height: auto;
	background: #fff;
}

/* Trước khi JS init: ẩn ảnh after để không đè (chống nhấp nháy).
   Khi đã init (.icv) thì ảnh after được bọc trong .icv__after và hiển thị. */
.image-compare:not(.icv) .icv__img--after { display: none; }

/* Lớp ảnh sau (cắt theo handle). Vị trí mặc định lấy từ --icv-start (CSS fallback) */
.icv .icv__after {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--icv-start, 50%);
    height: 100%;
    overflow: hidden;
}
.icv .icv__after .icv__img--after {
    max-width: none;
    height: 100% !important;
    object-fit: cover;
}

/* Thanh kéo */
.icv .icv__handle {
    position: absolute;
    top: 0;
    left: var(--icv-start, 50%);
    width: 3px;
    height: 100%;
    background: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, .5);
    transform: translateX(-50%);
    cursor: ew-resize;
    z-index: 3;
}
.icv--vertical .icv__after {
    width: 100%;
    height: var(--icv-start, 50%);
}
.icv--vertical .icv__handle {
    top: var(--icv-start, 50%);
    left: 0;
    width: 100%;
    height: 3px;
    transform: translateY(-50%);
    cursor: ns-resize;
}
.icv .icv__arrow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 6px rgba(0, 0, 0, .4);
    transform: translate(-50%, -50%);
}
.icv .icv__arrow::before,
.icv .icv__arrow::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    transform: translateY(-50%);
}
.icv .icv__arrow::before { left: 7px; border-right-color: #555; }
.icv .icv__arrow::after { right: 7px; border-left-color: #555; }
/* mũi tên dọc */
.icv--vertical .icv__arrow::before { left: 50%; top: 7px; transform: translateX(-50%); border: 6px solid transparent; border-bottom-color: #555; }
.icv--vertical .icv__arrow::after { right: auto; left: 50%; top: auto; bottom: 7px; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #555; }

/* Nhãn */
.icv .icv__label {
    position: absolute;
    bottom: 12px;
    padding: 4px 10px;
    font-size: 13px;
    line-height: 1.4;
    color: #fff;
    background: rgba(0, 0, 0, .55);
    border-radius: 4px;
    z-index: 2;
    pointer-events: none;
}
.icv .icv__label--before { left: 12px; }
.icv .icv__label--after { right: 12px; }
/***********start compare image ckeditor*************/
/***********end ckeditor plugins************/