:root{
	--gradient: -webkit-linear-gradient(31deg, #247BFF 0, #01BAFA 100%);
	--button: #0190f3;
	--bg: #e4e8f2;
}

html, body { font-family: Helvetica, Arial, sans-serif; font-size:16px; line-height:1.5em; position:relative; overflow-x:hidden; }
/* body { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } */
.container { text-align:center; }
.container .boundary { width:96%; max-width:500px; }
h1, h2, h3, h4 {font-family:inter, sans-serif;}

/* remove blue color on chrome autocomplete */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-background-clip: text;
  transition: background-color 5000s ease-in-out 0s;
}
/* /remove blue color on chrome autocomplete */

.button { width:100%; height:44px; line-height:44px; margin-top:1em; font-size:.875rem; background-color:var(--button); border-radius:5px; padding:0 20px!important; }

.form-input { display:flex; width:100%; height:38px; padding:5px 0; box-sizing:border-box; border-bottom:1px solid #ecedf0; align-items:center; margin-bottom:20px; }
.form-input .textbox { background:unset; border:unset; height:28px; margin:0; border-radius:0!important; box-shadow:unset!important; font-size:.875rem;  color:#000000!important; }
.form-input i { display:inline-block; height:28px; line-height:26px; font-size:.7em; color:#666;  }
.form-input .select-flag .tf { display:inline-block; position:relative; width:70px; box-sizing:border-box; height:28px; line-height:28px; padding:0 25px 0 5px; }
.form-input .select-flag .tf:before { position: absolute; top: 12px; right: 5px; content: ""; height: 0; width: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #888; }
.form-input .select-flag .dropdown-flag { display:none; width:auto; height:auto; max-height:230px; overflow-y:auto; position:absolute; top:28px; background-color:#FFF; border:1px solid #DDD; }
.form-input .select-flag .dropdown-flag ul { list-style-type:none; margin:0; padding:0; white-space:nowrap; display:flex; flex-direction:column; }
.form-input .select-flag .dropdown-flag ul li { padding:8px 10px; }
.form-input .select-flag .dropdown-flag ul li.selected { border-bottom:1px solid #DDD; }
.form-input .select-flag .dropdown-flag ul li strong { font-weight:normal; display:inline-block; max-width:200px; overflow:hidden; text-overflow:ellipsis; vertical-align:middle; }
.form-input .select-flag .dropdown-flag ul li em { color:#666; }

a {color:inherit;}

.form-message { background-color: var(--yellow-light); color: #333; border-color: var(--yellow-light); }
.form-error-message { background:unset!important; border:unset!important; padding:5px 0; color:#F00!important; font-size:.8em; font-style:italic; margin-bottom:10px; }

.textbox, .selection { background-color: #FFF; box-shadow:0 0 .5px #ddd; border-radius:5px!important; height:38px; color:#000; margin-bottom:1em; }
.textbox[readonly] { background-color:#FFF!important; color:#AAA!important; }
.button { margin:0; text-transform:unset!important; width:100%; height:44px; background-color:#0B6BCB; border:0; }
.button:hover { background-color:#999; }
.button:disabled { background-color:#666!important; color:#BBB!important; }
.button.purple { background-color:var(--purple); border-radius:5px; }
.button.light {background-color:#d3e1ff; color:#000!important; margin-bottom:1em; }
label { font-size:.9em!important; }
label span { color:#F00; }

.textbox.min { width:calc(100% - 68px); margin-right:10px; }
.square-button { display:inline-block; width:58px; height:58px; box-sizing:border-box; border-radius:5px; border:1px solid #DDD; line-height:58px; text-align:center; }

.loader {
	display:inline-block; margin-right:10px; vertical-align:middle;
	width: 10px;
	aspect-ratio: 1;
	border-radius: 50%;
	border: 8px solid #0190f3;
	animation:
	l20-1 0.8s infinite linear alternate,
	l20-2 1.6s infinite linear;
}
@keyframes l20-1{
   0%    {clip-path: polygon(50% 50%,0       0,  50%   0%,  50%    0%, 50%    0%, 50%    0%, 50%    0% )}
   12.5% {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100%   0%, 100%   0%, 100%   0% )}
   25%   {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100% 100%, 100% 100%, 100% 100% )}
   50%   {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100% 100%, 50%  100%, 0%   100% )}
   62.5% {clip-path: polygon(50% 50%,100%    0, 100%   0%,  100%   0%, 100% 100%, 50%  100%, 0%   100% )}
   75%   {clip-path: polygon(50% 50%,100% 100%, 100% 100%,  100% 100%, 100% 100%, 50%  100%, 0%   100% )}
   100%  {clip-path: polygon(50% 50%,50%  100%,  50% 100%,   50% 100%,  50% 100%, 50%  100%, 0%   100% )}
}
@keyframes l20-2{ 
  0%    {transform:scaleY(1)  rotate(0deg)}
  49.99%{transform:scaleY(1)  rotate(135deg)}
  50%   {transform:scaleY(-1) rotate(0deg)}
  100%  {transform:scaleY(-1) rotate(-135deg)}
}

.jBox-Notice .jBox-container { background-color:PapayaWhip!important; }

.jBox-Tooltip .jBox-title { font-weight:400!important; }

/* loading effect */
.css-cvm7tb {
	position: fixed;
	/* display: flex; */
	display:none; 
	-webkit-box-align: center;
	align-items: center;
	-webkit-box-pack: center;
	justify-content: center;
	inset: 0px;
	-webkit-tap-highlight-color: transparent;
	background-color: rgba(255, 255, 255, 0.5);
}
.css-13o7eu2 {
	display: block;
}
.css-79elbk {
	position: relative;
}
.css-liiq10 {
	display: inline-block;
	color: rgb(238, 238, 238);
	transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.css-1ayyxhp {
	display: inline-block;
	animation: 550ms linear 0s infinite normal none running animation-61bdi0;
	color: rgb(74, 33, 239);
	position: absolute;
	left: 0px;
}
.css-1ayyxhp .MuiCircularProgress-circle {
	stroke-linecap: round;
}
.css-1ayyxhp .MuiCircularProgress-circle {
	stroke-linecap: round;
}
.css-1aw1elk {
	stroke: currentcolor;
	stroke-dasharray: 80px, 200px;
	stroke-dashoffset: 0;
}
@keyframes animation-61bdi0 {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
/* loading effect */


.active-content { position:fixed; background-color:rgba(255,255,255,.7); top:50%; left:50%; width:90%; height:auto; transform:translate(-50%, -50%); z-index:10; background-color:#FFF; border:5px solid #F00; color:#F00; font-size:1.4em; display: flex; flex-direction: column; align-items: center; justify-content:center; box-sizing:border-box; padding:30px 10px; }
.active-content:after { content:''; display:block; width:calc(100% + 16px); height:calc(100% + 16px); position:absolute; top:-8px; left:-8px; border:2px solid #F00; box-sizing:border-box; }
.active-content img { width:100px; height:auto; transform:scaleX(-1) }

.zalo-app.lock .zalo-top, .zalo-app.lock .zalo-content { pointer-events:none; }
.zalo-app .boundary { box-shadow:0 0 5px #666; width:100%; }

.zalo-app .zalo-top, .zalo-app .zalo-footer { padding:5px 10px; box-sizing:border-box; }

.zalo-app .zalo-top { background:var(--gradient); color:#FFF; display:flex; flex-direction:row; align-items:center; height:42px; }
.zalo-app .zalo-top .textbox { border:unset; background:unset; margin:0; border-radius:unset!important; height:auto; }
.zalo-app .zalo-top .textbox::placeholder { color:rgba(255,255,255, .6); }
.zalo-app .zalo-top i { font-size:1.7em; }
.zalo-app .zalo-top i.icon-search1 { font-size:2em; }

.zalo-app .zalo-top .member-name { flex:1; oveflow:hidden; text-overflow:ellipsis; box-sizing:border-box; padding-left:10px; }
.zalo-app .zalo-top img { display:inline-block; height:28px; width:auto; margin-left:10px; vertical-align:middle; }

.zalo-ico { display:inline-block; width:25px; height:25px; background:url(../images/zalo-icos.png) top left no-repeat; background-size: auto 200%; }
.zalo-ico.active { background-position-y:100%; width:30px; height:30px; }
.zalo-ico.contacts { background-position:20% 0; }
.zalo-ico.discovery { background-position:40% 0; }
.zalo-ico.diary { background-position:60% 0; }
.zalo-ico.personal { background-position:80% 0; }
.zalo-ico.personal-plus { background-position:97% 0; }

.zalo-content .zalo-content-tab { display:block; border-bottom:1px solid #DDD; padding:0 10px; box-sizing:border-box; height:50px; line-height:50px; }
.zalo-content .zalo-content-tab .tab-item { display:inline-block; padding:0 10px; line-height:48px; vertical-align:bottom; border-bottom:2px solid transparent; font-weight:bold; color:#666; }
.zalo-content .zalo-content-tab .tab-item.active { color:#000; border-color:#000; }

.zalo-content .zalo-content-tab .filter-ico { float:right; height:30px; width:30px; margin-top:9px; background:url(../images/filter-ico.jpg) top left no-repeat; background-size:100%; }

.zalo-content .zalo-content-list { height:calc(100dvh - 163px); overflow-y:auto; position:relative; display:flex; flex-direction:column; }
.zalo-app .zalo-content .loading { margin-top:auto; text-align:center; height:50px; width:100%; }

.zalo-content .zalo-content-list .content-item { border-bottom:1px solid #DDD; display:flex; flex-direction:row; flex-wrap:nowrap; padding:10px; }
.zalo-content .zalo-content-list .content-item:hover { background-color:var(--bg); }
.zalo-content .zalo-content-list .content-item .circle-image { width:50px; height:50px; }
.zalo-content .zalo-content-list .content-item .content-item-body { display:flex; flex:1; flex-direction:column; padding-left:10px; justify-content:center; }

.zalo-content .zalo-content-list .content-item .content-item-name span { float:right; font-size:.8em; color:#999; position:relative; }
.zalo-content .zalo-content-list .content-item .content-item-name span span { position:absolute; display:inline-block; width:20px; height:20px; line-height:20px; text-align:center; border-radius:100%; background-color:#F00; color:#FFF; top:110%; right:0; }
.zalo-content .zalo-content-list .content-item .content-item-name img { width:auto; height:30px; float:right; mix-blend-mode:multiply; }

.zalo-content .zalo-content-list .content-item .content-item-content { display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; color:#999; overflow:hidden; font-size:.9em; }

.zalo-content .zalo-chat-list { height:calc(100dvh - 109px); overflow-y:auto; display:flex; flex-direction:column; align-items:start; background-color:var(--bg); padding-bottom: 20px; box-sizing: border-box; }
.zalo-content .zalo-chat-list .chat-item { display:flex; flex-direction:row; align-items:center; width:100%; padding:10px 10px 0; box-sizing:border-box; position:relative; justify-content:right; }
.zalo-content .zalo-chat-list .chat-item.friend { padding-left:70px; justify-content:left; }
.zalo-content .zalo-chat-list .chat-item .circle-image { position:absolute; top:10px; left:10px; width:50px; height:50px; }
.zalo-content .zalo-chat-list .chat-item .chat-item-content { background-color:#d4f1ff; box-shadow:0 0 1px #666; border-radius:10px; box-sizing:border-box; min-height:50px; padding:10px; max-width:80%; position:relative; }
.zalo-content .zalo-chat-list .chat-item.friend .chat-item-content { background-color:#FFF; }

.zalo-content .zalo-chat-list .chat-item .chat-item-content img { max-width:100%; height:auto; }

.zalo-content .zalo-chat-list .chat-item .chat-item-content .chat-control { position:absolute; top:5px; right:calc(100% + 10px); }
.zalo-content .zalo-chat-list .chat-item.friend .chat-item-content .chat-control { left:calc(100% + 10px); right:unset; }

.zalo-content .zalo-chat-list .chat-item .chat-item-content .chat-item-call { color:#666; }
.zalo-content .zalo-chat-list .chat-item .chat-item-content .chat-item-call strong { display:block; }
.zalo-content .zalo-chat-list .chat-item .chat-item-content .chat-item-call strong.red { color:#F00; }
.zalo-content .zalo-chat-list .chat-item .chat-item-content .chat-item-call img { display:inline-block; width:20px; height:auto; vertical-align:middle; }
.zalo-content .zalo-chat-list .chat-item .chat-item-content .chat-item-call.record {white-space:nowrap; }
.zalo-content .zalo-chat-list .chat-item .chat-item-content .chat-item-call.record img { width:170px; margin-bottom:-20px; }
.zalo-content .zalo-chat-list .chat-item .chat-item-content .chat-item-call.record .chat-item-call-record {display: inline-block; margin-left: 70px; font-size: .8em; margin-top: -50px; }
.zalo-content .zalo-chat-list .chat-item .chat-item-content .chat-item-call .icon-bullhorn { display:inline-block; margin-top:15px; margin-right:10px; font-size:1.1em; }
.zalo-content .zalo-chat-list .chat-item .chat-item-content .chat-item-call .chat-item-call-loading { font-size:.9em; color:#000; display:none; }

.zalo-footer { display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:space-around; align-items:end; background-color:#FAFAFA; padding-top:10px!important; box-shadow:0 0 1px #666; }
.zalo-footer .zalo-footer-bt { text-align:center; }
.zalo-footer .zalo-footer-bt .zalo-footer-bt-text { display:block; color:#FFF; font-size:.8rem; font-weight:bold; margin-top:-5px; }
.zalo-footer .zalo-footer-bt:hover .zalo-footer-bt-text, .zalo-footer .zalo-footer-bt.active .zalo-footer-bt-text { color:var(--button); }
.zalo-footer .zalo-footer-bt:hover .zalo-ico, .zalo-footer .zalo-footer-bt.active .zalo-ico { width:30px; height:30px; background-position-y:100%; }

@media (min-width:576px){
	
	
}

@media (min-width:768px){
	
	
}

@media (min-width:996px){
	
	
}

@media (min-width:1200px){
	
	
}

@media(min-width:1400px){
	
}

@media (min-width:1600px){
	
}