@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic|Open+Sans+Condensed:300,300italic,700&subset=latin,vietnamese,latin-ext);

body {
    padding-top: 60px;
    padding-bottom: 30px;
    background: white;
}

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
    min-height: calc(100vh - 90px);
    padding: 0;
    cursor: pointer;
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
    z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel .item {
    height: calc(100vh - 90px);
    background-color: #777;
}
.carousel .item:after {
    content: " ";
    margin: 5px;
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    border: 1px solid rgba(255,255,255,0.8);
    /*z-index: 2000;*/
}
.carousel-inner > .item > img {
    position: absolute;
    top: 0;
    left: 0;
    min-height: 500px;
    width: auto;
}
.carousel-inner > .item > .slide_item.image, .carousel-inner > .item > .slide_item.text {
    position: absolute;
    top:0;
    left: 0;
    min-width: 100%;
    height: 100%;
}
.carousel-control.left, .carousel-control.right {background-image: none;}

/* Custom Carousel indicators*/
.carousel-indicators li {
    border: 1px solid #FFF;
    border-radius: 0;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
    margin: 0 5px;
}
.carousel-indicators li.active {
    margin: 0 5px;
    width: 10px;
    height: 10px;
}


/* CUSTOMIZE ABOUT BOOKSTORE
-------------------------------------------------- */

.book_home.row {margin: 0;}
.haft-cover {
    min-height: calc(100vh - 90px);
    background: #F0F0F0;
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
    padding: 10px;
}
.about_book {
    padding: 50px;
}
.about_book h1 {
    font-size: 60px;
    font-weight: 300;
}
.about_book h3 {
    font-weight: 300;
    font-style: italic;
}
.about_book p {
    font-size: 15px;
    margin-bottom: 8px;
}
.about_book .row {
    margin: 0;
}
.about_book .line {
    background: #D65206;
    height: 5px;
    margin: 40px 0;
}
.hr_book {
    padding: 0;
}


/* CUSTOMIZE BUTTON
-------------------------------------------------- */
.btn-book {
    background-color: #d65206;
    background-repeat: no-repeat;
    background-position: 10px center;
    color: white;
    display: inline-block;
    margin-right: 10px;
    height: 50px;
    line-height: 50px;
    position: relative;
    font-size: 1.4em;
    margin-top: 20px;
    float: left;
    border: none;
    -webkit-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    transition: all 300ms linear;
}
.btn-book:before {
    content: "";
    background: none;
    border: 1px solid white;
    position: absolute;
    height: calc(100% - 2px);
    width: calc(100% - 2px);
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
}
.bk {
    background-image: url("/img/book/images/icon_books_40x31.png");
    padding: 0 10px 0 55px;
}
.shop {
    background-image: url("/img/book/images/icon_shop_34x30.png");
    padding: 0 10px 0 49px;
}
.cnt {
    background-image: url("/img/book/images/icon_contact_36x30.png");
    padding: 0 10px 0 51px;
}
.read {
    background-image: url('/img/book/images/icon_read_30x30.png');
    padding: 0 10px 0 45px;
}
.comt {
    background-image: url('/img/book/images/icon_comment_37x30.png');
    padding: 0 10px 0 52px;
}
.btn-book:hover {
    color: white;
    text-decoration: none;
    background-color: #666666;
}
.none {padding: 0 10px}

.clear {
    clear:both;
}

/* CUSTOMIZE SECTION HEADER
-------------------------------------------------- */
.title-head {
    height: 150px;
    color: white;
    text-align: center;
    background: url("/img/book/images/bg_pttn_2x2.png") repeat center center;
    display: table;
    position: relative;
    text-transform: uppercase;
    padding-bottom: 30px;
    margin-top: 1px;
    width: 100%;
}
.title-head > div {
    display: table-cell;
    vertical-align: middle;
}
.title-head:after {
    content: "";
    background: url('/img/book/images/icon_arrow_60x30.png') no-repeat bottom center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.title-head h1 {
    font-size: 46px;
}

/* CUSTOMIZE NAV-TABS
-------------------------------------------------- */

.nav > li > a {
    padding: 10px 0;
    margin-right: 40px;
    color: #666;
    text-transform: uppercase;
    font-size: 15px;
}
.nav-tabs > li > a:hover {
    background: none;
    border-color: transparent;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: #d65206;
    cursor: default;
    background-color: #fff;
    border: 1px solid transparent;
    border-bottom-color: #d65206;
}
.capsule .nav-tabs {
    border-bottom: none;
}
.capsule .nav > li {
    width: 50%;
}
.capsule .nav > li:first-child {
    text-align:right
}
.capsule .nav > li > a {
    margin-right: 0;
    color: white;
    line-height: 50px;
    background: #666;
    border: 1px solid white;
    display: inline-block;
}
.capsule .nav > li:first-child > a {
    padding: 0 10px 0 20px;
    border-radius: 25px 0 0 25px;
}
.capsule .nav > li:last-child > a {
    padding: 0 20px 0 10px;
    border-radius: 0 25px 25px 0;
}
.capsule .nav-tabs > li > a:hover {
    border-color: transparent;
}
.capsule .nav-tabs > li.active > a,
.capsule .nav-tabs > li.active > a:hover,
.capsule .nav-tabs > li.active > a:focus {
    color: white;
    cursor: default;
    background-color: #d65206;
    border: 1px solid white;
}


/* CUSTOMIZE TAB CONTENTS
-------------------------------------------------- */
.tab-content > .tab-pane {
    /*padding: 30px 50px;*/
}
.tab-content > .tab-pane p {
    font-size: 16px;
    margin-top: 20px;
}
.tab-content > .tab-pane a.read-more {
    font-size: 16px;
    margin-top: 15px;
    text-decoration: underline;
    font-style: italic;
    display: inline-block;
}
.tab-content > .tab-pane a.read-more:before {
    content: ">> ";
}
.tab-content > .tab-pane .intro {
    background: #f4f4f4;
    border: 1px solid #e1e8ed;
    padding-top: 30px;
    padding-bottom: 30px;
}
.tab-content > .tab-pane .intro h1 {
    color: #d65206;
}
.tab-content > .tab-pane .intro .line {
    background: #D65206;
    height: 2px;
    margin: 30px 0;
}
.tab-content > .tab-pane .box {
    background: #f4f4f4;
    border: 1px solid #e1e8ed;
    padding: 30px;
    border-radius: 2px;
}
.tab-content > .tab-pane .col-md-4 .box > div::before,
.tab-content > .tab-pane .col-md-7 .box > div::before {
    content: "";
    width: 80px;
    height: 80px;
    border-radius: 50px;
    position: absolute;
    top: -70px;
    left: calc(100% / 2 - 40px);
    border: 5px solid white;
}
.tab-content > .tab-pane .col-md-4:first-child .box > div:before {
    background: #73c73a url("/img/book/images/icon_price_26x30.png") no-repeat scroll center center;
}
.tab-content > .tab-pane .col-md-4:nth-child(2) .box > div:before {
    background: #73c73a url("/img/book/images/icon_guide_23x30.png") no-repeat scroll center center;
}
.tab-content > .tab-pane .col-md-4:nth-child(3) .box > div:before {
    background: #73c73a url("/img/book/images/icon_time_30x30.png") no-repeat scroll center center;
}
.tab-content > .tab-pane .col-md-7 .box > div:before {
    background: #73c73a url("/img/book/images/icon_contact_30x30.png") no-repeat scroll center center;
}
.tab-content > .tab-pane .box h3 {
    padding-top: 15px;
    text-align: center;
    font-weight: bold;
}
.tab-content > .tab-pane .col-md-7 .box h1 {font-size: 4em}
.tab-content > .tab-pane .col-md-4 .box {
    padding-bottom: 40px;
}

.margin-t-05 { margin-top: 0.5em; }
.margin-t-10 { margin-top: 1.0em; }
.margin-t-15 { margin-top: 1.5em; }
.margin-t-20 { margin-top: 2.0em; }
.margin-t-25 { margin-top: 2.5em; }
.margin-t-30 { margin-top: 3.0em; }
.text-orange {color: #d65206}
.text-green {color: #73C73A}
.center-block {float: none}

.tab-content > .tab-pane {
    position: relative;
}
.trans-box.absolute {
    padding: 30px 50px;
    position: absolute;
    background: rgba(255,255,255,0.9);
    top: 15%;
    left: 7%;
}
.trans-box h4 {
    text-transform: uppercase;
}
.trans-box h4 small {
    text-transform: none;
}

.trans-box dt {
    width: 80px;
    float: left;
}
.trans-box .dl-horizontal dd {
    margin-left: 90px;
}



/* CUSTOMIZE CAMPAIGN
-------------------------------------------------- */
.jumbotron.camp {
    color: inherit;
    background-color: #FEE252;
    margin-bottom: 1px;
}
.jumbotron.camp p {
    font-size: 16px;
    font-weight: normal;
}

/* SHOPPING
-------------------------------------------------- */
.box.form {
    font-size: 16px;
}
.box.form .form_div:first-child {
    border-right: 1px solid #ccc;
}
.box.form .form_div:nth-child(2) {
    border-left: 1px solid white;
}
.box.form .form_div h3 {margin-bottom :20px;}
.box.form table {
    width: 100%;
}
.box.form .form_div table td {
    padding : 10px 5px;
    text-align: left;
}
.form table tr td:first-child {
    width: 32%;
}
.form .total {
    width: 100%;
}

.form table tr td:first-child span {color: red}
.form table td input[type=text], .form table td input[type=number], .form table td input[type=email] {
    padding: 10px;
    border: 1px solid #ccc;
    width: 100%;
}
.form .btn-book {
    float: right;
}
.price {
    font-weight: bold;
}
.price_t {
    color: red;
    font-size: 20px;
    font-weight: bold;
}
.box .confirm {
    margin: 0 40px;
}
.box .confirm table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}
.box .confirm table tr td {
    border-top: 1px solid white;
    border-bottom: 1px solid #ccc;
    padding: 10px 20px;
}
.box .confirm table tr:first-child td {
    border-top: none;
}
.box .confirm table tr:last-child td {
    border-bottom: none;
    color: red;
    font-weight: bold;
}
.box .confirm td[colspan="2"] {
    font-weight: bold;
    padding: 10px 0;
}
.box .confirm table tr:last-child td span {
    font-size: 30px;
}

/* CUSTOMIZE SMALL MENU
-------------------------------------------------- */
.small-menu {
    position: absolute;
    z-index: 2000;
    bottom: 20%;
    right: 20px;
}
.small-menu ul li {
    text-align: right;
    margin: 10px 0;
    display: block;
    cursor: pointer;
}
.small-menu ul li span {
    float: right;
    -webkit-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    transition: all 300ms linear;
}
.small-menu li span.des {
    display: inline-block;
    vertical-align: middle;
    text-shadow: 1px 0 white, 0 1px white, -1px 0 white, 0 -1px white;
    opacity: 0;
    font-weight: bold;
}
.small-menu li span.dot {
    background: #ccc;
    margin-left: 5px;
    margin-top: 4px;
    width: 10px;
    height: 10px;
    border: 2px solid #ccc;
    border-radius: 12px;
    display: inline-block;
    vertical-align: middle;
}
.small-menu li.current span.des,
.small-menu li:hover span.des{
    color: #d65206;
    font-weight: bold;
    opacity: 1;
}
.small-menu li.current span.dot,
.small-menu li:hover span.dot{
    background:white;
    border: 2px solid #d65206;
}



@media (max-width: 767px) {
    .slide_item.image {
        background-size: auto 140%!important;
    }
    .about_book h1 {
        font-size: 50px;
    }
    .about_book h3 {
        font-size: 20px;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .slide_item.image {
        background-size: 100% auto!important;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .slide_item.image {
        background-size: auto 160%!important
    }
}
@media (min-width: 1200px) {
    .slide_item.image {
        background-size: auto 160%!important ;
    }
}

.img-responsive {
    display: inline-block;
}