/*---COde tạm---*/
.rounded-lg { border-radius: .5rem; }
.omd\:p-4 { padding: 1rem;  }
.omd\:rounded-xl { border-radius: .75rem;  }


/*---COde tạm---*/

.header .header__left img { max-width:100%; border-radius: 0.7rem; }
/*-------- Style Company info-----*/
.ps-footer__links { padding: 10px 0; }
.ps-footer .ps-footer__links .panel-title h3{color: white; font-size: 0.85rem; margin-bottom: 5px; line-height: 1rem;}
.ps-footer .ps-footer__links .panel-content div{color:white; font-size: 0.85rem;}
.ps-product-list .ps-section__links li a {  
	--info-500: 210 100% 43.92%;
	color: hsl(var(--info-500));
	font-weight:600;
}
.ps-product-list .ps-section__header::after {
  	content: "";
	width: 12%;
  	height: 5px;
  	position: absolute;
  	bottom: 0;
  	left: 0;
  	background-color: #6dbd45;
  	border-radius: 5px;
}
/*--------End Style Company info-----*/

/*-------- Style Header Top-----*/
.header-top-ptb-1 {
  padding:7px 0;
  border-bottom:1px solid #f2f2f2;
  background-color:#f2f3f8;
  font-size:13px
}
.header-info>ul {display:flex}
.header-info>ul>li {
  margin-right:30px;
  position:relative;
  display:flex;
  align-items:center
}
.header-info>ul>li:before {
  content:"";
  position:absolute;
  right:-14px;
  top:50%;
  transform:translateY(-50%);
  width:1px;
  height:20px;
  background:#dedfe2
}
.header-info>ul>li:last-child {
  margin-right:0
}
.header-info>ul>li:last-child:before {
  display:none
}
.header-info>ul>li a {
  color:#444;
  font-weight:500
}
.header-info>ul>li a i {
  font-size:14px;
  margin-right:5px
}
.header-info>ul>li a.language-dropdown-active i.fa-chevron-down {
  font-size:8px;
  margin-left:5px
}
.header-info>ul>li>ul.language-dropdown {
  position:absolute;
  top:100%;
  left:0;
  z-index:2;
  min-width:200px;
  background:#fff;
  border-radius:5px;
  transform:translateY(20px);
  box-shadow:0 -3px 23px rgba(0,0,0,.06);
  visibility:hidden;
  opacity:0;
  padding:20px 0;
  transition:all .25s cubic-bezier(.645,.045,.355,1)
}
.header-info>ul>li>ul li {display:block}
.header-info>ul>li>ul li a {
  display:block;
  color:#696969;
  padding:5px 20px
}
.header-info>ul>li>ul li a:hover {
  color:var(--color-brand);
  background-color:rgba(78,151,253,.1)
}
.header-info>ul>li:hover>a {color:#333}
.header-info>ul>li:hover>ul.language-dropdown {
  visibility:visible;
  opacity:1;
  transform:translateY(0)
}
.header-info-right {
  display:flex;
  justify-content:flex-end
}
/*-------- End Style Header Top-----*/
/*-------- Style ReadMore-----*/
.readMore { clear: both; font-size: 16px; margin-bottom: 0px; overflow: hidden;}
.readMore .btn-loadmore {
	display: block;
	position: relative;
	z-index: 2;
	text-align: center;
	clear: both;
	-webkit-transition: 0.5s;
	transition: 0.5s;
}
.readMore .btn-loadmore a.rut-gon, .readMore .btn-loadmore a.xem-them {
	background: #e5e5e5;
	border-radius: 16px;
	font-size: 14px;
	width: 120px;
	height: 32px;
	line-height: 32px;
	text-align: center;
	display: inline-block;
	text-decoration: none;
	cursor: pointer;
	bottom: -25px;
  	margin-bottom: 10px;
}
.readMore .btn-loadmore a.rut-gon {position: relative;top: 0px; }
.readMore .btn-loadmore a.rut-gon svg {transform: rotate(-180deg);}
.rotate-180 {transform: rotate(-180deg);}
.readMore .shrink-overflow-gradient{
	width: 100%;
	height: 120px;	
	position: relative;
	display: inline-block;
	background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 21.88%, rgba(255, 255, 255, 0.95) 45.31%, rgb(255, 255, 255) 67.71%, rgb(255, 255, 255) 100%);
	background: -webkit-linear-gradient( top, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.013) 8.1%, rgba(255, 255, 255, 0.049) 15.5%, rgba(255, 255, 255, 0.104) 22.5%, rgba(255, 255, 255, 0.175) 29%, rgba(255, 255, 255, 0.259) 35.3%, rgba(255, 255, 255, 0.352) 41.2%, rgba(255, 255, 255, 0.45) 47.1%, rgba(255, 255, 255, 0.55) 52.9%, rgba(255, 255, 255, 0.648) 58.8%, rgba(255, 255, 255, 0.741) 64.7%, rgba(255, 255, 255, 0.825) 71%, rgba(255, 255, 255, 0.896) 77.5%, rgba(255, 255, 255, 0.951) 84.5%, rgba(255, 255, 255, 0.987) 91.9%, #fff );
	background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 21.88%, rgba(255, 255, 255, 0.95) 45.31%, rgb(255, 255, 255) 67.71%, rgb(255, 255, 255) 100%);
}
/*-------- End Style ReadMore-----*/

/*-------- Style Table Scrol-----*/
::-webkit-scrollbar{width: 8px;height: 12px;border-radius:10px}
.ck-content .table { display: block; 
  width: 100%;
  overflow-x: auto; /* Kích hoạt cuộn ngang khi thừa dữ liệu */
  margin: 20px 0;
  border-radius: 8px; /* Bo góc mượt cho container */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  /* 1. Chuẩn CSS Hiện Đại (Dành cho Firefox, Chrome, Edge mới) */
  scrollbar-width: thin; /* Tạo thanh cuộn mỏng nhẹ */
  scrollbar-color: #cbd5e1 #f1f5f9; /* Màu nút cuộn (thumb) và màu nền đường ray (track) */
  /* 1. Ẩn thanh cuộn trên Firefox và Chrome mới */
  scrollbar-width: none; 
}
.ck-content > :not(.ingredient) table::-webkit-scrollbar {height: 6px; /* Độ dày của thanh cuộn ngang */}
/* Phần nền đường ray chạy bên dưới */
.ck-content > :not(.ingredient) table::-webkit-scrollbar-track {
  background: #f1f5f9; /* Màu nền nhẹ nhàng giúp bảng trông sạch sẽ */
  border-radius: 10px;
}

/* Cục sỏi/nút kéo (Thumb) */
.ck-content > :not(.ingredient) table::-webkit-scrollbar-thumb {
  background: #cbd5e1; /* Màu xám tinh tế, không bị quá đậm */
  border-radius: 10px; /* Bo tròn sỏi cuộn */
  transition: background 0.3s ease;
}

/* Hiệu ứng đổi màu đậm hơn khi người dùng di chuột qua nút cuộn */
.ck-content > :not(.ingredient) table::-webkit-scrollbar-thumb:hover {
  background: #94a3b8; /* Tăng độ tương phản nhẹ khi hover */
}

table { 
  width: 100%; 
  border-collapse: collapse; 
  -webkit-overflow-scrolling: touch; /* Giúp cuộn mượt hơn trên iOS */
}
/* Zebra striping */
tr:nth-of-type(odd) { background: #eee; }
th { 
  background: #333; 
  color: white; 
  font-weight: bold; 
}
td, th { 
   border: 2px solid var(--white);
   padding: 8px; 
   text-align: left; 
}

.ck-content > :not(.ingredient) table {
    display: block;
    white-space: nowrap;    
    width: 100% !important;
  	overflow-x: auto;
  	/* 1. Ẩn thanh cuộn trên Firefox và Chrome mới */
   scrollbar-width: none; 
}

/* KHI RÊ CHUỘT VÀO: Hiện lại thanh cuộn mượt mà */
.ck-content > :not(.ingredient) table:hover {
  scrollbar-width: thin; /* Hiện lại trên Firefox */
  scrollbar-color: #cbd5e1 #f1f5f9;
}
.ck-content > :not(.ingredient) table:hover::-webkit-scrollbar {
  display: block; /* Hiện lại trên Chrome/Safari */
  height: 6px;
}
.ck-content .table table{ border: 0px double hsl(0,0%,70%); }
.ck-content .table table th, .ck-content .table table td {
  padding: 10px;
  border: 2px solid #fff;
  white-space: nowrap; /* Ép nội dung không tự xuống dòng để tạo hiệu ứng cuộn ngang tốt nhất */
  font-size: 1rem;
  line-height: 20px;
}
/*-------- End Style Table Scrol-----*/
.ps-footer__widgets .tp-footer-logo img {
	margin-bottom: 20px; border-radius: 0.28rem;
}
.ps-footer__widgets .tp-footer-desc {
	color: #fff;  	
  	line-height: 1.6rem;
  	font-size: 0.9rem;
  	text-align: justify;
}
/*-------- Style Call-----*/
.hotline {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  font-size: 15px;
  border: 6px solid rgba(255, 255, 255, 0.3);
  height: 55px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
  border-radius: 30px;
  display: inline-block;
  position: fixed;
  right: 0;
  bottom: 20px;
  z-index: 99999;
}
.hotline div {
  padding: 0 15px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
  border-radius: 30px;
  background-color: #066132;
  line-height: 43px;
}
.hotline i {
  position: relative;
  top: 0;
  margin-right: 7px;
  border-radius: 50%;
  padding: 5px 7px;
  border: 1px solid #fff;
  color: #fff;
  animation: phone-vr-circle-fill 1s infinite ease-in-out;
}
.hotline a {color: #fff; font-weight: 500;}

#button-contact-vr { position: fixed; bottom: 7%; z-index: 99999;}
#gom-all-in-one .button-contact {
  transition: 1.6s all;
  -moz-transition: 1.6s all;
  -webkit-transition: 1.6s all;
}

#all-in-one-vr .phone-bar {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 100%;
  color: #fff;
  padding: 5px 15px 5px 48px;
  border-radius: 50px;
  margin-left: -64px;
  width: max-content;
  cursor: pointer;
}
#button-contact-vr.active #gom-all-in-one .button-contact {
  margin-left: -100%;
}
#button-contact-vr .button-contact .phone-vr {
  position: relative;
  visibility: visible;
  background-color: transparent;
  width: 80px;
  height: 80px;
  cursor: pointer;
  z-index: 11;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transition: visibility 0.5s;
  left: 0;
  bottom: 0;
  display: block;
}
.phone-vr-circle-fill {
  width: 65px;
  height: 65px;
  top: 12px;
  left: 12px;
  position: absolute;
  box-shadow: 0 0 0 0 #c31d1d;
  background-color: rgba(230, 8, 8, 0.7);
  border-radius: 50%;
  border: 2px solid transparent;
  -webkit-animation: phone-vr-circle-fill 2.3s infinite ease-in-out;
  animation: phone-vr-circle-fill 2.3s infinite ease-in-out;
  transition: all 0.5s;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-animuiion: zoom 1.3s infinite;
  animation: zoom 1.3s infinite;
}
.phone-vr-img-circle {
  background-color: #e60808;
  width: 40px;
  height: 40px;
  line-height: 40px;
  top: 25px;
  left: 25px;
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  -webkit-animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
  animation: phone-vr-circle-fill 1s infinite ease-in-out;
}
.phone-vr-img-circle img {
  max-height: 25px;
  max-width: 27px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}
#phone-vr .phone-vr span, #zalo-vr .phone-vr span, #fanpage-vr .phone-vr span {
  display: inline-block;
  padding: 0;			
  color: #fff;
  border: 2px solid #fff;
  border-radius: 20px;
  height: 40px;
  line-height: 36px;
  position: absolute;
  top: 25px;
  left: 25px;
  z-index: -9999;
  width: 0;
  overflow: hidden;
  -webkit-transition: all 1s;
  transition: all 1s;
  background-color: rgb(16, 46, 158);
  -moz-box-shadow: 0 0 5px #888;
  -webkit-box-shadow: 0 0 5px #888;
  box-shadow: 0 0 5px #888;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
}
#phone-vr .phone-vr:hover span, 
#zalo-vr .phone-vr:hover span,
#fanpage-vr .phone-vr:hover span {
  min-width: 180px; width:auto;
  padding-left: 60px;
  padding-right: 30px;
  opacity: 1;
}
#fanpage-vr img {
  max-width: 35px;
  max-height: 35px;
}
#fanpage-vr .phone-vr-img-circle {
  background-color: #1877f2;
}
#fanpage-vr .phone-vr-circle-fill {
  box-shadow: 0 0 0 0 rgb(24 119 242 / 65%);
  background-color: rgb(24 119 242 / 70%);
}
#zalo-vr .phone-vr-circle-fill {
  box-shadow: 0 0 0 0 #2196f3;
  background-color: rgba(33, 150, 243, 0.7);
}
#zalo-vr .phone-vr-img-circle {
  background-color: #2196f3;
}
#tiktok-vr .phone-vr-img-circle {background-color: #020202;}
#tiktok-vr .phone-vr-circle-fill {
	box-shadow: 0 0 0 0 rgb(2 2 2 / 55%);
	background-color: rgb(2 2 2 / 60%);
}
#tiktok-vr .phone-vr-img-circle img {
	max-width: 90%;
	max-height: 90%;
}
#instagram-vr .phone-vr-circle-fill {
	background: rgb(17, 143, 253);
	background: linear-gradient(160deg, rgba(17, 143, 253, 1) 20%, rgba(188, 60, 218, 1) 50%, rgba(253, 223, 5, 1) 80%);
	background-size: contain;
	box-shadow: 0 0 0 0 #c840c9;
	background-color: rgb(79 103 254);
	border: 0;
}		
#instagram-vr .phone-vr-img-circle {background: transparent;}
#telegram-vr .phone-vr-circle-fill {box-shadow: 0 0 0 0 #2c9fd8;background-color: rgb(44 159 216 / 74%);}
#telegram-vr .phone-vr-img-circle {background: #2c9fd8; }
#viber-vr .phone-vr-circle-fill {
	box-shadow: 0 0 0 0 #714497;
	background-color: rgba(113, 68, 151, 0.8);
}
#viber-vr .phone-vr-img-circle {
	background-color: #714497;
}

#whatsapp-vr .phone-vr .phone-vr-circle-fill {
	box-shadow: 0 0 0 0 #1fd744;
	background-color: rgb(35 217 72 / 70%);
}
#whatsapp-vr .phone-vr .phone-vr-img-circle {background: #1cd741;}
#whatsapp-vr .phone-vr .phone-vr-img-circle img {
	max-width: 100%;
	max-height: 100%;
	border-radius: 50%;
}
		

@-webkit-keyframes phone-vr-circle-fill {
  0% {
    -webkit-transform: rotate(0) scale(1) skew(1deg);
  }
  10% {
    -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
  }
  20% {
    -webkit-transform: rotate(25deg) scale(1) skew(1deg);
  }
  30% {
    -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
  }
  40% {
    -webkit-transform: rotate(25deg) scale(1) skew(1deg);
  }
  50% {
    -webkit-transform: rotate(0) scale(1) skew(1deg);
  }
  100% {
    -webkit-transform: rotate(0) scale(1) skew(1deg);
  }
}
@media (max-width: 673px) {			
  #button-contact-vr .button-contact .phone-vr{bottom: 0px;}  
}
@media(max-width:479px) {
  .hotline { bottom:60px; }
  .ps-site-overlay{ display:none;}
}
/*-------- End Style Call-----*/
/*--------Typing Search-------*/
/* Hiệu ứng gõ chữ */
.typing-placeholder {
  position: absolute;
  left: 120px;
  top: 50%;
  transform: translateY(-50%);  
  pointer-events: none; /* Click xuyên qua văn bản vào input */  
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid #000; /* Con trỏ nhấp nháy */  
  /* Lấy tổng số ký tự của chuỗi là 31 (bao gồm cả dấu chấm và khoảng trắng) */
  width: 31ch;   
  /* Khai báo animation gõ chữ và nhấp nháy con trỏ */
  animation: 
    typing 5s steps(31) infinite alternate,
    blink 0.5s step-end infinite;
}

/* Định nghĩa hiệu ứng gõ chữ bằng cách thay đổi chiều rộng từ 0 đến tối đa ký tự */
@keyframes typing {
  0%, 10% { width: 0; }
  70%, 100% { width: 31ch; } /* Giữ lại văn bản một lúc trước khi gõ lại hoặc xóa */
}

/* Định nghĩa hiệu ứng nhấp nháy con trỏ */
@keyframes blink {
  from, to { border-color: transparent }
  50% { border-color: #6c757d; }
}

/* Ẩn placeholder giả lập khi người dùng focus hoặc nhập liệu */
.input-search-product:focus + .typing-placeholder,
.input-search-product:not(:placeholder-shown) + .typing-placeholder {
  display: none;
}
/*--------End Typing Search-------*/