@charset "utf-8";
/* CSS Document */
/* @import '~pretty-checkbox/pretty-checkbox-master/src/pretty-checkbox.scss';*/

/**{
	margin: 0;
	padding: 0;
}*/

.grecaptcha-badge { visibility: hidden; }

html {
    scroll-behavior: auto !important; /* Tắt cuộn mượt của CSS để GSAP tự xử lý */
    overflow-anchor: none;            /* Chặn trình duyệt tự ý nhảy vị trí cuộn */
}

body{
	box-sizing: border-box;
	margin: 0 auto;
	padding: 0;
	position: relative;
	background-color: var(--mau-background-body);
/*	background-color: rgba(228, 229, 236, 1.0);*/
/*	background-color: var(--mau-background-chinh-rgba);*/
	overflow-x: hidden;
	overflow-y: unset;
	/*display: flex;
	justify-content: center;*/
	font-family: var(--font-mau-1);
}
h1,h2,h3,h4,h5,h6,p,span,ul,li{ margin: unset; font-weight: normal; padding: revert; }
strong { font-weight: revert; font-size: revert; line-height: revert; }
input{ border-color: revert; color: unset; }
a{ text-decoration: revert; color: unset; }

:root{

	--container: 95%;

	--container-1: 95%;

	--container-indexsp: 96%;

	--container-payment: 96%;

/*	----------------------- Nhap mau ----------------f9d622--db9727*/
	--mau-chinh: #00B33F;

	--rgb-mauchinh: 0, 179, 63;

	--mau-chinh-dark: #0e913c;

	--rgb-mauchinh-dark: 14, 145, 60;

	--mau-phu: #ff8618;

	--rgb-mau-phu: 255, 134, 24;

	--mau-srcoll: rgba(150, 150, 150, .6);

	--mau-srcoll-hvr: rgba(0, 0, 0, 1);

	--mau-dots: var(--mau-phu);

	--mau-dots-hvr: var(--mau-phu);

	--mau-arrow: #fff;

	--mau-arrow-hvr: #fff;

	--mau-background-btn-arrow: var(--mau-chinh);

	--mau-chu-trang: #fff;

	--color-dau-nhay: #f02d35;


	--br-header: var(--change-bg-header);

	--br-header-index: rgba(255, 255, 255, .0);

	--br-header-sticky: rgba(255, 255, 255, .0);

	--change-bg-header: linear-gradient(240deg, rgb(227, 194, 166) 30%, rgb(20, 29, 103) 100%);

	--shadow-li-simplyscroll: rgba(0, 173, 244, .0);

	--shadow-li-simplyscroll-hvr: rgba(5, 128, 64, .5);

	--mau-chu-tab-spadd: #fff;

	--br-tab-spadd: var(--mau-chinh);

	--br-tab-spadd-hvr: var(--mau-phu);	

/*	----------------------- mau menu PC ------------------*/

	--mau-chu-menu: #000;

	--mau-chu-menu-hover: var(--mau-chinh);

	--mau-chu-menu-sp: #000;

	--mau-chu-menu-sp-hvr: #fff;

	--background-logo: transparent;

	--background-menu-li: ;

	--background-menu-li-hvr: var(--mau-chinh);

	--background-menu-li-sp: #fff;

	--background-menu-li-sp-hvr: var(--mau-chinh);

	--background-top-header: #fff;

	--background-mid-header: #fff;

/*	----------------------- mau menu Mobile rgba(50, 50, 50, 0.3)------------------*/

  --br-menu-mobile: rgba(50, 50, 50, .3);

	--br-out-header-mobile: #fff;

	--br-top-menu-mobile: #fff;

	--br-logo-menu-mobile: transparent;

	--pad-logo-mobile: 3px;

	--mau-icon-menu: #000;

	--mau-icon-header-mobile: #000;

	--border-li-cap-menu-mobile: rgba(200, 200, 200, .5);

	--bg-menu-mobile: #fff;

	--bg-menu-mobile-c1: var(--mau-phu);

	--mau-chu-menu-list-c1: #fff;

	--bg-menu-mobile-c2: rgba(2, 117, 137, 1.0);

	--mau-chu-menu-list-c2: #fff;

	--bg-lh-menu-mobile: transparent;

/*	----------------------- mau camket Index ------------------*/

	--background-camket-index: var(--mau-chinh);

	--br-item-camket-index: #fff;

	--border-camket-index: #fff;

	--shadow-item-camket-index: rgba(50, 50, 50, .3);

	--shadow-item-camket-index-hvr: rgba(0, 173, 244, .3);

	--mau-ten-camket-index: #000;

	--mau-chu-camket-index: #000;

	/*	----------------------- mau about Index ------------------*/

	--background-about-index: transparent; /* #f5f5f5 */

	--mau-chu-h1-about-index: var(--mau-chinh);

	--mau-chu-aside-about-index: #fff;

	/*	----------------------- mau item sp ------------------*/

	--br-tag-itemsp: var(--mau-chinh);

	--bshadow-item-sp: rgba( 180, 180, 180, .2);

	--bshadow-item-sp-hvr: rgba(240, 45, 53, .4);

	--name-itemsp: #000;

	--name-itemsp-hver: var(--mau-chinh);

	--price-del: #9999;

	--price-del-span: var(--price-del);

	--price-ins: #ff0000;

	--price-ins-span: var(--price-ins);

	--lh-item-sp: #ff0000;

	--lh-item-sp-hvr: #ff0000;

	/*	----------------------- mau tab ------------------*/

	--name-tab: #000;

	--name-tab-hvr: #fff;

	--background-name-tab: #ccc;

	--boxshadow-name-tab-hvr: rgba(0,0,0 , .3); /* rgba(240, 45, 53, .5) */

	--background-name-tab-hvr: var(--mau-phu);

	/*	----------------------- mau why product ------------------*/

	--mau-border-whyproduct: #46aabf;

	--mau-br-item-whyproduct: #fff;

	/*	----------------------- mau btn youtube ------------------*/

	--background-btn-ytb: #b22121;

	/*	----------------------- mau chu top page ------------------*/

	--title-page: var(--mau-chinh);

	--mau-chu-top-page: #fff;

	--br-top-page: rgba(var(--rgb-mau-phu), 1.0);

	/*	----------------------- mau bo loc ------------------*/

	--background-li-boloc: var(--mau-chinh);

	--mau-chu-boloc: #000;

	--mau-chu-boloc-hvr: #fff;

	/*	----------------------- mau nut lien he ctsp ------------------*/

	--br-btn-lh-ctsp: #de0000;

	--boder-btn-lh-ctsp: #000;

	--boder-btn-lh-ctsp-hvr: #de0000;

	--br-btn-lh-ctsp-before: #fff;

	--color-btn-lh-ctsp: #000;

	--color-btn-lh-ctsp-hvr: #fff;

		/*footer*/
	
	--mau-chu-footer: #fff;

	--mau-chu-p-footer:#fff;

	--mau-chu-hover-footer: #fff;

	--mau-dots-thongke: var(--mau-chinh-dark);

	--mau-background-footer: rgba(240, 240, 240, 1);/* rgba(82, 19, 142, 1) */

	--bg-before-footer: #FF8618;

	--background-loithe-footer: var(--mau-chinh-dark);

	--mau-btn-show-LH: var(--mau-chinh);

	--mau-chu-ttcty: #fff;

	--mau-gachchan-title-footer: #fff;

	/* Contact */

	--mau-background-submitlh: #000;

	--mau-background-submitlh-hvr: var(--mau-chinh);

	/* btn search menu */

	--mau-search-pc: #000;

	--mau-btn-show-search: transparent; /* d0ac53 */

	--mau-btn-show-search-hvr: rgba(198, 143, 13, .0); /*  */

	--background-div-search: transparent;

	--background-div-search-hvr: transparent;

	--mau-kinhlup-chinh: #000;

	--mau-kinhlup-chinh-hvr: var(--mau-chinh);

	--mau-title-framesearch: #d0ac53;

	--mau-chu-input-tk: #000;

	--mau-chu-input-tk-forcus: var(--mau-chinh);

	--br-input-tk-forcus: var(--mau-chinh);

	--background-input-tk: rgba(240,240, 240, .7);

	--background-input-tk-forcus: #fff;

	--mau-btn-search1: #000;

	--br-btn-search-1: transparent;

	/* News Index */

	--mau-dots-news: var(--mau-dots);

	--mau-dots-news-hvr: var(--mau-chinh);

	/*	mau page*/

	--mau-chu-page: #fff;

	--mau-chu-page-hvr: #fff;

	--mau-chu-page1: #fff;

	--mau-chu-page1-hvr: #fff;

	--mau-background-page: #000;

	--mau-background-page1:#000;

	--mau-background-page-hvr: #0c46a6;

	--mau-background-page1-hvr: #0c46a6;

	--mau-background-span-page1: var(--mau-chinh);

	--mau-header-indexsp: #eee;

	/*	----------------------- mau Page Thanh Toan ------------------*/

	--mau-input-placeholder-pay: #ababab;
	--mau-input-focus-pay: #000;

	/*	mau DKNT */

	--radius-send-dknt: 0px 50px 50px 0px ;
	--background-dknt: transparent;
	--bacground-btn-mail: var(--color-dau-nhay);
	--bacground-btn-mail-hvr: var(--mau-phu); /* linear-gradient(45deg, #1dc1e7, #72be46) */

	--br-dknt-main: #7A9C59;

	/* Srcoll smooth li a #id	*/

	--br-li-one-page: var(--mau-chinh);
	--br-li-one-page-hvr: #fff;
	--br-a-article-one-page: #fff;

	/* btn Srcoll top	*/

	--mau-btn-scroll: var(--mau-chinh);

/* Font don */

	--font-don-1: "VLAgileScriptCalligraphy";

	--font-don-2: "Inter_T";

	--font-don-3: "";

/* Font File tong hop */

	--font-mau-1: "Gliroy-Regular";
	--fomt-mauI-1:"Gliroy-RegularI";

/*	font-chu-chinh*/
	--font-thin: 		"Gliroy-Thin";
	--font-thin-I: 		"Gliroy-ThinI";

	--font-exlight: 	"Gliroy-ExtraLight";
	--font-exlight-I:	"Gliroy-ExtraLightI";

	--font-light: 		"Gliroy-Light";
	--font-light-I: 	"Gliroy-LightI";

	--font-regular:		"Gliroy-Regular";
	--font-regular-I:	"Gliroy-RegularI";

	--font-medium:		"Gliroy-Medium";
	--font-medium-I:	"Gliroy-MediumI";

	--font-semibold: 	"Gliroy-SemiBold";
	--font-semibold-I:"Gliroy-SemiBoldI";

	--font-bold:			"Gliroy-Bold";
	--font-bold-I:		"Gliroy-BoldI";

	--font-exbold:		"Gliroy-ExtraBold";
	--font-exbold-I:	"Gliroy-ExtraBold";

	--font-black:		"Gliroy-Black";
	--font-black-I:		"Gliroy-Black";


	/*	font-chu-phu*/
	--font-mau-2:		"";
	--font-mauI-2:		"";

	--1-font-thin: 		"";
	--1-font-thin-I: 	"";

	--1-font-exlight: 	"";
	--1-font-exlight-I:	"";

	--1-font-light: 	"";
	--1-font-light-I: 	"";

	--1-font-regular:	"";
	--1-font-regular-I:	"";

	--1-font-medium:	"";
	--1-font-medium-I:	"";

	--1-font-semibold: 	"";
	--1-font-semibold-I:"";

	--1-font-bold:		"";
	--1-font-bold-I:	"";

	--1-font-exbold:	"";
	--1-font-exbold-I:	"";

	--1-font-black:		"";
	--1-font-black-I:	"";

}

@media only  screen and (min-width: 1px) and (max-width: 999px){
	:root{
		--container: 85%;
		--container-1: 85%;
		--container-indexsp: 86%;
	}
}

.khung-vanban{padding: 10px;background-color: var(--mau-background-baiviet);}

.format-vanban{font-family: var(--font-mau-1)!important;}
.format-vanban h1,.format-vanban h2,.format-vanban h3,.format-vanban h4,.format-vanban h5,.format-vanban h6,
.format-vanban span,.format-vanban ul,.format-vanban li{ margin: revert; font-weight: revert; padding: revert; font-family: var(--font-mau-1)!important; }
.format-vanban span{ line-height: 1.6rem; /*	font-family: var(--font-mau-1)!important;*/ }
.format-vanban p{ margin: .5rem; font-weight: revert; padding: revert; line-height: 1.65rem; font-family: var(--font-mau-1)!important; }
.format-vanban strong { font-weight: 700; font-size: revert; line-height: revert; font-family: var(--font-mau-1)!important; }
.format-vanban input{ border-color: revert; color: revert; font-weight: revert; font-family: var(--font-mau-1)!important; }
.format-vanban a{ text-decoration: none; color: revert; font-weight: revert; font-family: var(--font-mau-1)!important; }
.format-vanban iframe{ max-width: 100%; height: auto; font-family: var(--font-mau-1)!important; }
.format-vanban table, .format-vanban thead, .format-vanban tbody{ width: 100%; max-width: 100% }
.format-vanban tr, .format-vanban td{	border: revert;padding: revert;margin: revert;font-size: revert;color: revert;width: revert;height: revert;}
.format-vanban img{max-width: 100%; height: auto;}

.khung-chuan, .khungchuan{ max-width: 1440px; margin: 0px auto; padding-bottom: 0px; }
/* width */
::-webkit-scrollbar { width: 5px; opacity: 1; visibility: visible; }

/* Track */
::-webkit-scrollbar-track { background: #f9f9f9; }

/* Handle */
::-webkit-scrollbar-thumb { background: var(--mau-srcoll); border-radius: 10px; }

/* Handle on hover */
::-webkit-scrollbar-thumb:hover { background: var(--mau-srcoll-hvr); }

@media only  screen and(min-width: 1200px){
	/* width */
/*	::-webkit-scrollbar { width: 0px!important; opacity: 0!important; visibility: hidden!important; display: none!important; }
	::-webkit-scrollbar-track { background: transparent!important; }*/
}

.clear{ clear: both; }

/*------------------ Load Hình Khi vào Web --------------------------*/

.lazy-img {
	background: linear-gradient( 90deg, #eee 25%, #f5f5f5 37%, #eee 63% );
	background-size: 400% 100%;
	animation: loading 1.4s ease infinite;
	display: block;
	object-fit: cover;
	width: 100%;
}

/* Khi ảnh load xong */
.lazy-img.loaded {
	animation: none;
	background: none;
	transition: opacity 0.4s ease;
	opacity: 1;
}

@keyframes loading {
  0% { background-position: 100% 0 }
  100% { background-position: 0 0 }
}

#main-index {
  position: relative;
  width: 100%;
}

/*Class Scroll Trigger hiệu ứng của GSAP*/
.panel {
  will-change: transform;      /* Báo trước cho GPU xử lý */
  backface-visibility: hidden;      /* Khử răng cưa và nhấp nháy */
  -webkit-font-smoothing: antialiased;
  -webkit-backface-visibility: hidden;
  will-change: transform;
  box-sizing: border-box;
}

.height_frame_in_section{
	height: 100vh;
}

/*------------------  animation theo GSAP --------------------------*/

/* Trạng thái mặc định của phần tử */
.gsap-ani {
  opacity: 0;
  /* Ép trình duyệt chuẩn bị sẵn tài nguyên để chuyển động mượt */
  will-change: transform, opacity; 
  
  /* ĐỊNH NGHĨA ĐỘ MƯỢT: 0.8 giây, dùng hàm cubic-bezier để chuyển động có nhịp điệu */
  transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1), transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
  -webkit-transition: all 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Các kiểu hướng ẩn */
.gsap-ani[data-ani="fade-up"]    { transform: translateY(50%); }
.gsap-ani[data-ani="fade-down"]  { transform: translateY(-50%); }
.gsap-ani[data-ani="fade-left"]  { transform: translateX(-50%); }
.gsap-ani[data-ani="fade-right"] { transform: translateX(50%); }
.gsap-ani[data-ani="zoom-out"]    { transform: scale(0.6); }
.gsap-ani[data-ani="zoom-in"]    { transform: scale(1.5); }

/* TRẠNG THÁI KHI HIỆN RA */
/* Khi JS add class này, transition ở trên sẽ bắt đầu kéo phần tử từ 60px về 0px trong 1.2 giây */
.gsap-ani.is-visible {
  opacity: 1 !important;
  transition: all 1.2s ease-in-out;
  transform: translate(0, 0) scale(1) !important;
}

/* Các lớp Delay (Có thể add trực tiếp vào HTML) */
.d-1 { transition-delay: 0.5s !important; }
.d-2 { transition-delay: 1s !important; }
.d-3 { transition-delay: 1.5s !important; }
.d-4 { transition-delay: 2s !important; }
.d-5 { transition-delay: 2.5s !important; }
.d-6 { transition-delay: 3s !important; }
.d-7 { transition-delay: 3.5s !important; }
.d-8 { transition-delay: 4s !important; }
.d-9 { transition-delay: 4.5s !important; }
.d-10{ transition-delay: 5s !important; }
.d-11{ transition-delay: 5.5s !important; }
.d-12{ transition-delay: 6s !important; }
.d-13{ transition-delay: 6.5s !important; }
.d-14{ transition-delay: 7s !important; }
.d-15{ transition-delay: 7.5s !important; }
.d-16{ transition-delay: 8s !important; }
.d-17{ transition-delay: 8.5s !important; }
.d-18{ transition-delay: 9s !important; }
.d-19{ transition-delay: 9.5s !important; }
.d-20{ transition-delay: 10s !important; }

/*------------------  main --------------------------*/

section{}

header{ width: 100%; position: relative; top: 0; z-index: 999; background: var(--br-header); }

header.sticky{
	top: 0;
	z-index: 999;
	position: sticky;
	background-color: var(--br-header-sticky);
	box-shadow: 2px 2px 7px rgba(210, 210, 210, .5);
	animation: sitcky-header .5s linear;
}
@keyframes sitcky-header{
  0%{
    top: -80px; 
  }
  100%{
    top: 0px;
  }
}

header > Mobile{
	position: relative;
}

main{	
/*	background-color: rgba(255, 255, 255, 1.0);*/
	width: 100%;
}

@media only  screen and (min-width: 999px) and (max-width: 9999px){
 	header.change-bg:before{
	 	content: '';
	 	position: absolute;
	 	top: 0;
	 	left: 100%;
	 	z-index: 998;
	 	display: block;
	 	width: 100%;
	 	height: 100%;
	 	background: var(--change-bg-header);	 	
 	}
 	header:hover.change-bg:before{
 		left: 0;
 		animation: change-bg-header 0.6s ease-out forwards;
 	}
 	@keyframes change-bg-header{
	  0%{
	    transform: translateX(100%); /* Chạy từ phải sang */
	    opacity: 0;
	  }
	  100%{
	    transform: translateX(0);
	    opacity: 1;
	  }
	}
}

.wrapper{ position: relative; width: 100%; }

/*----------------------------- chu chay ------------------------------*/

.Marquee1 { height: 30px; overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; }

.Marquee1 p{ position: absolute; font-weight: revert; color: revert; font-size: revert; width: 100%; height: 100%; margin: 0; animation: Marquee1 30s linear infinite; }

.Marquee1 pre{ position: absolute; font-weight: revert; color: revert; width: 100%; height: 100%; margin: 0; line-height: 50px; animation: Marquee1 30s linear infinite; }

/* Define the animation */

@keyframes Marquee1 {
  from {
    margin-left: 100%;
  	width: 110%;
  }
  to {
    margin-left: -100%;
  	width: 100%;
  }
}

#loadding,#loadding-1{ display: none; height: 100%; text-align: center; height: 250px; }
#loadding img,#loadding-1 img{ height: auto; max-width: 250px; }

/* CSS Item sp index sp  */



/* CSS Item Sp */

.frame-items-sp-index{ padding: 7px; }

.frame-items-sp-index1{ padding: 7px; }

.frame-items-sp-index, .frame-items-sp-index1{ width: 100%;}

.frame-items-sp-index a, .frame-items-sp-index1 a{ text-decoration: none; }

.item-sp{ width: inherit; position: relative; border-radius: 0px; box-shadow: 0 0 1px 1px var(--bshadow-item-sp); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -ms-transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; transition: all .25s ease-in-out; }
.item-sp:hover{ box-shadow: 0 0 5px 1px var(--bshadow-item-sp-hvr); -webkit-transform: scale(1.02); -moz-transform: scale(1.02); -ms-transform: scale(1.02); -o-transform: scale(1.02); transform: scale(1.02); -webkit-transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -ms-transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; transition: all .25s ease-in-out; }

.top-item-sp, .img-item-sp{ width: inherit; display: flex; align-items:center; justify-content:center; }
.top-item-sp{ position: relative; overflow: hidden; }
.img-item-sp img{ width: 100%; }

.text-overlay-itemsp{ position: absolute; bottom: -100%; z-index: 1; width: 100%; height: auto; padding: 10px; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; background-color: rgba(255, 255, 255, .9); -webkit-transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -ms-transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; transition: all .25s ease-in-out; }
.item-sp:hover .text-overlay-itemsp{ bottom: 0%; -webkit-transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -ms-transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; transition: all .25s ease-in-out; }

.tag-itemsp{ position: absolute; top: 0; right: 0; z-index: 1; padding: 5px; height: 40px; border-radius: 00%; display: flex; align-items: center; justify-content: center; background-color: var(--br-tag-itemsp); }
.tag-itemsp > p{ color: #fff; font-size: 12px; font-family: var(--font-medium); }

.item-text-overlay{ padding: 7px 0; width: 49%; display: flex; align-items: center; justify-content: flex-start; }
.item-text-overlay > aside{ width: 20%; margin-right: 10px; }
.item-text-overlay > aside > img{ width: 100%; }
.item-text-overlay > article{ width: 80%; }
.item-text-overlay > article > span{ width: 100%; display: flex; font-size: 12px; font-family: var(--font-regular); margin-bottom: 5px; }
.item-text-overlay > article > span:last-child{ width: 100%; display: flex; font-size: 13px; font-family: var(--font-bold); margin-bottom: 0; }

.bot-item-sp, .nd-item-sp, .name-item-sp, .gia-item-sp{ width: inherit; }
.nd-item-sp{ padding: 10px; }

.name-item-sp{ height: 42px; overflow: hidden; display: flex; align-items: flex-start; justify-content: center; }
.name-item-sp h3{ text-align: center; font-size: 16px; color: var(--name-itemsp); font-family: var(--font-medium); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; }

.item-sp:hover .name-item-sp h3{ color: var(--name-itemsp-hver); }

.gia-item-sp{ width: inherit; }

.price-item-sp{ width: inherit; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-evenly; }

.price-item-sp > del{ color: var(--price-del); font-size: 14px; font-family: var(--font-bold); }
.price-item-sp > del > span{ color: var(--price-del-span); font-size: inherit; font-family: inherit; }

.price-item-sp > ins{ text-decoration: none; color: var(--price-ins); font-size: 14px; font-family: var(--font-bold); }
.price-item-sp > ins > span{ color: var(--price-ins-span); font-size: inherit; font-family: inherit; }

.lh-item-sp{ width: inherit; text-align: center; color: var(--lh-item-sp); font-size: 14px; font-family: var(--font-bold); }

@media only  screen and (min-width: 1px) and (max-width: 1099px){
	.price-item-sp > del, .price-item-sp > ins{ font-size: 12px;}
}
@media only  screen and (min-width: 1px) and (max-width: 899px){
	.name-item-sp{ height: auto; max-height: 42px; margin-bottom: 7px; }
	.gia-item-sp{ min-height: 38px; display: flex; align-items: center; justify-content: center; }
	.price-item-sp > del{ margin: 0 .5em .5em 0; }
}
@media only  screen and (min-width: 1px) and (max-width: 550px){
	
}

/* CSS Footer */

footer{
	width: 100%;
	height: auto;
	background-color: var(--mau-background-footer);
	/*	padding: 2px 0px;*/ padding: 85px 0;
	margin: 0px auto;
	/*	max-width: 1440px;*/ box-shadow: 0 0px 0px 0px rgba(0,0,0,.2);
}

.iconFollow{ margin-top: 20px; margin-bottom: 20px; align-items: center; justify-content: flex-start; }


.top-text-gtfooter{ width: 100%; font-family: var(--font-semibold); font-size: 26px; line-height: 140%; color: #282828;  }
.bot-text-gtfooter{ width: 100%; margin: 20px 0px; }
.bot-text-gtfooter p{ font-family: var(--font-light)!important; font-size: 16px; line-height: 24px; color: #282828;  }

.br-footer{ background-color: var(--mau-background-footer); padding: 3em 0 0em; }
.icon-footer{ margin: -50px auto; }
.icon-foter{ width: 100%; display: flex; justify-content: center; align-items: center; }
.icon-foter img{ margin: 0px 10px; }
.logo-footer{ width: auto; padding: 5px; background-color: rgba(255, 255, 255, .0); /*	margin-top: 20px;*/ display: flex; justify-content: center; align-items: center; }
.logo-footer img{ max-width: 340px; /*	max-height: 76px;*/ }

@media only  screen and (min-width: 1px) and (max-width: 650px){
	.logo-footer{ justify-content: center; }
}

.diachi{ position: relative; margin-top: 15px; padding-right: 15px; }
.diachi ul{ position: absolute; }
.diachi ul li{ font-size: 14px; }

.cuahang{ min-height: 38px; font-size: 15px; margin-top: 0.5em; /*	margin-bottom: 1.75em;*/ color: var(--mau-chu-footer); font-family: var(--font-bold); text-transform: uppercase; }
.cuahang1{ font-size: 20px; margin-top: 20px; margin-bottom: 10px; color: var(--mau-chu-footer); font-family: var(--font-bold); text-transform: uppercase; }
.cuahang-truycap{ font-size: 20px; margin-top: 10px; /*	margin-bottom: 15px;*/ color: var(--mau-chu-footer); font-family: var(--font-bold); text-transform: var(--text-transf-cuahang); }

.mg-dc{ margin: 0px 0px 0px 0px; padding-left: 0px; }
.mg-dc ul{ padding: 0px; margin: 0rem auto; }
.mg-dc a{ text-decoration: none; }
.mg-dc ul li{ list-style-type: none; }
.mg-dc ul li p span{ color: var(--mau-chu-p-footer); line-height: 1.4em; }
.mg-dc ul li p:hover span{ color: #faa719; }
.mg-dc.format-vanban p{ margin-left: 0; margin-top: 0; }

.center1{ width: 100%; display: flex; text-align: center; justify-content: center; align-items: center; flex-wrap: wrap; text-transform: capitalize; }
.center1 article, .center1 h2{ font-size: 24px; color: var(--mau-chu-top-page); margin:0px 0px 10px 0px; font-family: var(--font-bold); }

.center-cs{ width: 100%; display: flex; justify-content: center; flex-wrap: wrap; align-items: center; }

.Cs{ margin: 0px 0px 10px 0px; padding: 0px 5px 0px 0px; width: 100%; }
.cs{ width: 100%; font-size: 13px; line-height: 20px; margin: 0px 0px 0px 8px; transition: all .5s ease-in-out; /*	color: #fff;*/ }
.cs:hover span{ color: var(--mau-phu); }

.cs1{ width: 100%; list-style-type: none; height: auto; display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px groove rgba(255, 255, 255, 0.0); }
.cs1 i{ color: #fff; font-size: 13px; }
.cs1:hover i{ color: var(--mau-chu-hover-footer); }
.cs1 span{ display: block; width: 7px; height: 7px; background-color: var(--mau-dots-thongke); border-radius: 100%; }
.cs1 a{ display: flex; align-items: center; justify-content: start; text-transform: capitalize; text-decoration: none; padding-left: 0px; font-size: 16px; height: 30px; color:var(--mau-chu-p-footer); font-family: var(--font-regular); }
.cs1:last-child{ border-bottom: 1px hidden; }
.cs1:hover{ background-color: rgba(100, 100, 100, 0); }
.cs1:hover a{ color: var(--mau-chu-hover-footer); }
.cs1:hover .cs{ transition: all .5s ease-in-out; margin: 0px 0px 0px 20px;  }
.cs1 article { color: #fff; font-size: 13px; display: flex; align-items:center; justify-content: flex-start; }
.cs1 article a { margin-right: 7px; font-size: 13px; }
.cs1 aside { display: flex; align-items: center; justify-content: flex-start; }
.cs1 aside a{ width: 25px; margin-right: 10px; }
.cs1 aside a img{ width: 100%; }

.thanh-pho{ display: grid; grid-template-columns: auto auto auto; padding: 5px; grid-column-gap: 10px; grid-row-gap: 0px; }
.thanh-pho li{ list-style-type: none; padding-left: 10px; position: relative; display: flex; align-items: center; }
.thanh-pho a{ color: #fff; font-size: 14px; }
.thanh-pho a:hover{ color: #faa719; }

.dots-city{ background-color: #faa719; position: absolute; left: 0; width: 6px; height: 6px; border-radius: 6px; }

.mota-thongtincty article{ color: var(--mau-chu-ttcty); }

.mota-thongtincty{}
.mota-thongtincty article{margin-top: 4px;font-size: 13px;line-height: 1rem;}
.mota-thongtincty article > h1, .mota-thongtincty article > aside,.mota-thongtincty article > article{color: var(--mau-chu-ttcty);margin-bottom: 1rem;font-family: var(--font-bold);}
.mota-thongtincty article > p, .mota-thongtincty article > h2{color: var(--mau-chu-p-footer);}
.mota-thongtincty ul > li{color: var(--mau-chu-p-footer);margin: 0em auto;}
.mota-thongtincty ul > li > p > a > span {color: var(--mau-chu-p-footer);}

.gach-chan-title-footer{width: 60px; height: 3px; background-color: var(--mau-gachchan-title-footer); margin: 10px 0 25px;}

@media only  screen and (min-width: 1px) and (max-width:500px){
  .bodysp, .br-body-about, #outstanding-news, .thongtin{ margin-bottom: 3.5em!important; }
}

.ve-chungtoi{ width: 100%; padding: 0px; margin: 0px 0 0px 0; }
.ve-chungtoi li{ list-style-type: none; padding-left: 15px; position: relative; display: flex; align-items: center; margin-bottom: 0px; height: 30px; }
.ve-chungtoi li:first-child{

}
.ve-chungtoi a{ color: var(--mau-chu-p-footer); font-size: 13px; text-decoration: none; text-transform: capitalize; /*	height: 1.5rem;*/ }
.ve-chungtoi a:hover{ color: #fff; }
.ve-chungtoi a.link--leda{ line-height: 30px; }
.dots-vechungtoi{ background-color: var(--mau-dots-thongke); position: absolute; left: 0; width: 7px; height: 7px; border-radius: 6px; }

.img-HST{ display: grid; grid-template-columns: auto auto; padding: 5px; grid-column-gap: 5px; grid-row-gap: 5px; }
.br-img-HST{ background-color: #fff; padding: 5px; display: flex; justify-content: center; align-items: center; border-radius: 4px; }
.br-img-HST img{
/*	max-width: 80px;
	height: 40px;*/
}

#maps{ width: 100%; }
#maps iframe{ max-width: 100%; max-height: 250px; }
.map iframe { width: 100%; height: 350px; }

.dots-thongke{ width: 6px; height: 6px; border-radius: 6px; background-color: var(--mau-dots-thongke); margin-right: 4px; }

.logo-s{ width: 100%; height: 225px; display: flex; align-items:center; justify-content:center; }
.frame-logo-s{ width: 130px; }
.frame-logo-s > img{ width: 100%; }

.bet{
	margin-top: 30px;
	background-color: #db6600; /* 262626 */
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 2;
}
.hbet{ height: 36px; }
.pbet{  }
.pbet p{ color: #fff; /* 819393 */ }
.abet{ color: #fff; text-decoration: none;  }
.abet:hover{ color: #FFFFFF; }
.text-alend{ text-align: end; }
.alitem-center{  }

.sumenh{ margin-bottom: 4%; }

@media only  screen and (min-width: 1px) and (max-width:999px){
	.bet{ height:unset; padding: 15px 0; }
	.hbet{ height: unset; }
}

/*----------------------------------- CSS Page CTSP ------------------------------*/

#detail-PC{ width: 100%; }

.frame-in-detail-PC{ padding: 15px 0; }

.left-detail-PC{ width: 47%; }

PC{display: flex;justify-content: space-between;align-items: flex-start;flex-wrap: wrap;}
PC .img-ctsp2{width: 100%;height: auto;margin-top: 1.25rem;display: flex;justify-content: center;align-items: flex-start;flex-wrap: wrap;overflow: hidden;}
/*PC .img-ctsp2 .item img{width: 95px;height: auto;}*/
PC .img-ctsp2 .item{padding: 0 0px 0 0}
PC .img-ctsp{ width: 100%; height: 600px; display: flex; align-items: center; justify-content: center; }
PC .khung-img-ctsp{position: relative;max-width: 900px;height: 100%;max-height: 900px; }
PC .items{position: absolute;opacity: 0;visibility: hidden;transition: all .5s ease-in-out;transform: scale(.5);}
PC .items.active{opacity: 1;visibility: visible;transition: all .5s ease-in-out;transform: scale(1.0);}

.right-detail-PC{ width: 50%; position: sticky; top: 130px; }

.name-ctsp-PC{ font-size: 25px; font-family: var(--font-bold); text-transform: capitalize; margin: 0px auto 10px auto; display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px groove rgba(0, 0, 0, 1.0); }

.gia-PC, .gia-mobile{ width: 100%; }
.gia-mobile{ margin-top: 1em; }
.gia-PC > article > del, .gia-mobile > article > del{ color: var(--price-del); font-size: 16px; font-family: var(--font-medium); margin-right: 3em; }
.gia-PC > article > del > span, .gia-mobile > article > del > span{ color: var(--price-del-span); font-size: inherit; font-family: inherit; }
.gia-PC > article > ins, .gia-mobile > article > ins{ text-decoration: none; color: var(--price-ins); font-size: 18px; font-family: var(--font-bold); }
.gia-PC > article > ins > span, .gia-mobile > article > ins > span{ color: var(--price-ins-span); font-size: inherit; font-family: inherit; }

.KO{ color: red; font-size: 18px; font-family: var(--font-bold); width: 100%; margin: .25em auto; display: flex; align-items: center; justify-content: flex-start; text-transform: capitalize; }

.danh-muc, .masanpham{ width: 100%; margin: 10px auto 0; padding: 10px 0 0; border-top: 1px groove #000; }

.danh-muc > p{ color: #000; font-size: 13px; font-family: var(--font-bold); }

.danh-muc > p > span{ color: var(--mau-chinh); font-family: var(--font-regular); }

.masanpham > p{ color: #000; font-size: 13px; font-family: var(--font-bold); }

.masanpham > p > span{ font-family: var(--font-regular); }

.khung-mota-PC::-webkit-scrollbar { width: 3px; }
.khung-mota-PC{ margin: 10px auto 0px; padding: 10px 0; width: 100%; max-height: 350px; overflow: auto; border: 1px groove #000; border-left: 1px hidden; border-right: 1px hidden; }

.khung-mota-mobile::-webkit-scrollbar { width: 3px; }
.khung-mota-mobile{ margin: 10px auto 0px; padding: 10px 0; width: 100%; max-height: 350px; overflow: auto; border: 1px groove #000; border-left: 1px hidden; border-right: 1px hidden; }

/* Shutter In Vertical */
.btn-lh-ctsp, .btn-dathang{ margin: 15px auto 15px; cursor: pointer; width: 100%; height: 45px; display: flex; align-items: center; justify-content: center; text-decoration: none; font-family: var(--font-bold); font-size: 18px; color: var(--color-btn-lh-ctsp); vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; background: var(--br-btn-lh-ctsp); border: 1px groove var(--boder-btn-lh-ctsp); -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; }
.btn-lh-ctsp:before, .btn-dathang:before{ content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; background: var(--br-btn-lh-ctsp-before); -webkit-transform: scaleY(1); transform: scaleY(1); -webkit-transform-origin: 50%; transform-origin: 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; }
.btn-lh-ctsp:hover, .btn-lh-ctsp:focus, .btn-lh-ctsp:active,
.btn-dathang:hover, .btn-dathang:focus, .btn-dathang:active { color: var(--color-btn-lh-ctsp-hvr); border: 1px groove var(--boder-btn-lh-ctsp-hvr); }
.btn-lh-ctsp:hover:before, .btn-lh-ctsp:focus:before, .btn-lh-ctsp:active:before,
.btn-dathang:hover:before, .btn-dathang:focus:before, .btn-dathang:active:before { -webkit-transform: scaleY(0); transform: scaleY(0); }



.bot-chitiet-sp{ width: 100%; }

.toggle-mota,.toggle-tuvan,.toggle-chinhsach{ margin-bottom: 15px; }
.toggle-mota article,.toggle-tuvan article,.toggle-chinhsach article{ height: 40px; padding: 0 15px; font-size: 15px; font-family: var(--font-bold); display: flex; justify-content: space-between; align-items: center; background-color: #e5e5e5; }
.nd-mota{border: 1px solid #ebe9e9; padding: 15px 25px; height: 300px; position: relative; overflow: hidden;}
.nd-mota.active{height: auto; padding: 15px 25px 108px;}

.btn-xemthem-mota{ position: absolute; width: 100%; height: 108px;	background: linear-gradient(to bottom, rgba(255 255 255 / 0), rgb(255, 255, 255), rgb(255, 255, 255)); bottom: 0px; left:0; display: flex; justify-content: center; align-items: center; }											

.xem-them-mota{ padding: 20px; cursor: pointer; border-radius: 10px; border: 1px groove var(--mau-chinh); color: var(--mau-chinh); font-size: 14px; background-color: #fff!important; }
.an-mota{padding: 20px; border-radius: 10px; border: 1px groove var(--mau-chinh); color: var(--mau-chinh); font-size: 14px; background-color: #fff!important;}

.nd-mota .format-vanban,.nd-tuvan .format-vanban,.nd-chinhsach .format-vanban{text-align: justify;}

.nd-tuvan,.nd-chinhsach{border: 1px solid #ebe9e9; padding: 15px 25px; height: auto; position: relative; overflow: hidden; display: none;}


/*----------------------------------- Nut menu them ------------------------------*/

.show-menu{ position: fixed; z-index: 110; top: 2.5%; right: 0%; height:37px; width: 22px; background-color: #fff; border-radius: 0px; box-shadow: 0px 0px 7px 1px #cccc; padding: 10px; display: flex; align-items: center; justify-content: center; font-size: 14px; }

.position-show{ position: relative; height: 350px; }


.menu-of-show.active{ display: block; }
.menu-of-show{ display: none; position: fixed; z-index: 109; top: 8%; right: .5%; width: 220px; background-color: #fff; border-radius: 7px; box-shadow: 0px 0px 7px 0px #cccc; padding: 0px; }
.item-menu{ font-family: var(--font-regular); font-size: 16px; line-height: 25px; max-height: 200px; text-align: center; overflow-y: auto; }
.item-menu-hover:hover{ background-color: rgba(235, 70, 48, .1); }
.item-menu a{ text-decoration: none; }
.item-menu a:hover{ color: #eb4630; }

.img-show{ display: flex; align-items: center; height: 30px; }
.select2{ margin: 0px 0px 0px 10px; height: 30px; border: 1px solid; box-shadow: 0px 0px 5px 0px #828282; }
.select2:hover{ box-shadow: 0px 0px 5px 1px #2dbc5e; }

.img-congthuong{ width: 100%; position: relative; bottom: 0; margin-top: 15px; }
.img-congthuong img{ width: 100%; max-width: 130px; }

/*----------------------------------- Nut so luong ------------------------------*/

section.cart{ margin-top: 2em; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;  }

/*------------- tat nut mui ten trong input number ------------------*/

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Firefox */
input[type=number] { -moz-appearance: textfield; }

.quantity{ opacity: 1; display: inline-block; display: inline-flex; white-space: nowrap; vertical-align: top; border-radius: 0px; border: 1px groove rgba(150,141,141,0.2); }

.quantity input{ display: inline-block; vertical-align: top; margin: 0; overflow: hidden; position: relative; background-color: #f9f9f9; text-shadow: 1px 1px 1px #fff; color: #666; border: 1px solid #ddd; text-transform: none; font-weight: normal; padding-left: 0; padding-right: 0;  }

.quantity input[type="number"] { width: 42px; height: 41px; text-align: center; border-radius: 0 !important; color: #000; font-size: 20px; font-family: var(--font-medium); }

.quantity input.quantity{ border: 1px hidden; }

.quantity .minus, .quantity .plus { padding-left: 0.5em; padding-right: 0.5em; height: 35px; display: none; }

.quantity .minus { border-right: 0 !important; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }

.quantity .plus { border-left: 0 !important; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }

.minus{ border-radius: 5px; }

.plus{ border-radius: 5px; }

.quantity-nav{ display: flex; }

.quantity-up{ display: flex; align-items: center; justify-content: center; width: 25px; border: 1px hidden gray; border-radius: 0px 0px 0px 0px; cursor: pointer; font-size: 16px; font-family: var(--font-medium); }

.quantity-down{ display: flex; align-items: center; justify-content: center; width: 25px; border: 1px hidden gray; border-radius: 0px 0px 0px 0px; cursor: pointer; font-size: 16px; font-family: var(--font-medium); }

.screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; }

/* ------------- CSS SP Khac -------------- */

.br-spkhac { background-color: var(--mau-background-trang); padding: 20px 0 0; margin: 0rem auto 0; }

.title-spkhac { font: 20px var(--font-bold); display: flex; align-items: center; margin: 0 auto 1rem; text-transform: capitalize; }

/* ------------- CSS BV Khac -------------- */

.baivt{ max-height: 578px; /*	margin-top: 6%;*/ margin-bottom: 0%; border-radius: 7px; padding: 0 0 0 15px; }
/* width */
.baivt::-webkit-scrollbar { width: 2px; }


.topbv{ padding-bottom: 0px; color: var(--mau-phu); font-family: var(--font-bold); margin-bottom: 0px; text-transform: uppercase; font-size: 18px; }

.baivietTop,.baivietTop-1{ width: 100%; display: flex; justify-content: start; align-items: center; /*	font-family: var(--font-bold);*/ height: auto; padding: 10px 0; border-bottom: 1px solid rgba(205,205,205,1.00); background-color: transparent; }
.baivietTop:hover,.baivietTop-1:hover{
	background-color: rgba(200, 200, 200, .0);
}
.baivietTop:last-child{ border: 1px hidden; }

.br-bv{
	border: 1px hidden rgba(205,205,205,1.00);
	border-bottom: hidden;
	max-height: 550px;
	overflow: auto;
}


.baivietTop a{ text-decoration: none; height: 65px; display:contents; color: #000; font-family: var(--font-semibold); }
.baivietTop a img{ width: 100%; object-fit: cover; }
.baivietTop a p{ font-size: 13px; line-height: 20px; margin: 0px 0px 0px 10px; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 3; /*height: 40px;*/ display: -webkit-box; -webkit-box-orient: vertical; }
.baivietTop:hover a{ color: var(--mau-phu); }

.baivietTop:hover .tenspm{ color: #fff; }

.left-baivietTop{ border-radius: 10px; overflow: hidden; }
.left-baivietTop img{ -webkit-transform: scale(1.0); -moz-transform: scale(1.0); -ms-transform: scale(1.0); -o-transform: scale(1.0); transform: scale(1.0); -webkit-transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -ms-transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; transition: all .25s ease-in-out; }
.baivietTop:hover .left-baivietTop img{ -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); -webkit-transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -ms-transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; transition: all .25s ease-in-out; }

.baivietTop-1 a{ text-decoration: none; height: 65px; display:contents; color: #000; }
.baivietTop-1 a p{ font-size: 13px; line-height: 20px; margin: 0px 0px 0px 10px; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; /*    height: 40px;*/ display: -webkit-box; -webkit-box-orient: vertical; font-family: var(--font-bold); }
.baivietTop-1:hover a{ color: var(--mau-chinh); }
.baivietTop-1 article{font-family: var(--font-semibold);}
.baivietTop-1:hover .tenspm{ color: #fff; }
.baivietTop-1 img{
/*	max-width: ;*/
}

.bv-lienquan{position: sticky; top: 100px;}

/*------------------------------------------ lien he ---------------------------------------*/

.thongtin{ margin: 20px 0% 0em 0%; background-color: var(--mau-background-trang); /*	background-color: transparent;*/ padding: 20px 15px; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;  }

.p-sumbmit-lh{ padding: 5px; margin-top: 1rem; background-color: var(--mau-chinh); /*	border: 1px groove rgba(100, 100, 100, 0.7);*/ cursor: pointer; color: var(--mau-chu-trang)!important;  }


.inputlh{ /*	text-align: center;*/ display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; border: 1px groove rgba(0, 0, 0, 0.0); height: 399.6px; margin-bottom: 40px; margin-top: 0px; overflow: auto;  }
.inputlh h1{ margin: 20px auto 10px; text-transform: capitalize; font-family: var(--1-font-semibold)!important; font-size: 40px; color: #000; }
.inputlh p{ /*    margin-top: 40px;*/ color: #8e8982; font-size: 20px; line-height: 30px; font-family: var(--font-medium); }

@media only  screen and (min-width: 1px) and (max-width: 999px){
	.inputlh{ height: auto; border-top: 1px groove rgba(150, 150, 150, .6); border-bottom: 1px groove rgba(150, 150, 150, .6); }
}

@media only  screen and (min-width: 1px) and (max-width: 655px){
	.inputlh h1{ font-size: 35px }
	.inputlh p{ font-size:16px; line-height: 26px; }
}
@media only  screen and (min-width: 1px) and (max-width: 460px){
	.inputlh h1{ font-size: 25px }
	.inputlh p{ font-size: 14px; line-height: 24px; }
}

.br-color-lh{ width: 100%; height: 46.5px; position: relative; display: flex; justify-content: center; align-items: center; background-color: var(--mau-header-indexsp); }
.top-lh{ position: absolute; width: 100%;   padding: 14px 0px; }

.lienheh2{ padding: 10px; margin-top: 0px; background-color: #fff; }
.phone-lhh2{ color: rgba(50, 50, 50, 1.0); }
.phone-lhh2 span{ color: red; }
.hotcall-lhh2{ color: rgba(50, 50, 50, 1.0); }
.hotcall-lhh2 span{ color: red; }

.lienhe{display: flex; justify-content: center;align-items: center;}
.lienhe article{width: 32%;height: 45px;position: relative;background-color: var(--mau-background-chinh);color: var(--mau-chu-trang);margin: 1.2rem auto 1.5rem;}
.lienhe article a{ width: 100%; text-transform: uppercase; font-size: 20px; height: 45px; display: flex; align-items: center; justify-content: center; }
.map-lh{ width: 100%; height: auto; margin-bottom: 0%; padding-right: 0px; overflow: hidden; }
.map-lh iframe{ width: 100%; height: auto; height: 350px; max-height: 725px; }

.inputlh-dulich { position: relative; }

.inputlh-dulich label{ position: absolute; top: 0; }

.classten{ padding: 0 0px 0 10px; height: 45px; border: 1px hidden; border-bottom: 1px groove rgba(0,0,0,0.1); outline: none; width: 100%; margin: 0px 0px 20px 0px; font-size: 15px; line-height: 25px; font-family: var(--font-regular);  }
.classten:focus{ /*	 padding: 0 0px 0 10px;*/ height: 45px; /*    border: 1px groove;*/ border-radius: 0; border-color: rgba(0,0,0,0.5); color: #000; outline: none; pointer-events: none; /*    border-color: #eb4630;*/ }

#noidung { width: 100%; height: 140px; font-size: 16px; line-height: 26px; font-family: var(--font-regular); border: 1px hidden; border-bottom: 1px groove rgba(0, 0, 0, .1); }
#noidung:focus{ border: 1px groove rgba(0, 0, 0, .5); border-radius: 0; /*    color: #fff;*/ outline: none; /*    border-color: #eb4630;*/ }

.classsubmit{ height: auto; background-color: rgba(0, 0, 0, 0); border: 1px hidden; padding: 10px; margin-top: 0; color: var(--mau-chu-trang)!important; font-family: var(--font-regular); text-transform: capitalize; }
.p-sumbmit-lh:hover{ color: #fff; }

/*---------------------------------------- CSS Gio Hang ----------------------------------*/

#page-cart{ width: 100%; }
#nd-cart{ width: 100%; }
.frame-in-nd-cart{ position: relative; }

table#tablesp-incart { border-collapse: collapse; border-spacing: 0; width: 100%; }

#tablesp-incart > thead{ height: 60px; }

#tablesp-incart > thead > tr{ background-color: rgba(235, 243, 253, 1.0); }
#tablesp-incart > thead > tr > th{ font-size: 1.1em; text-transform: capitalize; }

#tablesp-incart > tbody > tr{ height: 112px; }
#tablesp-incart > tbody > tr:nth-child(even) { background-color: rgba(247, 250, 224, 1.0); }

#tablesp-incart > tbody > tr:nth-child(odd) { background-color: rgba(246, 250, 253, 1.0); }
#tablesp-incart > tbody > tr > td { height: inherit; }
#tablesp-incart > tbody > tr > td >a{ display: flex; align-items: center; justify-content: center; }

.col-imgsp{ width: 18%; }
.col-imgsp > a{ display: flex; justify-content: center; align-items: center; width: inherit; }

.imgsp{ width: 100px; max-height: 100px; padding: 0px; }
.imgsp > img{ width: 100%; }

.namebysp{ width: 100%; font-size: 18px; font-weight: 500; padding-left: 0px; /*	text-align: center;*/ }
.namebysp article{ display: flex; justify-content: center; }
.namebysp a{ display: block; text-decoration: none; color: #111111; text-align: start; font-weight: 400; font-family: var(--font-mau-1); margin-bottom: 0px; }
.namebysp article a{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 25px; }

.namesp-mobile{ width: 100%; display: none; }

.viewprice{ width: 100%; display: flex; justify-content: center; }

.solg{ display: flex; justify-content: center; align-items: center;  }
.total{ text-align: end; padding-right: 10px; }
.totalmoney{ text-transform: var(--text-transf-capitalize); border-bottom: 3px solid #ECECEC; padding: 0px 0px 10px 0px; margin: 0px 0px 10px 0px; }
.money{ font-weight: bold; font-size: 1em; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; }

#nd-cart{ width:100%; }

.top-cart{ width: 100%; margin-bottom: 1.5em; }
.top-cart table#tablesp-incart{ width: 100%; }

#btndelete{ width: 20px; padding: 0px; margin-right: 0px; margin-left: 0px; display: flex; justify-content:center; }
#btndelete a{ font-size: 17px; color: #000;  }
#btndelete:hover a{ color: var(--mau-chinh); }

.gh-mausac{font-size: 15px;margin: .75rem auto .5rem;}
.gh-mausac span{color: red;}
.gh-size{font-size: 15px;font-family: var(--font-bold);}
.gh-size span{color: green;font-family: var(--font-regular);}

.price{color:red; font-family: var(--font-regular);}
.product-line-price{ color: var(--mau-chinh-dark); font-family: var(--font-regular); width: 100%; display: flex; justify-content:center; }

.empty-cart { width: 100%; color: var(--mau-chinh); text-transform: capitalize; text-align: center; padding: 15px; background: #f9f9f9; font-weight: bold; }

.bot-cart{ position: sticky; bottom: 0; width: 100%; padding: 10px 0; margin-bottom: .5em; background-color: rgba(235, 243, 253, 1.0); transition: box-shadow 0.1s ease-in-out; }

.bot-cart.shadow { box-shadow: 0 -3px 6px rgba(0,0,0,0.2); /* đổ bóng khi sticky */ }

.total-cart{ width: 100%; display: flex; align-items: center; justify-content: center; }

.L-bot-cart > article{ width: 100%; padding-left: 15px; display: flex; align-items: center; justify-content: flex-start; }

.L-bot-cart > article > a{ text-decoration: none; font-family: var(--font-medium); font-size: 16px; }

.L-bot-cart > article > a:hover{ color: red; }

.M-bot-cart > article{ padding-right: 15px; width: 100%; display: flex; align-items: center; justify-content: flex-end; font-family: var(--font-medium); }

.totals-value{ margin-left: 10px; color: var(--mau-chinh);}

.thanhtoan{ display: flex; align-items: center; justify-content:center; }
.thanhtoan a{ border: none; padding: 15px; height: 35px; border-radius: 4px; display: flex; justify-content: center; align-items: center; background-color: #000; margin: 0px 0px 0px 0px; text-decoration: none; color: #FFFFFF; font-family: var(--font-medium); }
.thanhtoan a:hover{ background-color: var(--mau-chinh); border:1px hidden; }

@media only  screen and (min-width: 1px) and (max-width: 650px){
	#tablesp-incart > thead{ height: 50px; }
	#tablesp-incart > thead > tr > th{ font-size: 15px; }
	#tablesp-incart > tbody > tr{ height: 95px; }
	#btndelete{ margin: 0 15px 0 12px; }
	.col-imgsp{ width: 50%; }
	.col-body-imgsp{ flex-wrap: nowrap!important; height: inherit; }
	.imgsp{ width: 55px; }
	.namebysp{ font-size: 14px; }
	.money{ font-size: 14px; }
	.solg .quantity input[type="number"]{ width: 25px; height: 30px; font-size: 16px; }
	.L-bot-cart > article > a{ font-size: 8px; }
	.M-bot-cart > article{ font-size: 14px; }
	.thanhtoan a{ font-size: 14px; }
}

@media only  screen and (min-width: 1px) and (max-width: 500px){
	.thanhtoan a{ font-size: 12px; }
}

/*---------------------------------------- CSS Thanh Toan ----------------------------------*/



/*---------------------------------------- Copyright Google Captcha ----------------------------------*/

.copyright-google-captcha{ margin-top: 15px; width: 100%; display: flex; align-items: center; justify-content: start; }
.copyright-google-captcha article{ color: rgba(200, 200, 200, 1.0); font-size: 12px; font-family: var(--font-regular); }
.copyright-google-captcha a{ color: #5bacf2; }

.copyright-google-captcha-lh{ margin-top: 15px; width: 100%; display: flex; align-items: center; justify-content: center; }
.copyright-google-captcha-lh article{ color: rgba(150, 150, 150, 1.0); font-size: 12px; font-family: var(--font-regular); }
.copyright-google-captcha-lh a{ color: #5bacf2; }

@media only  screen and (min-width: 1px) and (max-width:899px){
  .copyright-google-captcha{ justify-content: center; }
}

/*---------------------------------------------------------------------------------------*/

.paging{ width: 100%; display: inline-flex; align-items: center; justify-content: center; }
.paging a{ text-decoration: none; color: var(--mau-chu-page); font-size: 20px; }
.paging a.page1{background-color: var(--mau-background-page1);border: 1px hidden #000;transition: all 0.5s ease-in-out;}
.paging span.page1{background-color: var(--mau-background-span-page1);border: 1px hidden #000;transition: all 0.5s ease-in-out;}
.paging a.page1:hover{ background-color: var(--mau-background-page1-hvr); color: var(--mau-chu-page1-hvr); border: 1px hidden; transition: all 0.5s ease-in-out; }
.page{ height: 35px; width: 35px; font-size: 25px; border: 1px hidden #000; border-radius: 50%; margin: 0px 10px; display: flex; justify-content: center; align-items: center; background-color: var(--mau-background-page); }
.page:hover{ background-color: var(--mau-background-page-hvr); color: var(--mau-chu-page-hvr);  }

.page1{ height: 35px; width: 35px; font-size: 25px; color: var(--mau-chu-page1); /*	line-height: 25px;*/ border: 1px hidden #292c39; background-color: var(--mau-background-page1); border-radius: 50%; margin: 0px 10px; display: flex; justify-content: center; align-items: center; }

/*-------------------------------- nut lien he ------------------------------*/
#khung-icon-lienhe{ width: auto; display: flex; align-items: center; }
.show1.active{ transform: rotate(180deg); bottom: 80px; right: 5px; transition: all .5s ease-in-out; }

.show1{ position: fixed; z-index: 997; bottom: 80px; right: 5px; width: 40px; height: 40px; color: #fff; font-size: 15px; background-color: var(--mau-btn-show-LH); border-radius: 100%; /* box-shadow: 0px 0px 0px 0px #cccc; */ /* padding: 10px; */ display: flex; justify-content: center; align-items: center; /* display: block; */ transition: all .5s ease-in-out; /* display: block;*/ }

.LH{
/* position: relative;
   width: 50%;
   background-color: #292c39;
   border: 1px solid #292c39;
   border-radius: 20px;*/
}

#LH{ position: fixed; z-index: 999; bottom: 125px; right: 0px; width: 50px; background-color: rgba(0, 0, 0, .0); border-radius: 0px; /* box-shadow: 0px 0px 7px 0px #cccc; */ /* padding: 10px; */ border: 1px hidden;  }

.LH.active{ /* margin-top: 30px;*/ display: block; }

.LH h3{ text-align: center; color: #FFFFFF; font-size: 13px; }
.LH-R{ display: none; z-index: 99; }
.show-LH{ position: absolute; display: none; z-index: 1; bottom: 40px; }
.img-LH1,.img-LH2,.img-LH3{ width: 28%; }

.zl{ width: 50px; height: 50px; padding: 0px; text-align: center; display: flex; justify-content: center; align-items: center; background-color: transparent; border: 0px hidden; margin-bottom: 2px; border-radius: 100%; }
.zl:hover{ background-color: #fff; }

.zl a{ width: inherit; height: inherit; display: flex; justify-content: center; align-items: center; position: relative; }
.zl img{ position: absolute; max-width: 45px; max-height: 45px; transition: all .25s ease-out; border-radius: 100%; }
.zl:hover img{ max-width: 40px; max-height: 40px; transition: all .25s ease-out; }

.fb{ width: 100%; padding: 0px; height: 40px; border-bottom: 1px solid rgb(142, 178, 43,0.3);  text-align: center; display: flex; justify-content: center; align-items: center;   margin: 10px 0px; }
.fb:hover{
   /*background-color: rgb(18, 92, 158,1);
   border: 1px solid rgb(18, 92, 158,1);*/
}
.fb a{
   /*color: rgba(18, 92, 158,0.2);
   font-size: 15px;
   text-decoration: none;*/
}
.hotline{ width: 100%; padding: 0%; height: 40px; /* background-color: rgb(209, 26, 89,0.3);*/ text-align: center; display: flex; justify-content: center; align-items: center; /* border: 1px solid rgb(209, 26, 89,0.3);*/ border-radius: 20px; }
.hotline:hover{ /*background-color: rgb(209, 26, 89,1); border: 1px solid rgb(209, 26, 89,1);*/ }
.hotline a{ /* color: rgb(209, 26, 89,0.2);*/ font-size: 15px; text-decoration: none; }
.zl:hover a,.fb:hover a,.hotline:hover a{ color: #FFFFFF; text-decoration:underline #ffffff; }