/*
Theme Name:   Books Here (Divi Child)
Theme URI:    https://books-here.com
Description:  Child theme của Divi 5 cho Books Here – thư viện tài liệu & khóa học tiếng Anh miễn phí.
Author:       Books Here
Template:     Divi
Version:      0.2.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain:  bookshere
*/

/* ==========================================================================
   1. Design tokens (giữ màu của giao diện Publisher cũ)
   ========================================================================== */
:root {
	--bh-navy: #08408e;      /* header */
	--bh-navy-dark: #071b37; /* footer */
	--bh-red: #d12133;       /* nhãn tiêu đề, điểm nhấn */
	--bh-bg: #f6f8fa;
	--bh-border: #e6e6e6;
	--bh-title: #383838;
	--bh-text: #7b7b7b;
	--bh-radius: 0;
}

/* ==========================================================================
   2. Nền trang + khung
   ========================================================================== */
body,
body .et_pb_module,
body h1, body h2, body h3, body h4, body h5, body h6 { font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif; }
body {
	background: var(--bh-bg) url(/wp-content/uploads/2024/01/pattern33.png) repeat fixed;
	color: var(--bh-text);
}
#page-container,
#et-main-area,
#main-content { background: transparent; }
.home #main-content .container:before { display: none; }

/* Khối trắng có viền – giống các box của Publisher */
.et_pb_row.bh-box {
	background: #fff;
	border: 1px solid var(--bh-border);
	padding: 26px 24px 22px !important;
	width: calc(100% - 40px);
	max-width: 1320px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}
.bh-home.et_pb_section { padding-top: 22px; row-gap: 20px !important; gap: 20px !important; }
.et_pb_row.bh-box { margin-top: 0 !important; margin-bottom: 0 !important; }
.bh-box > .et_pb_column { row-gap: 0 !important; gap: 0 !important; }
.bh-box .et_pb_module { margin-bottom: 0 !important; }

/* ==========================================================================
   3. Tiêu đề dạng "ruy băng" đỏ (section heading)
   ========================================================================== */
.bh-ribbon .et_pb_module_header,
h4.bh-ribbon {
	display: inline-block;
	position: relative;
	margin: 0 0 18px;
	padding: 5px 30px 5px 10px;
	background: var(--bh-red);
	color: #fff !important;
	font-size: 20px;
	font-weight: 700;
	line-height: 22px;
	clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%);
}
.bh-ribbon.et_pb_heading { margin-bottom: 0 !important; }
.bh-ribbon .et_pb_module_header:before {
	font-family: ETmodules;
	font-weight: 400;
	margin-right: 8px;
	font-size: 17px;
}
.bh-ico-podcast  .et_pb_module_header:before { content: "\e0f9"; }
.bh-ico-code     .et_pb_module_header:before { content: "\e01f"; }
.bh-ico-book     .et_pb_module_header:before { content: "\e106"; }
.bh-ico-briefcase .et_pb_module_header:before { content: "\e0fe"; }
.bh-ico-child    .et_pb_module_header:before { content: "\e08a"; }
.bh-ico-heart    .et_pb_module_header:before { content: "\e030"; }
.bh-ico-bolt     .et_pb_module_header:before { content: "\e108"; }
.bh-ico-folder   .et_pb_module_header:before { content: "\e05c"; }
h4.bh-ribbon--blue { background: #1e73be; }

/* ==========================================================================
   4. Khối giới thiệu đầu trang
   ========================================================================== */
.bh-hero-title .et_pb_module_header {
	font-size: 26px;
	font-weight: 500;
	color: #2d2d2d;
	padding-bottom: 6px;
}
.bh-intro p { font-size: 13px; line-height: 1.75; margin-bottom: 10px; padding-bottom: 0; }
.bh-intro a { color: var(--bh-red); }
.bh-intro .bh-accent { color: #e8590c; }
.bh-intro mark { background: #ffff8c; color: #222; padding: 2px 4px; }

/* Ô chọn danh mục */
.bh-cat-select {
	width: 100%;
	height: 32px;
	padding: 0 8px;
	border: 1px solid #d5d5d5;
	background: #fff;
	color: #555;
	font-size: 13px;
}

/* ==========================================================================
   5. Lưới sách 5 cột (thumbnail listing)
   ========================================================================== */
.bh-thumb-grid .et_pb_blog_posts { display: grid !important; gap: 22px 20px !important; }
.bh-thumb-grid .et_pb_post {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}
.bh-thumb-grid .et_pb_image_container { margin: 0 0 10px !important; }
.bh-thumb-grid .et_pb_image_container img {
	width: 100%;
	aspect-ratio: 400 / 250;
	object-fit: cover;
	display: block;
}
.bh-thumb-grid .entry-title {
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	padding: 0 !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.bh-thumb-grid .entry-title a { color: var(--bh-title); }
.bh-thumb-grid .entry-title a:hover { color: var(--bh-red); }
.bh-thumb-grid .et_overlay { display: none !important; }
.bh-thumb-grid .post-meta,
.bh-thumb-grid .post-content:empty,
.bh-mosaic .post-content { display: none; }

/* ==========================================================================
   6. Lưới "Non-Fiction" – 1 ô lớn + 6 ô nhỏ có chữ đè lên ảnh
   ========================================================================== */
.bh-mosaic,
.bh-thumb-grid { width: 100%; }
.bh-mosaic .et_pb_blog_posts {
	width: 100%;
	display: grid !important;
	grid-template-columns: 2fr 1fr 1fr 1fr !important;
	grid-auto-rows: 175px !important;
	grid-template-rows: none !important;
	gap: 2px !important;
}
.bh-mosaic .et_pb_post {
	position: relative;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden;
	background: #222 !important;
}
.bh-mosaic .et_pb_post:first-child { grid-row: span 2; }
.bh-mosaic .et_pb_image_container,
.bh-mosaic .et_pb_image_container a { position: absolute; inset: 0; margin: 0 !important; }
.bh-mosaic .et_pb_image_container img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.bh-mosaic .et_pb_post:hover img { transform: scale(1.05); }
.bh-mosaic .et_pb_image_container a:after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0,0,0,0) 35%, rgba(0,0,0,.8) 100%);
}
.bh-mosaic .entry-title {
	position: absolute;
	left: 16px; right: 16px; bottom: 14px;
	z-index: 2;
	margin: 0;
	padding: 0 !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	line-height: 1.35 !important;
	pointer-events: none;
}
.bh-mosaic .et_pb_post:first-child .entry-title { font-size: 22px !important; }
.bh-mosaic .entry-title a { color: #fff !important; pointer-events: auto; }
.bh-mosaic .et_overlay { display: none; }

/* ==========================================================================
   7. Nút "Load More Posts"
   ========================================================================== */
.et_pb_button.bh-more {
	display: block;
	width: 100%;
	margin-top: 20px;
	padding: 6px 12px !important;
	border: 1px solid #e3e3e3 !important;
	border-radius: 0;
	background: #fff;
	color: #333 !important;
	font-size: 12px !important;
	font-weight: 700;
	text-align: center;
}
.et_pb_button.bh-more:after { display: none; }
.et_pb_button.bh-more:hover { background: var(--bh-red); color: #fff !important; border-color: var(--bh-red) !important; padding: 6px 12px !important; }

/* ==========================================================================
   8. Header
   ========================================================================== */
#main-header { box-shadow: none; }
#main-header .container { width: calc(100% - 60px); max-width: 1320px; }
#top-menu li a { font-weight: 400; }
#top-menu li.current-menu-item > a,
#top-menu > li > a:hover { opacity: 1; }
#top-menu > li.current-menu-item > a { background: rgba(255,255,255,.15); padding: 6px 12px; border-radius: 2px; }
#et_top_search .et-search-form input { color: #fff; }
#et_search_icon:hover, #et_search_icon:before { color: #fff; }
.et-search-form input { color: #fff !important; }

/* ==========================================================================
   9. Footer
   ========================================================================== */
#main-footer { background: var(--bh-navy-dark); }
#main-footer .container { width: calc(100% - 60px); max-width: 1320px; }
#footer-widgets { padding: 44px 0 10px; }
.bh-footer-about { text-align: center; }
.bh-footer-about h4.bh-ribbon { display: block; width: fit-content; }
.bh-footer-about img { max-width: 240px; height: auto; }
.bh-footer-about p { color: #dfe5ee; font-size: 13px; }
.bh-social a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 28px; height: 28px; border: 1px solid rgba(255,255,255,.4);
	color: #fff; font-weight: 700;
}
.bh-post-list { list-style: none; margin: 0; padding: 0 !important; }
#footer-widgets .footer-widget li.bh-post-list:before,
#footer-widgets .bh-post-list li:before { display: none; }
.bh-post-list li {
	display: flex; gap: 12px; align-items: flex-start;
	padding: 0 0 14px !important; margin: 0 0 14px !important;
	border-bottom: 1px solid rgba(255,255,255,.08);
}
.bh-post-list li:last-child { border-bottom: 0; }
.bh-post-list__img img { width: 66px; height: 47px; object-fit: cover; display: block; }
.bh-post-list__title { color: #fff !important; font-size: 13px; font-weight: 500; line-height: 1.45; }
.bh-post-list__title:hover { color: #ffb3bb !important; }
#et-footer-nav { background: var(--bh-navy); }
#et-footer-nav .container { text-align: center; }
.bottom-nav { padding: 14px 0 6px; }
.bottom-nav a { color: #fff !important; font-size: 14px; }
#footer-bottom { background: var(--bh-navy) !important; border-top: 1px solid rgba(255,255,255,.12); }
#footer-info { float: none; text-align: center; color: #fff; }

/* ==========================================================================
   10. Responsive
   ========================================================================== */
@media (max-width: 980px) {
	.et_pb_row.bh-box { width: calc(100% - 24px); padding: 18px 14px 16px !important; }
	.bh-mosaic .et_pb_blog_posts { grid-template-columns: 1fr 1fr !important; grid-auto-rows: 160px !important; }
	.bh-mosaic .et_pb_post:first-child { grid-column: span 2; grid-row: span 2; }
	#main-header .container, #main-footer .container { width: calc(100% - 32px); }
}
@media (max-width: 767px) {
	.bh-hero-title .et_pb_module_header { font-size: 21px; }
	.bh-thumb-grid .et_pb_blog_posts { gap: 16px 12px !important; }
	.bh-thumb-grid .entry-title { font-size: 13px !important; }
	.bh-ribbon .et_pb_module_header { font-size: 17px; }
}

/* ==========================================================================
   11. Mẫu Theme Builder – khung chung (bài viết & danh mục)
   ========================================================================== */
.bh-single.et_pb_section,
.bh-archive.et_pb_section { padding-top: 0 !important; row-gap: 0 !important; }
.bh-single .et_pb_row,
.bh-archive .et_pb_row { width: calc(100% - 40px); max-width: 1320px; }
.et_pb_row.bh-crumbs-row { padding: 0 !important; margin-bottom: 20px !important; }
.bh-crumbs .et_pb_breadcrumbs--trail {
	background: #fff;
	border-bottom: 1px solid var(--bh-border);
	padding: 12px 24px;
	font-size: 12px;
	color: var(--bh-text);
	display: flex; flex-wrap: wrap; gap: 6px;
}
.bh-crumbs a { color: var(--bh-text); }
.bh-crumbs a:hover { color: var(--bh-red); }
.et_pb_row.bh-layout { padding: 0 !important; gap: 24px; column-gap: 24px !important; align-items: flex-start; }
.bh-main, .bh-side { row-gap: 20px !important; gap: 20px !important; }

/* Hộp trắng (panel) */
.et_pb_group.bh-panel {
	background: #fff;
	border: 1px solid var(--bh-border);
	padding: 24px 26px;
	margin: 0 !important;
	row-gap: 16px !important;
}
.bh-panel .et_pb_module { margin-bottom: 0 !important; }
.bh-ico-comment .et_pb_module_header:before { content: "\e066"; }

/* ==========================================================================
   12. Trang bài viết
   ========================================================================== */
.bh-post-title .entry-title,
.bh-post-title h1 { font-size: 26px !important; font-weight: 500 !important; line-height: 1.35 !important; color: #2d2d2d !important; padding: 0; }
.bh-post-title .et_pb_title_container { padding: 0; }

.bh-post-meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; font-size: 12px; color: #9a9a9a; }
.bh-post-meta__info { display: inline-flex; align-items: center; gap: 10px; }
.bh-post-meta__info img { border-radius: 50%; }
.bh-post-meta__author { color: #444; font-weight: 500; }
.bh-post-meta__date b { color: #444; font-weight: 600; }
.bh-badges { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.bh-badges a {
	background: var(--bh-red); color: #fff !important;
	font-size: 10px; font-weight: 500; text-transform: uppercase;
	padding: 3px 7px; line-height: 1.3;
}
.bh-badges a:hover { background: #a8121f; }

.bh-featured { margin: 0; }
.bh-featured img { width: 100%; height: auto; display: block; }
.bh-featured figcaption { text-align: center; font-size: 12px; color: #888; padding-top: 6px; }

/* Thanh chia sẻ */
.bh-share { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bh-share__label {
	border: 1px solid var(--bh-border); padding: 0 14px; height: 34px; line-height: 32px;
	font-size: 12px; color: #444; font-weight: 600;
}
.bh-share__label:before { font-family: ETmodules; content: "\e0a0"; margin-right: 6px; }
.bh-share__btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; color: #fff !important; font-weight: 700; font-size: 14px;
}
.bh-share__btn--facebook { background: #2d5f9a; }
.bh-share__btn--x { background: #111; }
.bh-share__btn--vk { background: #4e729a; font-size: 12px; }
.bh-share__btn:hover { opacity: .85; }
.bh-share__stats { margin-left: auto; display: inline-flex; gap: 12px; border: 1px solid var(--bh-border); padding: 0 12px; height: 34px; align-items: center; font-size: 12px; font-weight: 700; }
.bh-share__views { color: var(--bh-red); }
.bh-share__views:before { font-family: ETmodules; content: "\e0ea"; margin-right: 5px; font-weight: 400; }
.bh-share__comments { color: #444 !important; }
.bh-share__comments:before { font-family: ETmodules; content: "\e065"; margin-right: 5px; font-weight: 400; }

/* Nội dung bài */
.bh-post-content { color: #222; font-size: 15px; line-height: 1.75; }
.bh-post-content p { padding-bottom: 1em; }
.bh-post-content h2 { font-size: 22px; font-weight: 500; color: #212121; padding: 10px 0 8px; }
.bh-post-content h3 { font-size: 19px; font-weight: 500; color: #212121; padding: 8px 0 6px; }
.bh-post-content a { color: var(--bh-red); }
.bh-post-content blockquote {
	background: #efefef; border-left: 4px solid var(--bh-red);
	padding: 18px 24px; margin: 0 0 1.4em; font-size: 16.5px;
}
.bh-post-content img { max-width: 100%; height: auto; }
.bh-post-content table { width: 100%; border: 1px solid var(--bh-border); border-collapse: collapse; margin-bottom: 1.4em; }
.bh-post-content td, .bh-post-content th { border: 1px solid var(--bh-border); padding: 8px; vertical-align: top; text-align: center; }
.bh-post-content .btn,
.bh-post-content a.btn {
	display: inline-block; background: var(--bh-red); color: #fff !important;
	padding: 8px 18px; font-size: 13px; text-transform: uppercase; text-decoration: none;
}
.bh-post-content ul, .bh-post-content ol { padding-left: 1.4em; margin-bottom: 1.2em; }

/* Hộp chấm điểm */
.bh-review { border: 1px solid var(--bh-border); }
.bh-review__head { display: flex; justify-content: space-between; gap: 20px; padding: 16px; }
.bh-review__text h3 { font-size: 18px; color: #222; }
.bh-review__text p { color: #555; }
.bh-review__score {
	background: var(--bh-red); color: #fff; text-align: center;
	min-width: 125px; padding: 12px 16px 14px; display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.bh-review__score strong { font-size: 44px; line-height: 1; font-weight: 700; }
.bh-review__score small { font-size: 20px; }
.bh-review__score em { font-style: normal; font-size: 14px; }
.bh-review__row { display: flex; justify-content: space-between; align-items: center; padding: 13px 16px; border-top: 1px solid var(--bh-border); color: #333; font-size: 14px; }
.bh-review__row--readers { background: #f6f6f6; }
.bh-review__votes { display: inline-flex; align-items: center; gap: 10px; color: #777; font-size: 13px; }
.bh-review__row--readers .bh-stars span { background-image: linear-gradient(90deg, #f5b700 100%, #f5b700 100%); }
.bh-stars {
	position: relative; display: inline-block; width: 80px; height: 14px;
	background: #ddd;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 14'%3E%3Cg%3E%3Cpath d='M7 0l2.1 4.6 4.9.5-3.7 3.3 1.1 4.9L7 10.8 2.6 13.3l1.1-4.9L0 5.1l4.9-.5z'/%3E%3Cpath transform='translate(16.5 0)' d='M7 0l2.1 4.6 4.9.5-3.7 3.3 1.1 4.9L7 10.8 2.6 13.3l1.1-4.9L0 5.1l4.9-.5z'/%3E%3Cpath transform='translate(33 0)' d='M7 0l2.1 4.6 4.9.5-3.7 3.3 1.1 4.9L7 10.8 2.6 13.3l1.1-4.9L0 5.1l4.9-.5z'/%3E%3Cpath transform='translate(49.5 0)' d='M7 0l2.1 4.6 4.9.5-3.7 3.3 1.1 4.9L7 10.8 2.6 13.3l1.1-4.9L0 5.1l4.9-.5z'/%3E%3Cpath transform='translate(66 0)' d='M7 0l2.1 4.6 4.9.5-3.7 3.3 1.1 4.9L7 10.8 2.6 13.3l1.1-4.9L0 5.1l4.9-.5z'/%3E%3C/g%3E%3C/svg%3E") no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 14'%3E%3Cg%3E%3Cpath d='M7 0l2.1 4.6 4.9.5-3.7 3.3 1.1 4.9L7 10.8 2.6 13.3l1.1-4.9L0 5.1l4.9-.5z'/%3E%3Cpath transform='translate(16.5 0)' d='M7 0l2.1 4.6 4.9.5-3.7 3.3 1.1 4.9L7 10.8 2.6 13.3l1.1-4.9L0 5.1l4.9-.5z'/%3E%3Cpath transform='translate(33 0)' d='M7 0l2.1 4.6 4.9.5-3.7 3.3 1.1 4.9L7 10.8 2.6 13.3l1.1-4.9L0 5.1l4.9-.5z'/%3E%3Cpath transform='translate(49.5 0)' d='M7 0l2.1 4.6 4.9.5-3.7 3.3 1.1 4.9L7 10.8 2.6 13.3l1.1-4.9L0 5.1l4.9-.5z'/%3E%3Cpath transform='translate(66 0)' d='M7 0l2.1 4.6 4.9.5-3.7 3.3 1.1 4.9L7 10.8 2.6 13.3l1.1-4.9L0 5.1l4.9-.5z'/%3E%3C/g%3E%3C/svg%3E") no-repeat;
}
.bh-stars span { position: absolute; inset: 0 auto 0 0; background: var(--bh-red); }
.bh-review__score .bh-stars { background: rgba(255,255,255,.35); }
.bh-review__score .bh-stars span { background: #fff; }

/* Bài trước / bài sau */
.bh-post-nav { display: flex; justify-content: space-between; gap: 24px; padding: 4px 2px; }
.bh-post-nav span.nav-previous, .bh-post-nav span.nav-next { max-width: 48%; float: none; }
.bh-post-nav a { color: #444; font-size: 14px; font-weight: 500; line-height: 1.4; display: block; }
.bh-post-nav .nav-next { text-align: right; margin-left: auto; }
.bh-post-nav a:before { display: block; font-size: 11px; font-weight: 700; color: #999; text-transform: uppercase; margin-bottom: 4px; }
.bh-post-nav .nav-previous a:before { content: "‹ Prev post"; }
.bh-post-nav .nav-next a:before { content: "Next post ›"; }
.bh-post-nav .meta-nav { display: none; }
.bh-post-nav a:hover { color: var(--bh-red); }

/* Bài liên quan */
h3.bh-ribbon-title {
	display: inline-block; margin: 0 0 18px; padding: 5px 30px 5px 10px;
	background: var(--bh-red); color: #fff; font-size: 20px; font-weight: 700; line-height: 22px;
	clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%);
}
.bh-related__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.bh-card__img { position: relative; display: block; }
.bh-card__img img { width: 100%; aspect-ratio: 400 / 250; object-fit: cover; display: block; background: #eee; }
.bh-card__badge, .bh-tile__badges span {
	position: absolute; top: 0; left: 0; background: var(--bh-red); color: #fff;
	font-size: 10px; text-transform: uppercase; padding: 3px 7px; font-weight: 500;
}
.bh-card__title { font-size: 15px; font-weight: 700; line-height: 1.35; padding: 10px 0 0; }
.bh-card__title a { color: var(--bh-title); }
.bh-card__title a:hover { color: var(--bh-red); }

/* Bình luận */
.bh-comments #comments.page_title { font-size: 16px; color: #444; padding-bottom: 6px; }
.bh-comments .comment-reply-title { display: none; }
.bh-comments .comment-notes { text-align: center; font-size: 12px; color: #888; }
.bh-comments textarea, .bh-comments input[type=text], .bh-comments input[type=email], .bh-comments input[type=url] {
	background: #fff !important; border: 1px solid #ddd !important; border-radius: 0 !important; color: #333 !important;
}
.bh-comments .form-submit .et_pb_button,
.bh-comments #submit {
	background: var(--bh-red) !important; color: #fff !important; border: 0 !important; border-radius: 0 !important;
	padding: 10px 26px !important; font-size: 14px !important;
}
.bh-comments .form-submit .et_pb_button:after { display: none; }

/* ==========================================================================
   13. Sidebar
   ========================================================================== */
.bh-side .et_pb_widget_area { width: 100%; }
.bh-sidebar .et_pb_widget {
	background: #fff; border: 1px solid var(--bh-border);
	padding: 22px 24px; margin: 0 0 20px !important; width: 100%;
	font-size: 13px;
}
.bh-sidebar .widgettitle {
	display: inline-block; padding: 5px 30px 5px 10px; margin-bottom: 16px;
	background: var(--bh-red); color: #fff; font-size: 18px; font-weight: 700; line-height: 22px;
	clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%);
}
.bh-sidebar select { width: 100%; height: 32px; border: 1px solid #d5d5d5; font-size: 13px; color: #555; }
.bh-sidebar .widget_recent_entries li { padding: 0 0 12px; margin: 0 0 12px; border-bottom: 1px solid #f0f0f0; }
.bh-sidebar .widget_recent_entries li:last-child { border-bottom: 0; margin-bottom: 0; }
.bh-sidebar .widget_recent_entries a { color: #383838; font-weight: 500; font-size: 13.5px; line-height: 1.5; }
.bh-sidebar .widget_recent_entries a:hover { color: var(--bh-red); }
.bh-sidebar .widget_text p { color: #555; padding: 0; }

/* ==========================================================================
   14. Trang danh mục
   ========================================================================== */
.et_pb_row.bh-mosaic-row { padding: 0 !important; margin-bottom: 20px !important; }
.bh-archive-mosaic {
	display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 180px 180px; gap: 2px;
}
.bh-tile { position: relative; overflow: hidden; background: #333; }
.bh-tile--big { grid-row: span 2; }
.bh-tile:nth-child(2) { grid-column: 2; grid-row: 1; }
.bh-tile:nth-child(5) { grid-column: 3; grid-row: 1 / span 2; }
.bh-tile a { position: absolute; inset: 0; color: #fff; }
.bh-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.bh-tile:hover img { transform: scale(1.05); }
.bh-tile a:after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0) 35%, rgba(0,0,0,.82)); }
.bh-tile__badges { position: absolute; top: 0; left: 0; display: flex; gap: 3px; z-index: 2; }
.bh-tile__badges span { position: static; }
.bh-tile__body { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 2; }
.bh-tile__title { display: block; font-size: 14px; font-weight: 500; line-height: 1.35; }
.bh-tile--big .bh-tile__title { font-size: 22px; }
.bh-tile__meta { display: block; font-size: 11px; opacity: .8; margin-top: 6px; }

.bh-archive-head__label {
	display: inline-block; background: #333; color: #fff; font-size: 12px; padding: 4px 8px;
	border-bottom: 2px solid #333;
}
.bh-archive-head { border-top: 0; }
.bh-archive-head:before { content: ""; display: block; height: 0; }
.bh-archive-head__label + .bh-archive-head__title { border-top: 2px solid #333; padding-top: 14px; margin-top: -2px; }
.bh-archive-head__title { font-size: 28px; font-weight: 500; color: #2d2d2d; }
.bh-archive-head__desc { font-size: 13px; color: #888; margin-top: 8px; }
.bh-archive-head__desc p { padding-bottom: 6px; }
.bh-archive-head__kids { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.bh-archive-head__kids a {
	border: 1px solid #ddd; color: #666; font-size: 10px; text-transform: uppercase; padding: 3px 7px;
}
.bh-archive-head__kids a:hover { background: var(--bh-red); border-color: var(--bh-red); color: #fff; }

/* Danh sách bài: ảnh trái – chữ phải */
.bh-list { width: 100%; }
.bh-list .et_pb_post {
	display: grid; grid-template-columns: 210px 1fr; column-gap: 18px; align-items: start;
	margin: 0 0 22px !important; padding: 0 0 22px !important; border: 0 !important;
	border-bottom: 1px solid #f0f0f0 !important;
}
.bh-list .et_pb_post:last-of-type { border-bottom: 0 !important; }
.bh-list .et_pb_image_container,
.bh-list .entry-featured-image-url { grid-row: 1 / span 3; margin: 0 !important; }
.bh-list .et_pb_post img { width: 210px; aspect-ratio: 400 / 250; object-fit: cover; }
.bh-list .entry-title { font-size: 18px !important; font-weight: 500 !important; line-height: 1.35 !important; padding: 0 0 6px !important; }
.bh-list .entry-title a { color: #2d2d2d; }
.bh-list .entry-title a:hover { color: var(--bh-red); }
.bh-list .post-meta { font-size: 11px; color: #aaa; padding-bottom: 6px; }
.bh-list .post-meta a { color: #999; }
.bh-list .post-content { font-size: 12.5px; color: #8a8a8a; line-height: 1.6; }
.bh-list .et_overlay { display: none; }
.bh-list .pagination { display: flex; justify-content: space-between; padding-top: 6px; }
.bh-list .pagination a {
	border: 1px solid #e3e3e3; padding: 6px 16px; font-size: 12px; font-weight: 700; color: #333;
}
.bh-list .pagination a:hover { background: var(--bh-red); color: #fff; border-color: var(--bh-red); }

/* ==========================================================================
   15. Responsive – mẫu bài viết & danh mục
   ========================================================================== */
@media (max-width: 980px) {
	.bh-single .et_pb_row, .bh-archive .et_pb_row { width: calc(100% - 24px); }
	.bh-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bh-archive-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: 220px 150px 150px; }
	.bh-tile--big { grid-column: 1 / span 2 !important; grid-row: 1 !important; }
	.bh-tile:nth-child(n+2) { grid-column: auto !important; grid-row: auto !important; }
}
@media (max-width: 767px) {
	.et_pb_group.bh-panel { padding: 18px 14px; }
	.bh-post-title h1, .bh-post-title .entry-title { font-size: 21px !important; }
	.bh-related__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
	.bh-card__title { font-size: 13px; }
	.bh-share__stats { margin-left: 0; }
	.bh-review__head { flex-direction: column-reverse; align-items: stretch; }
	.bh-list .et_pb_post { grid-template-columns: 120px 1fr; column-gap: 12px; }
	.bh-list .et_pb_post img { width: 120px; }
	.bh-list .entry-title { font-size: 15px !important; }
	.bh-list .post-content { display: none; }
	.bh-archive-mosaic { grid-template-rows: 200px 130px 130px; }
	.bh-tile--big .bh-tile__title { font-size: 18px; }
}

/* ==========================================================================
   16. Tinh chỉnh sau kiểm tra
   ========================================================================== */
#top-menu a, .et_mobile_menu a, .et-search-form input,
#main-footer, #main-footer *:not([class*="et-pb-icon"]):not(.et_pb_scroll_top) { font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif; }
.bh-crumbs, .bh-crumbs .et_pb_module_inner { width: 100%; }
.bh-list .et_pb_blog_posts { gap: 0 !important; row-gap: 0 !important; }
.bh-sidebar { display: flex; flex-direction: column; gap: 20px; }
.bh-sidebar .et_pb_widget { margin: 0 !important; }
.bh-sidebar .et_pb_widget:after { display: none; }
.bh-post-nav a, .bh-post-nav a .nav-label { color: #444 !important; }
.bh-post-nav a:hover, .bh-post-nav a:hover .nav-label { color: var(--bh-red) !important; }
.bh-tile__title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 767px) {
	.bh-archive-mosaic { grid-template-rows: 210px 150px; }
	.bh-tile:nth-child(n+4) { display: none; }
	.bh-tile:not(.bh-tile--big) .bh-tile__meta { display: none; }
	.bh-tile:not(.bh-tile--big) .bh-tile__badges span:nth-child(n+2) { display: none; }
	.bh-tile:not(.bh-tile--big) .bh-tile__title { font-size: 13px; -webkit-line-clamp: 3; }
	.bh-tile__body { left: 10px; right: 10px; bottom: 10px; }
}

/* ==========================================================================
   17. Trang tĩnh (Privacy, IELTS Speaking Scorer, trang danh sách)
   ========================================================================== */
.bh-page .bh-post-content .et_pb_section.bh-inner { padding: 0 !important; background: transparent; }
.bh-page .bh-post-content .et_pb_row.bh-inner-row { width: 100%; max-width: none; padding: 0 !important; }
.bh-page .bh-post-content .bh-thumb-grid .pagination { display: flex; justify-content: space-between; margin-top: 18px; }
.bh-page .bh-post-content .bh-thumb-grid .pagination a { border: 1px solid #e3e3e3; padding: 6px 16px; font-size: 12px; font-weight: 700; color: #333; }

/* ==========================================================================
   18. Header ở màn hình vừa (981–1279px): logo gọn, menu không xuống dòng
   ========================================================================== */
#logo { max-height: 48px !important; width: auto; }
@media (min-width: 981px) and (max-width: 1279px) {
	#logo { max-height: 40px !important; }
	#top-menu li { padding-right: 14px; }
	#top-menu > li > a { font-size: 14px !important; }
	#top-menu { white-space: nowrap; }
	#et_top_search { margin-left: 14px; }
}

/* ==========================================================================
   19. Bạn đọc chấm sao 1–5 ([bh_review_box])
   ========================================================================== */
.bh-rate {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
	border: 1px solid var(--bh-border); background: #fafafa; padding: 16px 20px;
}
.bh-rate__title { font-size: 15px; font-weight: 700; color: #333; }
.bh-rate__stars { position: relative; display: inline-flex; line-height: 0; }
.bh-rate__star {
	width: 32px; height: 32px; padding: 0; margin: 0; border: 0; background: none; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
}
.bh-rate__star svg { width: 28px; height: 28px; fill: #dcdcdc; }
.bh-rate__fill {
	position: absolute; top: 0; left: 0; height: 32px; z-index: 2; pointer-events: none;
	background: #f5b700; transition: width .15s;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath transform='translate(2 2) scale(1.1667)' d='M12 2.5l2.9 6 6.6.8-4.9 4.6 1.3 6.6L12 17.3l-5.9 3.2 1.3-6.6L2.5 9.3l6.6-.8z'/%3E%3C/svg%3E") left top / 32px 32px repeat-x;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath transform='translate(2 2) scale(1.1667)' d='M12 2.5l2.9 6 6.6.8-4.9 4.6 1.3 6.6L12 17.3l-5.9 3.2 1.3-6.6L2.5 9.3l6.6-.8z'/%3E%3C/svg%3E") left top / 32px 32px repeat-x;
}
.bh-rate__star:focus-visible { outline: 2px solid var(--bh-navy); outline-offset: 1px; border-radius: 3px; }
.bh-rate.is-voted .bh-rate__star, .bh-rate.is-busy .bh-rate__star { cursor: default; }
.bh-rate.is-busy { opacity: .7; }
.bh-rate__meta { font-size: 13px; color: #777; }
.bh-rate__avg { font-size: 18px; color: #222; }
.bh-rate__msg { flex-basis: 100%; font-size: 13px; color: #2e7d32; }
.bh-rate__msg:empty { display: none; }
@media (max-width: 767px) {
	.bh-rate { padding: 14px; }
}

/* ==========================================================================
   20. Khối dùng chung cho mẫu bài viết mới: nút, mục lục
   ========================================================================== */
.bh-btn {
	display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 22px;
	font-size: 14px; font-weight: 700; letter-spacing: .02em; border-radius: 3px; transition: .15s;
}
.bh-btn--primary { background: var(--bh-red); color: #fff !important; }
.bh-btn--primary:hover { background: #a8121f; }
.bh-btn--primary:after { content: "↓"; font-weight: 400; }
.bh-btn--ghost { border: 1px solid #cfd6e0; color: var(--bh-navy) !important; background: #fff; }
.bh-btn--ghost:hover { border-color: var(--bh-navy); }

.bh-toc { border: 1px solid var(--bh-border); border-left: 3px solid var(--bh-navy); background: #f7f9fc; padding: 14px 18px; }
.bh-toc summary { cursor: pointer; font-weight: 700; color: #222; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; }
.bh-toc ol { margin: 10px 0 0; padding-left: 20px; columns: 2; column-gap: 32px; }
.bh-toc li { font-size: 14px; line-height: 1.5; padding: 3px 0; break-inside: avoid; }
.bh-toc li.bh-toc__l2 { margin-left: 14px; list-style: circle; font-size: 13px; }
.bh-toc a { color: #333; }
.bh-toc a:hover { color: var(--bh-red); }
.bh-post-content :is(h2, h3)[id] { scroll-margin-top: 90px; }
#bh-get { scroll-margin-top: 120px; }
#bh-get:target { outline: 3px solid #f5b700; outline-offset: 3px; }
.bh-related--4 .bh-related__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ==========================================================================
   21. Mẫu A – "Thẻ sách"
   ========================================================================== */
.bh-v-a .et_pb_row.bh-hero-row { padding: 0 !important; margin-bottom: 20px !important; }
.bh-v-a .bh-hero-panel { padding: 28px !important; }
.bh-hero { display: grid; grid-template-columns: 260px 1fr; gap: 36px; align-items: start; }
.bh-hero__cover { box-shadow: 0 14px 30px rgba(8, 64, 142, .18); border-radius: 4px; overflow: hidden; background: #eef2f7; }
.bh-hero__img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; object-position: center; }
.bh-hero__body .bh-badges { margin-bottom: 10px; }
.bh-hero__title { font-size: 32px; line-height: 1.25; font-weight: 700; color: #1d2733; padding: 0 0 10px; }
.bh-hero__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: #8a94a3; margin-bottom: 12px; }
.bh-hero__meta span + span:before { content: "•"; margin-right: 16px; color: #c5ccd6; }
.bh-hero__rating { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: #333 !important; margin-bottom: 14px; }
.bh-hero__rating .bh-stars span { background: #f5b700; }
.bh-hero__rating b { font-size: 16px; }
.bh-hero__rating > span:last-child { color: #8a94a3; }
.bh-hero__excerpt { font-size: 15px; line-height: 1.7; color: #4a5563; max-width: 680px; padding-bottom: 20px; }
.bh-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.bh-side--sticky .bh-sidebar { position: sticky; top: 90px; }

/* ==========================================================================
   22. Mẫu B – "Đọc tập trung"
   ========================================================================== */
.bh-v-b .et_pb_row.bh-narrow { max-width: 820px !important; padding: 0 !important; margin-bottom: 20px !important; }
.bh-v-b .et_pb_row.bh-narrow > .et_pb_column { row-gap: 20px !important; }
.bh-v-b .et_pb_row.bh-wide { max-width: 1320px; padding: 0 !important; margin-bottom: 20px !important; background: transparent; border: 0; box-shadow: none; }
.bh-v-b .et_pb_row.bh-narrow.bh-crumbs-row { margin-bottom: 20px !important; }
.bh-v-b .bh-article { padding: 40px 56px 32px !important; }
.bh-v-b .bh-badges { margin-bottom: -6px; }
.bh-v-b .bh-post-title h1, .bh-v-b .bh-post-title .entry-title { font-size: 36px !important; line-height: 1.25 !important; font-weight: 700 !important; color: #1d2733 !important; }
.bh-v-b .bh-featured { margin: 0 -56px; }
.bh-v-b .bh-featured figcaption { padding: 8px 56px 0; }
.bh-v-b .bh-post-content { font-size: 17px; line-height: 1.85; color: #222; }
.bh-v-b .bh-post-content h2 { font-size: 26px; font-weight: 700; padding-top: 18px; }
.bh-v-b .bh-post-content h3 { font-size: 21px; font-weight: 700; }
.bh-v-b .bh-post-content blockquote { font-size: 18px; background: #f7f9fc; border-left-color: var(--bh-navy); text-align: left !important; }
.bh-v-b .bh-post-content blockquote p { text-align: left !important; }
.bh-v-b .bh-toc ol { columns: 1; }

@media (max-width: 980px) {
	.bh-hero { grid-template-columns: 200px 1fr; gap: 24px; }
	.bh-hero__title { font-size: 26px; }
	.bh-related--4 .bh-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bh-v-b .bh-article { padding: 28px 28px 24px !important; }
	.bh-v-b .bh-featured { margin: 0 -28px; }
	.bh-v-b .bh-featured figcaption { padding: 8px 28px 0; }
	.bh-side--sticky .bh-sidebar { position: static; }
}
@media (max-width: 767px) {
	.bh-v-a .bh-hero-panel { padding: 18px !important; }
	.bh-hero { grid-template-columns: 1fr; gap: 18px; }
	.bh-hero__cover { max-width: 210px; margin: 0 auto; }
	.bh-hero__title { font-size: 23px; }
	.bh-hero__actions .bh-btn { flex: 1 1 100%; justify-content: center; }
	.bh-toc ol { columns: 1; }
	.bh-v-b .bh-article { padding: 20px 16px !important; }
	.bh-v-b .bh-featured { margin: 0 -16px; }
	.bh-v-b .bh-featured figcaption { padding: 6px 16px 0; }
	.bh-v-b .bh-post-title h1, .bh-v-b .bh-post-title .entry-title { font-size: 25px !important; }
	.bh-v-b .bh-post-content { font-size: 16px; }
}
@media (max-width: 767px) { .bh-hero__meta span + span:before { display: none; } .bh-hero__meta { gap: 4px 14px; } }

/* ==========================================================================
   23. Tiêu đề trong bài viết (H2–H5)
   Thực tế nội dung cũ: H3 = tiêu đề chính, H4 = tiêu đề phụ, H2 hiếm dùng.
   ========================================================================== */
.bh-post-content :is(h2, h3, h4, h5) {
	font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
	font-weight: 700 !important;
	letter-spacing: -.005em;
	padding-bottom: 0 !important;
	scroll-margin-top: 90px;
}
/* Bỏ định dạng dán từ Word/Amazon bên trong tiêu đề */
.bh-post-content :is(h2, h3, h4, h5) :is(span, strong, b, em, font) {
	font-size: inherit !important; font-family: inherit !important; color: inherit !important;
	font-weight: inherit !important; line-height: inherit !important; background: none !important;
}
.bh-post-content :is(h2, h3, h4, h5) a:not(.btn) { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }
.bh-post-content :is(h2, h3, h4, h5) a:not(.btn):hover { color: var(--bh-red); }

/* H2 – mục lớn */
.bh-post-content h2 {
	position: relative;
	font-size: 25px !important; line-height: 1.3 !important; color: #14213d !important;
	margin: 1.9em 0 .8em !important; padding: 0 0 12px !important;
	border-bottom: 2px solid #e8edf3;
}
.bh-post-content h2:after {
	content: ""; position: absolute; left: 0; bottom: -2px; width: 64px; height: 2px; background: var(--bh-red);
}

/* H3 – tiêu đề chính của bài */
.bh-post-content h3 {
	font-size: 22px !important; line-height: 1.35 !important; color: #1d2733 !important;
	margin: 1.8em 0 .7em !important; padding: 2px 0 2px 14px !important;
	border-left: 4px solid var(--bh-red);
}

/* H4 – tiêu đề phụ */
.bh-post-content h4 {
	font-size: 18px !important; line-height: 1.4 !important; color: var(--bh-navy) !important;
	margin: 1.5em 0 .5em !important; padding: 0 !important;
}
.bh-post-content h4:before {
	content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 10px 2px 0;
	background: var(--bh-red); transform: rotate(45deg); vertical-align: middle;
}

/* H5 – nhãn nhỏ */
.bh-post-content h5 {
	font-size: 14px !important; line-height: 1.4 !important; color: #5b6675 !important;
	text-transform: uppercase; letter-spacing: .06em; margin: 1.4em 0 .4em !important;
}

/* Khoảng cách hợp lý ở đầu bài và khi tiêu đề nối tiếp nhau */
.bh-post-content > :first-child:is(h2, h3, h4),
.bh-post-content .et_pb_post_content > :first-child:is(h2, h3, h4) { margin-top: 0 !important; }
.bh-post-content :is(h2, h3) + :is(h3, h4),
.bh-post-content h4 + h5 { margin-top: .4em !important; }

/* Tiêu đề căn giữa (thường là nhãn trước nút tải): bỏ vạch trái / dấu */
.bh-post-content h3[style*="center"] { border-left: 0; padding-left: 0 !important; }
.bh-post-content h4[style*="center"]:before { display: none; }

/* Tiêu đề chỉ chứa nút Download – không trang trí như tiêu đề */
.bh-post-content .bh-h-btn { border: 0 !important; padding: 0 !important; margin: .8em 0 !important; font-size: inherit !important; }
.bh-post-content .bh-h-btn:before, .bh-post-content .bh-h-btn:after { display: none !important; }

/* Mẫu B dùng cỡ chữ lớn hơn một chút */
.bh-v-b .bh-post-content h2 { font-size: 28px !important; }
.bh-v-b .bh-post-content h3 { font-size: 24px !important; }
.bh-v-b .bh-post-content h4 { font-size: 19px !important; }

@media (max-width: 767px) {
	.bh-post-content h2 { font-size: 22px !important; }
	.bh-post-content h3 { font-size: 20px !important; padding-left: 12px !important; border-left-width: 3px; }
	.bh-post-content h4 { font-size: 17px !important; }
}
/* Mục lục: chỉ đánh số tiêu đề chính, tiêu đề phụ dùng gạch đầu dòng */
.bh-toc ol { list-style: none; counter-reset: bhtoc; padding-left: 0; }
.bh-toc li.bh-toc__l1 { counter-increment: bhtoc; padding-left: 26px; position: relative; font-weight: 500; }
.bh-toc li.bh-toc__l1:before { content: counter(bhtoc) "."; position: absolute; left: 0; color: var(--bh-red); font-weight: 700; }
.bh-toc li.bh-toc__l2 { list-style: none; margin-left: 26px; padding-left: 14px; position: relative; }
.bh-toc li.bh-toc__l2:before { content: ""; position: absolute; left: 0; top: .75em; width: 6px; height: 1px; background: #9aa4b2; }

/* ==========================================================================
   24. Quảng cáo dính ở cuối sidebar (inc/sticky-ad.php)
   ========================================================================== */
/* Cột sidebar cao bằng cột nội dung để quảng cáo có chỗ "trượt" theo */
.et_pb_row.bh-layout { align-items: stretch !important; }
.bh-layout > .bh-main { align-self: flex-start; }
.bh-layout > .bh-side { align-self: stretch; }
.bh-side .bh-sidebar { flex: 1 1 auto; height: 100%; }
.bh-side--sticky .bh-sidebar { position: static !important; }   /* thay cho kiểu dính cả sidebar trước đây */

.bh-sticky-ad {
	position: sticky; top: 86px; z-index: 5;
	background: #fff; border: 1px solid var(--bh-border); padding: 14px; text-align: center;
}
.admin-bar .bh-sticky-ad { top: 118px; }
.bh-ad-widget + .bh-ad-widget { margin-top: 14px; }
.bh-ad-label { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #9aa4b2; margin-bottom: 8px; }
.bh-sticky-ad ins, .bh-sticky-ad iframe, .bh-sticky-ad img { max-width: 100%; margin: 0 auto; }
.bh-ad-placeholder {
	height: 600px; max-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
	border: 3px dashed #f2d200; color: #c9ad00; font-size: 48px; font-weight: 700; line-height: 1.1;
}
.bh-ad-placeholder small { font-size: 14px; color: #9aa4b2; font-weight: 400; }

@media (max-width: 980px) {
	.bh-sticky-ad { position: static; margin-top: 20px; }
	.bh-side .bh-sidebar { height: auto; }
}