﻿#DanhSachAnPham .group{ display: flex; flex-wrap: wrap; }
#DanhSachAnPham .group .item{ width: calc((100% - 15rem) / 5); margin-right: 3.75rem; margin-bottom: 1.875rem; }
#DanhSachAnPham .group .item:nth-child(5n){ margin-right: 0; }
#DanhSachAnPham .group .item .img{ padding: 10px; border: 1px solid #e1e1e1; margin-bottom: 0.9375rem; position: relative; }
#DanhSachAnPham .group .item .img .wImage:before{ padding-bottom: 145.40816%; }
#DanhSachAnPham .group .item .img .info{ position: absolute; width: 100%; text-align: center; z-index: 5; color: #fff; transition: 0.2s all ease-in-out; -moz-transition: 0.2s all ease-in-out; opacity: 0; box-sizing: border-box; background: rgba(0, 0, 0, 0.7); height: 100%; top: 0; left: 0; pointer-events: none; display: flex; align-items: center; justify-content: center; }
#DanhSachAnPham .group .item .img .info i{ margin-right: 0.3125rem; }
#DanhSachAnPham .group .item .img hr{ position: absolute; border: none; height: 2px; background: rgba(255, 255, 255, 0.8); z-index: 10; margin: 0; transition: 0.3s 0.1s all ease-in-out; -moz-transition: 0.3s 0.1s all ease-in-out; pointer-events: none; }
#DanhSachAnPham .group .item .img hr.top,
#DanhSachAnPham .group .item .img hr.bot{ width: 0; top: 1.25rem; left: 0.625rem; }
#DanhSachAnPham .group .item .img hr.bot{ top: inherit; bottom: 1.25rem; }
#DanhSachAnPham .group .item .img hr.left,
#DanhSachAnPham .group .item .img hr.right{ height: 0; top: 10px; left: 1.25rem; width: 2px; }
#DanhSachAnPham .group .item .img hr.right{ left: inherit; right: 1.25rem; }
#DanhSachAnPham .group .item .name{ display: block; text-align: center; font-size: 0.875rem; color: #666666; line-height: 1.25rem; }
#DanhSachAnPham .group .item .name:hover{ color: #3886bc; }
#DanhSachAnPham .group .item:hover .info,
#DanhSachAnPham .group .item:hover hr{ opacity: 1; }
#DanhSachAnPham .group .item:hover hr.top,
#DanhSachAnPham .group .item:hover hr.bot{ width: calc(100% - 1.25rem); }
#DanhSachAnPham .group .item:hover hr.left,
#DanhSachAnPham .group .item:hover hr.right{ height: calc(100% - 1.25rem); }
#DanhSachAnPham #paginationholder ul{ margin: 0; margin-left: 10px; padding: 0; list-style: none; }
#DanhSachAnPham #paginationholder ul li{ display: inline-block; }
#DanhSachAnPham .pagination > li > a,
#DanhSachAnPham .pagination > li > span{ position: relative; float: left; padding: 6px 12px; margin-left: -1px; line-height: 1.428571429; text-decoration: none; background-color: #ffffff; border: 1px solid #dddddd; }
#DanhSachAnPham .pagination > .active > a,
#DanhSachAnPham .pagination > li > a:hover{ background: #b82222; border-color: #b82222; color: #fff; }
.wrp{ margin: auto; width: 83.5rem; max-width: 100%; }
body{ color: #333; font-family: Arial; font-size: 100%; min-width: 83.5rem; max-width: 100%; }
#slideAnPham h4{ display: block; margin: 20px 0 15px; padding: 0; font-size: 22px; font-family: 'UTMAlexander'; font-weight: 100;  color: #222; position: relative; padding:8px 0; border-bottom: 1px solid #eee;}
#slideAnPham h4:after{content: ""; width: 150px; height : 4px; background: #b82222; position: absolute; bottom: 0; left:0;  }
#slideAnPham .group{ display: flex; flex-wrap: wrap; }
#slideAnPham .group .item:nth-child(5n){ margin-right: 0; }
#slideAnPham .group .item .img{ padding: 10px; border: 1px solid #e1e1e1; margin-bottom: 0.9375rem; position: relative; }
#slideAnPham .group .item .img .wImage:before{ padding-bottom: 145.40816%; }
#slideAnPham .group .item .img .info{ position: absolute; width: 100%; text-align: center; z-index: 5; color: #fff; transition: 0.2s all ease-in-out; -moz-transition: 0.2s all ease-in-out; opacity: 0; box-sizing: border-box; background: rgba(0, 0, 0, 0.7); height: 100%; top: 0; left: 0; pointer-events: none; display: flex; align-items: center; justify-content: center; }
#slideAnPham .group .item .img .info i{ margin-right: 0.3125rem; }
#slideAnPham .group .item .img hr{ position: absolute; border: none; height: 2px; background: rgba(255, 255, 255, 0.8); z-index: 10; margin: 0; transition: 0.3s 0.1s all ease-in-out; -moz-transition: 0.3s 0.1s all ease-in-out; pointer-events: none; }
#slideAnPham .group .item .img hr.top,
#slideAnPham .group .item .img hr.bot{ width: 0; top: 1.25rem; left: 0.625rem; }
#slideAnPham .group .item .img hr.bot{ top: inherit; bottom: 1.25rem; }
#slideAnPham .group .item .img hr.left,
#slideAnPham .group .item .img hr.right{ height: 0; top: 10px; left: 1.25rem; width: 2px; }
#slideAnPham .group .item .img hr.right{ left: inherit; right: 1.25rem; }
#slideAnPham .group .item .name{ display: block; text-align: center; font-size: 0.875rem; color: #666666; line-height: 1.25rem; }
#slideAnPham .group .item .name:hover{ color: #3886bc; }
#slideAnPham .group .item:hover .info,
#slideAnPham .group .item:hover hr{ opacity: 1; }
#slideAnPham .group .item:hover hr.top,
#slideAnPham .group .item:hover hr.bot{ width: calc(100% - 1.25rem); }
#slideAnPham .group .item:hover hr.left,
#slideAnPham .group .item:hover hr.right{ height: calc(100% - 1.25rem); }
#slideAnPham .group .owl-controls{ width: 100%; }
#slideAnPham .group .owl-controls .owl-nav .owl-prev,
#slideAnPham .group .owl-controls .owl-nav .owl-next{ top: 9.6875rem;  border: 1px solid #aaa }
#slideAnPham .group .owl-controls .owl-nav .owl-prev:hover,
#slideAnPham .group .owl-controls .owl-nav .owl-next:hover{ background: rgba(215, 25, 32, 0.8) !important; }
.anphamRight .group .owl-controls .owl-dots,
#slideAnPham .group .owl-controls .owl-dots{ display: flex; align-items: center; justify-content: center; margin-top: 0.625rem; width: 100%; }
.anphamRight .group .owl-controls .owl-dots .owl-dot,
#slideAnPham .group .owl-controls .owl-dots .owl-dot{ width: 0.5rem; height: 0.5rem; background: #ccc; border-radius: 50%; display: block; margin: 0 0.1875rem; }
.anphamRight .group .owl-controls .owl-dots .owl-dot.active,
#slideAnPham .group .owl-controls .owl-dots .owl-dot.active{ background: #d71920; }
#slideAnPham .group .owl-controls .owl-nav .owl-prev,
#slideAnPham .group .owl-controls .owl-nav .owl-next{ position: absolute; top: -32px; right: 45px; transform: translateY(-50%); width: 40px; height: 25px; display: flex; align-items: center; justify-content: center; z-index: 20; background: rgba(255, 255, 255, 0.2); color: #000;   }
#slideAnPham .group .owl-controls .owl-nav .owl-prev:before,
#slideAnPham .group .owl-controls .owl-nav .owl-next:before{ font-family: 'FontAwesome'; font-weight: 900; content: "\f053"; }
#slideAnPham .group .owl-controls .owl-nav .owl-prev.owl-next,
#slideAnPham .group .owl-controls .owl-nav .owl-next.owl-next{ left: auto; right: 0;  }
#slideAnPham .group .owl-controls .owl-nav .owl-prev.owl-next:before,
#slideAnPham .group .owl-controls .owl-nav .owl-next.owl-next:before{ content: "\f054"; }
#slideAnPham .group .owl-controls .owl-nav .owl-prev:hover,
#slideAnPham .group .owl-controls .owl-nav .owl-next:hover{ background: white; }

a.morelink{ color: #d71920; }
a:visited.morelink{ color: #d71920; }
a.morelink{ text-decoration: none; outline: none; }
.morecontent span{ display: none; }
#tableMenu table{ margin: 20px 0; }
#tableMenu th { text-align: center; padding: 10px 15px }
#tableMenu td { vertical-align: middle; line-height: 22px}
#tableMenu td .name { transition: 0.3s all ease-in-out; font-weight: 300}
#tableMenu td .name:hover {font-weight: 700}
#tableMenu td .author {margin-top: 5px}
#tableMenu td .btn { padding: 0; width: 35px; height: 35px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px}
#tableMenu .table > :not(caption) > * > *{ padding: 10px 15px; line-height: 22px; vertical-align: middle; }
#box-anpham .box-heading{ display: block; margin: 0 0 20px; padding: 0; font-size: 24px; font-family: 'UTMAlterGothic'; font-weight: 100; color: #222;padding-bottom: 5px; }
#box-anpham .box-heading span{ display: inline-block; padding-right: 8px; background-color: #FFF; transform: translateY(-2px); }
#box-anpham .box-content .book-detail{ display: flex; justify-content: flex-start; margin-bottom: 20px; }
#box-anpham .box-content .book-detail .left{ flex: 1; }
#box-anpham .box-content .book-detail .left .wImage{ display: block; position: relative; border: 1px solid #EEE; }
#box-anpham .box-content .book-detail .left .wImage:before {padding-bottom: 150%}
#box-anpham .box-content .book-detail .right{ width: 75%; margin-left: 20px; line-height: 27px; }
.books .item:nth-child(2n + 1){ margin-left: 22px; }
.books .item{ float: left; width: 460px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin-right: 22px; margin-bottom: 26px; padding: 10px; border: 1px solid #eee; position: relative; -webkit-transition: all 100ms ease; }
.books .item .thumb{ display: block; float: left; width: 35%; margin-right: 10px; height: 100%; }
.books .item .thumb img{ max-width: 100%; width: 100%; height: 100%; }  