/* Font */
@import url(font.css);

/* General */
html, body {
    font: 300 14px/1.4 'Prompt';
    width: 100%;
    background-color: #f8f8f8;
    min-height: 100%;
    color: #606060;
}
html,
body {
    overflow-x: hidden;
}
body.body-contact {
    background-color: #f5f5f5;
}
.content-wrapper {
    position: relative;
}
img {
    max-width: 100%;
}
.wrapper {
    height: 100%;
    position: relative;
    padding-top: 120px;
}
label {
    font-weight: 600;
}
label.error2,
label.error,
label.error.active,
label.error2.active {
    position: absolute;
    color: red;
    font-weight: 400;
    font-size: 12px;
    left: 0;
}
.text-right {
    text-align: right;
}
.text-left {
    text-align: left;
}
.mb-3 {
    margin-bottom: 10px;
}

/* Font */
.chonburi {
    font-family: 'Chonburi';
}

/* Color */
.text-purple {
    color: #442da0 !important;
}
.text-dark-purple {
    color: #480c77 !important;
}
.text-light-purple2 {
    color: #7e4f9c !important;
}
.text-light-purple {
    color: #a168f5 !important;
}
.text-light-purple3 {
    color: #b34efa !important;
}
.text-red {
    color: #f25d56 !important;
}
.text-white {
    color: #fff !important;
}
.text-orange {
    color: #f59240 !important;
}
.text-yellow {
    color: #fecb2f !important;
}
.text-gray {
    color: #aeaeae !important;
}
.text-blue {
    color: #6689ee !important;
}
.text-green {
    color: #3cc574 !important;
}
.text-black {
    color: #000 !important;
}

/* Heading */
.heading-character {
    display: inline-block;
    vertical-align: middle;
    width: 40px;
    height: 40px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-color: transparent;
    text-align: center;
    line-height: 40px;
    font-size: 24px;
    margin-right: 2px;
}
.heading-character.purple {
    background-color: #480c77;
    color: #fff;
}
.heading-character.light-purple {
    background-color: #9c60f5;
    color: #fff;
}
.heading-character.blue {
    background-color: #648eea;
    color: #fff;
}
.heading-character.pink {
    background-color: #fcd1fc;
    color: #442da0;
}

/* Navbar */
.navbar {
    border: none;
    border-radius: 0;
    padding-top: 0;
    padding-bottom: 5px;
    margin: 0;
    -webkit-box-shadow: 0 5px 15px rgba(168, 87, 247, 0.12);
    -moz-box-shadow: 0 5px 15px rgba(168, 87, 247, 0.12);
    box-shadow: 0 5px 15px rgba(168, 87, 247, 0.12);
}
.topbar,
.topbar-wrapper:after,
.topbar .social,
.topbar .pull-right,
.topbar .btn-topup,
.topbar .btn-vendor,
.navbar,
.navbar .navbar-brand > img {
    -webkit-transition: .5s all;
    -moz-transition: .5s all;
    transition: .5s all;
}
.navbar-default {
    background-color: #fff;
}
.navbar-default .navbar-brand {
    padding: 0 15px;
}
.navbar-brand img {
    height: 50px;
    margin-top: 0;
}
.navbar-default .navbar-nav > .active>a,
.navbar-default .navbar-nav > .active>a:focus,
.navbar-default .navbar-nav > .active>a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li > a:hover {
    background-color: transparent;
    color: #442da0;
}
.navbar-default .navbar-right > li > .auth {
    color: #100e3d;
}
.navbar-right > li > .auth {
    font-weight: 600;
    font-size: 14px;
    padding: 5px 15px;
}
.navbar-right > li > .auth .heading-character {
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 18px;
}
.navbar-right > li > .profile {
    padding: 0 15px;
}
.navbar-right > li .profile-image {
    background-size: cover;
    width: 50px;
    height: 50px;
    margin-right: 5px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
.navbar-right > li > .profile > div {
    display: inline-block;
    vertical-align: middle;
}
.navbar-right > li > .profile h4 {
    font-weight: 700;
    color: #100e3d;
    margin: 0 0 5px;
    width: 110px;
    overflow: hidden;
}
.navbar-right > li > .profile h4 > span {
    white-space: nowrap;
}
.navbar-right > li > .profile .point {
    background-color: #9c60f5;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    color: #fff;
    padding: 4px 6px;
    font-size: 12px;
    line-height: 1;
    display: inline-block;
}
.navbar-right > li > .profile .point span {
    font-size: 8px;
}
.navbar-menu > li > a {
    position: relative;
    font-weight: bold;
    font-size: 13px;
    padding: 15px 15px 15px 25px;
    color: #373737;
    min-width: 80px;
}
.navbar-menu > li > a:before {
    content: "";
    display: block;
    position: absolute;
    left: 5px;
    top: 50%;
    margin-top: -6px;
    width: 10px;
    height: 10px;
    background-image: url(../img/icon/navbar-list.png);
    background-size: 100% 100%;
}
.navbar-form {
    margin: 5px 0;
}
.navbar-form .form-group {
    position: relative;
}
.navbar-form .form-group:before {
    position: absolute;
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    background-image: url(../img/icon/navbar-search.png);
    background-size: 100% 100%;
    top: 50%;
    margin-top: -9px;
    left: 14px;
}
.navbar-form .form-control {
    border: 2px solid #9c60f5;
    height: 40px;
    width: 250px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    text-align: center;
    font-size: 14px;
    padding-left: 35px;
    box-shadow: none;
    -webkit-appearance: none;
    background-color: transparent;
}
.navbar-form .form-control::-webkit-input-placeholder {
    font-weight: 600;
    color: #dab7fd;
    letter-spacing: 2px;
}
.navbar-at-top {
    background-color: transparent !important;
    border: none;
    padding-top: 0;
    padding-bottom: 10px;
    box-shadow: none;
}
.navbar-at-top .navbar-brand > img {
    height: 50px;
    margin-top: -5px;
}
.navbar-at-top .navbar-nav>li>a {
    /*padding-top: 45px;
    padding-bottom: 15px;*/
}
.navbar-at-top .topbar {
    padding-top: 5px;
    padding-bottom: 5px;
    margin-bottom: 10px;
}
.navbar-at-top .topbar .topbar-wrapper:after {
    bottom: -13px;
}
.navbar-at-top .topbar .btn-topup,
.navbar-at-top .topbar .btn-vendor {
    padding: 5px 12px;
    height: 38px;
}
.navbar-at-top .topbar .pull-right {
    padding-top: 2px;
}
.nav .lang > a {
    position: relative;
    padding: 0;
    margin: 5px;
    text-align: center;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: #9c60f5;
    padding: 4px 0;
}
.nav .lang > a .bubble,
.navbar-header .lang .bubble {
    position: absolute;
    color: #fff;
    padding: 2px 4px;
    -webkit-border-radius: 7.5px;
    -moz-border-radius: 7.5px;
    border-radius: 7.5px;
    -webkit-box-shadow: 0 2px 4px 0 rgba(252, 171, 32, 0.7);
    -moz-box-shadow: 0 2px 4px 0 rgba(252, 171, 32, 0.7);
    box-shadow: 0 2px 4px 0 rgba(252, 171, 32, 0.7);
    background-image: -webkit-linear-gradient(57deg, #fda525 14%, #fac610 66%);
    background-image: -moz-linear-gradient(57deg, #fda525 14%, #fac610 66%);
    background-image: linear-gradient(57deg, #fda525 14%, #fac610 66%);
    right: -5px;
    top: -5px;
    line-height: 1;
    padding: 2px 8px;
    -webkit-transition: .25s all;
    -moz-transition: .25s all;
    transition: .25s all;
    visibility: hidden;
    opacity: 0;
}
.nav .lang > a .bubble.active,
.navbar-header .lang .bubble.active {
    visibility: visible;
    opacity: 1;
}
.nav .lang > a:hover,
.nav .lang > a:focus,
.nav .lang > a:active {
    background-color: #9c60f5 !important;
}
.navbar-default .navbar-nav > .open.lang > a {
    background-color: #efefef;
}
.navbar .btn-search {
    display: block;
    float: right;
    background-color: #9c60f5;
    width: 40px;
    height: 40px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    margin-right: 10px;
    margin-top: 5px;
    text-align: center;
    line-height: 40px;
}
.navbar .btn-search img {
    width: 22px;
}
.navbar .btn-search.lang {
    line-height: 1;
    padding: 4px 0;
}
.navbar .btn-search.lang img {
    width: auto;
}
.localization-menu {
    -webkit-box-shadow: 0 6px 10px 0 rgba(181, 78, 250, 0.5);
    -moz-box-shadow: 0 6px 10px 0 rgba(181, 78, 250, 0.5);
    box-shadow: 0 6px 10px 0 rgba(181, 78, 250, 0.5);
    border: none;
    padding: 10px;
}
.localization-menu > li > a {
    padding: 5px 10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.localization-menu > li > a img {
    margin-right: 5px;
}
.localization-menu > li > a:focus,
.localization-menu > li > a:hover {
    background-image: -webkit-linear-gradient(to bottom, #b54efa, #6290ea);
    background-image: -moz-linear-gradient(to bottom, #b54efa, #6290ea);
    background-image: linear-gradient(to bottom, #b54efa, #6290ea);
    color: #fff;
}
.navbar-nav > li > .localization-menu {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.localization-menu.standalone {
    list-style: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
}
.localization-menu.standalone > li > a {
    display: block;
}
.topbar {
    background-color: #3f2675;
    padding: 0;
    margin-bottom: 5px;
    color: #fff;
}
.topbar .topbar-wrapper {
    position: relative;
}
.topbar .topbar-wrapper:after {
    content: "";
    display: block;
    width: 1300px;
    height: 8px;
    position: absolute;
    left: -80px;
    bottom: -8px;
    background-image: url(../img/background/topbar.png);
    background-size: 100% 100%;
}
.topbar .social {
    margin: 0;
    padding: 5px 0;
}
.topbar .social > li {
    margin-bottom: 0;
}
.topbar .social > li img {
    width: 29px;
}
.topbar .social > li:last-child img {
    width: 14px;
    margin-right: 5px;
}
.topbar .social > li:last-child a {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 1px;
    color: #fff;
}
.topbar .social > li:last-child span {
    display: inline-block;
    vertical-align: middle;
    line-height: 29px;
}
.topbar .pull-right {
    padding-top: 4px;
}
.topbar .btn-topup {
    font-size: 16px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
}
.topbar .btn-topup img {
    width: 27px;
    margin-right: 4px;
}
.topbar .sep,
.topbar .btn-vendor span,
.topbar .btn-topup span,
.topbar .wallet span {
    display: inline-block;
    vertical-align: middle;
}
.topbar .btn-topup,
.topbar .btn-vendor {
    display: inline-block;
    color: #fff;
    font-size: 14px;
    border: 2px solid #fff;
    padding: 2px 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    vertical-align: middle;
    height: 32px;
}
.topbar .btn-vendor span {
    /*text-decoration: underline;*/
}
.topbar .btn-vendor img {
    width: 21px;
    margin-right: 4px;
}
.topbar .sep {
    margin: 0 10px;
}
.topbar .wallet {
    display: inline-block;
}
.topbar .wallet img {
    width: 24px;
}
.topbar .wallet .credit {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 1px;
}
.topbar .wallet span {
    font-size: 12px;
}



/* Section */
section {
    position: relative;
}
section.content {
    padding-top: 10px;
    padding-bottom: 40px;
}
section.content.page-category {
    padding-top: 40px;
}
section.main {
    /*padding-bottom: 25px;*/
}
section.main .owl-theme .owl-dots {
    bottom: 15px;
}
section.main:after {
    display: block;
    content: "";
    position: absolute;
    height: 54px;
    background-image: url(../img/background/main.png);
    background-size: auto 100%;
    background-position: top center;
    bottom: -1px;
    left: 0;
    right: 0;
    z-index: 1;
}
section.feature {
    padding: 50px 0 80px;
    background-color: #fff;
    overflow: hidden;
}
.sub-feature {
    position: relative;
}
section.feature:after {
    content: "";
    display: block;
    position: absolute;
    width: 360px;
    height: 360px;
    right: -200px;
    top: 40px;
    background-image: url(../img/object/circle-purple.png);
    background-size: 100% 100%;
    z-index: 1;
}
section.feature:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: -44px;
    height: 44px;
    background-image: url(../img/background/section-feature.png);
    background-position: top center;
    background-repeat: repeat-x;
}
section.feature .container {
    overflow: hidden;
    width: 1170px;
    padding: 0 15px;
    position: relative;
    z-index: 2;
}
section.feature .owl-stage-outer {
    overflow: visible;
}
section.feature .divide {
    margin-bottom: 40px;
}
section.bestseller .owl-theme .owl-dots,
section.feature .owl-theme .owl-dots {
    position: relative;
    margin-top: 25px;
}
section.feature .owl-theme .owl-dots .owl-dot.active span,
section.feature .owl-theme .owl-dots .owl-dot:hover span {
    background-color: #a54bd5;
    border-color: #a54bd5;
}
section.category {
    padding: 80px 0 40px;
}
section.category:before,
section.category:after {
    content: "";
    display: block;
    position: absolute;
    width: 44px;
    height: 463px;
    background-size: 100% 100%;
    top: 100px;
    z-index: 1;
}
section.category:before {
    background-image: url(../img/icon/category-section-background-1.png);
    left: 0;
}
section.category:after {
    background-image: url(../img/icon/category-section-background-2.png);
    right: 0;
}
section.category .container {
    position: relative;
    z-index: 2;
}
section.promotion {
    padding: 80px 0;
    background-image: -moz-linear-gradient(left, rgba(96,143,237,1) 0%, rgba(183,68,254,1) 100%);
    background-image: -webkit-gradient(left top, right top, color-stop(0%, rgba(96,143,237,1)), color-stop(100%, rgba(183,68,254,1)));
    background-image: -webkit-linear-gradient(left, rgba(96,143,237,1) 0%, rgba(183,68,254,1) 100%);
    background-image: -o-linear-gradient(left, rgba(96,143,237,1) 0%, rgba(183,68,254,1) 100%);
    background-image: -ms-linear-gradient(left, rgba(96,143,237,1) 0%, rgba(183,68,254,1) 100%);
    background-image: linear-gradient(to right, rgba(96,143,237,1) 0%, rgba(183,68,254,1) 100%);
}
section.promotion .section-header {
    margin-bottom: 70px;
}
section.promotion .container {
    background-image: url(../img/background/section-promotion.png);
    background-repeat: no-repeat;
    background-position: center top 150px;
    background-size: 100% auto;
    position: relative;
    z-index: 2;
}
section.promotion .container {
    overflow: hidden;
    width: 1200px;
    padding: 0 30px;
}
section.promotion .owl-stage-outer {
    overflow: visible;
}
section.promotion .owl-theme .owl-dots .owl-dot.active span,
section.promotion .owl-theme .owl-dots .owl-dot:hover span {
    background-color: #fdca2e;
    border-color: #fdca2e;
}
section.promotion .book-sale {
    width: 100px;
    height: 100px;
    top: -30px;
    right: -30px;
    padding-top: 20px;
}
section.promotion .book-sale p .percent {
    font-size: 36px;
}
section.promotion .book-info .info:before,
section.promotion .book-info .info:after {
    display: none;
}
section.promotion .book-info .info {
    border-top: none;
    border-bottom-color: #7e4f9c;
}
section.promotion .book-info .book-name {
    color: #fff;
}
section.promotion .book-info .book-pub {
    color: #fecb2f;
}
section.promotion .book-info .price {
    line-height: 1.4;
}
section.promotion .book-info .price .total-price {
    font-size: 18px;
    color: #fff !important;
}
section.promotion .book-info .price .total-price span {
    font-size: 12px;
}
section.promotion .book-info .price .discount {
    font-size: 13px;
    color: #f59240 !important;
}
section.promotion .action .btn {
    display: block;
    width: 80px;
    margin: 15px auto 0;
    font-size: 16px;
    padding: 8px;
}
section.promotion:before,
section.promotion:after {
    content: "";
    display: block;
    position: absolute;
    z-index: 1;
}
section.promotion:before {
    width: 300px;
    height: 300px;
    background-image: url(../img/object/circle-blue.png);
    background-size: 100% 100%;
    left: -120px;
    top: -80px;
}
section.promotion:after {
    width: 133px;
    height: 133px;
    background-image: url(../img/object/ring-pink.png);
    background-size: 100% 100%;
    right: -25px;
    bottom: -60px;
}
section.promotion .owl-theme .owl-nav.disabled+.owl-dots {
    position: relative;
}
section.article {
    padding: 80px 0;
    background-image: url(../img/background/section-article.jpg);
    background-size: cover;
    background-position: right top;
}
section.article .container{
    position: relative;
    z-index: 2;
}
section.article:before {
    content: "";
    display: block;
    position: absolute;
    width: 400px;
    height: 400px;
    background-image: url(../img/object/circle-purple.png);
    background-size: 100% 100%;
    left: -120px;
    top: 40px;
    z-index: 1;
}
section.article:after {
    content: "";
    display: block;
    position: absolute;
    width: 200px;
    height: 200px;
    background-image: url(../img/object/circle-gray.png);
    background-size: 100% 100%;
    right: -80px;
    bottom: -80px;
    z-index: 1;
}
section.feature .btn-view,
section.article .btn-view {
    display: block;
    margin: 0 auto;
    width: 260px;
}
section.feature .btn-view {
    background-color: #fff;
    margin-top: 15px;
}
section.contact {
    padding: 80px 0;
    background-image: url(../img/background/section-contact.png);
    background-size: cover;
    background-position: bottom center;
}
section.contact .submit-button {
    padding: 15px 0;
}
section.contact .submit-button .btn {
    display: block;
    width: 160px;
    margin: 0 auto;
    font-size: 18px;
    letter-spacing: 2px;
    padding: 7px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}
section.bestseller {
    margin-top: 10px;
    padding: 25px 0;
    background-image: -moz-linear-gradient(left, rgba(96,143,237,1) 0%, rgba(183,68,254,1) 100%);
    background-image: -webkit-gradient(left top, right top, color-stop(0%, rgba(96,143,237,1)), color-stop(100%, rgba(183,68,254,1)));
    background-image: -webkit-linear-gradient(left, rgba(96,143,237,1) 0%, rgba(183,68,254,1) 100%);
    background-image: -o-linear-gradient(left, rgba(96,143,237,1) 0%, rgba(183,68,254,1) 100%);
    background-image: -ms-linear-gradient(left, rgba(96,143,237,1) 0%, rgba(183,68,254,1) 100%);
    background-image: linear-gradient(to right, rgba(96,143,237,1) 0%, rgba(183,68,254,1) 100%);
}
section.bestseller .slider-wrapper {
    background-image: url(../img/background/section-bestseller.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center top 80px;
}
section.bestseller .book-info .action .row > .col-xs-6:first-child,
section.bestseller .book-info .info {
    border-color: #532e66;
}
section.bestseller .book-info .info:before,
section.bestseller .book-info .info:after {
    background-color: #6256a5;
}
section.bestseller .book-info .book-name {
    color: #fff;
}
section.bestseller .book-info .book-pub {
    color: #fecb2f;
}
section.bestseller .section-header {
    margin: 10px 0 25px;
}
section.bestseller .owl-theme .owl-dots .owl-dot.active span,
section.bestseller .owl-theme .owl-dots .owl-dot:hover span {
    background-color: #d5b979;
    border-color: #d5b979;
}
section.bestseller .owl-stage-outer {
    overflow: visible;
}
section.bestseller .col-lg-10 {
    overflow: hidden;
}
section.bestseller .book-info .price .total-price {
    color: #fff !important;
}
section.bestseller .book-info .price .discount {
    color: #f59240 !important;
}
.section-header {
    position: relative;
    margin: 10px 0 50px;
    text-align: center;
}
.section-header.low-margin {
    margin-bottom: 30px;
}
.section-header h2 {
    margin: 0;
    font-size: 24px;
    letter-spacing: 2px;
    line-height: 40px;
}
.section-header.small {
    margin-bottom: 40px;
}
.section-header.small h2 {
    font-size: 20px;
    line-height: 36px;
}
.section-header.small .heading-character {
    font-size: 20px;
    width: 36px;
    height: 36px;
    line-height: 36px;
}
.section-header .heading-character {
    margin-top: -6px;
}
.section-header.left {
    text-align: left;
}
.section-header.left.has-line:after {
    right: 0;
}
.section-header.has-line h2 {
    display: inline-block;
    background-color: #f8f8f8;
    position: relative;
    z-index: 2;
    padding-right: 15px;
}
.section-header.has-line.right h2 {
    padding-right: 0;
    padding-left: 15px;
}
.section-header.has-line.bg-white h2 {
    background-color: #fff;
}
.section-header.has-line:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 1px;
    border-top: 1px dashed #4d2c63;
    top: 50%;   
}
.section-header.right {
    text-align: right;
}
.section-header.right.has-line:after {
    left: 0;
}
.section-header.small .header-tools {
    float: right;
    background-color: #f8f8f8;
    height: 36px;
    z-index: 2;
    position: relative;
    padding-left: 15px;
}
.cat-select {
    padding: 10px 0;
    /*border-top: 1px dashed #ccc;*/
}
.cat-select > span,
.section-header .header-tools span {
    font-size: 12px;
    font-weight: 600;
}
.cat-select .select2 {
    display: block;
    width: 160px;
    margin: 8px auto 0;
}
.option-icon {
    width: 36px;
}
.select2-results__option span {
    line-height: 36px;
}
.select2-results__option {
    padding-top: 0;
    padding-bottom: 0;
}
.section-header .header-tools .form-control {
    display: inline-block;
    width: 120px;
    margin-left: 8px;
}
.section-header .header-tools.result {
    height: auto;
    margin-top: 28px;
}
.section-header .header-tools.result .num {
    font-size: 16px;
}
.search-holder {
    position: relative;
    margin-right: 180px;
    padding-left: 50px;
    font-size: 0;
}
.search-holder img {
    position: absolute;
    top: 10px;
    left: 15px;
}
.search-holder .form-control {
    display: inline-block;
    font-size: 20px;
}
.search-holder .main-input {
    width: calc(100% - 150px);
}
.search-holder .sub-input {
    width: 135px;
    margin-left: 15px;
    font-size: 16px;
    padding: 2px 0 !important;
}
.float-menu-wrapper {
    position: relative;
}
.float-menu {
    width: 160px;
    top: 5px;
    background-color: #fff;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -webkit-box-shadow: 0 12px 27px rgba(77, 44, 99, 0.24);
    -moz-box-shadow: 0 12px 27px rgba(77, 44, 99, 0.24);
    box-shadow: 0 12px 27px rgba(77, 44, 99, 0.24);
    padding: 5px 0;
    overflow: hidden;
}
.float-menu > h3 {
    font-size: 12px;
    font-weight: 600;
    padding: 15px;
    margin: 0;
}
.float-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.float-menu ul > li > a {
    display: block;
    padding: 8px 12px;
    color: #606060;
    font-weight: 300;
    position: relative;
}
.float-menu ul > li > a:after {
    content: "";
    display: block;
    position: absolute;
    right: 10px;
    left: 10px;
    bottom: 0;
    height: 1px;
    background-color: #ebebeb;
}
.float-menu ul > li:last-child > a:after {
    display: none;
}
.float-menu ul > li > a:hover {
    text-decoration: none;
    background-color: #efefef;
}
.float-menu ul > li.active > a,
.float-menu ul > li.active > a:hover,
.float-menu ul > li.active > a:focus,
.float-menu ul > li.active > a:active {
    background-color: #9c60f5;
    color: #fff;
}
.float-menu ul > li > a img {
    width: 26px;
}

/* Card */
.card {
    background-color: #fff;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -webkit-box-shadow: 15px 20px 29px rgba(173, 85, 249, 0.17);
    -moz-box-shadow: 15px 20px 29px rgba(173, 85, 249, 0.17);
    box-shadow: 15px 20px 29px rgba(173, 85, 249, 0.17);
    margin-bottom: 25px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.card-holder {
    position: relative;
}
.has-review-bg:before {
    content: "";
    display: block;
    position: absolute;
    top: -50px;
    left: 0;
    width: 485px;
    height: 114px;
    background-image: url(../img/background/book-review.png);
    background-size: 100% 100%;
    z-index: 0;
}
.card-body {
    padding: 25px;
}
.card-body.no-padding {
    padding: 0 !important;
}
.card-body:after {
    content: "";
    display: block;
    clear: both;
}
.card-faq {
    padding: 40px;
}
.card-faq .faq-image {
    display: block;
    margin: 0 auto 40px;
}
.card-title {
    margin-bottom: 40px;
    text-align: center;
}
.card-title h1 {
    margin: 0 0 10px;
}
.card-title h2 {
    font-size: 28px;
    margin: 0 0 10px;
}
.card-title .subtitle {
    font-size: 16px;
    margin: 0;
    font-weight: 300;
}
.card-title.low-margin {
    margin-bottom: 25px;
}
.card-faq .row > .col-sm-6:first-child {
    border-right: 2px dashed #b644fe;
}
.card-footer {
    display: block;
    margin: 30px auto 0;
}
.card-history, 
.card-profile {
    margin-bottom: 50px;
}
.card-history,
.card-profile {
    min-height: 491px;
}
.card-history .card-header {
    position: relative;
    background-color: #9c60f5;
    color: #fff;
    padding: 20px 0 30px;
    text-align: center;
}
.card-history .card-header:after {
    content: "";
    display: block;
    position: absolute;
    width: 0; 
    height: 0; 
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid #fff;
    bottom: 0;
    left: 60px;
}
.card-history .card-header span {
    font-weight: 400;
}
.card-history .card-header h1 {
    font-weight: 700;
    margin: 10px 0 0;
    letter-spacing: 2px;
    font-size: 40px;
    line-height: 1;
}
.card-history .card-header h1 span {
    font-size: 16px;
    font-weight: 400;
}
.card-history .card-body {
    padding: 0 10px 10px;
}
.history-list {
    min-height: 315px;
    list-style: none;
    padding: 0;
    margin: 0 0 5px;
}
.history-list > li {
    padding: 15px 0;
    border-bottom: 1px solid #b7b7b7;
}
.history-list > li:last-child {
    border: none;
}
.history-list > li > .point {
    float: left;
    width: 60px;
    text-align: center;
}
.history-list > li > .point .h3 {
    font-weight: 600;
}
.history-list > li > .point-detail {
    margin-left: 80px;
}
.history-list.has-decimal > li > .point-detail {
    margin-left: 120px;
}
.history-list > li > .point-detail strong {
    font-size: 16px;
    font-weight: 600;
}
.history-list > li > .point-detail p {
    line-height: 1.4;
    margin-bottom: 5px;
}
.card-history .blank {
    min-height: 315px;
}
.card-history .btn-view {
    display: block;
    margin: 0 auto;
    background-color: transparent;
    border: none;
    text-align: center;
}
.card-article {
    margin-bottom: 50px;
}
.card-article .card-header img {
    width: 100%;
}
.card-article .card-body {
    padding: 40px 150px;
}
.article .article-sharing {
    float: right;
    width: 80px;
}
.article .article-sharing span {
    display: block;
    font-weight: 600;
    font-size: 12px;
    margin-bottom: 10px;
}
.article .article-sharing ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.article .article-sharing ul > li {
    margin-bottom: 10px;
}
.article .article-content {
    margin-right: 100px;
}
.article .article-header {
    margin-bottom: 30px;   
}
.article .article-header h1 {
    font-size: 32px;
    line-height: 1.2;
    margin: 15px 0 10px;
    letter-spacing: 2px;
}
.article article ul,
.article article p {
    font-size: 16px;
    line-height: 2;
    font-weight: 200;
    margin-bottom: 15px;
}
.card-book-detail {
    margin-bottom: 80px;
    background-repeat: no-repeat;
    background-position: top 200px right 100px;
}
.card-book-detail .book-header a {
    color: #a168f5;
    text-decoration: underline;
}
.card-book-detail .book-header .hashtag {
    margin-bottom: 5px;
}
.card-book-review {
    margin-bottom: 50px;
}
.card-book-review .card-body {
    padding: 40px 80px;
}
.card-book-detail .card-body {
    padding: 40px 100px;
}
.card-order .card-body {
    padding: 25px 40px;
}
.card-book-detail .book-header {
    background-repeat: no-repeat;
    background-position: bottom 40px right 50px;
}
.card-book-detail.life-style .book-header {
    background-image: url(../img/background/category/life-style.png);
}
.card-book-detail.magazine .book-header {
    background-image: url(../img/background/category/magazine.png);
}
.card-book-detail.novel .book-header {
    background-image: url(../img/background/category/novel.png);
}
.card-book-detail.travel .book-header {
    background-image: url(../img/background/category/travel.png);
}
.card-book-detail.healthy .book-header {
    background-image: url(../img/background/category/healthy.png);
}
.card-book-detail.learning .book-header {
    background-image: url(../img/background/category/learning.png);
}
.card-book-detail.food .book-header {
    background-image: url(../img/background/category/food.png);
}
.card-book-detail.comic .book-header {
    background-image: url(../img/background/category/comic.png);
}
.card-book-detail.business .book-header {
    background-image: url(../img/background/category/business.png);
}
.card-book-detail.attitude .book-header {
    background-image: url(../img/background/category/attitude.png);
}
.button-action {
    text-align: center;
    font-size: 0;
    margin-bottom: 25px;
}
.button-action .btn {
    width: calc(50% - 5px);
    font-size: 16px;
}
.button-action .btn + .btn {
    margin-left: 10px;
}
.button-action .btn {
    padding: 10px 0 !important;
}
.button-action .btn-primary {
    padding: 12px 0 !important;
}
video {
    max-width: 100%;
}
.payment-tab {
    position: relative;
    border: none;
    font-size: 0;
}
.payment-tab:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: -8px;
    height: 8px;
    background-image: url(../img/background/payment-tab.png);
    background-size: 100% 100%;
}
.payment-tab > li {
    position: relative;
    float: none;
    display: inline-block;
    width: 50%;
    font-size: 16px;
    font-weight: 500;
}
.payment-tab > li:first-child:before {
    content: "";
    display: block;
    width: 1px;
    height: 20px;
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -10px;
    background-color: #edbdf0;
}
.payment-tab > li.active > a,
.payment-tab > li.active > a:focus,
.payment-tab > li.active > a:hover {
    border: none;
    color: #9c60f5;
}
.payment-tab > li > a {
    padding: 10px 0;
    text-align: center;
    color: #ff99ff;
    border: none;
}
.payment-tab > li > a span {
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
}
.payment-tab > li > a img {
    -webkit-transition: .25s all;
    -moz-transition: .25s all;
    transition: .25s all;
}
.payment-tab > li.active:after {
    content: "";
    display: block;
    width: 200px;
    height: 6px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background-color: #9c60f5;
    position: absolute;
    left: 50%;
    bottom: -3px;
    margin-left: -100px;
}
.order-form .tab-content {
    padding-top: 25px;
}
.order-form .wallet {
    padding: 10px 0;
}
.order-form .wallet img {
    width: 40px;
    margin-right: 15px;
}
.order-form .wallet .credit {
    font-size: 26px;
    font-weight: 500;
    letter-spacing: 1px;
}
.order-form .wallet span {
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
}
.order-form .wallet .btn-topup {
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    font-size: 16px;
    padding: 4px 12px;
    margin-left: 25px;
}
.order-form .wallet .btn-topup img {
    width: 27px;
    margin-right: 5px;
}


/* FAQ */
.faq {
    padding: 30px 0;
    border-bottom: 1px solid #cccccc;
}
.faq-left {
    width: 70px;
    float: left;
    padding-left: 10px;
}
.faq-right {
    padding-top: 10px;
    margin-left: 80px;
}
.faq-question {
    margin-bottom: 15px;
}
.faq-question:after,
.faq-answer:after,
.faq:after {
    content: "";
    display: block;
    clear: both;
}
.faq-left h2 {
    font-size: 36px;
    margin: 0 0 10px;
}
.faq-left h3 {
    font-size: 24px;
    font-weight: 300;
    margin: 0;
}
.card-faq p,
.faq p,
.card-faq li {
    line-height: 2;
}
.faq-purple h2,
.faq-purple h3 {
    color: #9c60f5;
}
.faq-pink h2,
.faq-pink h3 {
    color: #edbdf0;
}
.card-faq .col-sm-6 > .faq:last-child {
    border: none;
}
.card-foot {
    padding: 15px 100px;
}
.card-foot.pink {
    background-color: #edbdf0;
}
.card-foot a {
    color: #b35ee1;
    font-weight: 500;
    font-size: 14px;
    text-decoration: underline;
    margin-left: 10px;
    line-height: 1.4;
    display: inline-block;
    vertical-align: top;
    text-align: left;
}


/* Term */
.term {
    width: 700px;
    margin: 0 auto 25px;
    max-width: 100%
}


/* Page */
.page-promotion {
    background-image: url(../img/background/promotion.jpg);
    background-size: 100% auto;
    background-position: center top 150px;
    background-repeat: no-repeat;
}
.page-search {
    background-image: url(../img/background/search-result.jpg);
    background-size: 100% auto;
    background-position: center top 150px;
    background-repeat: no-repeat;
}
.page-promotion .book-card {
    margin-bottom: 50px;
}
.page-category .book-card {
    max-width: 160px;
    margin-left: auto;
    margin-right: auto;
}
.page-category .float-menu {
    position: absolute;
}
.page-category {
    background-image: url(../img/background/section-category.jpg);
    background-size: 100% auto;
    background-position: center top 600px;
    background-repeat: no-repeat;
}
.page-article {
    background-image: url(../img/background/article.png);
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
}
.page-article-detail {
    background-image: url(../img/background/article-detail.jpg);
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
}
.page-article .article-list {
    padding: 0;
}
.page-faq {
    background-image: url(../img/background/faq.png);
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
}
.page-contact {
    background-image: url(../img/background/contact.jpg);
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
}
.page-profile {
    background-image: url(../img/background/profile.png);
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
}
.page-book-detail {
    background-image: url(../img/background/book-detail.jpg);
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
}
.page-payment-success {
    background-image: url(../img/background/payment-success.jpg);
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
}


/* Footer */
footer {
    position: relative;
}
footer .main-footer {
    background-color: #151337;
    padding: 30px 0 20px;
    color: #d8d6f3;
    -webkit-box-shadow: inset 0 30px 50px -15px rgba(255,255,255,0.5);
    -moz-box-shadow: inset 0 30px 50px -15px rgba(255,255,255,0.5);
    box-shadow: inset 0 30px 50px -15px rgba(255,255,255,0.5);
}
footer .sub-footer {
    background-color: #18181b;
    text-align: center;
    padding: 10px 0 5px;
    color: #606060;
    font-size: 14px;
}
footer .footer-company {
    padding: 15px 0 0;
    text-align: center;
}
footer .footer-company img {
    vertical-align: middle;
    width: 100px;
}
footer .footer-company img + img {
    margin-left: 10px;
}
.footer-info {
    text-align: center;
    padding: 5px 0;
}
.footer-info img {
    display: inline-block;
    height: 120px;
    margin-right: 25px;
}
.footer-info p {
    margin: 0;
    line-height: 2;
    font-weight: 100;
    text-align: left;
    display: inline-block;
    width: 300px;
    vertical-align: middle;
    font-size: 15px;
}
.footer-info strong {
    font-weight: 500;
}
.footer-info strong {
    font-size: 18px;
}
.main-footer .row > .col-md-6:first-child,
.main-footer .has-line {
    border-right: 1px dashed #fff;
}
.social {
    list-style: none;
    margin: 25px 0 0;
    display: inline-block;
    text-align: center;
    padding: 0;
}
.social > li {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 8px;
}
.social > li img {
    width: 38px;
}
.social > li > a {
    display: block;
}
.footer-contact p {
    display: inline-block;
    vertical-align: middle;
}
.footer-contact p span {
    font-size: 22px;
}
.footer-link {
    list-style: none;
    padding: 0;
    margin-top: 25px;
}
.footer-link > li {
    display: inline-block;
    width: 50%;
    margin-bottom: 10px;
}
.footer-link > li > a {
    display: block;
    font-size: 13px;
    text-decoration: underline;
    color: #d8d6f3;
    padding-left: 15px;
}
footer .contact {
    text-align: center;
    padding-top: 30px;
}
footer .contact .tel {
    font-size: 21px;
    font-weight: 500;
    letter-spacing: 2px;
}
footer .contact .date {
    display: block;
    margin-top: 5px;
}

/* Book */
.book-card {
    position: relative;
    margin-bottom: 40px;
}
.owl-theme .book-card {
    margin-bottom: 0;
}
.book-cover {
    display: block;
    position: relative;
    margin-bottom: 10px;
}
.book-cover:after {
    content: "";
    display: block;
    height: 20px;
    left: -15px;
    right: -15px;
    bottom: -20px;
    background-image: url(../img/icon/shadow.png);
    background-size: 100% 100%;
    position: absolute;
}
.book-cover img {
    width: 100%;
}
.book-cover > img {
    width: 100%;
    -webkit-box-shadow: 0 0 18px rgba(77, 44, 99, 0.24);
    -moz-box-shadow: 0 0 18px rgba(77, 44, 99, 0.24);
    box-shadow: 0 0 18px rgba(77, 44, 99, 0.24);
    z-index: 10;
}
.book-badge {
    position: absolute;
    width: 25px;
    height: 28px;
    background-image: url(../img/icon/category-background.png);
    background-size: 100% 100%;
    top: -15px;
    right: -12.5px;
    padding-top: 1px;
}
.book-cover .book-badge + .book-badge {
    top: 20px;
}
.book-cover .book-sale + .book-badge {
    top: 65px;
}
.book-cover .book-sale + .book-badge + .book-badge {
    top: 100px;
}
.book-badge.language {
    background-image: none;
    padding-top: 0;
}
.book-sale {
    position: absolute;
    width: 80px;
    height: 80px;
    background-color: transparent;
    top: -20px;
    right: -20px;
    text-align: center;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    padding-top: 18px;
}
.book-sale p {
    text-align: center;
    line-height: 1.1;
}
.book-sale p .percent {
    font-size: 28px;
}
.book-sale.low {
    color: #fff;
    background: rgba(63,197,255,1);
    background: -moz-linear-gradient(top, rgba(63,197,255,1) 0%, rgba(70,135,255,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(63,197,255,1)), color-stop(100%, rgba(70,135,255,1)));
    background: -webkit-linear-gradient(top, rgba(63,197,255,1) 0%, rgba(70,135,255,1) 100%);
    background: -o-linear-gradient(top, rgba(63,197,255,1) 0%, rgba(70,135,255,1) 100%);
    background: -ms-linear-gradient(top, rgba(63,197,255,1) 0%, rgba(70,135,255,1) 100%);
    background: linear-gradient(to bottom, rgba(63,197,255,1) 0%, rgba(70,135,255,1) 100%);
}
.book-sale.mid {
    color: #fff;
    background: rgba(166,78,147,1);
    background: -moz-linear-gradient(top, rgba(166,78,147,1) 0%, rgba(77,44,99,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(166,78,147,1)), color-stop(100%, rgba(77,44,99,1)));
    background: -webkit-linear-gradient(top, rgba(166,78,147,1) 0%, rgba(77,44,99,1) 100%);
    background: -o-linear-gradient(top, rgba(166,78,147,1) 0%, rgba(77,44,99,1) 100%);
    background: -ms-linear-gradient(top, rgba(166,78,147,1) 0%, rgba(77,44,99,1) 100%);
    background: linear-gradient(to bottom, rgba(166,78,147,1) 0%, rgba(77,44,99,1) 100%);
}
.book-sale.high {
    color: #fff;
    background: rgba(255,102,102,1);
    background: -moz-linear-gradient(top, rgba(255,102,102,1) 0%, rgba(207,45,104,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,102,102,1)), color-stop(100%, rgba(207,45,104,1)));
    background: -webkit-linear-gradient(top, rgba(255,102,102,1) 0%, rgba(207,45,104,1) 100%);
    background: -o-linear-gradient(top, rgba(255,102,102,1) 0%, rgba(207,45,104,1) 100%);
    background: -ms-linear-gradient(top, rgba(255,102,102,1) 0%, rgba(207,45,104,1) 100%);
    background: linear-gradient(to bottom, rgba(255,102,102,1) 0%, rgba(207,45,104,1) 100%);
}
.book-badge img {
    width: 25px;
}
.book-info .rating {
    text-align: center;
    padding: 15px 0;
}
.book-info .rating.no-rating {
    padding: 6px 0;
}
.book-info .info {
    position: relative;
    text-align: center;
    padding: 12px 0;
    border-top: 1px solid #b7b7b7;
    border-bottom: 1px solid #b7b7b7;
}
.book-info .info:before,
.book-info .info:after {
    content: "";
    display: block;
    position: absolute;
    top: 0px;
    width: 100%;
    height: 1px;
    background-color: #d9d9d9;
}
.book-info .info:after {
    top: auto;
    bottom: 0px;
}
.book-info .info .book-name,
.book-info .info h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 6px;
}
.book-info .info .book-name {
    color: #666;
    display: block;
    line-height: 1;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.book-info .info p,
.book-info .info .book-pub {
    font-size: 12px;
    margin: 0;
    color: #a168f5;
}
.book-info .action {
    padding: 12px 0;
}
.book-info .action .row > .col-xs-6:first-child {
    border-right: 1px dashed #6a6d8c;
}
.book-info .price {
    text-align: center;
    line-height: 1;
}
.book-info .price.no-promo {
    padding-top: 8px;
    padding-bottom: 8px;
}
.book-info .price .total-price {
    font-size: 16px;
    font-weight: 600;
}
.book-info .price .total-price span {
    font-size: 10px;
}
.book-info .price .discount {
    font-size: 11px;
    color: #606060;
    text-decoration: line-through;
}
.book-info .order-no {
    font-size: 15px;
    text-align: center;
}
.book-info .order-no > span {
    font-weight: 500;
}
.book-info .order-no .sub {
    font-size: 11px;
    font-weight: 400;
}
.book-info .order-status {
    font-size: 13px;
    line-height: 1.65;
}
.book-info .btn {
    padding: 7px 0;
    letter-spacing: 2px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    width: 100%;
}
.rating .fas {
    color: #c9a452;
}
.rating .far {
    color: #aeaeae;
}
.rating-bg {
    display: block;
    width: 98px;
    background-image: url(../img/sprite/star.png);
    background-position: bottom left;
    height: 16px;
    margin: 0 auto;
}
.rating-color {
    background-image: url(../img/sprite/star.png);
    background-position: top -1px left;
    height: 16px;
}
.related-book-wrapper {
    overflow: hidden;
    width: 1200px;
    padding: 0 30px;
}
.related-book-slider .owl-stage-outer {
    overflow: visible;
}
.related-book-slider.owl-theme .owl-dots {
    position: relative;
}
.book-detail {
    padding-bottom: 30px;
    margin-bottom: 20px;
    border-bottom: 2px dashed #8c8c8c;
}
.book-detail.order {
    padding: 0;
    margin: 0;
    border: none;
}
.book-detail:after {
    content: "";
    display: block;
    clear: both;
}
.book-detail .left {
    float: left;
    width: 250px;
}
.book-detail .right {
    margin-left: 400px;
}
.book-detail .book-cover {
    margin-bottom: 20px;
}
.book-detail .action .row > .col-xs-5:first-child {
    border-right: 1px dashed #6a6d8c;
}
.book-detail .action {
    text-align: center;
    margin-bottom: 15px;
}
.book-detail .action .price .total-price {
    font-size: 18px;
    font-weight: 500;
}
.book-detail .action .price.no-promo {
    padding: 8px 0;
}
.book-detail .action .price .total-price span {
    font-size: 12px;
}
.book-detail .action .discount {
    font-size: 12px;
    text-decoration: line-through;
}
.book-detail .action .btn {
    /*width: 100px;*/
    padding: 8px 0;
    /*margin-top: 4px;*/
    font-size: 16px;
}
.book-detail .promo-valid {
    font-size: 12px;
    text-align: center;
    display: block;
}
.book-header {
    padding-left: 50px;
}
.book-header .col-left {
    float: left;
    width: 240px;
}
.book-header .col-right {
    margin-left: 250px;
}
.book-header h1 {
    font-size: 32px;
    margin: 20px 0 10px;
}
.book-header .exclusive-video {
    margin: 0 0 15px;
}
.book-header .exclusive-video img {
    float: left;
}
.book-header .exclusive-video .length {
    font-weight: 300;
}
.book-header .exclusive-video .pad {
    display: block;
    padding-left: 36px;
}
.book-header p {
    line-height: 2;
}
.book-header p b {
    font-weight: 600;
    font-size: 12px;
}
.book-header .rating-holder {
    text-align: center;
    font-size: 11px;
    font-weight: 400;
    margin-bottom: 15px;
}
.book-header .rating-holder .rating {
    font-size: 18px;
}
.book-header .sharing {
    list-style: none;
    padding: 0;
}
.book-header .sharing > li {
    display: inline-block;
    margin-left: 10px;
}
.book-header .pull-left {
    margin-top: 5px;
}
.book-gallery label {
    display: block;
    margin-bottom: 15px;
    font-weight: 600;
    font-size: 12px;
}
.book-gallery .example-image,
.book-gallery img {
    width: 100%;
    margin-bottom: 30px;
    -webkit-box-shadow: 7px 10px 15px rgba(51, 51, 51, 0.15);
    -moz-box-shadow: 7px 10px 15px rgba(51, 51, 51, 0.15);
    box-shadow: 7px 10px 15px rgba(51, 51, 51, 0.15);
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
}
.book-gallery .example-image {
    display: block;
    height: 100px;
    background-size: cover;
    background-position: center center;
}
.book-holder .rating-holder,
.book-detail .rating-holder {
    text-align: center;
    font-size: 11px;
    font-weight: 400;
    margin-bottom: 25px;
}
.book-holder .rating-holder {
    margin-bottom: 15px;
}
.book-holder .rating-bg {
    margin-bottom: 5px;
}
.book-holder .rating-holder .rating,
.book-detail .rating-holder .rating {
    font-size: 18px;
}
.book-detail .book-header .rating-holder {
    text-align: left;
    margin-left: 55px;
    margin-bottom: 15px;
}
.book-detail .book-header .rating-bg {
    margin: 0 auto 5px 5px;
}
.book-holder .info {
    margin-bottom: 15px;
}
.book-holder .info h3,
.book-detail .info h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 6px;
}
.book-holder .info p,
.book-detail .info p {
    font-size: 12px;
    margin: 0;
}
.book-holder .book-cover {
    margin-bottom: 20px;
}
.book-holder .order-status {
    text-align: left;
    margin: 0 0 15px;
    font-weight: 400;
    font-size: 22px;
}
.book-holder .order-num {
    text-align: left;
    margin-bottom: 15px;
    font-weight: 400;
    font-size: 16px;
}
.book-holder .btn-primary {
    display: block;
    font-size: 16px;
    padding: 10px;
    letter-spacing: 2px;
    margin: 0 auto 15px;
}
.book-holder .btn-view {
    background-color: transparent;
    border: none;
    font-size: 12px;
    padding: 8px 0;
    display: block;
    color: #a168f5;
    font-weight: 300;
    text-decoration: underline;
}
.book-holder .btn-view img {
    width: 20px;
    margin-top: -3px;
    margin-right: 5px;
}
.book-holder .btn-view:hover,
.book-holder .btn-view:active,
.book-holder .btn-view:target,
.book-holder .btn-view:focus,
.book-holder .btn-view.active,
.book-holder .btn-view.active.focus,
.book-holder .btn-view.active:focus,
.book-holder .btn-view.active:hover,
.book-holder .btn-view:active.focus,
.book-holder .btn-view:active:focus,
.book-holder .btn-view:active:hover {
    background-color: transparent;
}
.card-how-to-read {
    padding: 40px 30px;
}
.card-how-to-read .section-header {
    margin: 0 0 20px;
}


/* Order */
.order .line {
    position: relative;
}
.order .line:after {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    top: 0;
    height: 450px;
    width: 1px;
    border-left: 2px dotted #6a6d8c;
}
.order-form {
    position: relative;
}
.order-form {
    background-image: url(../img/background/card-order.png);
    background-repeat: no-repeat;
    background-position: top 0 right 50px;
}
.order-form .input-group2 {
    position: relative;
}
.order-form .input-group2 .form-control {
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    height: 44px;
    padding-right: 90px;
    line-height: 32px;
}
.order-form .input-group2 .form-control .discount {
    text-decoration: line-through;
    font-size: 12px;
}
.order-form .input-group2 .btn {
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    height: 44px;
    position: absolute;
    width: 80px;
    right: 0;
    top: 0;
    font-size: 16px;
}
.order-form .input-group2.confirm .form-control {
    padding-right: 140px;
}
.order-form .input-group2.confirm .btn {
    width: 130px;
    line-height: 32px;
}
.order-form {
    /*border-bottom: 2px dotted #d7d7d7;*/
    /*margin-bottom: 20px;*/
}
.order-form .tab-content {
    border-bottom: 2px dotted #d7d7d7;
    margin-bottom: 20px;
}
.order-info {
    font-size: 15px;
    margin-bottom: 20px;
}
.order-info .dl-horizontal {
    margin: 0;
}
.order-info .dl-horizontal dt {
    text-align: left;
    width: 140px;
}
.order-info .dl-horizontal dd {
    margin-left: 150px;
    font-weight: 400;
    line-height: 1.6;
}
.order-info .dl-horizontal dd a {
    text-decoration: underline;
}
.card-order-success .has-bg {
    background-image: url(../img/background/bg-order-success.png);
    background-size: cover;
}
.card-order-success .book-holder {
    text-align: center;
    padding: 120px 0 0;
}
.card-order-success .book-holder i {
    font-size: 48px;
    margin-bottom: 15px;
}
.card-order-success .book-holder .order-status {
    text-align: center;
    font-size: 28px;
    line-height: 24px;
    margin-bottom: 25px;
}
.card-order-success .book-holder .order-status .small {
    color: #7f4da2;
}
.card-order-success .book-holder .btn {
    width: 240px;
    max-width: 100%;
    padding: 10px 0;
    letter-spacing: 0;
}
.card-order-success .book-holder .btn-primary {
    padding: 12px 0;
}
.card-order-success .book-holder .btn img {
    margin-right: 5px;
}
.card-order-success .book-holder .btn span {
    vertical-align: middle;
    display: inline-block;
    line-height: 24px;
}


/* Order card */
.card-order-detail .card-body {
    padding: 20px 25px;
}
.card-order-detail .cart-item .book-cover {
    width: 60px;
}
.card-order-detail .cart-item .info h3 {
    font-size: 16px;
    margin: 0 0 2px;
    line-height: 1;
}
.card-order-detail .cart-item .info p {
    font-size: 12px;
}
.card-order-detail .cart-item .price {
    text-align: right;
}
.card-order-detail .cart-item .price .total-price {
    font-size: 18px;
}
.card-order-detail .cart-item > div:last-child {
    width: 100px;
}
.card-order-detail .cart-item > div:first-child {
    width: calc(100% - 100px);
}
.card-order-detail .cart-item .info {
    width: calc(100% - 75px);
}
.card-order-detail .cart-group > .cart-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}
.card-order-detail .cart-item > div:last-child {
    text-align: right;
}
.order-header {
    padding-bottom: 10px;
    margin-bottom: 15px;
    border-bottom: dashed 1px #4d2c63;
}
.order-header h2 {
    font-weight: 600;
    font-size: 20px;
    margin: 0 0 2px;
}
.order-header p {
    margin: 0;
}
.order-header .order-status {
    font-size: 18px;
    font-weight: 500;
    margin-top: 5px;
    display: inline-block;
}
.order-header .order-status i {
    font-size: 24px;
    vertical-align: middle;
    margin-right: 5px;
}
.order-status > span {
    display: inline-block;
    vertical-align: middle;
}


/* Review */
.review-user-image {
    display: block;
    width: 64px;
    height: 64px;
    background-size: cover;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-shadow: 3px 3px 10px rgba(51, 51, 51, 0.15);
    -moz-box-shadow: 3px 3px 10px rgba(51, 51, 51, 0.15);
    box-shadow: 3px 3px 10px rgba(51, 51, 51, 0.15);
    margin: 0 auto;
}
.review {
    margin-bottom: 15px;
}
.review-list {
    margin-bottom: 20px;
    border-bottom: 2px dotted #e1e1e1;
}
.review-header {
    padding: 10px 0;
    margin-bottom: 5px;
}
.review-header .col-lg-2 {
    border-right: 1px dashed #b644fe;
}
.review-header h4 {
    margin: 0 0 5px;
}
.review-header span {
    font-size: 12px;
    font-weight: 400;
}
.rating-form label,
.review-header label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    font-size: 12px;
}
.review-header .rating {
    font-size: 16px;
}
.review-header .rating-bg {
    margin: 8px auto 0 0;
}
.review-content {
    font-weight: 300;
    line-height: 2;
}
.review-loading {
    text-align: center;
    min-height: 590px;
    line-height: 590px;
}
.review-loading img {
    margin-right: 10px;
    -webkit-animation: spinHorizontal 5s infinite; /* Safari 4+ */
    -moz-animation:    spinHorizontal 5s infinite; /* Fx 5+ */
    -o-animation:      spinHorizontal 5s infinite; /* Opera 12+ */
    animation:         spinHorizontal 5s infinite; /* IE 10+, Fx 29+ */
}
.rating-form .form-control {
    text-align: center;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    line-height: 1.6;
    height: auto;
    min-height: 44px;
    width: 660px;
    display: inline-block;
    margin-right: 20px;
    vertical-align: top;
    border-color: #9c60f5;
}
.rating-form .btn {
    height: 44px;
    width: 100px;
    font-size: 16px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.rating-input {
    height: 18px;
    line-height: 18px;
    font-size: 18px;
    position: relative;
}
.rating-input label {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    cursor: pointer;
    font-size: 18px;
}
.rating-input label .icon + .icon {
    margin-left: 5px;
}
.rating-input label:last-child {
    position: static;
}
.rating-input label:nth-child(1) {
    z-index: 5;
}
.rating-input label:nth-child(2) {
    z-index: 4;
}
.rating-input label:nth-child(3) {
    z-index: 3;
}
.rating-input label:nth-child(4) {
    z-index: 2;
}
.rating-input label:nth-child(5) {
    z-index: 1;
}
.rating-input label input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}
.rating-input label .icon {
    float: left;
    color: transparent;
}
.rating-input label:last-child .icon {
    color: #aeaeae;
}
.rating-input:not(:hover) label input:checked ~ .icon,
.rating-input:hover label:hover input ~ .icon {
    color: #c9a452;
}
.rating-input label input:focus:not(:checked) ~ .icon:last-child {
    color: #aeaeae;
    text-shadow: 0 0 5px #09f;
}



/* Category */
.category-item {
    display: block;
    text-align: center;
    margin-bottom: 40px;
    color: #606060;
}
.category-icon {
    width: 120px;
    height: 120px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-color: transparent;
    padding-top: 12px;
    margin: 0 auto 15px;
    -webkit-box-shadow: 10px 8px 40px rgba(77, 44, 99, 0.26);
    -moz-box-shadow: 10px 8px 40px rgba(77, 44, 99, 0.26);
    box-shadow: 10px 8px 40px rgba(77, 44, 99, 0.26);
}
.category-icon img {
    width: 96px;
    height: 96px;
}
.category-item h4 {
    margin: 0;
}
.category-icon.purple {
    background-color: #480c77;
}
.category-icon.light-purple {
    background-color: #9c60f5;
}

/* Article */
.article-list {
    padding: 30px 0;
}
.article-card {
    background-color: #fff;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 25px;
    -webkit-box-shadow: 10px 8px 40px rgba(77, 44, 99, 0.17);
    -moz-box-shadow: 10px 8px 40px rgba(77, 44, 99, 0.17);
    box-shadow: 10px 8px 40px rgba(77, 44, 99, 0.17);
}
.article-card img {
    width: 100%;
}
.article-card .article-image {
    display: block;
    width: 100%;
    height: 200px;
    background-size: cover;
    background-position: center center;
}
.article-card .article-info {
    padding: 15px 15px 15px 0;
    background-position: right bottom;
    background-repeat: no-repeat;
    height: 200px;
}
.article-card .article-info span {
    font-size: 15px;
    font-weight: 400;
    color: #4d2c63;
}
.article-card .article-info .article-header {
    display: block;
    font-size: 20px;
    font-weight: 600;
    margin: 5px 0;
    color: #000;
}
.article-card .article-info p {
    font-size: 14px;
    line-height: 1.6;
}
.article-card.magazine .article-info {
    background-image: url(../img/background/article/magazine.png);
}
.article-card.model .article-info {
    background-image: url(../img/background/article/model.png);
}
.article-card.other .article-info {
    background-image: url(../img/background/article/other.png);
}
.article-card.small .article-info {
    min-height: 144px;
}
.article-header {

}


/* Contact */
.contact-form {
    padding: 30px 0;
}
.contact-form .logo {
    display: block;
    width: 160px;
    margin: 0 auto 40px;
}
.contact-form .submit-button .btn {
    display: block;
    width: 160px;
    margin: 0 auto;
    font-size: 18px;
    letter-spacing: 2px;
    padding: 7px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}
.contact-form form {
    padding-bottom: 40px;
    margin-bottom: 20px;
    border-bottom: 2px dashed #b7b7b7;
}
.contact-footer .tel {
    float: right;
    text-align: right;
}
.contact-footer .tel h2 {
    font-size: 20px;
    margin: 0;
}
.contact-footer .tel .date {
    display: block;
    font-weight: 400;
}
.contact-footer > ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
.contact-footer > ul > li {
    display: inline-block;
}
.contact-footer > ul > li + li {
    margin-left: 8px;
}


/* Profile */
.profile {
    max-width: 400px;
    margin: 0 auto;
}
.profile-info {
    margin-bottom: 30px;
}
.profile-info:after {
    content: "";
    display: block;
    clear: both;
}
.profile-info > .profile-image {
    width: 80px;
    height: 80px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    float: left;
    background-size: cover;
    -webkit-box-shadow: 5px 15px 30px rgba(173, 85, 249, 0.17);
    -moz-box-shadow: 5px 15px 30px rgba(173, 85, 249, 0.17);
    box-shadow: 5px 15px 30px rgba(173, 85, 249, 0.17);
    position: relative;
}
.profile-info > .profile-image label {
    position: absolute;
    right: -5px;
    top: 5px;
    font-size: 11px;
    color: #a36df6;
    text-decoration: underline;
    cursor: pointer;
}
.profile-info > .profile-image label img {
    width: 20px;
    margin-right: 5px;
}
.profile-info .btn {
    float: right;
    padding: 8px;
    width: 90px;
    margin-top: 18px;
}
.profile-name {
    margin-left: 100px;
    margin-right: 100px;
    padding-top: 18px;
}
.profile-name h3,
.profile-name p {
    margin: 0;
}
.profile-name h3 {
    font-size: 20px;
}
.profile-name p {
    font-size: 12px;
    font-weight: 400;
}
.profile .btn-save {
    display: block;
    padding: 8px;
    font-size: 16px;
    width: 150px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    margin: 15px auto 10px;
}


/* Slider */
.slider-back,
.slider-next,
.owl-theme .owl-nav button[class*=owl-] {
    position: absolute;
    top: 50%;
    padding: 10px !important;
    z-index: 10;
}
.owl-carousel .owl-nav button.owl-prev,
.slider-back {
    left: 30px;
}
.owl-carousel .owl-nav button.owl-next,
.slider-next {
    right: 30px;
}
.owl-theme .owl-nav [class*=owl-]:hover {
    background-color: transparent;
}
.owl-theme .owl-dots .owl-dot span {
    border: 2px solid #bbb;
    background-color: transparent;
}
.owl-theme .owl-nav {
    margin: 0;
}
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
    border-color: #a168f5;
    background-color: #a168f5;
}
.owl-theme .owl-dots {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
.slider-wrapper {
    position: relative;
}

/* Form */
.form-group {
    position: relative;
    margin-bottom: 25px;
}
.form-control {
    font-size: 16px;
    box-shadow: none;
    background-color: transparent;
    font-weight: 400;
    border: 1px solid #9c60f5;
}
.form-control:focus {
    border-color: #9c60f5;
}
.form-control.bigger {
    font-size: 20px;
    height: 44px;
}
.form-control:focus {
    box-shadow: none;
    color: #9c60f5;
}
.form-control.underline {
    box-shadow: none;
    background-color: transparent;
    border-radius: 0;
    border: none;
    padding: 2px 0 8px;
    height: 40px;
    background-image: linear-gradient(to right, #b54efa 0%, #6290ea 50%, #6a6c8d 50%, #6a6c8d 100%);
    background-size: calc(200% + 4px) 2px; /* 4px extra to cater for 2px border on right + 2px on left */
    background-repeat: no-repeat;
    background-origin: border-box; /* make background start from border area itself instead of content/padding area */
    background-position: right bottom;
    box-sizing: border-box !important;
    -webkit-transition: all .25s;
    -moz-transition: all .25s;
    transition: all .25s;
}
select.form-control.underline {
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url(../img/icon/select-arrow.png);
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: auto auto;
    border-bottom: 2px solid #6a6c8d;
    padding-right: 30px;
}
.form-control.underline:focus {
    color: #9c60f5;
    background-position: left bottom;
}
select.form-control.underline:focus {
    background-position: right 12px center;
    border-color: #9c60f5;
}
.form-control::-webkit-input-placeholder {
    font-weight: 600;
    color: #dab7fd;
    letter-spacing: 2px;
}
textarea.form-control {
    border: 2px solid #6a6c8d;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    height: auto;
    padding: 6px 12px;
}
textarea.form-control:focus {
    color: #480c77;
    border-color: #b54efa;
}
input.form-control.underline.error {
    background-image: linear-gradient(to right, red 0%, red 100%);
}
textarea.form-control.error,
select.form-control.underline.error {
    border-color: red;
}
textarea {
    resize: none;
}
.select2-container--default .select2-selection--single .select2-selection__rendered > span {
    font-weight: 300;
    letter-spacing: 0;
    line-height: 36px;
    display: inline-block;
}
.select2-selection__rendered {
    text-align: left;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    display: none;
}
.select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 8px;
    padding-right: 10px;
}
.select2-container--default .select2-selection--single,
select.form-control {
    height: 40px;
    -webkit-appearance: none;
    background-color: transparent;
    box-shadow: none;
    border: 2px solid #9c60f5;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    font-weight: 600;
    color: #dab7fd;
    letter-spacing: 2px;
    font-size: 14px;
    background-image: url(../img/icon/select-arrow.png);
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 25px;
}
select.form-control:focus {
    border-color: #9c60f5;
}
label {
    font-weight: 500;
    -webkit-transition: all .25s;
    -moz-transition: all .25s;
    transition: all .25s;
}
label.active {
    color: #480c77;
}


/* Modal */
.modal.fade .modal-dialog {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    -webkit-transition: -webkit-transform 0.25s ease-out;
    -moz-transition: -moz-transform 0.25s ease-out;
    -o-transition: -o-transform 0.25s ease-out;
    transition: transform 0.25s ease-out;
}
.vertical-alignment-helper {
    display:table;
    height: 100%;
    width: 100%;
    pointer-events: none; /* This makes sure that we can still click outside of the modal to close it */
}
.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
    pointer-events:none;
}
.modal-content {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width:inherit;
    height:inherit;
    /* To center horizontally */
    margin: 25px auto;
    pointer-events: all;
    -webkit-box-shadow: 15px 20px 80px rgba(173, 85, 249, 0.56);
    -moz-box-shadow: 15px 20px 80px rgba(173, 85, 249, 0.56);
    box-shadow: 15px 20px 80px rgba(173, 85, 249, 0.56);
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    border: none;
}
.modal-backdrop.in {
    filter: alpha(opacity=85);
    opacity: 0.85;
}
.modal-dialog {
    width: 380px;
}
.modal-lg {
    width: 780px;
}
.modal-md {
    width: 700px;
}
.modal-login {
    width: 900px;
}
.modal-header {
    border: none;
    padding: 40px 60px 20px;
}
.modal-header .section-header {
    margin: 0;
}
.modal-body {
    padding: 20px 60px 40px;
}
.modal-body.no-padding {
    padding: 0;
}
.modal-header .close {
    margin-top: 5px;
    /* top: 5px; */
    color: #7e4f9c;
    opacity: 0.8;
    font-weight: 500;
    font-size: 16px;
    position: relative;
    z-index: 1;
}
#walletHistoryModal .modal-header,
#pointHistoryModal .modal-header {
    padding: 30px 50px 30px 120px;
    background-color: #9c60f5;
    color: #fff;
    position: relative;
    -webkit-border-top-left-radius: 15px;
    -moz-border-top-left-radius: 15px;
    border-top-left-radius: 15px;
    -webkit-border-top-right-radius: 15px;
    -moz-border-top-right-radius: 15px;
    border-top-right-radius: 15px;
}
#walletHistoryModal .modal-header .arrow,
#pointHistoryModal .modal-header .arrow {
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid #fff;
    bottom: 0;
    left: 150px;
}
#walletHistoryModal .close,
#pointHistoryModal .close {
    color: #fff;
}
#walletHistoryModal .profile-info,
#pointHistoryModal .profile-info {
    display: inline-block;
    margin: 0;
}
#walletHistoryModal .profile-info .profile-name,
#pointHistoryModal .profile-info .profile-name {
    margin-right: 0;
    text-align: left;
}
#walletHistoryModal .modal-header span,
#pointHistoryModal .modal-header span {
    font-weight: 400;
}
#walletHistoryModal .modal-header h1,
#pointHistoryModal .modal-header h1 {
    font-weight: 700;
    margin: 10px 0 0;
    letter-spacing: 2px;
    font-size: 40px;
    line-height: 1;
}
#walletHistoryModal .modal-header h1 span,
#pointHistoryModal .modal-header h1 span {
    font-size: 16px;
    font-weight: 400;
}
#walletHistoryModal .modal-body,
#pointHistoryModal .modal-body {
    padding: 15px 25px 20px;
}
#walletHistoryModal .modal-body .row > .col-sm-6:first-child,
#pointHistoryModal .modal-body .row > .col-sm-6:first-child {
    border-right: 2px dotted #9c60f5;
}
#walletHistoryModal .paginationjs,
#walletHistoryModal .pagination,
#pointHistoryModal .paginationjs,
#pointHistoryModal .pagination {
    margin: 15px 0 0;
}
#walletHistoryModal .paginationjs .paginationjs-page.active > a,
#walletHistoryModal .paginationjs .paginationjs-page.active > a:focus,
#walletHistoryModal .paginationjs .paginationjs-page.active > a:hover,
#walletHistoryModal .pagination>.active>a,
#walletHistoryModal .pagination>.active>a:focus,
#walletHistoryModal .pagination>.active>a:hover,
#walletHistoryModal .pagination>.active>span,
#walletHistoryModal .pagination>.active>span:focus,
#walletHistoryModal .pagination>.active>span:hover,
#pointHistoryModal .paginationjs .paginationjs-page.active > a,
#pointHistoryModal .paginationjs .paginationjs-page.active > a:focus,
#pointHistoryModal .paginationjs .paginationjs-page.active > a:hover,
#pointHistoryModal .pagination>.active>a,
#pointHistoryModal .pagination>.active>a:focus,
#pointHistoryModal .pagination>.active>a:hover,
#pointHistoryModal .pagination>.active>span,
#pointHistoryModal .pagination>.active>span:focus,
#pointHistoryModal .pagination>.active>span:hover {
    background-color: #9c60f5;
}
#walletHistoryModal .pagination>li:first-child>a,
#walletHistoryModal .pagination>li:last-child>a,
#pointHistoryModal .pagination>li:first-child>a,
#pointHistoryModal .pagination>li:last-child>a {
    color: #9c60f5;
}
.modal-login .login-form {
    padding: 40px 0px 40px 60px;
}
.signup-form h3,
.login-form h3 {
    margin: 10px 0 25px;
    letter-spacing: 2px;
}
.modal-login .signup-form {
    padding: 40px 30px 40px 60px;
    background-color: #f6eeff;
    -webkit-border-top-right-radius: 15px;
    -moz-border-top-right-radius: 15px;
    border-top-right-radius: 15px;
    -webkit-border-bottom-right-radius: 15px;
    -moz-border-bottom-right-radius: 15px;
    border-bottom-right-radius: 15px;
    position: relative;
}
.modal-login .signup-form:after {
    content: "";
    display: block;
    width: 66px;
    height: 78px;
    position: absolute;
    top: 25px;
    right: 40px;
    background-image: url(../img/background/signup.png);
    background-size: 100% 100%;
}
.modal-login .modal-wrapper {
    position: relative;
    width:inherit;
    height:inherit;
    /* To center horizontally */
    margin: 25px auto;
}
.modal-login .modal-content {
    margin: 0;
}
.modal-login .object-1 {
    position: absolute;
    width: 237px;
    height: 238px;
    background-image: url(../img/object/login-object-1.png);
    background-size: 100% 100%;
    top: -60px;
    left: -80px;
}
.modal-login .object-2 {
    position: absolute;
    width: 265px;
    height: 263px;
    background-image: url(../img/object/login-object-2.png);
    background-size: 100% 100%;
    bottom: -50px;
    right: -150px;
}
.modal-login .login-form .sep span {
    background-color: #fff;
}
.modal-login .login-form .btn-facebook {
    margin: 0;
}
.login-form .btn-signup {
    display: block;
    padding: 10px;
    font-size: 16px;
}
.reset-form .high-margin,
.login-form .high-margin {
    margin-bottom: 50px;
}
.login-form .btn-primary {
    display: block;
    width: 100%;
    padding: 10px;
    font-size: 16px;
    letter-spacing: 2px;
    margin-bottom: 20px;
}
.signup-form .forgot,
.login-form .forgot {
    display: block;
    text-align: center;
    font-weight: 500;
    text-decoration: underline;
    margin-bottom: 15px;
}
.login-form .has-margin {
    margin-top: 15px;
}
.login-form .sep {
    position: relative;
    margin: 25px 0;
}
.login-form .sep:before {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    position: absolute;
    top: 50%;
    left: 0;
    border-top: 2px dotted #b7b7b7;
    margin-top: -1px;
}
.login-form .sep span {
    display: block;
    background-color: #f8f8f8;
    position: relative;
    width: 60px;
    margin: 0 auto;
    text-align: center;
}
.login-form .btn-facebook,
.login-form .btn-apple {
    margin-bottom: 15px;
}
.signup-form .btn-primary {
    font-size: 16px;
    letter-spacing: 2px;
    padding: 12px;
    display: block;
    width: 100%;
}
.signup-form .accept {
    font-size: 12px;
    display: block;
    padding-top: 10px;
    position: relative;
}
.signup-form .accept .error {
    bottom: -20px;
}
.reset-form {
    text-align: center;
}
.reset-form h3 {
    margin: 10px 0 15px;
    letter-spacing: 2px;
}
.reset-form p {
    margin-bottom: 30px;
    font-weight: 200;
    line-height: 2;
}
.reset-form .btn-primary {
    font-size: 16px;
    letter-spacing: 2px;
    padding: 12px;
    display: block;
    width: 180px;
    margin: 0 auto;
}
.modal-status {
    text-align: center;
}
.modal-status .modal-image {
    display: block;
    margin: 0 auto 30px;
}
.modal-status h2 {
    margin: 0 0 15px;
}
.modal-status p {
    font-weight: 200;
    line-height: 2;
    margin-bottom: 25px;
}
.modal-status .btn {
    font-size: 16px;
    letter-spacing: 2px;
    padding: 10px;
    display: block;
    width: 100%;
    margin: 0 auto;
}
#rateXModal p {
    margin-bottom: 15px;
}
#rateXModal .accept {
    margin-bottom: 15px;
    display: block;
    cursor: pointer;
}
#rateXModal .accept input[type=checkbox] {
    margin-right: 10px;
}


/* Login */
.login-box {
    width: 360px;
    max-width: 100%;
    margin: 0 auto 40px;
    padding: 40px 15px 0;
}
.login-box.wider {
    width: 365px;
}
.login-box .login-image {
    display: block;
    margin: 0 auto 15px;
}
.login-box.wider .login-image {
    margin-bottom: 25px;
}
.login-box.signup {
    width: 480px;
}
.login-box .signup-form .btn-primary {
    width: 240px;
    margin: 0 auto 15px;
}
.login-box .signup-form .accept {
    text-align: center;
    font-size: 14px;
    margin-bottom: 20px;
    position: relative;
}
.login-box .signup-form .accept .error {
    bottom: -20px;
}


/* Alert */
.alert {
    text-align: left;
}
.alert-danger {
    color: #fff;
    background-color: #E08283;
    border-color: #E08283;
}


/* Pagination */
.pagination > li {
    display: inline-block;
}
.paginationjs ul {
    padding: 0;
}
.paginationjs .paginationjs-pages > ul > li + li,
.pagination > li + li {
    margin-left: 6px;
}
.paginationjs {
    margin-bottom: 20px;
}
.paginationjs .paginationjs-pages {
    text-align: center;
}
.paginationjs .paginationjs-pages li>a,
.pagination > li > a,
.pagination > li > span {
    display: block;
    border: none;
    background-color: transparent;
    color: #606060;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    padding: 6px 14px;
}
.paginationjs .paginationjs-page.active > a,
.paginationjs .paginationjs-page.active > a:focus,
.paginationjs .paginationjs-page.active > a:hover,
.pagination>.active>a,
.pagination>.active>a:focus,
.pagination>.active>a:hover,
.pagination>.active>span,
.pagination>.active>span:focus,
.pagination>.active>span:hover {
    background-color: #71cff4;
    color: #fff;
}
.paginationjs .paginationjs-prev a:focus,
.paginationjs .paginationjs-page a:focus,
.paginationjs .paginationjs-next a:focus,
.paginationjs .paginationjs-prev a:hover,
.paginationjs .paginationjs-page a:hover,
.paginationjs .paginationjs-next a:hover {
    z-index: 2;
    color: #23527c;
    background-color: #eee;
    border-color: #ddd;
}
.paginationjs .paginationjs-prev.disabled a,
.paginationjs .paginationjs-page.disabled a,
.paginationjs .paginationjs-next.disabled a,
.pagination>.disabled>a,
.pagination>.disabled>a:focus,
.pagination>.disabled>a:hover,
.pagination>.disabled>span,
.pagination>.disabled>span:focus,
.pagination>.disabled>span:hover {
    background-color: transparent;
    color: #aaa !important;
}
.paginationjs .paginationjs-pages .paginationjs-prev > a,
.paginationjs .paginationjs-pages .paginationjs-next > a,
.pagination>li:first-child>a,
.pagination>li:last-child>a {
    color: #589bfc;
}
.paginationjs .paginationjs-prev li,
.paginationjs .paginationjs-pages li,
.paginationjs .paginationjs-next li {
    float: none;
    border: none;
    display: inline-block;
    vertical-align: top;
}
.paginationjs .paginationjs-pages li:last-child {
    border: none;
}
.paginationjs .paginationjs-pages li.active>a,
.paginationjs .paginationjs-prev li>a,
.paginationjs .paginationjs-pages li>a,
.paginationjs .paginationjs-next li>a {
    line-height: 1.42857143;
    height: auto;
}


/* Button */
a, .btn {
    -webkit-transition: .25s all;
    -moz-transition: .25s all;
    transition: .25s all;
    cursor: pointer;
}
a {
    color: #a64e93;
}
a:hover,
a:focus,
a:active,
a:target {
    color: #843673;
}
.btn {
    border: none;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    font-weight: 400;
}
.btn-primary {
    background: rgba(98,144,234,1);
    background: -moz-linear-gradient(90deg, rgba(98,144,234,1) 0%, rgba(181,78,250,1) 100%);
    background: -webkit-gradient(left, right, color-stop(0%, rgba(98,144,234,1)), color-stop(100%, rgba(181,78,250,1)));
    background: -webkit-linear-gradient(90deg, rgba(98,144,234,1) 0%, rgba(181,78,250,1) 100%);
    background: linear-gradient(90deg, rgba(98,144,234,1) 0%, rgba(181,78,250,1) 100%);
    color: #fff !important;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary:target,
.btn-primary:focus,
.btn-primary.active,
.btn-primary.active.focus,
.btn-primary.active:focus,
.btn-primary.active:hover,
.btn-primary:active.focus,
.btn-primary:active:focus,
.btn-primary:active:hover {
    background: rgba(83,130,222,1);
    background: -moz-linear-gradient(90deg, rgba(83,130,222,1) 0%, rgba(169,66,238,1) 100%);
    background: -webkit-gradient(left, right, color-stop(0%, rgba(83,130,222,1)), color-stop(100%, rgba(169,66,238,1)));
    background: -webkit-linear-gradient(90deg, rgba(83,130,222,1) 0%, rgba(169,66,238,1) 100%);
    background: linear-gradient(90deg, rgba(83,130,222,1) 0%, rgba(169,66,238,1) 100%);
    color: #fefefe !important;
}
.btn-warning {
    background: rgba(245,148,64,1);
    background: -moz-linear-gradient(90deg, rgba(245,148,64,1) 0%, rgba(252,87,59,1) 100%);
    background: -webkit-gradient(left, right, color-stop(0%, rgba(245,148,64,1)), color-stop(100%, rgba(252,87,59,1)));
    background: -webkit-linear-gradient(90deg, rgba(245,148,64,1) 0%, rgba(252,87,59,1) 100%);
    background: linear-gradient(90deg, rgba(245,148,64,1) 0%, rgba(252,87,59,1) 100%);
    color: #fff !important;
}
.btn-warning:hover,
.btn-warning:active,
.btn-warning:target,
.btn-warning:focus,
.btn-warning.active,
.btn-warning.active.focus,
.btn-warning.active:focus,
.btn-warning.active:hover,
.btn-warning:active.focus,
.btn-warning:active:focus,
.btn-warning:active:hover {
    background: rgba(235,137,53,1);
    background: -moz-linear-gradient(90deg, rgba(235,137,53,1) 0%, rgba(234,73,46,1) 100%);
    background: -webkit-gradient(left, right, color-stop(0%, rgba(235,137,53,1)), color-stop(100%, rgba(234,73,46,1)));
    background: -webkit-linear-gradient(90deg, rgba(235,137,53,1) 0%, rgba(234,73,46,1) 100%);
    background: linear-gradient(90deg, rgba(235,137,53,1) 0%, rgba(234,73,46,1) 100%);
    color: #fefefe !important;
}
.btn-view {
    border: 2px solid #7f4f9c;
    background-color: #f8f8f8;
    color: #7f4f9c;
    padding: 8px 24px;
    line-height: 24px;
    font-size: 16px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    font-weight: 400;
}
.btn-view img {
    margin-right: 5px;
}
.btn-view:hover,
.btn-view:active,
.btn-view:target,
.btn-view:focus,
.btn-view.active,
.btn-view.active.focus,
.btn-view.active:focus,
.btn-view.active:hover,
.btn-view:active.focus,
.btn-view:active:focus,
.btn-view:active:hover {
    color: #7f4f9c;
    background-color: #f8f8f8;
}
.btn-border-primary {
    color: #9c60f5;
    background-color: transparent;
    border: 2px solid #9c60f5;
}
.btn-border-primary:hover,
.btn-border-primary:active,
.btn-border-primary:target,
.btn-border-primary:focus,
.btn-border-primary.active,
.btn-border-primary.active.focus,
.btn-border-primary.active:focus,
.btn-border-primary.active:hover,
.btn-border-primary:active.focus,
.btn-border-primary:active:focus,
.btn-border-primary:active:hover {
    background-color: #9c60f5;
    color: #fff !important;
}
.btn-purple {
    color: #fff;
    background-color: #b34ffa;
}
.btn-purple:hover,
.btn-purple:active,
.btn-purple:target,
.btn-purple:focus,
.btn-purple.active,
.btn-purple.active.focus,
.btn-purple.active:focus,
.btn-purple.active:hover,
.btn-purple:active.focus,
.btn-purple:active:focus,
.btn-purple:active:hover {
    background-color: #9f3de4;
    color: #fff;
}
.btn-facebook {
    display: block;
    width: 100%;
    background-color: #1f61ab;
    color: #fff;
    padding: 12px 8px 12px 40px;
    font-size: 16px;
    letter-spacing: 1px;
    font-weight: 500;
    background-image: url(../img/icon/social/facebook.png);
    background-repeat: no-repeat;
    background-position: center left 15px;
}
.btn-facebook:hover,
.btn-facebook:active,
.btn-facebook:target,
.btn-facebook:focus,
.btn-facebook.active,
.btn-facebook.active.focus,
.btn-facebook.active:focus,
.btn-facebook.active:hover,
.btn-facebook:active.focus,
.btn-facebook:active:focus,
.btn-facebook:active:hover {
    background-color: #16559c;
    color: #fff;
}
.btn-apple {
    display: block;
    width: 100%;
    background-color: #000;
    color: #fff;
    padding: 12px 8px 12px 40px;
    font-size: 16px;
    letter-spacing: 1px;
    font-weight: 500;
    position: relative;
}
.btn-apple i {
    position: absolute;
    left: 15px;
    top: 9px;
    font-size: 28px;
}
.btn-apple:hover,
.btn-apple:active,
.btn-apple:target,
.btn-apple:focus,
.btn-apple.active,
.btn-apple.active.focus,
.btn-apple.active:focus,
.btn-apple.active:hover,
.btn-apple:active.focus,
.btn-apple:active:focus,
.btn-apple:active:hover {
    background-color: #222;
    color: #fff;
}


/* BLANK */
.blank {
    padding: 25px 0;
    text-align: center;
    position: relative;
    z-index: 10;
}
.blank.high-margin {
    margin-bottom: 25px;
}
.blank img {
    margin-bottom: 25px;
}
.blank p {
    color: #e9e8e8;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 2px;
    margin: 0;
}
.blank.purple p {
    color: #c899ff;
}



/* ERROR */
.error-wrapper {
    width: 100%;
    height: 100vh;
}
.error-page {
    text-align: center;
    display: table;
    width: 100%;
    height: 100%;
}
.error-content {
    display: table-cell;
    vertical-align: middle;
}
.error-page .error-code {
    font-size: 144px;
    line-height: 1;
    margin-bottom: 5px;
    color: #666;
}
.error-page .error-desc {
    font-size: 32px;
    line-height: 1;
    margin-bottom: 50px;
    color: #999;
}


/* Coupon */
.coupon-wrapper {
    margin-bottom: 40px;
}
.coupon-item {
    position: relative;
    display: inline-block;
    width: 280px;
    vertical-align: top;
}
.coupon {
    font-size: 0;
    background-image: url(../img/icon/img-coupon-normal.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: rgba(255, 255, 255, 0.9);
    min-height: 110px;
    margin-bottom: 15px;
    position: relative;
    z-index: 2;
}
.coupon-item:after {
    content: "";
    display: block;
    position: absolute;
    width: 320px;
    height: 140px;
    background-image: url(../img/icon/shadow-coupon-large.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    left: -20px;
    top: 0;
    z-index: 1;
}
.coupon > div {
    font-size: 12px;
}
.coupon h3 {
    font-size: 16px;
    margin: 0;
    color: #fff;
}
.coupon-pill {
    display: inline-block;
    background-color: rgba(72, 12, 119, 0.4);
    padding: 4px 8px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    margin-bottom: 2px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 170px;
}
.coupon-left h3 {
    margin-bottom: 5px;
}
.coupon-left {
    display: inline-block;
    width: 205px;
    vertical-align: middle;
    padding: 20px 0 20px 20px;
    text-align: left;
    height: 110px;
}
.coupon-left.no-pill {
    padding-top: 35px;
}
.coupon-right {
    display: inline-block;
    width: 75px;
    text-align: center;
    vertical-align: middle;
    padding-right: 8px;
}
.promotion-code {
    position: relative;
    border-radius: 10px;
    border: dashed 2px #9c60f5;
    padding: 15px 20px;
    z-index: 2;
    margin-bottom: 25px;
}
.promotion-code h2 {
    font-size: 32px;
    display: inline-block;
    margin: 0;
    color: #480c77;
    font-weight: bold;
}
.promotion-code a {
    float: right;
    color: #9c60f5;
    font-weight: 500;
    margin-top: 5px;
}
.promotion-code a:hover,
.promotion-code a:focus,
.promotion-code a:active {
    text-decoration: none;
}
.promotion-condition {
    list-style: none;
    padding-left: 30px;
    margin-bottom: 40px;
}
.promotion-condition > li {
    position: relative;
    font-size: 16px;
    margin-bottom: 5px;
}
.promotion-condition > li:before {
    content: "";
    display: block;
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: #9c60f5;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    left: -30px;
    top: 5px;
}
.btn-promotion {
    font-size: 18px;
    padding: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}

.page-loading {
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: 9999;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.85);
    -webkit-transition: .25s all;
    -moz-transition: .25s all;
    transition: .25s all;
    opacity: 0;
    visibility: hidden;
}
.page-loading.active {
    opacity: 1;
    visibility: visible;
}


/* Cart */
.card-cart {
    margin-bottom: 60px;
}
.card-cart .card-body {
    padding: 40px 50px;
}
.card-cart .col-md-8 {
    padding-right: 25px;
}
.card-cart .col-md-4 {
    border-left: dashed 1px #4d2c63;
    padding-left: 25px;
}
.cart-item {
    font-size: 0;
    border-bottom: dashed 1px #4d2c63;
    padding-bottom: 15px;
    margin-bottom: 20px;
}
.cart-item .book-cover {
    width: 150px;
    vertical-align: middle;
    display: inline-block;
    margin-right: 15px;
}
.cart-item .info {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 165px);
    font-size: 1rem;
}
.cart-item .info h3 {
    color: #000;
    margin: 0 0 10px;
}
.cart-item > div:first-child,
.cart-item > div:last-child {
    display: inline-block;
    font-size: 1rem;
}
.cart-item > div:first-child {
    width: calc(100% - 150px);
    font-size: 0;
}
.cart-item > div:last-child {
    width: 150px;
    text-align: right;
}
.cart-item .price {
    display: inline-block;
    vertical-align: middle;
}
.cart-item .cart-remove {
    font-size: 20px;
    color: #4d2c63;
    margin-left: 20px;
}
.cart-item .price {
    text-align: center;
    line-height: 1.2;
}
.cart-item .price.no-promo {
    padding-top: 8px;
    padding-bottom: 8px;
}
.cart-item .price .total-price {
    font-size: 20px;
    font-weight: 600;
}
.cart-item .price .total-price span {
    font-size: 11px;
}
.cart-item .price .discount {
    font-size: 12px;
    color: #606060;
    text-decoration: line-through;
}
.cart-summary {
    width: 400px;
    max-width: 100%;
    margin: 0 0 0 auto;
}
.cart-summary .btn {
    padding: 8px;
}
.cart-summary .price-row {
    font-size: 16px;
    margin-bottom: 12px;
}
.cart-summary.small .price-row {
    font-size: 12px;
}
.cart-summary .button-action {

}
.cart-summary .price-total {
    font-size: 18px;
    line-height: 24px;
    padding: 12px 0;
    margin-bottom: 20px;
}
.cart-summary .large {
    font-size: 24px;
}
.btn-center {
    padding: 10px;
    font-size: 16px;
    margin-bottom: 25px;
}
.card-order-detail .border-left,
.order-form .border-left {
    border-left: dashed 1px #4d2c63;
}


/* KEYFRAME */
@keyframes spinHorizontal {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}


/* RESPONSIVE */
@media (min-width: 1600px) {
    section.contact {
        min-height: 750px;
    }
}
@media (min-width: 1200px) {

}
@media (min-width: 992px) {
    .order-form .col-md-8 {
        padding-right: 30px;
    }
    .order-form .col-md-4 {
        padding-left: 30px;
    }
}
@media (min-width: 768px) {
    .coupon-item.large {
        display: block;
        width: 560px;
        max-width: 100%;
        margin: 0 auto 40px;
    }
    .coupon-item.large .coupon {
        min-height: 210px;
        background-image: url(../img/icon/img-coupon-large.png);   
    }
    .coupon-item.large h3 {
        font-size: 32px;
    }
    .coupon-item.large:after {
        width: 600px;
        height: 280px;
    }
    .coupon-item.large .coupon > div {
        font-size: 16px;
    }
    .coupon-item.large .coupon-left h3 {
        font-size: 36px;
        margin-bottom: 40px;
    }
    .coupon-item.large .coupon-left {
        width: 408px;
        height: 210px;
        padding-left: 40px;
    }
    .coupon-item.large .coupon-left.no-pill {
        padding-top: 75px;
    }
    .coupon-item.large .coupon-right {
        width: 152px;
    }
}
@media only screen and (min-width: 992px) {
    .flex-row {
        display: flex;
        flex-wrap: wrap;
    }
    .flex-row > [class*='col-'] {
        display: flex;
        flex-direction: column;
    }
    .flex-row.row:after, 
    .flex-row.row:before {
        display: flex;
    }
}
/* md */
@media only screen and (max-width: 1199px) {
    section.promotion .container {
        width: 970px;
        padding: 0 30px;
    }
    .related-book-wrapper,
    section.feature .container {
        width: 970px;
        padding: 0 20px;
    }
    .wrapper {
        overflow: hidden;
    }
    .owl-carousel .owl-nav button.owl-prev, .slider-back {
        left: 10px;
    }
    .owl-carousel .owl-nav button.owl-next, .slider-next {
        right: 10px;
    }
    .navbar-menu > li > a {
        min-width: auto;
        padding-right: 10px;
        padding-left: 20px;
    }
    .navbar-menu > li > a:before {
        left: 5px;
    }
    .navbar-form .form-control {
        width: 155px;
    }
    .navbar-brand img {
        height: 48px;
    }
    section.article:before {
        left: -200px;
    }
    .article-card .article-info {
        min-height: 170px;
    }
    .article-list .article-card .article-info {
        min-height: auto;
    }
    footer .contact {
        padding-top: 20px;
    }
    .social {
        margin-top: 5px;
    }
    .social > li {
        margin-right: 0;
    }
    .float-menu {
        width: 200px;
    }
    .card-faq {
        padding: 0;
    }
    .card-footer {
        margin-top: 20px;
    }
    .term {
        width: 800px;
    }
    .card-book-detail .card-body,
    .card-book-review .card-body {
        padding: 30px 40px;
    }
    .rating-input label .icon + .icon {
        margin-left: 3px;
    }
    .rating-form .form-control {
        width: 580px;
    }
    .card-order .card-body {
        padding: 25px 40px;
    }
    .card-order-success .book-holder {
        padding: 80px 0 0;
    }
    .card-how-to-read {
        padding: 30px;
    }
    .card-article .card-body {
        padding: 40px 80px;
    }
    .navbar-right > li > .profile h4 {
        width: 85px;
    }
}
/* sm */
@media only screen and (max-width: 991px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 0;
        margin-bottom: 0;
        max-height: 300px;
        overflow-y: scroll!important;
    }
    .navbar-nav>li {
        float: none;
        text-align: center;
        border-bottom: 1px solid #e7e7e7;
    }
    .navbar-menu > li > a:before {
        display: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .navbar-nav>li>a {
        margin: 0 auto;
        text-align: left;
    }
    .collapse.in{
        display: block !important;
    } 
    .navbar-toggle {
        margin-top: 5px;
    }
    .navbar-default .navbar-toggle {
        border: none;
        padding: 0;
        text-align: center;
    }
    .navbar-toggle {
        margin-right: 0;
    }
    .navbar-default .navbar-toggle {
        background-color: #490079;
        width: 40px;
        height: 40px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
    }
    .navbar-default .navbar-toggle .icon-bar {
        background-color: #fff;
        margin-left: auto;
        margin-right: auto;
    }
    .navbar-toggle .icon-bar {
        -webkit-transition: all .25s;
        -moz-transition: all .25s;
        transition: all .25s;
    }
    .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
        background-color: #490079;
    }
    .navbar-default .navbar-toggle .first-bar {
        transform: translateY(6px) rotate(45deg);
    }
    .navbar-default .navbar-toggle .second-bar {
        visibility: hidden;
        opacity: 0;
    }
    .navbar-default .navbar-toggle .third-bar {
        transform: translateY(-6px) rotate(-45deg);
    }
    .navbar-default .navbar-toggle.collapsed .first-bar {
        transform: translateY(0px) rotate(0deg);
    }
    .navbar-default .navbar-toggle.collapsed .second-bar {
        visibility: visible;
        opacity: 1;
    }
    .navbar-default .navbar-toggle.collapsed .third-bar {
        transform: translateY(0px) rotate(0deg);
    }
    .navbar-collapse {
        background-color: rgba(255, 255, 255, 0.95);
    }
    .navbar-form .form-group {
        display: block;
        max-width: 400px;
        margin: 0 auto;
    }
    .navbar-form .form-control {
        width: 100%;
    }
    .navbar-right > li > .profile {
        padding: 10px 15px 5px;
        max-width: none;
        text-align: center;
    }
    .navbar-right > li > .auth {
        padding: 10px 15px;
    }
    .related-book-wrapper, section.feature .container {
        width: 750px;
        padding: 0 15px;
    }
    section.category,
    section.feature,
    section.promotion,
    section.article,
    section.contact {
        padding: 60px 0;
    }
    section.feature {
        padding: 40px 0 60px;
    }
    section.category {
        padding: 60px 0 30px;
    }
    section.promotion .container {
        width: 750px;
        padding: 0 35px;
    }
    .slider-back,
    .slider-next {
        display: none;
    }
    .article-list {
        padding-top: 0;
    }
    .article-card .article-image,
    .article-card .article-info {
        height: 200px;
    }
    section.contact {
        background-image: none;
    }
    footer .contact {
        text-align: center;
    }
    .navbar-at-top .navbar-brand > img {
        height: 50px;
    }
    .faq-left {
        width: 50px;
        padding-left: 0;
    }
    .faq-right {
        margin-left: 55px;
    }
    .card-faq .faq-image {
        width: 320px;
    }
    .page-contact {
        background-image: none;
    }
    .book-detail .promo-valid {
        margin-bottom: 25px;
    }
    .rating-form .form-control {
        width: 345px;
    }
    .modal-lg {
        width: 750px;
    }
    .modal-header {
        padding: 30px 30px 15px;
    }
    .modal-body {
        padding: 15px 30px 30px;
    }
    .card-article .card-body {
        padding: 30px;
    }
    .article .article-sharing {
        width: 60px;
    }
    .article .article-content {
        margin-right: 80px;
    }
    .modal-login {
        width: 480px;
    }
    .modal-login .login-form {
        padding: 30px 40px;
    }
    .navbar-fixed-top .navbar-collapse {
        max-height: none;
    }
    section.feature .divide {
        margin-bottom: 40px;
    }
    .book-info .order-no .sub {
        font-size: 11px;
    }
    .main-footer .row > .col-md-6:first-child {
        border: none;
    }
    .card-profile {
        min-height: 0;
    }
    .card-cart .col-md-4,
    .card-order-detail .border-left,
    .order-form .border-left {
        border: none;
    }
    .card-order-success .book-holder {
        padding: 50px 0 ;
    }
    .card-cart .col-md-8 {
        padding-right: 15px;
    }
    .card-cart .col-md-4 {
        padding-left: 15px;
    }
    .cart-summary {
        width: 100%;
    }
    .card-order-detail .cart-group > .cart-item:last-child {
        border-bottom: dashed 1px #4d2c63;
        margin-bottom: 15px;
    }
    .mb-0 {
        margin-bottom: 0 !important;
    }
}
/* xs */
@media only screen and (max-width: 767px) {
    section.feature .btn-view {
        margin-top: 0;
    }
    .slider-back, .slider-next, .owl-theme .owl-nav button[class*=owl-] {
        margin-top: -15px;
    }
    .related-book-wrapper, section.feature .container {
        width: 100%;
        padding: 0 15px;
    }
    section.promotion .container {
        width: 100%;
        padding: 0 15px;
    }
    .article-card .article-image {
        height: 180px;
    }
    .article-card .article-info,
    .article-list .article-card .article-info {
        padding: 15px;
        height: auto;
    }
    section.category,
    section.feature,
    section.promotion,
    section.article,
    section.contact {
        padding: 50px 0;
    }
    section.feature {
        padding: 30px 0 50px;
    }
    section.category {
        padding: 50px 0 20px;
    }
    .footer-info img {
        margin-right: 0;
        margin-bottom: 10px;
    }
    .footer-info p {
        text-align: center;
    }
    .main-footer .row > .col-md-6:first-child {
        border: none;
    }
    .footer-link > li > a {
        text-align: center;
        padding-left: 0;
    }
    .social {
        display: block;
    }
    .section-header.small .header-tools {
        float: none;
        text-align: center;
        margin-top: 5px;
    }
    .section-header.has-line:after {
        top: 18px;
    }
    section.promotion .book-sale,
    .book-sale {
        width: 64px;
        height: 64px;
        right: -12px;
        padding-top: 12px;
    }
    section.promotion .book-sale p .percent,
    .book-sale p .percent {
        font-size: 24px;
    }
    .card-faq .row > .col-sm-6:first-child {
        border: none;
    }
    .card-faq .col-sm-6 > .faq:last-child {
        border-bottom: 1px solid #cccccc;
    }
    .card-body {
        padding: 15px;
    }
    .card-faq .faq-image {
        width: 240px;
    }
    .card-faq .card-body {
        padding: 30px 15px;
    }
    .contact-footer .tel {
        float: none;
        text-align: center;
        margin-bottom: 10px;
    }
    .contact-footer > ul {
        display: block;
        text-align: center;
    }
    .profile-info > .profile-image {
        width: 64px;
        height: 64px;
    }
    .profile-name {
        margin-left: 72px;
        padding-top: 15px;
    }
    .profile-info .btn {
        margin-top: 15px;
    }
    .modal-lg,
    .modal-md {
        width: 95%;
    }
    #pointHistoryModal .modal-header {
        padding: 15px 15px 30px;
    }
    #pointHistoryModal .col-sm-6 {
        text-align: center;
    }
    #pointHistoryModal .modal-header h1 {
        margin-bottom: 20px;
    }
    .history-list > li:last-child {
        border-bottom: 1px solid #b7b7b7;
    }
    #pointHistoryModal .modal-body {
        padding: 15px;
    }
    .card-book-detail .card-body, .card-book-review .card-body {
        padding: 25px 20px;
    }
    .review-header h4 {
        text-align: center;
    }
    .review-header span {
        display: block;
        text-align: center;
        margin-bottom: 10px;
    }
    .rating-form label {
        text-align: center;
    }
    .rating-form .form-control {
        width: 100%;
        margin-bottom: 10px;
    }
    .rating-form .btn {
        display: block;
        margin: 0 auto;
    }
    .rating-input {
        display: block;
        width: 114px;
        margin: 0 auto;
        margin-bottom: 20px;
    }
    .book-detail .info {
        margin-bottom: 25px;
    }
    .card-order .card-body {
        padding: 25px 20px;
    }
    .order-info .dl-horizontal dd {
        margin: 0;
    }
    .card-foot {
        padding: 15px 20px;
    }
    .modal-header {
        padding: 20px 20px 10px;
    }
    .model-header .section-header h2 {
        font-size: 20px;
    }
    .modal-body {
        padding: 10px 20px 20px;
    }
    .card-how-to-read {
        padding: 15px;
    }
    .card-article .card-body {
        padding: 20px;
    }
    .article .article-sharing {
        width: 40px;
    }
    .article .article-content {
        margin-right: 50px;
    }
    .article .article-header h1 {
        font-size: 24px;
    }
    .article-card.small .article-info {
        min-height: none;
    }
    .modal-login .modal-wrapper {
        width: 95%;
    }
    .modal-login .modal-content {
        width: 100%;
    }
    .modal-login .login-form {
        padding: 25px 20px;
    }
    .login-box {
        padding: 40px 0 0;
    }
    .search-holder {
        margin-right: 0;
    }
    .header-tools.result {
        margin-top: 15px !important;
    }
    .section-header .header-tools.result .num {
        font-size: 20px;
    }
    .modal-dialog {
        width: 95%;
    }
    .section-header {
        margin-bottom: 40px;
    }
    section.feature .divide {
        margin-bottom: 30px;
    }
    .pagination > li > a,
    .pagination > li > span {
        padding: 6px 12px;
    }
    section.promotion:before {
        left: -160px;
    }
    section.promotion:after {
        right: -60px;
    }
    .card-foot .text-right {
        text-align: center;
    }
    .navbar-toggle {
        margin-right: 15px;
    }
    .review-header .col-lg-2 {
        border-right: none;
    }
    .main-footer .row > .col-md-6:first-child, .main-footer .has-line {
        border: none;
    }
    .navbar-right > li > .profile h4 {
        width: auto;
        overflow: visible;
    }
    section.main:after {
        height: 20px;
        bottom: -0.5px;
    }
    section.promotion .action .btn {
        margin-top: 0;
        width: auto;
    }
    .topbar .social {
        display: inline-block;
    }
    .topbar .btn-vendor {
        display: none;
    }
    .topbar .btn-topup,
    .topbar .btn-vendor {
        padding: 4px 6px;
        /*width: 34px;*/
        height: 34px;
        /*-webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;*/
        text-align: center;
    }
    .navbar-at-top .topbar .btn-topup,
    .navbar-at-top .topbar .btn-vendor {
        padding: 4px 6px;
        height: 34px;
    }
    .topbar .btn-topup span,
    .topbar .btn-vendor span {
       /* display: none;*/
    }
    .topbar .btn-topup img,
    .topbar .btn-vendor img {
        width: 20px;
        margin-right: 0;
        display: none;
    }
    .topbar .wallet img,
    .topbar .wallet > span:first-child,
    .topbar .sep {
        display: none;
    }
    .topbar .wallet span {
        /*display: none;*/
    }
    .topbar .pull-right {
        padding-top: 3px;
    }
    .topbar .wallet .credit {
        font-size: 16px;
        letter-spacing: 0;
    }
    .topbar .social {
        padding: 5px 0;
    }
    .order-form .wallet .btn-topup {
        display: block;
        margin: 10px 0 0;
        width: 165px;
    }
    .payment-tab > li.active:after {
        width: 100px;
        margin-left: -50px;
    }
    .card-cart .card-body {
        padding: 25px 20px;
    }
    .cart-item > div:first-child,
    .cart-item > div:last-child {
        width: 100%;
    }
    .cart-item > div:first-child {
        margin-bottom: 10px;
    }
    .cart-item > div:last-child {
        text-align: center;
    }
    .cart-item .book-cover {
        width: 100px;
    }
    .cart-item .info {
        width: calc(100% - 115px);
    }
}
@media only screen and (max-width: 480px) {

}


/* Fixed Grid */
.fixed-grid-promotion > .col-md-2:nth-child(5n + 1) {
    clear: both;
}
.fixed-grid-category > .col-md-3:nth-child(4n + 1) {
    clear: both;
}
.fixed-grid-related-article > .col-md-6:nth-child(2n + 1) {
    clear: both;
}

/* md */
@media only screen and (max-width: 1199px) {

}
/* sm */
@media only screen and (max-width: 991px) {
    .fixed-grid-promotion > .col-md-2:nth-child(5n + 1) {
        clear: none;
    }
    .fixed-grid-promotion > .col-sm-3:nth-child(4n + 1) {
        clear: both;
    }

    .fixed-grid-category > .col-md-3:nth-child(4n + 1) {
        clear: none;
    }
    .fixed-grid-category > .col-sm-3:nth-child(4n + 1) {
        clear: both;
    }

    .fixed-grid-related-article > .col-md-6:nth-child(2n + 1) {
        clear: none;
    }

    .fix-grid-best-seller .row > .col-sm-3:nth-child(4n + 1) {
        clear: both;
    }
    .coupon-wrapper {
        text-align: center;
    }
    .book-header {
        padding-left: 0;
    }
}
/* xs */
@media only screen and (max-width: 767px) {
    .fixed-grid-promotion > .col-sm-3:nth-child(4n + 1) {
        clear: none;
    }
    .fixed-grid-promotion > .col-xs-6:nth-child(2n + 1) {
        clear: both;
    }

    .fixed-grid-category > .col-sm-3:nth-child(4n + 1) {
        clear: none;
    }
    .fixed-grid-category > .col-xs-6:nth-child(2n + 1) {
        clear: both;
    }

    .fix-grid-best-seller .row > .col-sm-3:nth-child(4n + 1) {
        clear: none;
    }
    .fix-grid-best-seller .row > .col-xs-6:nth-child(2n + 1) {
        clear: both;
    }
}
@media only screen and (max-width: 360px) {
    .book-info .action .row > .col-xs-6:first-child {
        padding-right: 5px;
        padding-left: 10px;
    }
    .book-info .action .row > .col-xs-6:last-child {
        padding-left: 5px;
    }
}