body .ht-chaton a, body .ht-chatbox-skin1 a, body .ht-chatbox-skin2 a, body .ht-chatbox-skin3 a, body .ht-chatbox-skin4 a, body .ht-chatbox-skin5 a , body .ht-navi, body .ht-navi a, body .ht-navi-chaton a{
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
	text-decoration: none;
}
.ht-cpho svg{background:#4CAF50}
.ht-csms svg{background:#e56100}
.ht-cmes svg{background:#0082FF}
.ht-ctel svg{background:#29A9EB}
.ht-czal svg{background:#0068FF}
.ht-cwha svg{background:#29A71A}
.ht-cvib svg{background:#6f3faa}
.ht-csky svg{background:#00a9f0}
.ht-ctik svg{background:#222222}
.ht-cmai svg{background:#2196F3}
.ht-cmap svg{background:#8a56cd}
.ht-ccus svg{background:#555555}
.ht-chaton a:hover, .ht-chatbox-skin1:hover{
	text-decoration: none;
}
#chat-mojs {
	transition: transform 0.3s ease;
}
.chathi {
	transform: translateX(-350%);
}
.ht-chatbox{
	position: fixed;
    z-index: 10150;
    left: 10px;
    bottom: 10px;
}
.ht-chatbox button{
	border:none;
	box-sizing: border-box;
	margin:0px;
}
.ht-chatbox #chatona {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    animation: logo 0.9s infinite;
	transform: translate3d(0, 0, 0) scale(0.9);
	box-shadow: 0 0 0 0px #4caf50;
    padding: 0px;
    box-sizing: border-box;
    line-height: 0;
	background: #4caf50;
}
.ht-chatbox #chatona svg{
	width:33px !important;
	height:33px !important;
	box-sizing: border-box;
	transition: transform 0.7s ease-in-out;
}
.svg-enter {
  transform: translateX(100%);
}

.ht-chatbox #chatona svg path{
	fill:#fff !important;
}
.ht-chatbox #chatona .khacus{
	width:45px !important;
	height:45px !important;
}
.ht-chatbox #chatona .original-icon {
    display: none; 
}
@keyframes logo {
  100% { box-shadow:0 0 0 20px rgba(0,210,255,0); }
}
.ht-chaton {
    background: #fff;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 15px 5px;
	position:relative;
	margin-bottom:25px;
	-webkit-animation: duoilen 2s ease forwards;
	animation: duoilen 2s ease forwards;
	min-width: 230px;
}
.ht-chaton-full {
    position: fixed;
    background: rgb(0 0 0 / 41%);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
@keyframes duoilen{
  from {
    opacity:0.3;
  }
  to {
    opacity:1;
  }
}
@-webkit-keyframes duoilen{
  from {
    opacity:0.3;
  }
  to {
    opacity:1;
  }
}
.ht-chaton-scroll{
	max-height: 300px;
	overflow: auto;
	padding:0px 10px;
}
.ht-chaton-scroll a i {
    display: flex;
    justify-content: center;
    align-items: center;
}
.ht-chaton::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -10px;
    margin-left: 10px;
    width: 0;
    height: 0;
    border-top: 15px solid #ffffff;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
}
.ht-chaton a {
    display: flex;
    align-items: center;
    color: #444;
	padding: 5px;
}
.ht-chaton a:hover{
	opacity:0.8;
	background: #eee;
    box-sizing: content-box;
    border-radius: 7px;
}
.ht-chaton a:not(:last-child){
	margin-bottom:5px;
}
.ht-chaton svg{
	width:40px;
	margin-right:15px;
	border-radius:100%;
}
.ht-chaton .ht-cco-cus svg{width:40px !important;box-sizing: border-box;}
/* thanh scrool */
.ht-chaton *, .ht-navi-chaton * {
    scrollbar-color: #eee #ffffff00;
    scrollbar-width: thin !important;
}
.ht-chaton ::-webkit-scrollbar, .ht-navi-chaton ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    background: none;
}
.ht-chaton ::-webkit-scrollbar-thumb, .ht-navi-chaton ::-webkit-scrollbar-thumb{
    background-color: #eee;
    border-radius: 2px;
}
.ht-chaton ::-webkit-scrollbar-track, .ht-navi-chaton ::-webkit-scrollbar-track{
    background-color: none;
}
/* skin 1 */
.ht-chatbox-skin1{
	position: fixed;
    z-index: 10150;
    left: 10px;
    bottom: 10px;
	width:45px;
}
.ht-chatbox-skin1 a{
	display:block;
	position: relative;
}
.ht-chatbox-skin1 a:not(:last-child){
	margin-bottom:15px;
}
.ht-chatbox-skin1 a span{
	display:none;
}
.ht-chatbox-skin1 a:hover span {
    padding: 0px 16px;
    display: block;
    z-index: 100;
    left: 35px;
    margin: 7px 0px 70px 20px;
    height: 33px;
    position: absolute;
    font-size: 14px;
    border-radius: 30px;
    color: #fff;
    top: 0px;
    opacity: 0.9;
    background: #11111194;
    width: max-content;
	display: flex;
    align-items: center;
    justify-content: center;
}
.ht-chatbox-skin1 svg{
	width:45px;
	margin:auto;
	border-radius:100%;
}
/* skin 2 */
.ht-chatbox-skin2{
	position: fixed;
    z-index: 10150;
    left: 0px;
    bottom: 10px;
	width:45px;
}
.ht-chatbox-skin2 a{
	display:block;
	position: relative;
	line-height: 0;
	margin-bottom:2px;
}
.ht-chatbox-skin2 a span{
	display:none;
}
.ht-chatbox-skin2 a:hover span {
    z-index: 100;
    left: 45px;
    padding: 0px 20px;
    height: 45px;
    position: absolute;
    font-size: 14px;
    color: #fff;
    top: 0px;
    opacity: 0.9;
    background: #333;
    width: max-content;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ht-chatbox-skin2 svg{
	width:45px;
	margin:auto;
}
/* skin 3 */
.ht-chatbox-skin3{
	position: fixed;
    z-index: 10150;
    left: 10px;
    bottom: 10px;
	width:45px;
}
.ht-chatbox-skin3 a{
	display:block;
	position: relative;
}
.ht-chatbox-skin3 a:not(:last-child){
	margin-bottom:15px;
}
.ht-chatbox-skin3 a span{
	display:none;
}
.ht-chatbox-skin3 a:hover span {
    padding: 0px 16px;
    display: block;
    z-index: 100;
    left: 35px;
    margin: 7px 0px 70px 20px;
    height: 33px;
    position: absolute;
    font-size: 14px;
    border-radius: 30px;
    color: #fff;
    top: 0px;
    opacity: 0.9;
    background: #11111194;
    width: max-content;
	display: flex;
    align-items: center;
    justify-content: center;
}
.ht-chatbox-skin3 svg{
	width:45px;
	margin:auto;
	border-radius: 0px 20px 0px 20px;
}
.ht-chatbox-skin1 i:hover, .ht-chatbox-skin3 i:hover{
	animation: logo3 1000ms infinite;
}
.ht-chatbox-skin1 i, .ht-chatbox-skin3 i{
    display: block;
	line-height:0;
	animation: logoskin1 0.8s infinite;
	transform: translate3d(0, 0, 0) scale(0.9);
}
.ht-chatbox-skin1 .ht-cpho i, .ht-chatbox-skin3 .ht-cpho i{box-shadow: 0 0 0 0px #4CAF50}
.ht-chatbox-skin1 .ht-csms i, .ht-chatbox-skin3 .ht-csms i{box-shadow: 0 0 0 0px #e56100}
.ht-chatbox-skin1 .ht-cmes i, .ht-chatbox-skin3 .ht-cmes i{box-shadow: 0 0 0 0px #0082FF}
.ht-chatbox-skin1 .ht-ctel i, .ht-chatbox-skin3 .ht-ctel i{box-shadow: 0 0 0 0px #29A9EB}
.ht-chatbox-skin1 .ht-czal i, .ht-chatbox-skin3 .ht-czal i{box-shadow: 0 0 0 0px #0068FF}
.ht-chatbox-skin1 .ht-cwha i, .ht-chatbox-skin3 .ht-cwha i{box-shadow: 0 0 0 0px #29A71A}
.ht-chatbox-skin1 .ht-cvib i, .ht-chatbox-skin3 .ht-cvib i{box-shadow: 0 0 0 0px #6f3faa}
.ht-chatbox-skin1 .ht-csky i, .ht-chatbox-skin3 .ht-csky i{box-shadow: 0 0 0 0px #00a9f0}
.ht-chatbox-skin1 .ht-ctik i, .ht-chatbox-skin3 .ht-ctik i{box-shadow: 0 0 0 0px #222222}
.ht-chatbox-skin1 .ht-cmai i, .ht-chatbox-skin3 .ht-cmai i{box-shadow: 0 0 0 0px #2196F3}
.ht-chatbox-skin1 .ht-cmap i, .ht-chatbox-skin3 .ht-cmap i{box-shadow: 0 0 0 0px #8a56cd}
.ht-chatbox-skin1 .ht-ccus i, .ht-chatbox-skin3 .ht-ccus i{box-shadow: 0 0 0 0px #555555}
@keyframes logoskin1 {
  100% {transform: translate3d(0, 0, 0) scale(1);}
  100% {box-shadow: 0 0 0 10px rgba(0,210,255,0);}
}
/* skin 4 */
.ht-chatbox-skin4{
	position: fixed;
    z-index: 10150;
    left: 10px;
    bottom: 10px;
	width:45px;
}
.ht-chatbox-skin4 a{
	display:block;
	position: relative;
}
.ht-chatbox-skin4 a:not(:last-child){
	margin-bottom:7px;
}
.ht-chatbox-skin4 a span{
	display:none;
}
.ht-chatbox-skin4 a:hover span {
    padding: 0px 16px;
    display: block;
    z-index: 100;
    left: 35px;
    margin: 7px 0px 70px 20px;
    height: 33px;
    position: absolute;
    font-size: 14px;
    border-radius: 30px;
    color: #fff;
    top: 0px;
    opacity: 0.9;
    background: #11111194;
    width: max-content;
	display: flex;
    align-items: center;
    justify-content: center;
}
.ht-chatbox-skin4 svg{
	width:45px;
	margin:auto;
	border-radius: 10px;
	background:none !important;
	box-sizing: border-box;
}
.ht-chatbox-skin4 svg:hover{
	animation: logo3 1000ms infinite;
}
@keyframes logo3 {
	0% {transform:rotate(0deg) scale(1) skew(1deg);}
	10% {transform:rotate(-25deg) scale(1) skew(1deg);}
	20% {transform:rotate(25deg) scale(1) skew(1deg);}
	30% {transform:rotate(-25deg) scale(1) skew(1deg);}
	40% {transform:rotate(25deg) scale(1) skew(1deg);}
	50% {transform:rotate(0deg) scale(1) skew(1deg);}
	100% {transform:rotate(0deg) scale(1) skew(1deg);}
}
.ht-chatbox-skin4 .ht-cpho svg path, .ht-chatbox-skin5 .ht-cpho svg path{fill:#4CAF50 !important}
.ht-chatbox-skin4 .ht-csms svg path, .ht-chatbox-skin5 .ht-csms svg path{fill:#e56100 !important}
.ht-chatbox-skin4 .ht-cmes svg path, .ht-chatbox-skin5 .ht-cmes svg path{fill:#0082FF !important}
.ht-chatbox-skin4 .ht-ctel svg path, .ht-chatbox-skin5 .ht-ctel svg path{fill:#29A9EB !important}
.ht-chatbox-skin4 .ht-czal svg path, .ht-chatbox-skin5 .ht-czal svg path{fill:#0068FF !important}
.ht-chatbox-skin4 .ht-cwha svg path, .ht-chatbox-skin5 .ht-cwha svg path{fill:#29A71A !important}
.ht-chatbox-skin4 .ht-cvib svg path, .ht-chatbox-skin5 .ht-cvib svg path{fill:#6f3faa !important}
.ht-chatbox-skin4 .ht-csky svg path, .ht-chatbox-skin5 .ht-csky svg path{fill:#00a9f0 !important}
.ht-chatbox-skin4 .ht-ctik svg path, .ht-chatbox-skin5 .ht-ctik svg path{fill:#222222 !important}
.ht-chatbox-skin4 .ht-cmai svg path, .ht-chatbox-skin5 .ht-cmai svg path{fill:#2196F3 !important}
.ht-chatbox-skin4 .ht-cmap svg path, .ht-chatbox-skin5 .ht-cmap svg path{fill:#8a56cd !important}
.ht-chatbox-skin4 .ht-ccus svg path, .ht-chatbox-skin5 .ht-ccus svg path{fill:#555555 !important}

.ht-chatbox-skin4 .ht-cpho svg{border:2px solid #4CAF50}
.ht-chatbox-skin4 .ht-csms svg{border:2px solid #e56100}
.ht-chatbox-skin4 .ht-cmes svg{border:2px solid #0082FF}
.ht-chatbox-skin4 .ht-ctel svg{border:2px solid #29A9EB}
.ht-chatbox-skin4 .ht-czal svg{border:2px solid #0068FF}
.ht-chatbox-skin4 .ht-cwha svg{border:2px solid #29A71A}
.ht-chatbox-skin4 .ht-cvib svg{border:2px solid #6f3faa}
.ht-chatbox-skin4 .ht-csky svg{border:2px solid #00a9f0}
.ht-chatbox-skin4 .ht-ctik svg{border:2px solid #222222}
.ht-chatbox-skin4 .ht-cmai svg{border:2px solid #2196F3}
.ht-chatbox-skin4 .ht-cmap svg{border:2px solid #8a56cd}
.ht-chatbox-skin4 .ht-ccus svg{border:2px solid #555555}

.ht-cco-cus svg {
    width: 100% !important;
    height: 100% !important;
    padding: 10px !important;
	box-sizing: border-box;
}
.ht-cco-cus svg path{
	fill: #fff;
}
.ht-chatbox-skin4 i {
    display: block;
}
/* skin 5 */
.ht-chatbox-skin5{
	position: fixed;
    z-index: 10150;
    left: 10px;
    bottom: 10px;
	width:65px;
	text-align: center;
	background: #fffffff5;
    border-radius: 10px;
    padding: 10px 5px 17px 5px;
    box-sizing: content-box;
    box-shadow: 0px 0px 5px #0003;
}
.ht-chatbox-skin5 a{
	display:block;
	position: relative;
	color:#333;
}
.ht-chatbox-skin5 a:not(:last-child){
	margin-bottom:0px;
}
.ht-chatbox-skin5 a span {
    font-size: 11px;
    display: block;
    text-align: center;
	margin-top:-7px;
}
.ht-chatbox-skin5 svg,.ht-chatbox-skin5 .ht-cco-cus svg{
	width:55px !important;
	margin:auto;
	background:none;
}
.ht-chatbox-skin5 svg:hover{
	animation: logo3 1000ms infinite;
}
/* NAVI */
:root{
	--navicolor: #333;
	--bordcolor: #ff4444;
	--backcolor:#fff;
	--backchatcolor:#ffffffd6;
	--textchatcolor:#333;
	--bordcolorspan:#333;
}
.ht-boxnavi{
	display:none;
	background: var(--backcolor);
    box-shadow: 0px -1px 7px #00000030;
    z-index: 10150;
	padding: 10px 10px 20px 10px;
    box-sizing: border-box;
	height: 65px;
	line-height: 1.2;
	position: fixed;
}

#navi-mojs {
	transition: transform 0.3s ease;
}
.navihi {
	transform: translateY(200%);
}
.ht-navi {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-gap:5px;
	color:var(--navicolor);
}
.ht-navi a{
	color:var(--navicolor) !important;
}
.ht-navi svg path{
	fill:var(--navicolor) !important;
}
.ht-navi-chaton a{
	color:var(--textchatcolor);
}  
.ht-navi a:hover, .ht-navi-chaton a:hover{
	opacity:0.9;
}
.ht-navi-cen-but a {color:var(--bordcolor);cursor: pointer;}
.ht-navi-cen-but a .ht-navi-cen-span{color:#fff;}
.ht-navi-cen-but svg path{
	fill:#fff !important;
}
.ht-navi div {
    text-align: center;
	position: relative;
}
.ht-navi div span{
	font-size:11px;
	display:block;
	font-weight:bold;
}
.ht-navi .ht-navi-span{
	position: absolute;
    bottom: -15px;
    left: 0;
    right: 0;
}
.ht-navi .ht-navi-cen-span {
    background: var(--bordcolorspan);
    padding: 2px 8px;
    display: inline-flex;
    align-items: center;
    border-radius: 20px;
    justify-content: center;
}
.ht-navi-cen-but {
    position: absolute !important;
    bottom: -20px;
    left: 50%;
    transform: translate(-50%,0);
    width:100%;
}
.ht-navi svg {
    width: 100%;
    height: 100%;
    max-width:25px;
}
.ht-navi-cen svg {
    background: var(--bordcolor);
    border: 1px solid #0000002b;
    padding: 10px;
    border-radius: 100%;
	max-width:35px;
	box-sizing: content-box;
}
.ht-navi-cen-but i {
    display: inline-block;
    border-radius: 100%;
    padding: 0px;
    line-height: 0;
	animation: logo4 1000ms infinite;
}
@keyframes logo4 {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  33.3333% {
    transform: translate3d(0, 0, 0) scale(0.9);
  }
  66.6666% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  
  0% { box-shadow: 0 0 0 0px var(--bordcolor);}
  100% { box-shadow: 0 0 0 10px rgba(0,210,255,0);}
}
.ht-navi-chaton {
    background: var(--backchatcolor);
    box-shadow: 0px -1px 7px #00000030;
    padding: 20px 10px;
    z-index: 10150;
    box-sizing: border-box;
	position: fixed;
}
.ht-navi-chaton svg{
	width: 40px;
    margin-right: 15px;
    border-radius: 100%;
}
.ht-navi-chaton .ht-cco-cus svg{width:40px !important;box-sizing: border-box;}
.ht-navi-chaton a {
    display: flex;
    align-items: center;
    padding: 5px;
	font-weight:bold;
	font-size:16px;
}
/* navi skin 1 */
.navi-skin1{
	bottom:0;
    left:0;
    right:0;
}
.navi-chat-skin1{
	left:0;
    right:0;
	bottom: 64px;
}
/* navi skin 2 */
.navi-skin2{
	bottom:0;
    left:0;
    right:0;
}
.navi-chat-skin2{
	left:0;
    right:0;
	bottom: 64px;
}
.ht-navi-cen1 {
    border-top: 4px solid var(--bordcolor);
    padding-top: 10px;
    margin-top: -10px;
}
/* navi skin 3 */
.navi-skin3{
	bottom:10px;
    left:10px;
    right:10px;
	border-radius:10px;
}
.navi-chat-skin3{
    left:10px;
	right:10px;
	bottom:85px;
	border-radius:10px;
}
/* navi skin 4 */
.ht-navi-cen-momo svg {
    background: var(--bordcolor);
    border: 1px solid #0000002b;
    padding: 10px;
    border-radius: 100%;
	max-width:25px;
	box-sizing: content-box;
}
.ht-navi-cen-momo a {color:#fff !important}
.ht-navi-cen-but.ht-navi-cen-but-momo{bottom:-20px;}
.ht-menu-border{
    bottom: 99%;
    width: 7em;
    height: 1.4em;
    position: absolute;
    clip-path: url(#menu);
    will-change: transform;
    background-color:var(--backcolor); 
	left: 50%;
    transform: translateX(-50%);
	z-index:-1;	
}
.ht-svg-container {
    width: 0;
    height: 0;
}
/* navi skin 5 */
.navi-skin5 {
    bottom: 0;
    left: 0;
    right: 0;
    background: none;
    box-shadow: none;
	padding: 13px 10px 10px 10px;
}
.navi-skin5 .ht-navi-cen-but.ht-navi-cen-but-momo{
	bottom:-20px;
}
.navi-skin5 .ht-navi-cen-span{
	margin-top:10px;
}
.ht-menu-lom svg{
    top: 0;
    bottom: 0;
    position: absolute;
    left: 0;
    right: 0;
    z-index: -1;
	width:100%;
}
.ht-menu-lom svg path{
	fill:var(--backcolor); 
}
.navi-chat-skin5 {
    padding: 20px 10px 65px 10px;
	left:0;
    right:0;
    bottom: 23px;
}
/* mobile */
@media (max-width: 700px){
	.chaton-mobile{display:none}
	.ht-boxnavi{display:block;}
}



/* ---- Extra contact channels (Line, Instagram, Facebook, X, YouTube, LinkedIn, Discord, WeChat, Google) ---- */
.ht-si{padding:22%;box-sizing:border-box}
.ht-cline svg{background:#06C755}
.ht-cinsta svg{background:#E4405F}
.ht-cfb svg{background:#1877F2}
.ht-cx svg{background:#000000}
.ht-cyt svg{background:#FF0000}
.ht-cli svg{background:#0A66C2}
.ht-cdis svg{background:#5865F2}
.ht-cwc svg{background:#07C160}
.ht-cgg svg{background:#4285F4}
/* Floating / Tap skins: coloured glyph on white */
.ht-chatbox-skin4 .ht-cline svg path, .ht-chatbox-skin5 .ht-cline svg path{fill:#06C755 !important}
.ht-chatbox-skin4 .ht-cline svg{border:2px solid #06C755}
.ht-chatbox-skin4 .ht-cinsta svg path, .ht-chatbox-skin5 .ht-cinsta svg path{fill:#E4405F !important}
.ht-chatbox-skin4 .ht-cinsta svg{border:2px solid #E4405F}
.ht-chatbox-skin4 .ht-cfb svg path, .ht-chatbox-skin5 .ht-cfb svg path{fill:#1877F2 !important}
.ht-chatbox-skin4 .ht-cfb svg{border:2px solid #1877F2}
.ht-chatbox-skin4 .ht-cx svg path, .ht-chatbox-skin5 .ht-cx svg path{fill:#000000 !important}
.ht-chatbox-skin4 .ht-cx svg{border:2px solid #000000}
.ht-chatbox-skin4 .ht-cyt svg path, .ht-chatbox-skin5 .ht-cyt svg path{fill:#FF0000 !important}
.ht-chatbox-skin4 .ht-cyt svg{border:2px solid #FF0000}
.ht-chatbox-skin4 .ht-cli svg path, .ht-chatbox-skin5 .ht-cli svg path{fill:#0A66C2 !important}
.ht-chatbox-skin4 .ht-cli svg{border:2px solid #0A66C2}
.ht-chatbox-skin4 .ht-cdis svg path, .ht-chatbox-skin5 .ht-cdis svg path{fill:#5865F2 !important}
.ht-chatbox-skin4 .ht-cdis svg{border:2px solid #5865F2}
.ht-chatbox-skin4 .ht-cwc svg path, .ht-chatbox-skin5 .ht-cwc svg path{fill:#07C160 !important}
.ht-chatbox-skin4 .ht-cwc svg{border:2px solid #07C160}
.ht-chatbox-skin4 .ht-cgg svg path, .ht-chatbox-skin5 .ht-cgg svg path{fill:#4285F4 !important}
.ht-chatbox-skin4 .ht-cgg svg{border:2px solid #4285F4}

/* ---- Extra contact channels, batch 2 (Shopee, Grab, Threads, Pinterest, Reddit, Twitch, Spotify, Signal, VK) ---- */
.ht-cshopee svg{background:#EE4D2D}
.ht-cgrab svg{background:#00B14F}
.ht-cthreads svg{background:#000000}
.ht-cpin svg{background:#BD081C}
.ht-creddit svg{background:#FF4500}
.ht-ctwitch svg{background:#9146FF}
.ht-cspoti svg{background:#1DB954}
.ht-csignal svg{background:#3A76F0}
.ht-cvk svg{background:#0077FF}
.ht-chatbox-skin4 .ht-cshopee svg path, .ht-chatbox-skin5 .ht-cshopee svg path{fill:#EE4D2D !important}
.ht-chatbox-skin4 .ht-cshopee svg{border:2px solid #EE4D2D}
.ht-chatbox-skin4 .ht-cgrab svg path, .ht-chatbox-skin5 .ht-cgrab svg path{fill:#00B14F !important}
.ht-chatbox-skin4 .ht-cgrab svg{border:2px solid #00B14F}
.ht-chatbox-skin4 .ht-cthreads svg path, .ht-chatbox-skin5 .ht-cthreads svg path{fill:#000000 !important}
.ht-chatbox-skin4 .ht-cthreads svg{border:2px solid #000000}
.ht-chatbox-skin4 .ht-cpin svg path, .ht-chatbox-skin5 .ht-cpin svg path{fill:#BD081C !important}
.ht-chatbox-skin4 .ht-cpin svg{border:2px solid #BD081C}
.ht-chatbox-skin4 .ht-creddit svg path, .ht-chatbox-skin5 .ht-creddit svg path{fill:#FF4500 !important}
.ht-chatbox-skin4 .ht-creddit svg{border:2px solid #FF4500}
.ht-chatbox-skin4 .ht-ctwitch svg path, .ht-chatbox-skin5 .ht-ctwitch svg path{fill:#9146FF !important}
.ht-chatbox-skin4 .ht-ctwitch svg{border:2px solid #9146FF}
.ht-chatbox-skin4 .ht-cspoti svg path, .ht-chatbox-skin5 .ht-cspoti svg path{fill:#1DB954 !important}
.ht-chatbox-skin4 .ht-cspoti svg{border:2px solid #1DB954}
.ht-chatbox-skin4 .ht-csignal svg path, .ht-chatbox-skin5 .ht-csignal svg path{fill:#3A76F0 !important}
.ht-chatbox-skin4 .ht-csignal svg{border:2px solid #3A76F0}
.ht-chatbox-skin4 .ht-cvk svg path, .ht-chatbox-skin5 .ht-cvk svg path{fill:#0077FF !important}
.ht-chatbox-skin4 .ht-cvk svg{border:2px solid #0077FF}

/* ---- New desktop button skins (variants of the Total strip) ---- */
/* Dock — icons inside a rounded dark tray */
.ht-cbx-dock{width:auto !important;background:#2b2b2b;padding:11px 9px;border-radius:32px}
.ht-cbx-dock a:not(:last-child){margin-bottom:10px}

/* Glass — translucent frosted tray */
.ht-cbx-glass{width:auto !important;background:rgba(255,255,255,.2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.4);padding:11px 9px;border-radius:28px}
.ht-cbx-glass a:not(:last-child){margin-bottom:11px}

/* Pill — icon + always-visible name */
.ht-cbx-pill{width:auto !important}
.ht-cbx-pill a{display:flex !important;align-items:center;gap:9px;background:#fff;border-radius:30px;padding:5px 16px 5px 5px;box-shadow:0 2px 8px rgba(0,0,0,.15);width:max-content}
.ht-cbx-pill a span{display:flex !important;position:static !important;margin:0 !important;padding:0 !important;background:none !important;color:#222 !important;font-size:13px;font-weight:600;opacity:1 !important;height:auto !important;border-radius:0 !important;width:auto !important}
.ht-cbx-pill svg{width:38px}

/* Tile — rounded square icons */
.ht-cbx-tile svg{border-radius:14px !important;width:48px}
.ht-cbx-tile a:not(:last-child){margin-bottom:10px}

/* Hexagon — honeycomb, staggered */
.ht-cbx-hexagon svg{border-radius:0 !important;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);width:50px}
.ht-cbx-hexagon a:not(:last-child){margin-bottom:8px}
.ht-cbx-hexagon a:nth-child(even){margin-left:26px}

/* ---- Structural skins: Corner card + Side tab ---- */
/* Corner card */
.ht-chatbox-card .ht-card-panel{background:#fff !important;border-radius:16px;box-shadow:0 12px 34px rgba(0,0,0,.16);overflow:hidden;min-width:262px;padding:0;margin-bottom:14px}
.ht-card-head{background:#1D9E75;padding:14px 16px}
.ht-card-t{display:block;color:#fff;font-size:15px;font-weight:600}
.ht-card-s{display:block;color:rgba(255,255,255,.82);font-size:12px;margin-top:2px}
.ht-chatbox-card .ht-chaton-scroll{padding:8px 6px;max-height:320px}
.ht-chatbox-card .ht-cco{display:flex !important;align-items:center;gap:11px;padding:8px 10px;border-radius:10px}
.ht-chatbox-card .ht-cco:hover{background:#f5f5f5}
.ht-chatbox-card .ht-cco span{color:#333 !important;font-size:14px}
.ht-chatbox-card .ht-cco svg{width:36px;height:36px}

/* Side tab */
.ht-chatbox-sidetab #chatona{position:fixed !important;top:42% !important;bottom:auto !important;background:#1D9E75;border:none;color:#fff;padding:16px 9px;cursor:pointer;writing-mode:vertical-rl;display:flex !important;align-items:center;gap:7px;font-size:14px;font-weight:600;z-index:10150;box-shadow:0 3px 14px rgba(0,0,0,.18);width:auto !important;height:auto !important}
.ht-sidetab-right #chatona{right:0;left:auto !important;border-radius:12px 0 0 12px}
.ht-sidetab-left #chatona{left:0;right:auto !important;border-radius:0 12px 12px 0}
.ht-chatbox-sidetab .ht-sidetab-panel{position:fixed !important;top:38% !important;bottom:auto !important;background:#fff !important;box-shadow:0 8px 30px rgba(0,0,0,.16);padding:10px 8px;min-width:212px;border-radius:12px}
.ht-sidetab-right .ht-sidetab-panel{right:54px;left:auto}
.ht-sidetab-left .ht-sidetab-panel{left:54px;right:auto}
.ht-chatbox-sidetab .ht-cco{display:flex !important;align-items:center;gap:11px;padding:8px 10px;border-radius:10px}
.ht-chatbox-sidetab .ht-cco:hover{background:#f5f5f5}
.ht-chatbox-sidetab .ht-cco span{color:#333 !important;font-size:14px}
.ht-chatbox-sidetab .ht-cco svg{width:34px;height:34px}

/* ---- Structural skins 2: Speed-dial, Avatar, Live-chat, Tab widget ---- */
/* Speed-dial */
.ht-chatbox-speeddial .ht-speeddial-list{margin-bottom:14px}
.ht-chatbox-speeddial .ht-cco{display:flex !important;align-items:center;gap:9px;background:#fff;border-radius:30px;padding:5px 16px 5px 5px;box-shadow:0 2px 8px rgba(0,0,0,.15);margin-bottom:9px;width:max-content;text-decoration:none}
.ht-chatbox-speeddial .ht-cco span{color:#222 !important;font-size:13px;font-weight:600;display:flex !important;position:static !important;background:none !important;opacity:1 !important;padding:0 !important;margin:0 !important;height:auto !important;width:auto !important}
.ht-chatbox-speeddial .ht-cco svg{width:38px}

/* Avatar launcher */
.ht-avatar-btn{overflow:visible !important;position:relative}
.ht-avatar-btn img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.ht-av-dot{position:absolute;right:3px;bottom:3px;width:14px;height:14px;border-radius:50%;background:#2ecc71;border:2px solid #fff}

/* Tabler icon-font glyphs picked for custom channels (nested inside .ht-cco i) */
.ht-cco i .ti{font-size:24px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.ht-chatbox-livechat .ht-cco i .ti,.ht-chatbox-tabwidget .ht-cco i .ti{font-size:30px}
.ht-chatbox-speeddial .ht-cco i .ti{font-size:26px}

/* Live-chat bubble */
.ht-lc-panel{background:#fff !important;border-radius:16px;box-shadow:0 12px 34px rgba(0,0,0,.16);overflow:hidden;min-width:282px;padding:0;margin-bottom:14px}
.ht-lc-head{background:#1D9E75;padding:13px 15px;display:flex;align-items:center;gap:10px}
.ht-lc-av{width:38px;height:38px;border-radius:50%;object-fit:cover;flex-shrink:0;display:block}
.ht-lc-avph{width:38px;height:38px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.22)}
.ht-lc-avph svg{display:block}
.ht-lc-name{display:block;color:#fff;font-size:14px;font-weight:600}
.ht-lc-on{display:block;color:#c9f0e2;font-size:11px}
.ht-lc-body{padding:14px}
.ht-lc-greet{background:#f1f1f4;border-radius:12px;padding:9px 12px;font-size:13px;color:#333;display:inline-block;margin-bottom:10px}
.ht-lc-quick{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.ht-lc-chip{font-size:12px;border:1px solid #1D9E75;color:#0F6E56;border-radius:16px;padding:5px 11px;text-decoration:none}
.ht-lc-channels{display:flex;flex-direction:column;gap:3px}
.ht-chatbox-livechat .ht-cco{display:flex !important;align-items:center;gap:11px;padding:7px 6px;border-radius:10px;text-decoration:none}
.ht-chatbox-livechat .ht-cco:hover{background:#f5f5f5}
.ht-chatbox-livechat .ht-cco span{color:#333 !important;font-size:14px}
.ht-chatbox-livechat .ht-cco svg{width:34px;height:34px}

/* Tab widget */
.ht-tw-panel{background:#fff !important;border-radius:16px;box-shadow:0 12px 34px rgba(0,0,0,.16);overflow:hidden;min-width:272px;padding:0;margin-bottom:14px}
.ht-tw-tabs{display:flex;border-bottom:1px solid #eee}
.ht-tw-tab{flex:1;background:none;border:none;padding:12px 8px;font-size:13px;color:#888;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.ht-tw-tab.active{color:#1D9E75;border-bottom-color:#1D9E75;font-weight:600}
.ht-tw-body{padding:8px 8px 12px;max-height:340px;overflow:auto}
.ht-tw-pane{display:none}
.ht-tw-pane.active{display:block}
.ht-chatbox-tabwidget .ht-cco{display:flex !important;align-items:center;gap:11px;padding:8px;border-radius:10px;text-decoration:none}
.ht-chatbox-tabwidget .ht-cco span{color:#333 !important;font-size:14px}
.ht-chatbox-tabwidget .ht-cco svg{width:34px;height:34px}
.ht-tw-srv{display:flex;align-items:center;gap:11px;padding:9px 8px;border-radius:10px;text-decoration:none;color:#333;font-size:14px}
.ht-tw-srv:hover{background:#f5f5f5}
.ht-tw-ic{width:34px;height:34px;border-radius:9px;background:#eee center/cover no-repeat;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-weight:600;color:#8a5a00}
.ht-tw-let{background:#fff3d6}
.ht-tw-hours{font-size:13px;color:#444;line-height:1.7;padding:6px 4px}

/* Greeting bubble */
.ht-greet-bubble{position:fixed;bottom:92px;max-width:250px;background:#fff;border-radius:14px;box-shadow:0 6px 22px rgba(0,0,0,.16);padding:12px 32px 12px 14px;z-index:10140;font-size:14px;color:#333;line-height:1.5;animation:htgreetin .3s ease}
.ht-greet-bubble p{margin:0}
.ht-greet-right{right:20px}
.ht-greet-left{left:20px}
.ht-greet-x{position:absolute;top:5px;right:8px;background:none;border:none;font-size:18px;color:#aaa;cursor:pointer;line-height:1;padding:0}
@keyframes htgreetin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Scan-to-open QR popover */
.ht-qr-modal{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:100300;display:flex;align-items:center;justify-content:center}
.ht-qr-box{position:relative;background:#fff;border-radius:16px;padding:24px 26px;text-align:center;box-shadow:0 12px 40px rgba(0,0,0,.28)}
.ht-qr-title{font-size:15px;font-weight:600;color:#222;margin-bottom:14px;max-width:220px}
.ht-qr-canvas{display:inline-block}
.ht-qr-canvas img,.ht-qr-canvas canvas{display:block}
.ht-qr-sub{font-size:13px;color:#888;margin-top:14px}
.ht-qr-x{position:absolute;top:8px;right:11px;background:none;border:none;font-size:22px;color:#aaa;cursor:pointer;line-height:1;padding:0}
.ht-lc-off{display:block;font-size:11px;color:#ffd9d9}