/*
* Theme Name: viettelbinhthuan
* Description: Giao dien danh rieng cho ViettelBinhThuan
* Theme URI: http://viettelbinhthuan.com.vn
* Version: 1.0
* Author: IT
* Author URI: http://viettelbinhthuan.vn
* Tags: blog, two-columns, left-sidebar, accessibility-ready, custom-background, custom-colors, custom-header, custom-logo, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
* Text Domain: viettelbinhthuan
* License: abc
* License URI: http://viettelbinhthuan.vn
*/

* {margin:0; padding:0}
* {box-sizing:border-box}

body

{

	font-family:Arial, Helvetica, sans-serif!important;

	font-size:13px!important;
	/*background-color:#eaeaea!important;*/
	color:black;
	

}

/* Thiet lap cac style mac dinh */

ul{

	list-style-type: none;

}

/* Danh cho dien thoai */



@media all and (min-width: 320px) {

#main-wrapper{

	margin:0 auto;
	width:
	background-image:url('/images/background.png');


}

	#primary-menu

	{

		display:none;

	}

}



/* Danh cho may tinh bang chieu doc */

@media all and (min-width: 600px) {



}

/* Danh cho may tinh bang chieu ngang va desktop */



@media all and (min-width: 1024px) {

	#main-wrapper{

		max-width: 1140px;
		margin: 0 auto;


	}

	#banner{

		max-width: 1140px;

		height:50px;

	}

	#banner-left{

		width: 500px;

		float: left;

		height: 50px;		

	}

	#banner-middle{

		width: 290px;

		float:left;

		height: 50px;

		text-align: center;

		padding-top: 10px

	}

	#banner-right{

		width: 300px;

		float: right;

		height: 50px

	}

	#wrapper{

		text-align: left;

		max-width: 1140px;

		margin: 0 auto;

		margin-top: 30px;

	}

	#footer{

		text-align: center;

		max-width: 1140px;

		margin: 0 auto;

		margin-top: 10px;

		background-color: #d8d8d8;

		height:70px;

		padding:10px;

	}

	#main-content

	{

		float: left;

		width:910px;

		background-color: white

		border-top-left-radius:5px;

		border-top-right-radius:5px;

	}

	#main-content .main-content-title{

		width:50%;

		float:left;

		font-weight: bold;

		font-size:18px;

		padding-top:5px;

		color:#1ca411;

	}

	#main-content .main-content-button{

		width:50%;

		float:right;

		text-align:right

	}

	#secondary-conent

	{

		float: right;

		width:210px;

	}

	#secondary-conent .module1

	{

		width:210px;

		background-color: white

	}

	.module1 .title

	{

		height:30px;

		background-color: #9b59b6;

		color:white;

		font-weight: bold;

		padding:5px 0px 0px 10px

	}

	.module1 .content

	{

		padding:10px;

	}

	/* Giao diện Thêm mới chuẩn */

	table.standard{

		width:100%

	}

	table.standard td{

		padding: 5px;



	}

	table.standard td.field

	{

		min-width: 100px

	}

	/* Hộp hiển thị thông báo lỗi */

	#message{

	  position: absolute;

	  width: 300px;

	  right: 20px;

	  bottom: 10px;

	  background-color: #5cb85c;

	  color: white;

	  padding:20px 10px;

	  display: none;

	  

	}



	/* Thiet ke ghi đè class pagination (phân trang) của BootStrap */

	.td-pagination{

		padding:5px 0px 0px 0px;

		text-align: right;

	}

	ul.pagination{

		margin:0px;



	}

	ul.pagination li

	{

		cursor:pointer;

		

	

	}

	ul.pagination li a

	{

		



		

	}



	/* style cho link chung toan trang */

	a:link, a:visited

	{

		color:#004175;

		text-decoration:none;

	}

	a:hover

	{

		color:#a59999;

		text-decoration:none!important;

	}



/* Thiet ke Menu chính cho trang chủ*/

#primary-menu

{

	display:block;

	padding:0px!important;

}

ul.menu {

    list-style-type: none;

    padding: 0;

		margin:0 auto;

		height:44px;

		background-color:#9b59b6;

		border-bottom:1px solid #780500;

	}

.menu li {

    float: left;

	}

.menu li a {

    display: inline-block;

    color: white;

    text-align: center;

    padding:13px 15px 0px 10px;

		text-decoration: none;

		font-weight:bold;

		border-right:1px solid #8b50a4;

		border-left: 1px solid #af7ac4;

		height:43px;

}

	.menu li a:hover{



	    text-decoration:none;

			background-color: #844c9b;

	}

	li.menu-item-has-children {

	    display: inline-block;

	}

	.sub-menu {

			display: none;

	    position: absolute;

	    background-color: #844c9b;

	    min-width: 160px;

	    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

			border-radius:0px 0px 5px 5px;

			border:1px solid #d2d2d2;

			border-top:none;

	}

	.sub-menu li

	{

		float:none

	}



	.sub-menu li a{

		color: white;

		padding: 10px 16px;

		text-decoration: none;

		display: block;

		text-align: left;

		border-right: none;

		border-top:1px solid white;

	}

	.sub-menu li a:hover {

		background-color: #9b59b6;

		color:white;

		text-decoration:none;

	}

	.menu-item-has-children:hover .sub-menu {

	    display: block;

	    text-decoration:none;

	}



	.img-loadding

	{

		

		width:40px;

		height:40px;

	}



}
/* chu nhap nhay*/
@-webkit-keyframes my {
0% { color: #F8CD0A; }
50% { color: #fff; }
100% { color: #F8CD0A; }
}
@-moz-keyframes my {
0% { color: #F8CD0A; }
50% { color: #fff; }
100% { color: #F8CD0A; }
}
@-o-keyframes my {
0% { color: #F8CD0A; }
50% { color: #fff; }
100% { color: #F8CD0A; }
}
@keyframes my {
0% { color: #F8CD0A; }
50% { color: #fff; }
100% { color: #F8CD0A; }
}
.nhapnhay {

font-size:80px;
font-weight:bold;
-webkit-animation: my 700ms infinite;
-moz-animation: my 700ms infinite;
-o-animation: my 700ms infinite;
animation: my 700ms infinite;
}

/* hop qua*/
body {
  background: black;
}

.box {
  position: relative;
}
.box::before {
  /*content: "";*/
  width: 440px;
  height: 440px;
  background-color: #89cff0;
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  border-radius: 50%;
}
.box-body {
  position: relative;
  height: 200px;
  width: 200px;
  margin: 130px auto 0 !important;/*123.3333333333px;*/
  background-color: #cc231e;
  border-bottom-left-radius: 5%;
  border-bottom-right-radius: 5%;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.3);
  background: linear-gradient(#762c2c,#ff0303);
}
.box-body .img{
  opacity: 0;
  ransform: translateY(0%);
  transition: all 0.5s;
  margin: 0 auto;
  display: block;
}
/**/
.box-body-hover {
  cursor: pointer;
  -webkit-animation: box-body 1s forwards ease-in-out;
          animation: box-body 1s forwards ease-in-out;
}
.box-body-hover .img{
  opacity: 1;
  z-index: 0;
  transform: translateY(-157px);


   
}
.box-body-hover .box-lid {
  -webkit-animation: box-lid 1s forwards ease-in-out;
          animation: box-lid 1s forwards ease-in-out;
}
.box-body-hover .box-bowtie::before {
  -webkit-animation: box-bowtie-left 1.1s forwards ease-in-out;
          animation: box-bowtie-left 1.1s forwards ease-in-out;
}
.box-body-hover .box-bowtie::after {
  -webkit-animation: box-bowtie-right 1.1s forwards ease-in-out;
          animation: box-bowtie-right 1.1s forwards ease-in-out;
}
.box-body::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 50px;
  background: linear-gradient(#ffffff,#ffefa0)
}
.box-lid {
  position: absolute;
  z-index: 1;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  bottom: 90%;
  height: 40px;
  background-color: #cc231e;
  height: 40px;
  width: 220px;
  border-radius: 5%;
  box-shadow: 0 8px 4px -4px rgba(0, 0, 0, 0.3);
}
.box-lid::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 50px;
  background: linear-gradient(#ffefa0,#fff)
}
.box-bowtie {
  z-index: 1;
  height: 100%;
}
.box-bowtie::before, .box-bowtie::after {
  content: "";
  width: 83.3333333333px;
  height: 83.3333333333px;
  border: 16.6666666667px solid white;
  border-radius: 50% 50% 0 50%;
  position: absolute;
  bottom: 99%;
  z-index: -1;
}
.box-bowtie::before {
  left: 50%;
  -webkit-transform: translateX(-100%) skew(10deg, 10deg);
          transform: translateX(-100%) skew(10deg, 10deg);
}
.box-bowtie::after {
  left: 50%;
  -webkit-transform: translateX(0%) rotate(90deg) skew(10deg, 10deg);
          transform: translateX(0%) rotate(90deg) skew(10deg, 10deg);
}

@-webkit-keyframes box-lid {
  0%,
  42% {
    -webkit-transform: translate3d(-50%, 0%, 0) rotate(0deg);
            transform: translate3d(-50%, 0%, 0) rotate(0deg);
  }
  60% {
    -webkit-transform: translate3d(-85%, -230%, 0) rotate(-25deg);
            transform: translate3d(-85%, -230%, 0) rotate(-25deg);
  }
  90%, 100% {
    -webkit-transform: translate3d(-119%, 225%, 0) rotate(-70deg);
            transform: translate3d(-119%, 225%, 0) rotate(-70deg);
  }
}

@keyframes box-lid {
  0%,
  42% {
    -webkit-transform: translate3d(-50%, 0%, 0) rotate(0deg);
            transform: translate3d(-50%, 0%, 0) rotate(0deg);
  }
  60% {
    -webkit-transform: translate3d(-85%, -230%, 0) rotate(-25deg);
            transform: translate3d(-85%, -230%, 0) rotate(-25deg);
  }
  90%, 100% {
    -webkit-transform: translate3d(-119%, 225%, 0) rotate(-70deg);
            transform: translate3d(-119%, 225%, 0) rotate(-70deg);
  }
}
@-webkit-keyframes box-body {
  0% {
    -webkit-transform: translate3d(0%, 0%, 0) rotate(0deg);
            transform: translate3d(0%, 0%, 0) rotate(0deg);
  }
  25% {
    -webkit-transform: translate3d(0%, 25%, 0) rotate(20deg);
            transform: translate3d(0%, 25%, 0) rotate(20deg);
  }
  50% {
    -webkit-transform: translate3d(0%, -15%, 0) rotate(0deg);
            transform: translate3d(0%, -15%, 0) rotate(0deg);
  }
  70% {
    -webkit-transform: translate3d(0%, 0%, 0) rotate(0deg);
            transform: translate3d(0%, 0%, 0) rotate(0deg);
  }
}
@keyframes box-body {
  0% {
    -webkit-transform: translate3d(0%, 0%, 0) rotate(0deg);
            transform: translate3d(0%, 0%, 0) rotate(0deg);
  }
  25% {
    -webkit-transform: translate3d(0%, 25%, 0) rotate(20deg);
            transform: translate3d(0%, 25%, 0) rotate(20deg);
  }
  50% {
    -webkit-transform: translate3d(0%, -15%, 0) rotate(0deg);
            transform: translate3d(0%, -15%, 0) rotate(0deg);
  }
  70% {
    -webkit-transform: translate3d(0%, 0%, 0) rotate(0deg);
            transform: translate3d(0%, 0%, 0) rotate(0deg);
  }
}
@-webkit-keyframes box-bowtie-right {
  0%,
  50%,
  75% {
    -webkit-transform: translateX(0%) rotate(90deg) skew(10deg, 10deg);
            transform: translateX(0%) rotate(90deg) skew(10deg, 10deg);
  }
  90%,
  100% {
    -webkit-transform: translate(-50%, -15%) rotate(45deg) skew(10deg, 10deg);
            transform: translate(-50%, -15%) rotate(45deg) skew(10deg, 10deg);
    box-shadow: 0px 4px 8px -4px rgba(0, 0, 0, 0.3);
  }
}
@keyframes box-bowtie-right {
  0%,
  50%,
  75% {
    -webkit-transform: translateX(0%) rotate(90deg) skew(10deg, 10deg);
            transform: translateX(0%) rotate(90deg) skew(10deg, 10deg);
  }
  90%,
  100% {
    -webkit-transform: translate(-50%, -15%) rotate(45deg) skew(10deg, 10deg);
            transform: translate(-50%, -15%) rotate(45deg) skew(10deg, 10deg);
    box-shadow: 0px 4px 8px -4px rgba(0, 0, 0, 0.3);
  }
}
@-webkit-keyframes box-bowtie-left {
  0% {
    -webkit-transform: translateX(-100%) rotate(0deg) skew(10deg, 10deg);
            transform: translateX(-100%) rotate(0deg) skew(10deg, 10deg);
  }
  50%,
  75% {
    -webkit-transform: translate(-50%, -15%) rotate(45deg) skew(10deg, 10deg);
            transform: translate(-50%, -15%) rotate(45deg) skew(10deg, 10deg);
  }
  90%,
  100% {
    -webkit-transform: translateX(-100%) rotate(0deg) skew(10deg, 10deg);
            transform: translateX(-100%) rotate(0deg) skew(10deg, 10deg);
  }
}
@keyframes box-bowtie-left {
  0% {
    -webkit-transform: translateX(-100%) rotate(0deg) skew(10deg, 10deg);
            transform: translateX(-100%) rotate(0deg) skew(10deg, 10deg);
  }
  50%,
  75% {
    -webkit-transform: translate(-50%, -15%) rotate(45deg) skew(10deg, 10deg);
            transform: translate(-50%, -15%) rotate(45deg) skew(10deg, 10deg);
  }
  90%,
  100% {
    -webkit-transform: translateX(-100%) rotate(0deg) skew(10deg, 10deg);
            transform: translateX(-100%) rotate(0deg) skew(10deg, 10deg);
  }
}
.box-body-1{
	background: linear-gradient(#ff0081,#FFADE8) !important;
}
.box-lid-1{
	background-color:#ff0081;
}
.box-body-2{
	background: linear-gradient(#800080,#d896ff);
}
.box-lid-2{
	background-color:#d896ff;
}
.box-body-3{
	background: linear-gradient(#0c5488,#0396ff);
}
.box-lid-3{
	background-color:#0396ff;
}
.box-body-4{
	    background: linear-gradient(#ccb720,#f4ff4a);
}
.box-lid-4{
	background-color:#f4ff4a;
}
.box-body-5{
	background: linear-gradient(#983100,#f36806);
}
.box-lid-5{
	background-color:#f36806;
}
.box1::before, .box1::after {
	border-color:#e6a969;
}
.box-lid-1::after {
	background: linear-gradient(#e6a969,#fff)
}
.box-body-1::after {
	background: linear-gradient(#fff,#e6a969)
}
.box2::before, .box2::after {
	border-color:#b5ead7;
}
.box-lid-2::after {
	background: linear-gradient(#b5ead7,#fff)
}
.box-body-2::after {
	background: linear-gradient(#fff,#b5ead7)
}
.box3::before, .box3::after {
	border-color:#c7ceea;
}
.box-lid-3::after {
	background: linear-gradient(#c7ceea,#fff)
}
.box-body-3::after {
	background: linear-gradient(#fff,#c7ceea)
}
.box4::before, .box4::after {
	border-color:#e2f0cb;
}
.box-lid-4::after {
	background: linear-gradient(#e2f0cb,#fff)
}
.box-body-4::after {
	background: linear-gradient(#fff,#e2f0cb)
}
.box5::before, .box5::after {
	border-color:#b5ead7;
}
.box-lid-5::after {
	background: linear-gradient(#b5ead7,#fff)
}
.box-body-5::after {
	background: linear-gradient(#fff,#b5ead7)
}
.box6::before, .box6::after {
	border-color:#c7ceea;
}
.box-lid-6::after {
	background: linear-gradient(#c7ceea,#fff)
}
.box-body-6::after {
	background: linear-gradient(#fff,#c7ceea)
}
.gift-body{
	background: url(../images/background-gift.jpg) center center no-repeat;
    height: 600px;
    background-size: 100%;
}