html,
body {
  height: 100%;
}

body {
  font-family: "Open Sans", sans-serif;
  color: #444; background-color: #fff; font-size: 13px; line-height: 1.5;
}

a{ text-decoration: none;}
a:hover{ text-decoration: none;}
.clear{ clear: both;}
.box-shadow{ box-shadow: 0 0 3px #efefef;}

.my_footer{ border-top: 1px solid #205F8B; margin-top: 40px;}
.my_footer .logo_footer{ height: 80px; margin-right: 20px;}
.my_footer .menu_footer{ list-style: none;}
.my_footer .menu_footer li{ display: inline-block; margin-right: 15px;}
.my_coppyright{ padding: 15px;}

.box_login_button{ position: fixed; top: 0px; right: 100px; z-index: 20; background: #f64d14 url(../img/bgr_box_button_login.png) no-repeat center center; border-radius: 0 0 3px 3px; padding: 10px 20px; height: 38px; box-shadow: 0 0 2px #ddd;}
.box_login_button a{ display: inline-block; color: #fff; width: 80px; text-align: center; white-space: nowrap;}
.box_login_button a .fa{ display: none;}
.box_login_button a:hover .fa{ display: inline;}
.box_login_button #button_login{ color: #222;}

.box-shop-cart{ position: fixed; top: 0px; right: 50px; z-index: 20; width: 40px; height: 36px; text-align: center; line-height: 38px; box-shadow: 0 0 2px #ddd; background-color: #fff;}
.box-shop-cart .fa{ font-size: 23px; color: #205F8B;}
.box-shop-cart .fa:hover{}

.main_title{ font-size: 20px;}

.panel-heading-background{ background-color: #eee;}
.clear-radius{ border-radius: 0 !important;}
.panel-white{ background-color: #fff; margin: 15px 0px; border: 1px solid #ddd;}
.img-avata{ margin-right: 15px;}
.title-color{ color: #365899 !important; font-weight: bold; display: inline-block; margin-top: 8px;}
.clear-margin-p p{ margin-bottom: 0px !important;}

.img-border{ border: 1px solid #dedede;}
.img-full{ width: 100%; height: auto;}

.top_menu{ overflow: hidden; margin-bottom: 0; padding: 0;}
.top_menu li{ display: block; margin-bottom: 10px;font-family:Helvetica;}
.top_menu li a{ display: block; text-transform: uppercase; font-size: 10px; padding: 5px; color: #222; opacity: 0.5; text-align: center;font-weight:bold;}
.top_menu li a img{ width: 18px; height: 18px; display: block; margin: 5px auto;}
.top_menu li a:hover, .top_menu li a.active{ opacity: 1; color: #111;}

#site_name{ font-size: 28px; text-align: center; text-transform: uppercase; color: #fb2600; padding-top: 20px; font-weight: bold;}

.search_top{ margin-top: 80px; position: relative;}
.search_top .form-control{ font-size: 15px; color: #222; height: 50px; border: 1px solid #fff; border-radius: 2;}
.search_top .form-control:focus{ border: 2px solid #205F8B;}
.search_top .input-group-addon{ background: none; font-size: 25px; position: absolute; top: 7px; right: 25px; border: none; color: #205F8B;}

#group-advantage{ position: relative; margin-top: -70px;font-family:Palatino Linotype;}
.box-advantage{ background: #fff url(../img/bgr-star.png) no-repeat right center; box-shadow: 0 0 10px #030313; border-radius: 5px; margin: 10px; padding: 10px; height: 170px; border-bottom: 2px solid #205F8B; transition: transform .3s ease-out, box-shadow .2s ease-out, -webkit-transform .3s ease-out, -o-transform .3s ease-out, -webkit-box-shadow .2s ease-out;text-align:justify;font-size:13px;}
.box-advantage h1{ font-size: 22px; font-weight:bold; font-family:helvetica;}
.box-advantage:hover{ box-shadow: 0 0 10px #888; top: -6px; position: relative;}

.popover-content{ font-size: 13px;font-family:Palatino Linotype;font-weight:bold;}
.box_customer{ margin-bottom: 5px;}
.box_customer img{ box-shadow: 0px 0px 10px black; border-radius: 5px;}

.my_menu li{ display: block; float: left; padding: 0 8px; text-align: center; position: relative;}
.my_menu>ul>li{ height: 80px;}
.my_menu>ul>li:hover{ box-shadow: 0 0 2px #444;}
.my_menu li img{ height: 50px; width: 65px;}
.my_menu li a{ color: #888; font-family: 'Roboto', sans-serif; font-size: 13px; font-weight: 600; display: block;}
.my_menu li:hover>a, .my_menu a.active{ color: green; }
.icon_menu{ font-size: 24px;}

.my_menu li ul{ display:none; padding: 0px; position: absolute; top: 80px; left: 0px; box-shadow: 0 0 3px #dedede; background-color: #fff; width: 250px; z-index: 999;}
.my_menu li ul li{ padding: 10px; text-align: left; display: block; float: none;}
.my_menu li ul li img{ display: none;}
.my_menu li ul li:hover{ background-color: #efefef;}
.my_menu li:hover ul{ display: block;}

.menu_mobile{ background-color: #fff; box-shadow: 0 0 3px #dedede; overflow: auto;}
.menu_mobile ul{ padding: 0;}
.menu_mobile li{ width: 100%; text-align: left; height: auto !important;}
.menu_mobile li ul{ display: block !important; width: 100%; text-indent: 0px; position: relative; top: 0; font-size: 13px;}
.menu_mobile li:hover{ background-color: #efefef;}
.menu_mobile li img{ float: left; width: 65px;}
.menu_mobile li a{ line-height: 50px; padding-left: 5px; text-transform: uppercase;}
.menu_mobile li li a{ line-height: 30px; text-transform: none;}

.content-wrapper .form-control{ border-radius: 0;}

.bgr-contact{ background: url(../img/bgr_hotline.png); width: 135px; height: 82px; position: relative;}
.bgr-contact span{ position: absolute; width: 100%; left: 3px; bottom: 15px; color: #fff; font-size: 13px; font-weight: bold; padding-left: 14px;}

.text-orange{ color: #f64d14 !important;}
.text-blue-new{color: #205F8B !important;}
.text-blue{ color: #034694 !important;}
.text-black{ color: #474747 !important;}
.text-white{ color: #fff !important;}
.text-h1{ font-size: 21px; margin: 5px 0;}
.text-h4{ font-size: 17px; line-height: 1.3;}
.text-green{color: #006838 !important;}
.text-inline{ display: inline;}
.text-bold{ font-weight: bold;}
.text-double-h1{ font-size: 54px;}
.text-red{ color: #ff0000;}

.bgr-gray{ background-color: #f5f5f5 !important;}
.bgr-white{ background-color: #fff !important;}
.bgr-blue{ background-color: #2665a0 !important;}
.bgr-yellow{ background-color: #d8a62e !important;}
.bgr-orange{ background-color: #f64d14 !important;}
.bgr-register-info{ background: url(../img/bg-regInfo.jpg);}
.bgr-right{ background: url(../img/vertical-line.png) no-repeat center right;}
.bgr-right:last-child{ background: none;}
.bgr-link-info{ background-color: #006838;}
.img-arrow-up{ position: absolute; top: -20px; left: 50%; margin-left: -25px;}

.box_home{ padding: 15px; border: 1px solid #dedede; border-radius: 5px; margin-right: 15px;}

.overflow{ overflow: hidden;}

.list-border{ border: 1px solid #dedede; border-radius: 5px;}
.list-menu-left li{ padding: 10px; border-bottom: 1px solid #dedede;}
.list-menu-left li>a{ font-size: 15px;}
.list-menu-left li:last-child{ border: none;}
.relative{ position: relative;}

.menu-faqs{ float: right; background-color: #333; width: 29%; margin-left: 1%; padding: 15px; border-radius: 5px 0 0 5px; margin-right: -15px;}
.menu-faqs h4{ border-bottom: 1px solid; padding-bottom: 5px;}
.menu-faqs ul{ padding: 0 10px;}
.menu-faqs ul li{ margin-bottom: 5px; color: #fff;}
.menu-faqs ul a{ line-height: 1.5; color: #fff; font-weight: bold; font-size: 12px;}

.back-link{ font-style: italic; border-bottom: 1px solid #dedede; display: inline-block; min-width: 33%;}
.back-link, .back-link *{ color: #ddd;}
.resize-image img{ max-width: 100% !important;}

.carousel-control > .fa { font-size: 50px; position: absolute; top: 50%; z-index: 5; display: inline-block; margin-top: -20px;color:#18181A;}
.carousel-caption{ font-size: 28px; padding-bottom: 0px; bottom: auto; top: 15%;}

#carousel-book .carousel-control{ width: 0px;}
#carousel-book-mobile .carousel-control{ width: 0px;}

.box-social{ white-space: nowrap;}
.box-social li{ background-color: #fff; width: 35px; height: 35px; line-height: 35px; border-radius: 50%; text-align: center; font-size: 18px; margin-right: 5px;}

.popup-chat-footer{ background-color: #ed6f25; width: 250px; position: fixed; bottom: 0px; right: 10px; box-shadow: 0 0 2px #333;}
.popup-chat-footer .minimize{ height: 30px; cursor: pointer;}
.popup-chat-footer .minimize img.icon_chat{ float: left; margin-left: 40px;}
.popup-chat-footer .minimize .title{ text-align: center; line-height: 25px; color: #fff;}
.popup-chat-footer .minimize .close_chatbox{ float: right; color: #fff; margin-right: 5px; font-weight: normal;}
.popup-chat-footer .content-chatbox{ background-color: #fff;}
.popup-chat-footer .content-scroll-chatbox{ height: 150px; overflow: auto; padding: 0 10px;}
.popup-chat-footer .content-scroll-chatbox h5{ margin: 5px 0px;}
.popup-chat-footer .content-scroll-chatbox p{ padding: 5px; display: inline-block; border-radius: 3px;}
#popup_info{ position: fixed; bottom: 5px; right: 5px; width: 260px; box-shadow: 0 0 3px #333; padding: 15px; background-color: #fff; display: none;}
#close_popup_info{ position: absolute; top: -17px; right: -12px; font-weight: bold;}

.my_content{ border-radius: 10px; border: 3px solid #cacbcb; margin: 20px 0px; overflow: hidden; padding: 15px;}
.border-bottom{ border-bottom: 1px solid #999; padding-bottom: 30px; margin-right: 30px; margin-bottom:15px;}
.border-right{ border-right: 1px solid #999;}
.img-news-home{ width: 100%; height: 180px; margin-bottom: 30px;}
.padding-box{ padding-right: 30px;}
.margin-br{ margin-bottom: 20px;}
.padding-lg{ padding: 0 30px;}
#modalCreate{ background-color: rgba(0, 0, 0, 0.5);}

.template-content .form-group label{ text-transform: uppercase; border-top: 2px solid #ddd; border-bottom: 2px solid #ddd; padding: 10px 0; width: 100%;}

#menu_left{ position: fixed; top: 0px; left: 0px; height: 100%; width: 80px; background-color: #f5f5f5; border-right: 1px solid #f5f5f5; transition: transform .1s ease-out, -webkit-transform .1s ease-out, -o-transform .1s ease-out; z-index: 40;}
#menu_left .logo{ background-color: #fff; position: relative; border-bottom: 1px solid #f87245; left: 1px;}
#menu_left .top_logo{ width: 175px; display: block; padding: 13px 10px;}
#menu_left .top_logo img{ width: 100%; height: auto; display: block;}
#menu_left #h_img{ display: none;}
#menu_left .logo_small{ left: 0px;}
#menu_left .logo_small .top_logo{ width: 80px; padding: 10px; margin: auto;}

#icon_menu{ position: fixed; top: 10px; left: 10px; z-index: 9;}
#icon_menu i{ font-size: 27px; cursor: pointer; color: #ccc;}
#icon_menu i:hover{ color: #777;}

.menu_left_mobile{ width: 250px !important;}
.overlay{ background-color: rgba(0,0,0,0.3); position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 39; display: none;}

.bgr_header{ background: url() no-repeat top center; height: 300px; background-size: cover;}

.box-trend{ color: #fff; font-size: 14px;}
.box-trend a{ color: #222; background-color: #dedede; padding: 2px 5px; border-radius: 2px; font-size: 14px; white-space: nowrap;}
.box-trend a:hover, .box-trend a.active{ color: #fff; background-color: #205F8B;}

.box-news img{ min-width: 265px; min-height: 170px;}

/*login page*/
#login_page{ background: #f1f1f1 url(../img/bgr_login_page.png);}
#login_page .container{ background-color: #fff; margin: 50px auto; border: 1px solid #dedede; box-shadow: 0 0 3px #dedede; max-width: 960px;}
#login_page .form_login{ background-color: #b3dcf5; padding: 15px; border: 1px solid #70bced;}
#login_page .form_signup{ padding: 15px; border: 1px solid #dedede;}
#login_page .form-control{ border-radius: 0;}

.product_item{ border: 1px solid #efefef; box-shadow: 0 0 3px #efefef; margin-bottom: 30px; padding: 15px;}
.product_item:hover{ box-shadow: 0 0 5px #dedede; }
.product_item img{ margin-bottom: 15px;}
.product_item .product_name{ color: #222; height: 40px; display: inline-block;}

.books_item{ border: 1px solid #efefef; box-shadow: 0 0 3px #efefef; margin-bottom: 30px; padding: 15px;}
.books_item:hover{ box-shadow: 0 0 5px #dedede; }
.books_item img{ margin-bottom: 15px;}
.books_item .books_name{ color: #222; height: 40px; display: inline-block;}

.list_menu_account{ line-height: 2; list-style-image: url(../img/checked.png);}
.list_menu_account li{ padding: 7px 0; font-weight: bold;}

@media only screen and (min-width: 1200px){
	.container{ width: 1040px;}
}

@media only screen and (min-width: 1336px){
	.container{ width: 1200px;}
}

@media (max-width: 992px) {
	.box_login_button{ right: 55px;}
	.box-shop-cart{ right: 10px;}
	.text-center-md{
		text-align: center !important;
	}
  .border-bottom{ border-bottom: 0px solid #999; padding-bottom: 0px; margin-right: 0px; margin-bottom: 30px;}
  .border-right{ border-right: 0px solid #999;}
  .margin-bottom-mobile{ margin-bottom: 30px;}
  .img-news-home{ height: 140px;}
  .padding-box{ padding-right: 0px;}
  .my_content{ margin: 20px 0; }
  .padding-lg{ padding: 0 15px;}
}  

@media (max-width: 768px) {
	.text-center-sm{
		text-align: center !important;
	}
  .pull-none-sm{
    float: none !important;
  }
  .clear-border-right{ border-right: none !important;}
  .img-news-home{ height: auto;}
  .my_content{ border-radius: 0px; border: 0px solid #cacbcb; margin: 20px 0; overflow: none; padding: 0px;}
  .slimScrollDiv, .content-scroll{ overflow: none !important; height: auto !important;}
  .margin-br{ margin-bottom: 0px;}
  #site_name{ padding-top: 60px; font-size: 25px;}
  .search_top{ margin-top: 30px;}
}  