/*
Theme Name: shoptheme
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/


:root{

    --bg-base:#e4e7ec;

    --shadow: 0px 1px 7px #0000004a;

    --color-base:#1A1A1A;

    --color-hover:#00AEEF;

    --color-xam:#808080;

    --color-xamnhat:#eee;

    --color-ghi:#ccc;

    --color-white:#fff;

    --color-black:#000;

    --color-brand:#00AEEF;

    --color-blue: #00579E;

    --color-green: #b8ff2f;

    /* --color-gra:linear-gradient(55deg, #9A49FF -2.31%, #E36EE8 62.11%, #FFD2E3 103.26%); */

    --color-gra:linear-gradient(19deg, rgba(0, 174, 239, 1) 0%, rgba(0, 87, 158, 1) 100%);


}
/*custom scrool*/
/* width */
html::-webkit-scrollbar {
  width: 10px;
}
/* Track */
html::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;
}
/* Handle */
html::-webkit-scrollbar-thumb {
  background: var(--color-gra); 
  border-radius: 10px;
}
/* Handle on hover */
html::-webkit-scrollbar-thumb:hover {
  background: var(--color-input); 
}
/*end custom scrool*/

body, #main, #wrapper{

    background-color: var(--bg-base);

}


h1{

    font-size: 24px;

    line-height: 1.3em;

}

h2{

    font-size: 20px;

    line-height: 1.3em;

}

h3{

    font-size: 18px;

    line-height: 1.3em;
}

h4{

    font-size: 16px;

    line-height: 1.3em;

}

h5{

    font-size: 14px;

    line-height: 1.3em;

}

div, p, span, a, li, option{

    font-size: 16px;

    line-height: 1.3em;

}

strong{

    font-size: 16px;

    line-height: 1.3em;

}


#backtop {
    position: fixed;
    bottom: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    border: none;
    outline: none;
    background-color: var(--color-white);
    box-shadow: var(--shadow);
    color: var(--color-base);
    cursor: pointer;
    border-radius: 100%;
    z-index: 2;
    text-align: center;
    line-height: 40px;
    justify-content: center;
    align-items: center;
    padding: 0;
}


@keyframes popup {
    from {
        filter: grayscale(1);
        opacity: 0;
    }

    to {
        filter: grayscale();
        opacity: 1px;
    }
}
.foxsmouse {
    position: fixed;
    top: 0;
    left: 0;
    padding: 0;
    margin: 0;
    z-index: 9999;
    pointer-events: none;
}

.context-menu {
    display: none;
    position: absolute;
    background-color: var(--color-white);
    padding: 15px;
    z-index: 9999;
    border-radius: 10px;
    width: 200px;
    box-shadow: 0px 0px 7px #00000038;
    animation: popup 0.5s;
}

.context-menu button {
    border: none;
    width: 100%;
    background: none;
    text-align: left;
    padding: 0px;
}
#contextMenu ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
#contextMenu ul li {
    padding: 5px 20px;
    margin-bottom: 0;
}

#contextMenu ul li:hover {
    background: var(--color-xamnhat);
    padding: 5px 20px;
    border-radius: 7px;
}

#contextMenu ul li i {
    margin-right: 7px;
    color: var(--color-brand);
}
#contextMenu ul li i {
    margin-right: 7px;
    background: var(--color-brand);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
#contextMenu ul.menu-lh {
    border-top: 2px dashed var(--menu-ghi,#ccc);
    padding-top: 10px;
    margin-top: 10px;
}
/*  chat giả lập */

/* CSS doan chat gia tao */
.intro-container {
    position: fixed;
    left: 10px;
    bottom: 10px;
    width: 350px;
    border-radius: 10px;
    z-index: 2;
    box-shadow: 0px 0px 10px #00000052;
	-webkit-animation: duoilen 2s ease forwards;
	animation: duoilen 2s ease forwards;
}
@media (max-width: 800px){
	.intro-container {display:none;}
}
@keyframes duoilen{
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
@-webkit-keyframes duoilen{
  from {
    -webkit-transform: translateY(100%);
  }
  to {
    -webkit-transform: translateY(0);
  }
}

.intro-container {
    position: fixed;
    left: 10px;
    bottom: 10px;
    width: 350px;
    border-radius: 10px;
    z-index: 2;
    box-shadow: 0px 0px 10px #00000052;
    -webkit-animation: duoilen 2s ease forwards;
    animation: duoilen 2s ease forwards;
}

.intro-container-tit{
  padding:10px 15px;
  color:var(--color-white,#fff);
  font-weight:bold;
  display:flex;
  background: var(--color-gra);
  border-radius: 10px 10px 0px 0px;
}
.intro-container-tit span{
	display:block;
	width: 90%;
}
.intro-container-tit span{
	display: flex;
    align-items: center;
}

.intro-container .intro-container-tit button{
	width:36px;
	height:30px;
	background:var(--color-white,#fff);
	color:var(--color-brand);
	line-height:30px;
	text-align:center;
	border-radius:100%;
    margin: 0;
    padding: 0;
    cursor: pointer;
}
.intro-container .intro-ms{
  background:var(--color-white,#fff);
  width:100%;
  padding:10px;
  border:none;
  font-weight:bold;
  border-radius: 0px 0px 10px 10px;
  border-top:2px dashed var(--color-ghi,#ccc);
}
.intro-container .intro-ms i{
   margin-right:7px;
   background: var(--color-gra);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}
.intro-message-box {
    display: block;
    background: var(--color-white,#fff);
    padding: 15px;
    font-size: 15px;
}
.intro-message-chat{
	display:flex;
}
.intro-message-chat img{
	width:40px;
	height:40px;
	border-radius:100%;
	margin-right:15px;
}
.intro-message-chat div{
	background:var(--color-xamnhat,#eee);
	border-radius:10px;
	width:100%;
	padding:10px;
}
.intro-message-box {
    display: block;
    background: var(--color-white,#fff);
    padding: 15px;
	font-size:15px;
}
#intro-message{
	position:relative;
}
#intro-message::after {
    content: "";
    display: block;
    position: absolute;
    top: 4px;
    left: -8px;
    border-style: solid;
    height: 0px;
    width: 0px;
    z-index: 3;
    border: 10px solid transparent;
    border-left-width: 0px;
    border-right-color: var(--color-xamnhat,#eee);
}