/* Theme Name: Viettel Puta
 * Version: 1.0
 */
 @font-face {
  font-family: 'Iciel Century Gothic Pro';
  src: url('fonts/ICIELCENTURYGOTHICPRO-BOLD.OTF') format('opentype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Iciel Century Gothic Pro';
  src: url('fonts/ICIELCENTURYGOTHICPRO-BOLDITALIC.OTF') format('opentype');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Iciel Century Gothic Pro';
  src: url('fonts/ICIELCENTURYGOTHICPRO-ITALIC.OTF') format('opentype');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Iciel Century Gothic Pro';
  src: url('fonts/ICIELCENTURYGOTHICPRO-REGULAR.OTF') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'F5 Magistral Book';
  src: url("fonts/FSMagistralBook.woff") format("woff"), url("fonts/FSMagistralBook.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'F5 Magistral Book Italic';
  src: url("fonts/FSMagistralBookItalic.woff2") format("woff2"), url("fonts/FSMagistralBookItalic.woff") format("woff");
  font-weight: normal;
  font-style: italic;
  font-display: swap; }

:root{
  --primary:  #ef0032;
  --third: #5f5f5f;
  --secondary: #ffdde4;
  --four:  #fff3f6;
  --size-title: ;
  --font-title: '';
  --font-sub-title: 'UTM-Yen-Tu';
  --family:  'F5 Magistral Book';

}
.primary-color{color: var(--primary)}
/* width */
::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--third); 
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--primary); 
}
body{font-family: var(--family);font-weight: normal; font-size: 18px; z-index: 1;-webkit-font-smoothing: antialiased; line-height: 1.42857143}
h2{font-size: 38px}
h3{font-size: 35px;}
h4{font-size: 25px}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
p{margin-bottom: 0;}

.z-1{z-index: 1}
.z-2{z-index: 2; position: relative;}
section{position: relative}
.color-white{color: white}
/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
} 
.col-1-5{flex: 0 0 20%; max-width: 20%;position:relative; width: 100%; padding-left: 15px; padding-right: 15px;}
main, footer{position: relative}
.overlay{position: absolute;width: 100%; height: 100%;top: 0; left: 0;background-color: #000; opacity: 0.4;}
.flex-space{display: flex; justify-content: space-between;}
.wrap-slide-home img{width: 100%}

.box-shadow{box-shadow: 0px 10px 40px rgb(239 0 50 / 15%)}
.box-shadow-dark{box-shadow: 0px 0px 20px rgb(0 0 0 / 15%)}
.breadcrumb{padding: 45px 0;}
.breadcrumb_last{color: var(--primary)}
.breadcrumb .divider{margin: 0 10px;}

.success{color: #28a745}
.alert{color: var(--primary)}
.warning{color: #ffc107}
/* style header */
#main-header{background: #f0f0f0;}
.wrap-main-header{display: flex;
  padding: 15px 0;
  justify-content: space-between;
  align-items: center;}
  #hotline{padding: 5px 20px 7px;
    color: #fff;
    background: var(--primary);
    border-radius: 30px; min-width: 150px;}
.welcome{padding: 0 35px;margin-left: 35px;
  border-left: 1px solid var(--primary);}
#bottom-header{text-align: center;}
#header-menu>.menu-item{display: inline-block; padding: 25px 20px; transition: 0.4s}
#header-menu>.menu-item a{transition: 0.4s}
#menu-item-25, .current-menu-item, #header-menu>.menu-item a:hover{color: var(--primary)}
.header-cover .header-title { position: relative; text-align: center; }
.header-cover .header-title .main-title { padding-top: 100px; color: #fff; text-transform: uppercase; font-size: 50px;}
.header-cover .header-title .breadcrumb a, .header-cover .header-title .breadcrumb .divider {color: #fff}
#contact_form .btn-contact { padding: 12px 40px; border: 0; border-radius: 50px; background-color: var(--primary); color: #fff;}
#contact_form .btn-contact i { margin-right: 8px; }
section .button-nav {
	position: fixed;
    top: 60%;
    right: 30px;
    display: flex;
    flex-direction: column;
	padding: 0 8px;
	z-index: 200;
}

section .button-nav .button-nav-buy {
	display: none; }

section .button-nav-item, section .back-top {
	width: 45px;
    height: 45px;
    background-color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    margin-bottom: 8px;
}

section .button-nav-item img {width: 100%; height: 100%; object-fit: cover; max-width: 25px; max-height: 25px}
section .recommend-buy {
	position: fixed;
	top: 10%;
	right: 30px;
	width: 90px;
	height: 90px;
	background-color: var(--primary);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 10px;
	z-index: 200;
}
section .recommend-buy:before {
	position: absolute;
	content: '';
	background-color: transparent;
	width: inherit;
	height: inherit;
	border-radius: inherit;
	border: 2px solid var(--primary);
	z-index: -1;
	animation: sonarEffect ease 1s infinite;
	transition: 0.5s;
}
section .recommend-buy p {color: #fff; margin: 0}

/* style footer */
footer{
  background: url(https://viettelnhatrang.vn/wp-content/uploads/2021/06/bg-footer.png);
  background-size: contain;
  background-position: center;
  margin-top: 50px;
}
.widget-footer{margin-bottom: 50px;}
.widget-hr{height: 10px;
  background-image: linear-gradient(to right, var(--secondary) 20%, var(--primary) 50%, var(--secondary) 80%);}
.container .widget-hr{height: 5px;background-image: linear-gradient(to right, transparent 0%, var(--primary) 50%, transparent 100%);}
.widget-contact{ text-align: center;}
.box-contact p{margin-bottom: 10px;}
.box-contact img{height: 50px;}
.box-contact .label{font-weight: bold;}
.box-contact .label-content{color: var(--primary);}

.wrap-logo-menu{display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin-bottom: 10px;}
.wrap-copyright{text-align: center;}
.wrap-copyright p{margin-bottom: 20px;}

.widget-social{text-align: center;}
.icon-footer{width: 40px;
  height: 40px;
  display: inline-block;
  color: #fff;
  background: var(--primary);
  border-radius: 50%;
  padding-top: 5px;
  margin: 0 10px;
}
/* style list post */
.wp-post-hl{    border-radius: 40px;
  overflow: hidden;
  box-shadow: 0px 0px 50px rgb(239 0 50 / 20%);margin-bottom: 30px;}
.post-hl-thumb{    width: 100%;
  height: 456px;
  display: block;
  border-radius: 40px;
  overflow: hidden;}
.post-hl-thumb img{width: 100%; height: 100%; object-fit: cover}
.post-hl-title{font-weight: bold; padding: 30px;}

.wrap-post-new{display: block;
  margin-bottom: 30px;
  border-radius: 40px;
  overflow: hidden;
  box-shadow: 0px 0px 50px rgb(239 0 50 / 20%);}
  .wrap-thumb{width: 100%; height: 270px;display: block}
  .post-new-title{font-weight: bold;}
  .wrap-post-new img{width: 100%; height: 100%; object-fit: cover}
.wrap-post-content{padding: 30px; padding-left: 0;}
.wrap-post-content p{margin-bottom: 10px;}


.wrap-all-post{background: #fff;
  border-radius: 40px;
  overflow: hidden;
  display: block;margin-bottom: 20px;}
.all-post-thumb{width: 100%; height: 240px;display: block; border-radius: 40px; overflow: hidden;}
.all-post-thumb img{width: 100%; height: 100%; object-fit: cover;}
.all-post-content{padding: 25px;}
.all-post-title{margin-bottom: 10px; 
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;}


  /* style sidebar */
  .widget-sidebar{margin-bottom: 35px;padding: 20px 25px;border-radius: 30px;}
  .widget-label{margin-bottom: 15px;}
  .widget-sidebar .item{overflow: hidden; border-radius: 30px;display: flex;margin-bottom: 15px;}
  .widget-sidebar .item>span{display: inline-block;
    width: 33.33%;
    padding: 5px 0 7px;
    text-align: center;
    color: #fff;}
    .item-name{background: var(--primary)}
    .item-price{background: #b80000}
    .item-submit{background: #ff5353;}

.widget-internet .item-name{background: #000000;}
.widget-internet .item-price{background: #333333;}
.widget-internet .item-data{background: #bbbbbb;}

.form-popup, .form-sim-popup{display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: -1;
  visibility: hidden;
  transition: 0.4s;
}
.form-active{opacity: 1;visibility: visible;z-index: 999;}
.wrap-form-popup{position: relative;
  z-index: 2;
  max-width: 655px;
  padding: 40px 80px;
  margin: 12% auto;
  background: #fff;
  text-align: center;
  border-radius: 10px;}
  .wrap-form-popup form{margin-top: 20px;}
.form-title{color: var(--primary);
    font-weight: bold;
    font-size: 22px;}
.form-sub-title{    font-style: italic;
  color: var(--third);}
.form-control{overflow: visible;
  width: 100%;
  margin-bottom: 15px;
  padding: 10px 25px;
  border-radius: 30px;
  border: 1px solid #bbbbbb;
  outline: unset; transition: 0.4s}
.form-control:focus{box-shadow: 0px 0px 20px rgb(0 0 0 / 20%); transform: scale(1.01); border-color: transparent;}
.btn-popup-submit, .btn-popup-submit_sim{width: 100%; background: var(--primary); border-radius: 30px;border-color: transparent; padding: 10px 25px; color: #fff}
.btn-popup-submit .icon{font-size: 25px; margin-right: 10px;}

.sign-up-sim{cursor: pointer;}
#output{margin-top: 20px;transition: 0.4s}
.divider{width: 1px; height: 37px;}
.single .single-content{margin-bottom: 30px}
/* media 1200px*/
.wrap-logo-menu{display: block; text-align: center;}
.wrap-logo-menu #header-menu{box-shadow: unset;}
/* media 992px */
@media(max-width: 992px){
	#header-menu{white-space: nowrap;
    overflow: auto;
    box-shadow: inset -7px 0 7px -7px rgb(0 0 0 / 30%)}
	#header-menu::-webkit-scrollbar{display: none}
	.box-contact{margin-bottom: 30px;}
	.main-sidebar{order: 2}
	.main-content{order: 1;}
	.wrap-post-content{padding-left: 30px;}
}

/* media 768px */
@media(max-width: 768px){
	.welcome{display: none}
	.divider{display: block;}
	
}
/* media 576px */
@media(max-width: 576px){
	.copyright span{display: block}
	.wrap-form-popup{padding: 20px 30px; margin: 12% 10px;}
	.post-hl-thumb{height: 270px;}
	section .button-nav-item, section .back-top {width: 35px; height: 35px; font-size: 14px; padding: 8px; margin-bottom: 0}
	section .recommend-buy {display: none}
	section .button-nav {top: 90%; right: 50%; transform: translatex(50%); flex-direction: row}
	section .button-nav .button-nav-buy {display: block; padding: 8px 20px; width: max-content; background-color: var(--primary); border-radius: 30px; color: #fff; font-size: 16px}
	section .button-nav .button-nav-buy p {margin: 0}
	section .button-nav a + a { margin-left: 4px; }
	.widget-footer:last-child {margin-bottom: 120px}
}
@keyframes sonarEffect {
  0% {
    filter: alpha(opacity=30);
    opacity: 0.3; }
  40% {
    filter: alpha(opacity=50);
    opacity: 0.7;
    box-shadow: 0 0 0 1px rgba(239, 0, 50, 0.5);
    -webkit-box-shadow: 0 0 0 1px var(--third-color); }
  100% {
    box-shadow: 0 0 0 1px rgba(239, 0, 50, 0.5);
    -webkit-box-shadow: 0 0 0 1px var(--third-color);
    -o-transform: scale(1.75);
    -webkit-transform: scale(1.75);
    -ms-transform: scale(1.75);
    transform: scale(1.75);
    filter: alpha(opacity=0);
    opacity: 0; } 
}