/**
 * @Project TMS HOLDINGS
 * @Author TMS Holdings <contact@tms.vn>
 * @Copyright (C) 2021 TMS Holdings. All rights reserved
 * @License GNU/GPL version 2 or any later version
 * @Createdate Wed, 12 May 2021 01:19:49 GMT
 */
 
.modal-dialog {width: 100%;max-width:1000px; margin: 30px auto;}
.modal-lock {position: absolute;right: -10px; background: #fffefe99;top: -10px; padding-top: 1px; width: 30px;padding-left: 6px;-webkit-border-radius: 100%; font-size: 20px; height: 30px;}

#social{margin:auto;margin-top:10px;    position: relative; width:100%; max-width:1000px}
#social_write{}
.social_write_footer{ position: relative;margin-bottom: 10px; margin-top:20px;display: block;background: #fff;  text-align: center;}
.social_write_huy {width:80px;height: 30px; background-color: #40b603;border-radius: 5px;border: 1px solid #40b603;color: #ffffff;-webkit-transition: all 0.5s ease;transition: all 0.5s ease;font-size:12px;font-weight: 600;}
.social_write_submit {width:80px;height: 30px; background-color: #0389c9;border-radius: 5px;border: 1px solid #0389c9;color: #ffffff;-webkit-transition: all 0.5s ease;transition: all 0.5s ease;font-size:12px;font-weight: 600;}
/** TOP **/
#social_top {position: relative;margin-bottom: 10px;padding: 5px;display: block;background: #fff;border: 1px solid #ececec;border-radius: 10px;}
.social_top_bg{height:250px; border: 1px solid #ececec;border-radius: 10px;background: #f2f2f2;background-size: cover;background-repeat: no-repeat;background-position: center center;}
.social_top_text {position: absolute;left: 40px;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);background-color: #ffffff;border-radius: 5px; text-align:center;padding: 10px;width: 200px;-webkit-box-shadow: 0px 5px 20px 0px rgb(0 0 0 / 2%); box-shadow: 0px 5px 20px 0px rgb(0 0 0 / 2%);}
.social_top_img {margin-top: 10px;width: 70px; height: 70px;border-radius: 100%;text-align:center;display: inline-block;}
.social_top_img img {    height: 100%;
    border-radius: 100%;
    width: 100%;
    text-align: center;
    object-fit: cover;}
.social_top_info{font-size:12px;text-align:center;display: inline-block;}
.social_top_info span{float:left; text-align:center;padding:5px;}
.social_top_join{text-align:center;display: inline-block;}
.social_top_btn {background-color: #0389c9;border-radius: 5px;border: 1px solid #0389c9;color: #ffffff;-webkit-transition: all 0.5s ease;transition: all 0.5s ease;padding: 7px 20px;text-transform: capitalize;font-size: calc(11px + (12 - 11) * ((100vw - 320px) / (1920 - 320)));font-weight: 600;}



/** TOP **/
#social_info {position: relative;margin-bottom: 10px;padding: 5px;display: block;background: #fff;border: 1px solid #ececec;border-radius: 10px;}
#social_info .nav { display: block; width: 100%;text-align: center;right: 0;left: 0; border-bottom: none !important; padding-left: 0;list-style: none;}
.activebv,.activebv a{border-radius: 10px; color: #fff!important;background-color: #40b603;float:right!important}
.nav>li.active>a, .nav>li.active>a:hover, .nav>li.active>a:focus{color: #fff;background-color: #dc3118;}
.nav>li>a:hover, .nav>li>a:focus {text-decoration: none;color: #fff;background-color: #dc3118;}

/** social_body **/
.social_body{position: relative;margin-bottom: 10px;padding: 5px;display: block;background: #fff;border: 1px solid #ececec;border-radius: 10px;}
.social_body_info{margin-bottom: 10px;display: inline-block; width: 100%;position: relative;border-bottom: 1px solid #f2f2f2;font-size:12px;color: #9b9b9b; padding-bottom:5px; }
.social_body_info img{height:50px; width:50px; float:left;border-radius: 100%;    border: 2px solid #e2e2e2;margin-right:10px;}
.social_body_ul{position: relative;margin-bottom: 10px;    background: #f0f0f0;padding-top: 5px;display: block;border: 1px solid #f2f2f2;border-radius: 5px;display: inline-block;width:100%; margin-top:5px;}
.social_body_ul ul {margin:0; padding:0;}
.social_body_ul ul li{float:left; padding:0px 10px 0px 10px;color: #4f4f4f;}
.social_body_ul ul li a {display: block;cursor: pointer;color: #4f4f4f;font-size: 16px;}
/** social_list_cmt **/
.social_list_cmt{position: relative;margin-bottom: 10px;display: block;}
.social_cmt_user{position: relative;width:50px; height:50px; float:left}
.social_cmt_user img{height:50px; width:50px; float:left;border-radius: 100%;    border: 2px solid #f2f2f2;margin-right:10px;}
.social_cmt_arrow {top: 10px;margin-left: -25px;position: absolute;z-index: 1; width: 0;height: 0; border-left: 10px solid transparent;border-right: 10px solid #f2f2f2;border-bottom: 10px solid transparent;border-top: 10px solid transparent;}
.social_cmt_arrow_top {top: -20px; position: absolute;z-index: 1;text-align: center; left: 10px;right: 0;width: 0;height: 0;
border-left: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 10px solid #f2f2f2;border-top: 10px solid transparent;}
.social_cmt_share{position: relative;display: block;}
.social_cmt_content{margin-left:60px;position: relative;margin-bottom: 10px;padding: 5px;display: block;background: #fff;border: 1px solid #f2f2f2;border-radius: 10px;}
.social_cmt_reply{margin-left:60px;position: relative;margin-bottom: 10px;padding: 5px;display: block;background: #fff;}
.social_no_join {width:100px;height: 30px; background-color: #40b603;border-radius: 30px;border: 1px solid #40b603;color: #ffffff;-webkit-transition: all 0.5s ease;transition: all 0.5s ease;font-size:12px;font-weight: 600;}
.social_join {width:100px;height: 30px; background-color: #0389c9;border-radius: 30px;border: 1px solid #0389c9;color: #ffffff;-webkit-transition: all 0.5s ease;transition: all 0.5s ease;font-size:12px;font-weight: 600;}

ul.tms_url{margin:0; padding:0; width:100%;    display: inline-block; }
ul.tms_url li{float:left; padding:0px 10px 0px 10px;color:#797979;font-size:12px;}
ul.tms_url li a{color:#797979;font-size:12px;cursor: pointer;}



.tms_csmain_list{width:100%;margin-bottom: 5px;padding-bottom:5px; display: inline-block;border-bottom: 1px solid #f2f2f2; }
.tms_cs_list{width:100%;margin-bottom: 5px;padding-bottom:5px; display: inline-block;}
.tms_cs_list_stt{float:left;width: 25px;height: 60px;color: #1e1e1e;font-size: 18px;font-weight: 600;padding-top: 20px;margin-right:3px;}
.tms_cs_list_img{position: relative;background-color: #fff; width: 60px;height: 60px;-webkit-transition: box-shadow 0.2s;-moz-transition: box-shadow 0.2s; transition: box-shadow 0.2s; float:left; margin-right:5px;border: 2px solid #e2e2e2; -webkit-border-radius: 10px;}
.tms_cs_list_img img {height: 100%;width: 100%; object-fit: cover;-webkit-border-radius: 10px; }
.tms_cs_list_text {padding: 5px;text-align: left;}
.tms_cs_list_text a {color: #1e1e1e;font-size: 18px;font-weight: 600; }
.tms_cs_list_top{text-align: center;font-size: 14px; background:#7eb440;color: #ffffff; height: 20px;width: 20px;font-weight: 600;position: absolute;z-index: 1;top: 0px; left: -5px; -webkit-border-radius: 100%;}
#social_detail{margin-bottom:10px; background:#fff;border-radius: 10px;}
#social_detail a{color:#428bca;}
.social_detail_description img{max-width:100%; width:auto; height:auto}
.social_detail_description ul{display: inline-block;padding: 0;margin-left:20px;width: 100%; margin-bottom:10px}
.social_detail_description ul li{list-style: circle; float: left;width: 100%;margin-bottom: 3px;}
.gif_item{position: relative;margin-bottom: 10px;background: #fff;overflow: hidden;border: 1px solid #ececec; min-height: 270px;   border-radius: 10px;}
.gif_item:hover {box-shadow: 0 0 15px #fff;}	
.gif_item_img{background-color: #fff; width: 100%;height: 140px;display: inline-block; -webkit-transition: box-shadow 0.2s;-moz-transition: box-shadow 0.2s; transition: box-shadow 0.2s;}
.gif_item_img img {height: 100%;width: 100%; object-fit: cover; }
.gif_item_text {padding: 5px;text-align: center;}
.gif_item_text a {color: #1e1e1e;font-size: 14px;font-weight: 500;}

.social_cmt_body {width: 100% !important;height: auto;overflow: auto;}
.social_cmt_input {width: 85% !important;height: auto;float: left;}
.social_icon{float:right;background-color:#f2a313;border-radius: 100px;width: 33px;height: 33px; color: #fff !important;padding: 5px 9px;}
.social_btn_sent{float: right; background-color: #1c6ab5; border-radius: 100px;width: 33px;height: 33px;color: #fff !important; margin-left: 5px;cursor: pointer;border: 0; padding: 2px 6px;}
.load_more_comment{width:100%;display: inline-block;}
.social_cmt_more{float: left; background-color: #ffb817;border-radius: 100px;font-size: 10px;color: #f00 !important;cursor: pointer; border: 0;padding: 2px 6px;}
.social_cmt_more_right{float: right; background-color: #ffb817;border-radius: 100px;font-size: 10px;color: #f00 !important;cursor: pointer; border: 0;padding: 2px 6px;}

.emotion-area {box-shadow: 1px 1px 1px 1px #333;bottom: 100px; padding:10px;position: absolute;width: 200px; flex-wrap: wrap;overflow-y: scroll;height: 110px;background-color: #fff;display: none;z-index: 10;right: 0;}
.ShowImotion{display: block;}


 .msgbox {
 	box-shadow: 1px 1px 1px 1px #333;
 	bottom: 0;
 	width: 100%;
 	flex-wrap: wrap;
 	overflow-y: scroll;
 	height: 110px;
 	background-color: #fff;
 	display: none;
 	position: relative;
 	z-index: 10;
 	right: 15px;
 }