@charset "utf-8";
/* CSS Document */

@font-face
{
    font-family: SFUTG;
    src: url(http://k14.vcmedia.vn/web_font/SFUTG.ttf);   
}

.wca-profile-embed-wrapper {
	width: 600px;
	margin: 30px auto 50px;
}

.wcapew {	
	border: 3px solid #ff947c;
	background: #e76d51;	
}

.wcape-info {
	padding: 10px 20px;
}

.wcapei-ava {
	display: block;
	width: 90px;
	height: 90px;
	float: left;
	margin-right: 15px;
}

.wcapei-ava img {
	display: block;
	width: 90px;
	height: 90px;
	border-radius: 100%;
}

.wcapei-text {
	margin-left: 105px;
	text-align: left;
}

.wcapei-name a {
	font-family: SFUTG;
	font-size: 32px;
	color: #fff;
	text-transform: uppercase;
	text-decoration: none;	
	display: inline-block;
	margin-bottom: 10px;
}

.wcapei-cat {
	padding-top: 10px;
	position: relative;
	font-family: SFD-Bold;
	font-size: 14px;
	line-height: 18px;
	color: #fff;
	text-transform: uppercase;
	width: 220px;
}

.wcapei-cat:before {
	display: block;
	width: 30px;
	height: 2px;
	background: #fff;
	position: absolute;
	top: 0;
	left: 0;
	content: '';
}

.wcape-vote {
	float: right;
	padding: 25px;
	padding-left: 0;
}

.wcapev-btn-vote {
	display: inline-block;
	padding: 0 15px;
	height: 46px;
	border: 2px solid #fff;
	font-family: SFD-Bold;
	font-size: 20px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
	line-height: 45px;	
	transition: background 0.3s;
	-webkit-transition: background 0.3s;
	-moz-transition: background 0.3s;
	position: relative;
	overflow: hidden;
	backface-visibility: hidden;
}

.wcapev-btn-vote i {
    font-style: normal !important;
}

.pending .wcapev-btn-vote, .pending .wcapev-btn-vote:hover {
	background: #272c2f;
	border-color: #272c2f;
	color: #fff;
}

.voted .wcapev-btn-vote, .voted .wcapev-btn-vote:hover {
	background: #9ad0cd;
	border-color: #9ad0cd;
	color: #fff;
	cursor: default;
}

.pending .wcapev-btn-vote span i, .voted .wcapev-btn-vote span i {
	display: none;
}

.pending .wcapev-btn-vote span b {
	display: block;
	height: 100%;
	padding-left: 40px;
	background: url(/web_images/wca-mobile-confirm-icon.gif) left center no-repeat;
	background-size: 26px;
}

.voted .wcapev-btn-vote span b {
	display: block;
	height: 100%;
	padding-left: 40px;
	background: url('/web_images/wca-embed-voted-icon.png') left center no-repeat;
	background-size: 26px;
}

.wcapev-btn-vote:before {
	display: block;
	width: 100%;	
	height: 100%;
	position: absolute;
	top: 100%;
	left: 0;
	content: '+1';
	transition: transform 0.3s;
	-webkit-transition: transform 0.3s;
	-moz-transition: transform 0.3s;
	text-align: center;
	font-size: 30px;
	font-family: Arial;
    font-weight: bold;
}

.wcapev-btn-vote:hover {
	background: #fff;	
	color: #e76d51;
}

.pending .wcapev-btn-vote:before, .voted .wcapev-btn-vote:before {
	display: none;
}

.pending .wcapev-btn-vote {
	padding: 0 10px 0 12px;
	overflow: visible;
	cursor: default;
}

.wcapev-btn-vote span {
	display: block;
	width: 100%;
	height: 100%;
	transition: transform 0.3s;
	-webkit-transition: transform 0.3s;
	-moz-transition: transform 0.3s;
}

.wcapev-btn-vote:hover span, .wcapev-btn-vote:hover:before {
	transform: translateY(-100%);
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
}

.pending .wcapev-btn-vote:hover span, .pending .wcapev-btn-vote:hover:before, .voted .wcapev-btn-vote:hover span, .voted .wcapev-btn-vote:hover:before {
	transform: translateY(0);
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
}

.pending .wcapev-btn-vote:after {
    display: block;
    width: 210px;
    background: rgba(0,0,0,0.8);
    font-family: Arial;
    font-size: 14px;
    text-align: center;
    font-weight: bold;
    color: #fff;
    content: 'Bạn hãy xác nhận bình chọn tại app đọc tin Kenh14';
    text-transform: none;
    border-radius: 4px;
    position: absolute;
    bottom: 100%;
    right: -2px;
    padding: 5px;
    line-height: 24px;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
	letter-spacing: 0;
}

.pending .wcapev-btn-vote:hover:after {
    bottom: 130%;
    visibility: visible;
    opacity: 1;
}

.wcape-footer-logo {
	display: block;
	float: right;
	margin-top: 10px;
	padding-left: 26px;
	background: url(/web_images/wca-embed-footer-logo.png) left center no-repeat;
	background-size: 18px;
	font-size: 12px;
	color: #999;
	text-transform: uppercase;
	text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
}

.wcape-footer-logo:hover {
	color: #888;
}



/* ----------------------------------- WCA EMBED SLIDE ---------------------------------- */

.wca-profile-embed-slide {
	overflow: hidden;
}

.wcapes-header {
	height: 50px;
	background: #3c4347;
}

.wcapes-header span {
	display: block;
    height: 100%;
    padding-left: 50px;
    background: url(/web_images/wca-embed-slide-logo.png) left center no-repeat;
    background-size: 40px;
    font-family: SFD-Bold;
    font-size: 18px;
    text-transform: uppercase;
    color: #fff;
    line-height: 48px;
    margin-left: 15px;
    text-align: left;
}

.wcapes {	
	background: #e76d51;
	color: #fff;
	text-align: left;
}

.wcapes-content {
	padding: 15px;
}

.wcapes-ava {
	display: block;
	width: 150px;
	height: 150px;
	float: left;
	margin-right: 15px;
}

.wcapes-ava img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 100%;
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
}

.wcapes-info {
	margin-left: 165px;
}

.wcapes-name a {
	font-family: SFUTG;
	font-size: 40px;
	text-decoration: none;
	text-transform: uppercase;
	color: #fff;
}

.wcapes-specialize {
	margin-top: 8px;
	padding-bottom: 15px;
	position: relative;
	font-family: SFD-Regular;
	font-size: 18px;
	text-transform: uppercase;	
	margin-bottom: 15px;
}

.wcapes-specialize:before {
	display: block;
	width: 30px;
	height: 1px;
	position: absolute;
	bottom: 0;
	left: 0;
	background: #fff;
	content: '';
}

.wcapes-pagination {
	margin-top: 35px;
	text-align: center;
}

.wcapes-pagination .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	margin: 0 8px;
}

.wcapes-pagination .swiper-pagination-bullet-active {
	background: #e76d51;
}