@extends('frontend.master')

@section('title', $data->seo_title . (isset($_GET['page']) ? ' | page ' . $_GET['page'] : ''))
@section('description', $data->seo_description . (isset($_GET['page']) ? ' | page ' . $_GET['page'] : ''))
@section('keywords', $data->keywords)
@section('image', asset('filemanager/data-images/' . $data->image))
@if ($data->seo_indexed == 0)
    @section('robots', 'noindex,nofollow')
@endif
@section('content')
@if(isset($article_speed))
	<style>@include('frontend.css')</style>
@endif
<style>
	blockquote {
    color: #333;
}
#tooltip .share {
	color: #333;
	margin-left: 0;
	font-size: 14px;
}
.btn-facebook {
	color: unset;
	background-color: unset;
	border: unset;
	font-size: 19px;
	cursor: pointer;
	padding: 0 5px;
}
.btn-twitter {
		color: unset;
	background-color: unset;
	border: unset;
	font-size: 19px;
	cursor: pointer;
	padding: 0 5px;
	}
	.btn-facebook i {
	color: #2654b1 !important;
}

.btn-twitter i {
	color: #549efd !important;
}
.content img{max-width: 100%}
.content .table.table-bordered img{max-width: 100%;width: unset !important;height: unset !important;min-width: 200px;}
.content{font-size: 18px; line-height: 36px;}
.content-of-table {
	border: 1px solid #b0b2bc;
	padding: 16px;
	margin-bottom: 50px;
	margin-top: 20px;
	border-radius: 24px;
}
.title-table {
	font-size: 22px;
	margin-bottom: 10px;
}
.title-table i {
	margin-right: 10px;
}
.content-table {
	padding-left: 0px;
}
.item-table {
	line-height: 32px;
}
.share {
	font-weight: 600;
	color: #ffffffb0;
	margin-left: 20px;
	margin-right: 10px;
}
.social-network i {
	font-size: 20px;
	color: #656e96 !important;
	margin: 0 5px;
}
.social-facebook i {
	font-size: 20px;
	color: #2654b1 !important;
	margin: 0 5px;
}
.social-facebook {
	cursor: pointer;
}
.social-twitter {
	cursor: pointer;
}
.social-twitter i{
	color: #549efd !important;
	font-size: 21px;
	margin: 0 5px;
}

.fqa .title_faq{
	text-align: center;
	font-weight: 600;
	margin-bottom: 30px;
	font-size: 2rem;
}
.toplist-fqa {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 20px;
	font-weight: 600;
	cursor: pointer;

}
.toplist-fqa i {
	font-size: 22px;
}
.item-fqa {
	border-bottom: 1px solid;
	padding-bottom: 10px;
	margin-bottom: 10px;
}
.item-fqa:first-child .botlist-fqa {
	display: block;
}
.botlist-fqa {
	display: none;
	padding-left: 20px;
	margin-top: 15px;
	font-size: 18px;
}
.content h2 {
	margin-top: 2.25rem !important;
	margin-bottom: 1.75rem !important;
	font-size: 2rem !important;
}
.content h3 {
	font-size: 1.7rem;
	margin-top: 2rem !important;
	margin-bottom: 1.5rem !important;
}
.content h4 {
	font-size: 1.5rem;
}
.content h5 {
	font-size: 1.4rem;
}
.content h6 {
	font-size: 1.3rem;
}
.content .table p{
	margin-bottom: 0;
}
.content .table td, .content .table th{
	text-align: center;
}
.content .table-bordered thead td, .content .table-bordered thead th {
	border-bottom-width: 0px;
}
.content .table thead tr:first-child,
.content .table thead .caption{
	background: #333;
	color: #fff;
}
.content .table-bordered td, .content .table-bordered th {
	border: 1px solid #ffffffb0;
}
.content .table-bordered td, .content .table-bordered th {
	border-top: 1px solid #ffffffb0 !important;
}
#tooltip.tooltip_img{
	left: 50%;
	transform: translateX(-50%);
	border: unset;
}
.intro-faqs {
    font-size: 18px;
}

iframe {
  max-width: 100%;
}
input[type="image"] {
  max-width: 100%;
  height: auto!important;
}
blockquote p {
	display: block!important;
	padding-left: 50px;
}
blockquote p:last-child {
	margin: 0;
} 


	#tooltip{position:absolute;visibility:hidden}.arrow_box{position:relative;background:#f2f2f2;border:1px solid #7d7d7d}.arrow_box:after,.arrow_box:before{bottom:100%;left:50%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none}.arrow_box:after{border-color:rgba(242,242,242,0);border-bottom-color:#f2f2f2;border-width:10px;margin-left:-10px}.arrow_box:before{border-color:rgba(110,110,110,0);border-bottom-color:#7d7d7d;border-width:11px;margin-left:-11px}#tooltip.show{padding:4px 10px;visibility:visible;margin-top:15px}#cal1{position:absolute;height:0;width:0;top:100px;left:100px;z-index:-100}#cal2{position:absolute;height:0;width:0;top:0;left:0;z-index:-100}.
</style>

<div class="main-content detail-article" id="min-height-3" data-article-id="{{$data->id}}">
	<div class="">
		
	<input type="hidden" id="keywords_not_good" name="keywords_not_good" value="{{ isset($keywords_not_good) ? $keywords_not_good : '' }}">
    @if(isset($article_speed))
		<div class="row home">
			<div class="col-12 text-center ping-upload-download clearfix pb-3 pb-lg-5">
				<div class="row">
					<div class="col-lg-8 offset-lg-2 text-center clock_mobile">
						<div class='clock_container d-none'>
							<div class='clock_image'>
								@include('frontend.layouts.home-clock-svg')
							</div>
							<div class='clock_spin_circle'>
								<img class="lazy" style="width: 88%" src="/" data-src='/frontend/images/clockwise_center.svg' alt="kim"/>
							</div>
						</div>
						<div class="again-gauge">
							<div class="start-button clearfix">
								<a role="button" tabindex="3" class="go-test-speed">
									<span class="start-ring"></span>
									<span class="start-background"></span>
									<span class="start-border"></span>
									<span class="start-text">GO</span>
								</a>
							</div>
							<div class="col-12 col-lg-12 description text-center">
								<div class="current-server-custom current-server-custom-left clearfix">
									<div class="current-server-left-custom">
										<div class="network-user"></div>
										<div class="ip-user"></div>
									</div>
									<div class="current-server-right-custom">
										<img class="lazy ic_home_profile" src="/" data-src="{{ asset('frontend/images/ic_home_profile.svg') }}" alt="ic_home_profile">

									</div>
								</div>
								<div class="current-server-custom current-server-custom-right clearfix">
									<div class="current-server-left-custom">
										<img class="lazy ic_home_server" src="/" data-src="{{ asset('frontend/images/ic_home_server.svg') }}" alt="ic_home_server">
									</div>
									<div class="current-server-right-custom">
										<div class="name"><span class='inner_name'></span>&nbsp;</div>
										<div class="city"><a href="javascript:void(0)">Change Server</a></div>
									</div>
								</div>
							</div>
							<div class="current-server clearfix">
							</div>
						</div>
						<div id="result" class="d-none">0</div>
						<div class="realtime unit-gauge d-none"></div>
						<div class="running-server d-none">
							<div class="current-server clearfix">
							</div>
						</div>
					</div>
				</div>
				<div class="row vertical-align d-none" id="chart-progress">
					<div class="col-2"><div class="hold-cloud hold-cloud-img" id="left-icon"></div></div>
					<div class="col-8 d-none" id="container2"></div>
					<div class="col-8" id="container2-text">Calculating ping speed</div>
					<div class="col-2"><div class="hold-cloud hold-cloud-img2" id="right-icon"></div></div>
				</div>
				<div class='clearfix'></div>

				<div class="row" style="margin-top: 10px;">
					<div class="col-4">
						<div class="item">
							<h3 class="title"><img class="lazy" src="/" data-src="{{ asset('frontend/images/ic_ping.svg') }}" alt="ic_ping"> <span>{{ __('messages.Ping') }}</span></h3>
							<div class="txt-speed">{{ __('messages.Delays_in_transfer') }}</div>
							<span class="number ping" id="ping-info"><i class="far fa-window-minimize"></i> <i class="far fa-window-minimize"></i></span>
							<span class="unit-ms">ms</span>
						</div>
					</div>
					<div class="col-4">
						<div class="item">
							<h3 class="title"><img class="lazy" src="/" data-src="{{ asset('frontend/images/ic_download.svg') }}" alt="ic_download"> <span>{{ __('messages.Download') }}</span></h3>
							<div class="txt-speed">{{ __('messages.Speed_of_download') }}</div>
							<span class="number download" id="download-info"><i class="far fa-window-minimize"></i> <i class="far fa-window-minimize"></i></span>
							<span class="unit-gauge"></span>
						</div>
					</div>
					<div class="col-4">
						<div class="item">
							<h3 class="title"><img class="lazy" src="/" data-src="{{ asset('frontend/images/ic_upload.svg') }}" alt="ic_upload"> <span>{{ __('messages.Upload') }}</span></h3>
							<div class="txt-speed">{{ __('messages.Speed_of_upload') }}</div>
							<span class="number upload" id="upload-info"><i class="far fa-window-minimize"></i> <i class="far fa-window-minimize"></i></span>
							<span class="unit-gauge"></span>
						</div>
					</div>
					<div class='clearfix'></div>
					<div class="col-lg-6 col-sm-12">
						<div class="float-left social-network"  title="{{ __('messages.share') }}">
							<!-- <span class="float-left text-share">{{ __('messages.share') }} </span>
							<a><i class="fas fa-share-alt" ></i></a> -->
							<a class="btn btn-customize"><i class="fas fa-share-alt" ></i> {{ __('messages.share') }} </a>
						</div>
					</div>
					<div class="col-lg-6 col-sm-12">
						<div class="setting_and_result_box">
							<div class="btn-customize mr-2" style="display: inline-block;">
								<a href="/result">
									<i class="far fa-check-circle"></i>
									{{ __('messages.Result') }}
								</a>
							</div>
							<button class="btn-customize btn-setting">
								<i class="fas fa-cog"></i>
								{{ __('messages.Settings') }}
							</button>
						</div>
					</div>
				</div>
			</div>
			@include('frontend.layouts.home-change-server')
			<input type="hidden" id="current_speed" name="current_speed" value="0" data-x="0">
			<div id="tmp_template"></div>
			<div class="col-12">@include('frontend.layouts.ads.banner-1')</div>
		</div>
	@else
		<div class="row">
			<div class="col-12">@include('frontend.layouts.ads.banner-1')</div>
		</div>
	@endif
	<div class="row">
		<div class="col-12">