.product-sale-price{color:#E35B00;font-family:Open Sans Bold;display: inline;}
.sale-flag{position: absolute;width: 67px !important;right: 20px;background-image: url("/WebB4/Bphone4Products/sale-bg.svg");height: 72px;background-size: contain; }
.sale-text{color: white; font-family: Open Sans Light; font-size: 20px;line-height: 34px;}
.sale-value-percent{position: relative;}
.sale-value{color: white;font-family: Open Sans Bold;font-size: 35px; line-height: 18px; position: absolute;left: 8px;}
.sale-percent{color: white; font-family: Open Sans Italic;font-size: 20px;position: absolute;right: 4px;top: -4px;}

.mb-nav-link{color: #BDBDBD !important}
.deactive-product{color: #717171 !important;}
.airb-wrap{background-color: #F5F5F5;margin-bottom: 8px;}
.airb-product-wrap{margin: auto;text-align: center;width: 311px;
	transform: translateX(200px); opacity:1;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
.airb-product{float: left}
.airb-pro-product{float: right;}
.airb-item{padding-top: 41px;}
.airb-item a img{width: 110px}
.chapternav-link-airb img {width: 110px}
.airb-item-name{padding-top: 50px;}
.airb-item-name a {color: white !important;}
.detail-wrap .text-center detail-wrap img{max-width: 360px}
.b4gs{
 width:100%; transform: translateX(100px);height:323x; opacity:1;
  -webkit-transition: all 0.3s ease-out;
			 -moz-transition: all 0.3s ease-out;
				-ms-transition: all 0.3s ease-out;
				 -o-transition: all 0.3s ease-out;
						transition: all 0.3s ease-out;
}
.reveal-img {
  -webkit-transform: none !important;
     -moz-transform: none !important;
      -ms-transform: none !important;
       -o-transform: none !important;
          transform: none !important;
}
.buy-later{text-align: center}
button:focus {outline:0;}
.color-dot{height: 21px;width: 21px; cursor: pointer;border-radius: 10px }
.white-dot{height: 20px;width: 20px; cursor: pointer;border-radius: 10px; border: 1px solid #E1E1E1}
.color-border{border: 1px solid transparent; border-radius: 14px;padding: 2px;}
.selected-border{border: 1px solid #707070}
.b4-btn-order{outline: 0}
#sp {color: #8e8e8e !important;}
.img-bphone{position: relative}
.img-bphone img{width: 100%;}
.sold-out-product{position: absolute; margin: auto; left: 0;right: 0;color: white; background-color: #9c9d9e;}
.b4-money { color: #E35B00; font-family: Open Sans Bold;}
.sold-out-wrap {font-family: Open Sans;padding-bottom: 72px}
.sold-out-btn {color: #E35B00;border: 1px solid #E35B00;border-radius: 7px;padding: 12px 36px;line-height: 25px;width: fit-content;margin: auto;}
.img-airb{text-align: center;margin: auto;}
.b4-item-name{color: white}
.jbl-gift{font-size: 20px;margin-bottom: 4px;}
.airb-gift{font-size: 20px;margin-bottom: 20px;margin-top:2px; font-family: Open Sans Italic;color: #E35B00}
@media only screen and (min-width: 768px){
	.sold-out-product-airb{top: 330px !important;}
	.product-sale-price{font-size: 20px}
	.img-airb {width: 330px;}
	.price-info{font-size: 20px}
	.sold-out-product{top: 200px;font-size: 25px; width: 200px;}
	.buy-later{margin-bottom: 89px; font-size: 20px;}
	.payoo-payment{font-size: 20px;margin-bottom: 20px}
	.b4-item-product {float: left;}
	.banner-product-b4 {max-width: 1200px; margin: auto;}
	.b4-item-name a {color: #BDBDBD; text-align: center;}
	.b4-item-name {padding-top: 23px;}
	.b4-item {padding-bottom: 22px;text-align: center;}
	.menu-item-1{padding-left: 39px;}
	.menu-item-2{padding-left: 97px;}
	.menu-item-3{padding-left: 110px;}
	.menu-item-4{padding-left: 120px;}
	.menu-item-5{padding-left: 122px;}
	.menu-item-6{padding-left: 123px;}
	.item-bp-1 {padding-top: 31px; padding-left: 49px;}
	.item-bp-2 {padding-top: 31px;padding-left: 117px;}
	.item-bp-3 {padding-top: 31px;padding-left: 120px;}
	.item-bp-4 {padding-top: 31px;padding-left: 118px;}
	.item-bp-5 {padding-top: 31px;padding-left: 119px;}
	.item-bp-6 {padding-top: 31px;padding-left: 111px;}
	.b4-close-x img {width: 10px;}
	.b4-item img {height: 150px;}
	.b4-close-x {color: #a7a7a7; cursor: pointer; float: right;margin-top: 12px;}
	#products { transition: top 0.5s;position: absolute;margin: auto;left: 0;right: 0;z-index: 1;background: #1C1C1C;height: 322px;}
	#products-airb { transition: top 0.5s;position: fixed;margin: auto;left: 0;right: 0;z-index: 1;background: #1C1C1C;height: 322px;}
	.product-wrap {position: relative;}
	.img-bphone {text-align: center;width: 324px; margin: auto;}
	
	.name-color {text-align: center; font-size: 20px; font-family: Open Sans Regular;margin-top: 34px;    color: black;}
	.dot {width: 80px;margin: auto;}
	#list-dot {width: 148px;margin: auto;}
	.dot ul li {float: left;padding: 3px 5px;list-style: none;}
	.b4-box-buy {text-align: center;margin-top: 57px;}
	.name-bphone {font-size: 28px;font-family: Open Sans Regular; color: black;}
	.name-bphone-acc {font-size: 26px;font-family: Open Sans Regular; color: black;}
	.gia-tien {font-size: 20px;font-family: Open Sans Regular ;color: black;}
	.b4-order {font-family: Open Sans ;font-size: 20px;padding-bottom: 89px;margin-top: 29px}
	.b4-btn-order {text-transform: uppercase;background-color: #E35B00;color: white;border: 1px solid #E35B00;border-radius: 5px;padding: 3px 20px 3px 20px; width: 161px; height: 51px;cursor: pointer;}
	.sold-out-wrap {font-size: 20px;margin-top: 29px}
	#phukien{background-color: #F5F5F5}
	.box-img-access {text-align: center;}
	.name-acces{font-size: 25px;}
	.acces-content{padding-top: 75px;padding-bottom: 117px;font-size: 40px;font-family: Open Sans ;    color: black;}
	.pd-bt-b4{padding-bottom: 123px;}
	.b4-money {font-size: 20px}
	#mobile {display: none;}
	.b4-box-buy-acc {text-align: center;margin-top: 43px;}
	.b4-list-products {margin-top: 118px;}
}

@media only screen and (max-width: 768px){
	.product-sale-price{font-size: 16px}
	.airb-wrap{padding-top: 118px}
	.img-airb {width: 260px;}
	.price-info{font-size: 16px}
	.sold-out-product{top: 200px;font-size: 20px;width: 150px;}
	.buy-later{font-size: 20px;}
	.payoo-payment{font-size: 20px;margin-bottom: 20px;}
	#chapternav ::-webkit-scrollbar {display: none;transition: top 0.3s;}
	.chapternav-label a {color: white;}
	.h-mb {height: 662px;}
	#phukien{background-color: #F5F5F5}
	.b4-close-x {float: right;}
	#desktop {display: none;}
	.img-bphone {text-align: center;padding-bottom: 15px;padding-top: 50px;width: 260px; margin: auto;}
	.name-color {text-align: center;font-size: 17px; color: black;margin-top: 15px;color: black;}
	#list-dot {width: 148px;margin: auto;}
	.dot {width: 80px;margin: auto;}
	.dot ul li {float: left;padding: 5px;list-style: none;}
	.b4-box-buy {text-align: center;margin-top: 43px;margin-bottom: 118px;}
	.name-bphone {font-size: 25px;font-family: Open Sans  Regular; color: black;}
	.name-bphone-acc {font-size: 22px;font-family: Open Sans Regular; color: black;margin-top: -13px;}
	.gia-tien {font-size: 16px;font-family: Open Sans Regular; color: black;}
	.b4-order {font-family: Open Sans Regular;font-size: 19px;padding-bottom: 87px;margin-top: 20px}
	.b4-btn-order {text-transform: uppercase;background-color: #E35B00;color: white;border: 1px solid #E35B00;border-radius: 5px;padding: 3px 20px 3px 20px;width: 133px; height: 43px;}
	.sold-out-wrap {font-size: 19px;margin-top: 20px}
	.sold-out-btn {font-size: 16px}
	#accessories{background-color: #F5F5F5}
	.box-img-access {text-align: center;}
	.name-acces{font-size: 25px;}
	.acces-content{padding-top: 40px;padding-bottom: 60px;font-size: 40px;font-family: Open Sans Regular;color: black;text-align: center;}
	.img-bphone img {width: 260px;}
	.b4-money {font-size: 16px}
	#list-dot ul li img {width: 20px;height: 20px;}
	.b4-box-buy-acc {text-align: center;margin-top: 43px;}
	.mb-nav-link{ font-size: 11px;     color: white;}
	*,
*::after,
*::before {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: Open Sans;
}
/* Remove paddles for touch enabled devices */
.chapternav {
    background: #1c1c1c;
    overflow: hidden;
    padding-top: 5px;
    padding-bottom: 5px;
    position: fixed;
    text-align: center;
    height: 220px;
    z-index: 1;
    right: 0px;
    left: 0px;
      transition: top 0.3s;
}

.chapternav-wrapper {
	position: relative;
	height: 100%;
	z-index: 1;
}

.chapternav-items {
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	white-space: nowrap;
}

.chapternav-item {
	display: inline-block;
	vertical-align: top;
    padding: 5px 16px;
	cursor: pointer;
}
.chapternav-items-airb {list-style: none}

.chapternav-item-airb {display: inline-block;vertical-align: top;padding: 5px 16px;cursor: pointer;}
.chapternav-item:first-child {
	margin-left: 0;
	padding-left: 26px;
}

.chapternav-item:last-child {
	margin-right: 0;
	padding-right: 4px;
}

.chapternav-icon {
	display: block;
	margin: 0 auto 6px;
	height: 36px;
}

.chapternav-label {
	font-size: 11px;
	font-weight: 400;
	display: block;
	margin: 10px auto;
}

.chapternav-link {
	color: white;
	display: block;
	margin-top: 3px;
	padding: 0;
	position: relative;
	z-index: 1;
	text-decoration: none;
}

.chapternav-link.current {
	color: #48b;
	cursor: default;
	opacity: 0.6;
}

.chapternav-link:hover {
	color: #48b;
	cursor: pointer;
	opacity: 0.6;
}
.chapternav-link-airb {color: white;margin-top: 3px;padding: 0;position: relative;z-index: 1;text-decoration: none;}
.chapternav-link-airb.current {color: #48b;cursor: default;opacity: 0.6;}
.chapternav-link-airb:hover {color: #48b;cursor: pointer;opacity: 0.6;}
@-webkit-keyframes chapternav-slidein {
	0% {
		opacity: 0;
	}

	1% {
		-webkit-transform: translateX(160px);
		transform: translateX(160px);
	}

	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
}

@keyframes chapternav-slidein {
	0% {
		opacity: 0;
	}

	1% {
		-webkit-transform: translateX(160px);
		transform: translateX(160px);
	}

	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
}

.chapternav-item {
	-webkit-animation: chapternav-slidein 350ms backwards;
	animation: chapternav-slidein 350ms backwards;
}
.chapternav-item-airb {
	-webkit-animation: chapternav-slidein 350ms backwards;
	animation: chapternav-slidein 350ms backwards;
}

.chapternav-paddle {
	font-size: 20px;
	line-height: 1.5;
	font-weight: 300;
	border: 0 solid rgba(17, 17, 17, 0.2);
	border-radius: 0;
	color: #000;
	opacity: 1;
	position: absolute;
	top: 0;
	bottom: 0;
	text-align: center;
	width: 33px;
	-webkit-transition: opacity 150ms ease-out;
	transition: opacity 150ms ease-out;
}

.chapternav-paddle:after {
	opacity: 0.8;
	-webkit-transition: opacity 200ms linear;
	transition: opacity 200ms linear;
}

.chapternav-paddle:disabled {
	opacity: 0;
}

.chapternav-paddle:hover:after {
	opacity: 1;
}

.chapternav-paddle:focus {
	outline: none;
}

.chapternav-paddle:focus:after {
	outline: 3px solid #c1e0fe;
	outline: 3px solid rgba(131, 192, 253, 0.5);
	outline-offset: 4px;
	opacity: 1;
}

.chapternav-paddle:focus:after[data-focus-method='mouse']:not(input):not(textarea):not(select),
.chapternav-paddle:focus:after[data-focus-method='touch']:not(input):not(textarea):not(select) {
	outline: none;
}

.chapternav-paddle:active {
	outline: none;
}

.chapternav-paddle:active:after {
	outline: none;
	opacity: 1;
}

.chapternav-paddle-left {
	border-right-width: 1px;
	left: 0;
}

.chapternav-paddle-left::before,
.chapternav-paddle-left::after {
	color: inherit;
	display: inline-block;
	font-style: normal;
	font-weight: inherit;
	font-size: inherit;
	line-height: 1;
	position: relative;
	z-index: 1;
	alt: '';
}

.chapternav-paddle-left::before,
.chapternav-paddle-left::after {
	text-decoration: none;
}

.chapternav-paddle-left::before {
	display: none;
}

.chapternav-paddle-left::before,
.chapternav-paddle-left::after {
	content: '<';
}

.chapternav-paddle-left:after {
	margin-left: 8px;
}

.chapternav-paddle-right {
	border-left-width: 1px;
	right: 0;
}

.chapternav-paddle-right::before,
.chapternav-paddle-right::after {
	color: inherit;
	display: inline-block;
	font-style: normal;
	font-weight: inherit;
	font-size: inherit;
	line-height: 1;
	position: relative;
	z-index: 1;
	alt: '';
}

.chapternav-paddle-right::before,
.chapternav-paddle-right::after {
	text-decoration: none;
}

.chapternav-paddle-right::before {
	display: none;
}

.chapternav-paddle-right::before,
.chapternav-paddle-right::after {
	content: '>';
}

.chapternav-paddle-right:after {
	margin-right: 8px;
}

/* Main styles */
#app {
	padding: 10px;
}

#head {
	margin-bottom: 25px;
}
.chapternav-link img {
	height: 113px;
}
}