/**
 * Site-wide header/footer reskin (GeneratePress default markup) so the chrome
 * around every page matches the flat/modern palette used by the story layout,
 * not just the story templates themselves. Uses the same tokens as story.css
 * (kept as literal values here since this stylesheet loads outside .bstory).
 */

/* Header ĂN THEO NỀN TRANG, không có nền riêng: trước đây là một dải gradient teal + viền
   dưới + đổ bóng, tức là một THANH đặt lên trên trang. Trang chủ giờ là một mảng tối liền
   mạch chạy từ đỉnh xuống hết hero, nên cái thanh đó cắt ngang ngay chỗ dễ thấy nhất.
   Giữ lại đúng một gạch chân mảnh (và chỉ ở trang KHÔNG phải trang chủ) để phần đầu trang
   vẫn tách được khỏi nội dung. */
.site-header {
	/* `!important`: GP in `.site-header{background-color:var(--base-3)}` thẳng vào <style>
	   trong wp_head — cùng độ đặc hiệu nhưng không đảm bảo thứ tự so với file này. Đúng lý
	   do đã phải làm vậy với `.main-navigation` ở dưới. Không có nó thì header vẫn TRẮNG. */
	background: transparent !important;
	border-bottom: 1px solid rgba(47, 111, 106, 0.16);
	box-shadow: none;
	position: relative;
	z-index: 20;
}
/* Trang chủ: bỏ nốt gạch chân. Hero là cảnh liền mạch, một đường kẻ ngang ở đây đọc ra như
   ảnh bị cắt — đúng lý do đã phải cho chân cảnh bình minh tự tan vào nền. */
/* Nhắc lại selector kèm `html.bstory-dark` là CỐ Ý, không phải thừa: rule nền tối của
   .site-header nằm ở cuối file và cùng độ đặc hiệu (0,2,1) nên sẽ thắng theo thứ tự. */
body.bstory-home-page .site-header,
html.bstory-dark body.bstory-home-page .site-header {
	border-bottom-color: transparent;
}
.site-header .inside-header {
	padding-top: 9px;
	padding-bottom: 9px;
}

/* Storybook mark (open book) drawn before the site title so the logo reads as a brand
   mark, not bare text — data-URI SVG keeps it self-contained, same rationale as the
   plugin's own icon set (no emoji/system-font glyphs). */
.site-header .main-title a {
	display: inline-flex;
	align-items: center;
	gap: 9px;
}
.site-header .main-title a::before {
	content: '';
	width: 20px;
	height: 20px;
	flex: none;
	background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232f6f6a'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%205.5C10.4%204.3%208%203.7%205.5%203.9c-1%20.08-1.5%20.55-1.5%201.4v12c0%20.85.6%201.28%201.5%201.2%202.5-.2%204.9.4%206.5%201.6M12%205.5c1.6-1.2%204-1.8%206.5-1.6%201%20.08%201.5%20.55%201.5%201.4v12c0%20.85-.6%201.28-1.5%201.2-2.5-.2-4.9.4-6.5%201.6M12%205.5v14'/%3E%3C/svg%3E") no-repeat center / contain;
}
html.bstory-dark .site-header .main-title a::before {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%236fb3ac'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%205.5C10.4%204.3%208%203.7%205.5%203.9c-1%20.08-1.5%20.55-1.5%201.4v12c0%20.85.6%201.28%201.5%201.2%202.5-.2%204.9.4%206.5%201.6M12%205.5c1.6-1.2%204-1.8%206.5-1.6%201%20.08%201.5%20.55%201.5%201.4v12c0%20.85-.6%201.28-1.5%201.2-2.5-.2-4.9.4-6.5%201.6M12%205.5v14'/%3E%3C/svg%3E");
}

.site-header .main-title,
.site-header .main-title a {
	font-family: 'Source Serif 4', Georgia, serif !important;
	font-weight: 600;
	font-size: 19px;
	color: #262320;
	letter-spacing: -0.01em;
}
.site-header .main-title a:hover {
	color: #2f6f6a;
}

.site-header .site-description {
	font-family: 'Source Serif 4', Georgia, serif;
	color: #857f74;
}

.main-navigation,
.main-navigation .main-nav ul li a {
	font-family: 'Source Serif 4', Georgia, serif;
}
/* GP cho thanh menu nền trắng đặc riêng (`.main-navigation{background-color:var(--base-3)}`,
   in thẳng vào <style> trong wp_head). Trên header nền cream nó đã là một khối trắng hơi
   lạc; sang nền tối thì thành một tấm sáng chói giữa header tối. Để trong suốt cho menu ăn
   theo nền header ở CẢ HAI chế độ.
   `!important` là bắt buộc: rule của GP nằm inline trong <head>, cùng độ đặc hiệu nhưng
   không đảm bảo thứ tự so với file này (đúng lý do đã ghi ở đầu phần header).
   Chỉ ul CẤP MỘT mới trong suốt (`> ul`) — menu con nổi lên trên nội dung nên vẫn phải có
   nền đặc, nếu không chữ chồng chữ. */
.main-navigation,
.main-navigation .main-nav > ul {
	background: transparent !important;
}
.main-navigation ul ul {
	background: #fff !important;
	box-shadow: 0 12px 28px -18px rgba(38, 35, 32, 0.6);
}
html.bstory-dark .main-navigation ul ul {
	background: #24211c !important;
	box-shadow: 0 12px 28px -18px rgba(0, 0, 0, 0.8);
}
/* CHỮ THƯỜNG, không in hoa. Bản cũ là 13.5px in HOA + giãn chữ 0.05em — một quy ước giao
   diện chung chung, đứng cạnh cột chữ serif của hero thì lạc giọng hẳn. Cả site không còn
   chỗ nào in hoa; menu là chỗ cuối cùng. Bù lại phải nâng cỡ (13.5 -> 15px): chữ thường ở
   13.5px sẽ mảnh hơn hẳn chữ hoa cùng cỡ và tụt xuống thành chữ phụ. */
.main-navigation .main-nav ul li a {
	position: relative;
	color: #423e37;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4 !important;
	height: auto !important;
	padding-top: 8px !important;
	padding-bottom: 8px !important;
	transition: color 0.15s ease;
}
.main-navigation .main-nav ul li a::after {
	content: '';
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 6px;
	height: 2px;
	background: #2f6f6a;
	border-radius: 2px;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.2s ease;
}
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li a:focus,
.main-navigation .main-nav ul li.current-menu-item > a {
	color: #2f6f6a !important;
}
.main-navigation .main-nav ul li a:hover::after,
.main-navigation .main-nav ul li.current-menu-item > a::after {
	transform: scaleX(1);
}

/* Chân trang dùng ĐÚNG một luật với đầu trang: không nền riêng, chỉ một gạch mảnh cùng
   màu, và trang chủ thì bỏ luôn gạch đó. Trước đây gạch trên là #e4ddd2 / #3a352d — một
   đường xám ấm đặc, đậm hơn hẳn gạch của header, nên hai đầu trang không đọc ra như một
   cặp. */
.site-info {
	/* `!important` — GP in `.site-info{background-color:var(--base-3)}` inline vào wp_head,
	   ĐÚNG như với .site-header và .main-navigation. Lần thứ ba dính cùng một kiểu: cứ đặt
	   nền cho khối chrome nào của GP thì mặc định phải kèm !important, đừng thử không có. */
	background: transparent !important;
	border-top: 1px solid rgba(47, 111, 106, 0.16);
	padding: 44px 0;
}
body.bstory-home-page .site-info,
html.bstory-dark body.bstory-home-page .site-info {
	border-top-color: transparent;
}
.bstory-footer { text-align: center; }
.bstory-footer-title {
	font-family: 'Source Serif 4', Georgia, serif;
	font-size: 20px;
	font-weight: 600;
	color: #262320;
	margin-bottom: 6px;
}
.bstory-footer-tagline {
	font-family: 'Source Serif 4', Georgia, serif;
	font-size: 14px;
	font-style: italic;
	color: #5c574f;
	margin-bottom: 22px;
}
/* Dấu hiệu cuốn sách mở — CÙNG hình với dấu hiệu cạnh tên site trên header, chỉ khác là ở
   đây nó nằm TRÊN tên site. Hai đầu trang vì thế mở và đóng bằng cùng một ký hiệu.
   Chỗ này trước là một vạch teal 40×2px: gạch trang trí chung chung, không thuộc bộ ký
   hiệu nào của site (và cả site đã thống nhất dùng SVG, không dùng hình khối trơn). */
.bstory-footer-mark {
	width: 26px;
	height: 26px;
	margin: 0 auto 12px;
	background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232f6f6a'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%205.5C10.4%204.3%208%203.7%205.5%203.9c-1%20.08-1.5%20.55-1.5%201.4v12c0%20.85.6%201.28%201.5%201.2%202.5-.2%204.9.4%206.5%201.6M12%205.5c1.6-1.2%204-1.8%206.5-1.6%201%20.08%201.5%20.55%201.5%201.4v12c0%20.85-.6%201.28-1.5%201.2-2.5-.2-4.9.4-6.5%201.6M12%205.5v14'/%3E%3C/svg%3E") no-repeat center / contain;
}
.bstory-footer-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 18px;
	margin-bottom: 20px;
}
/* 14.5px, gần bằng menu đầu trang (15px) — chân trang cùng vai trò điều hướng với đầu
   trang thì không có lý do gì chữ nhỏ hơn hẳn. Bản cũ 13px đọc ra như dòng chú thích. */
.bstory-footer-links a {
	font-family: 'Source Serif 4', Georgia, serif;
	font-size: 14.5px;
	font-weight: 500;
	color: #423e37;
	text-decoration: none;
}
.bstory-footer-links a:hover {
	color: #2f6f6a;
	text-decoration: underline;
}
.bstory-footer-copyright {
	font-family: 'Source Serif 4', Georgia, serif;
	font-size: 12.5px;
	color: #a39c8f;
}

/**
 * NỀN TỐI — mặc định của cả site (Phiên 12). Bật/tắt bằng MỘT class trên <html>
 * (`html.bstory-dark`) do server in sẵn; ai tự chọn nền sáng thì script bootstrap trong
 * <head> gỡ class đó ra trước khi trang vẽ. Hex ở đây phải khớp tay với bộ custom
 * properties chế độ tối trong story.css (2 file tách biệt, không dùng chung biến).
 */
html.bstory-dark body {
	background: #1c1a17;
}
html.bstory-dark .site-header {
	border-bottom-color: rgba(111, 179, 172, 0.16);
}
html.bstory-dark .site-header .main-title,
html.bstory-dark .site-header .main-title a {
	color: #e8e3d9;
}
html.bstory-dark .site-header .main-title a:hover {
	color: #6fb3ac;
}
html.bstory-dark .site-header .site-description {
	color: #a39a8c;
}
html.bstory-dark .main-navigation .main-nav ul li a {
	color: #d8d0c2;
}
html.bstory-dark .main-navigation .main-nav ul li a::after {
	background: #6fb3ac;
}
html.bstory-dark .main-navigation .main-nav ul li a:hover,
html.bstory-dark .main-navigation .main-nav ul li a:focus,
html.bstory-dark .main-navigation .main-nav ul li.current-menu-item > a {
	color: #6fb3ac !important;
}
html.bstory-dark .site-info {
	border-top-color: rgba(111, 179, 172, 0.16);
}
html.bstory-dark .bstory-footer-title {
	color: #f2ede2;
}
html.bstory-dark .bstory-footer-tagline {
	color: #b9b0a1;
}
html.bstory-dark .bstory-footer-mark {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%236fb3ac'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%205.5C10.4%204.3%208%203.7%205.5%203.9c-1%20.08-1.5%20.55-1.5%201.4v12c0%20.85.6%201.28%201.5%201.2%202.5-.2%204.9.4%206.5%201.6M12%205.5c1.6-1.2%204-1.8%206.5-1.6%201%20.08%201.5%20.55%201.5%201.4v12c0%20.85-.6%201.28-1.5%201.2-2.5-.2-4.9.4-6.5%201.6M12%205.5v14'/%3E%3C/svg%3E");
}
html.bstory-dark .bstory-footer-links a {
	color: #d8d0c2;
}
html.bstory-dark .bstory-footer-links a:hover {
	color: #6fb3ac;
}
html.bstory-dark .bstory-footer-copyright {
	color: #8a8175;
}

/**
 * Trang thường của GeneratePress (Giới thiệu, Liên hệ, Chính sách…) — những trang này KHÔNG
 * nạp story.css, nên nếu chỉ đổi header/footer thì phần ruột vẫn là khung trắng của theme
 * giữa một site nền tối, nhìn như trang lỗi. Hex khớp với bộ biến chế độ tối trong story.css.
 */
html.bstory-dark body {
	background: #1c1a17;
	color: #d8d0c2;
}
html.bstory-dark .inside-article,
html.bstory-dark .comments-area,
html.bstory-dark .sidebar .widget,
html.bstory-dark .paging-navigation {
	background: #24211c;
	box-shadow: none;
}
html.bstory-dark .entry-title,
html.bstory-dark .entry-content h1,
html.bstory-dark .entry-content h2,
html.bstory-dark .entry-content h3,
html.bstory-dark .entry-content h4 {
	color: #f2ede2;
}
html.bstory-dark .entry-content,
html.bstory-dark .entry-content p,
html.bstory-dark .entry-content li {
	color: #d8d0c2;
}
html.bstory-dark .entry-content a { color: #6fb3ac; }
html.bstory-dark .entry-content blockquote {
	border-left-color: #3a4a46;
	color: #b9b0a1;
}
html.bstory-dark .entry-content code,
html.bstory-dark .entry-content pre {
	background: #2c2822;
	color: #e8e3d9;
}
html.bstory-dark .entry-meta,
html.bstory-dark .entry-meta a { color: #a39a8c; }
html.bstory-dark input[type="text"],
html.bstory-dark input[type="email"],
html.bstory-dark input[type="url"],
html.bstory-dark input[type="search"],
html.bstory-dark textarea,
html.bstory-dark select {
	background: #2c2822;
	border-color: #3a352d;
	color: #e8e3d9;
}
html.bstory-dark hr { border-color: #3a352d; }

/**
 * TRANG CỐ ĐỊNH (Giới thiệu / Chính sách quyền riêng tư / Điều khoản / Liên hệ).
 * body.bstory-page do bstory_body_class() gắn.
 *
 * Bốn trang này KHÔNG nạp story.css, nên trước đây chúng rơi về nguyên trạng của
 * GeneratePress: font hệ thống (một họ sans bo tròn, chẳng liên quan gì tới Source Serif 4
 * của cả site), khung card xám giữa nền tối, chữ chạy hết bề ngang ~780px, và một sidebar
 * ba widget mặc định của WP. Phần sidebar xử lý ở PHP (bstory_no_sidebar); phần còn lại ở
 * đây. KHÔNG tái dùng `.bstory-flat-layout` — luật của class đó nằm trong story.css.
 *
 * Hex viết tay theo đúng bộ token chế độ sáng/tối của story.css (2 file tách biệt, không
 * dùng chung biến — cùng ràng buộc đã ghi ở đầu file này).
 */
/* Nền trang: trang truyện/trang chủ lấy cream qua `body.bstory-flat-layout` khai báo trong
   story.css, mà story.css KHÔNG nạp ở đây — không đặt lại thì 4 trang này nằm trên nền
   #f7f8f9 xám xanh mặc định của GP, lạc hẳn giữa một site màu cream. Nền tối đã có
   `html.bstory-dark body` ở trên lo. */
body.bstory-page {
	background: #FAF8F4 !important;
}
html.bstory-dark body.bstory-page {
	background: #1c1a17 !important;
}
body.bstory-page .inside-article,
body.bstory-page .content-area,
body.bstory-page .site-content,
body.bstory-page .entry-content {
	background: transparent !important;
	box-shadow: none !important;
	border: none !important;
}
body.bstory-page .inside-article {
	padding: 0 !important;
}
body.bstory-page #primary,
body.bstory-page .content-area {
	width: 100% !important;
}

/* Khổ chữ 600px (~68 ký tự ở cỡ 17px) chứ không phải khổ 90ch của trang truyện: trang
   truyện đặt văn xuôi cạnh bảng từ vựng và ảnh chạy hết khổ nên phải nới cho khỏi hụt lề;
   ở đây cột đứng một mình nên lấy đúng độ dài dòng dễ đọc, canh giữa.
   ĐƠN VỊ PX, KHÔNG PHẢI `ch`: `ch` quy đổi theo cỡ chữ của CHÍNH khối đang đặt, mà tiêu đề
   trang 40px còn đoạn văn 17px — đặt `68ch` cho cả hai thì tiêu đề rộng 623px còn chữ
   595px, tức H1 thò ra ngoài mép trái cột chữ 14px. Nhìn thoáng qua không thấy, nhưng mắt
   đọc ra ngay là "lề không thẳng". */
body.bstory-page .entry-header,
body.bstory-page .entry-content {
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}
body.bstory-page .site-main {
	padding: 8px 20px 64px;
}

body.bstory-page .entry-content,
body.bstory-page .entry-title,
body.bstory-page .entry-content h1,
body.bstory-page .entry-content h2,
body.bstory-page .entry-content h3,
body.bstory-page .entry-content h4,
body.bstory-page .entry-content li,
body.bstory-page .entry-content p {
	font-family: 'Source Serif 4', Georgia, serif;
}

body.bstory-page .entry-title {
	position: relative;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: -0.015em;
	/* Trắng ở CẢ HAI chế độ: chữ nằm trên tấm teal đậm chứ không trên nền trang, nên nó
	   không đổi theo sáng/tối. Đừng gộp vào nhóm màu chữ ở dưới. */
	color: #fff;
	margin: 0;
}
/* Tiêu đề mục nhỏ hơn tiêu đề trang một bậc RÕ RỆT (40 → 26px). Bản của theme để h2 gần
   bằng h1 nên trang đọc ra như một chuỗi tiêu đề ngang hàng, không ra thứ bậc. */
body.bstory-page .entry-content h2 {
	font-size: 26px;
	font-weight: 700;
	line-height: 1.28;
	color: #262320;
	margin: 38px 0 12px;
}
body.bstory-page .entry-content h3 {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.35;
	color: #262320;
	margin: 30px 0 10px;
}
body.bstory-page .entry-content p,
body.bstory-page .entry-content li {
	font-size: 17px;
	line-height: 1.75;
	color: #423e37;
}
body.bstory-page .entry-content p { margin: 0 0 18px; }
body.bstory-page .entry-content ul,
body.bstory-page .entry-content ol { margin: 0 0 18px; padding-left: 22px; }
body.bstory-page .entry-content li { margin-bottom: 8px; }
body.bstory-page .entry-content li::marker { color: #2f6f6a; }
body.bstory-page .entry-content a {
	color: #2f6f6a;
	text-decoration-color: rgba(47, 111, 106, 0.4);
	text-underline-offset: 3px;
}
body.bstory-page .entry-content a:hover { color: #245854; }
body.bstory-page .entry-content strong { color: #262320; }
body.bstory-page .entry-content blockquote {
	margin: 24px 0;
	padding: 4px 0 4px 20px;
	border-left: 3px solid rgba(47, 111, 106, 0.35);
	font-style: italic;
	color: #5c574f;
}

html.bstory-dark body.bstory-page .entry-content h2,
html.bstory-dark body.bstory-page .entry-content h3,
html.bstory-dark body.bstory-page .entry-content strong { color: #f2ede2; }
html.bstory-dark body.bstory-page .entry-content p,
html.bstory-dark body.bstory-page .entry-content li { color: #d8d0c2; }
html.bstory-dark body.bstory-page .entry-content li::marker { color: #6fb3ac; }
html.bstory-dark body.bstory-page .entry-content a {
	color: #6fb3ac;
	text-decoration-color: rgba(111, 179, 172, 0.4);
}
html.bstory-dark body.bstory-page .entry-content a:hover { color: #8cc5bf; }
html.bstory-dark body.bstory-page .entry-content blockquote {
	border-left-color: rgba(111, 179, 172, 0.35);
	color: #b9b0a1;
}

@media (max-width: 600px) {
	body.bstory-page .site-main { padding: 4px 20px 48px; }
	body.bstory-page .entry-title { font-size: 30px; margin-bottom: 20px; }
	body.bstory-page .entry-content h2 { font-size: 22px; margin-top: 30px; }
	body.bstory-page .entry-content h3 { font-size: 18.5px; }
	body.bstory-page .entry-content p,
	body.bstory-page .entry-content li { font-size: 16.5px; }
}

/* ---------------------------------------------------------------------------
   Lớp trang trí cho trang cố định (1.9.1). Trước đó 4 trang này mới chỉ ĐÚNG
   font/màu/khổ chữ — tức là hết sai, chứ chưa mang ngôn ngữ hình của trang chủ.
   Ba lớp, cố ý dừng ở mức vừa phải vì đây là trang CHỮ (và hai trong bốn trang là
   văn bản pháp lý, trang trí nhiều là phản tác dụng):
   1. Tiêu đề trang canh giữa + dấu DÃY ĐỒI ngay dưới — đúng dãy đồi của cảnh bình
      minh ở hero, thu nhỏ thành một dấu 132px. Không dùng lại dấu cuốn sách vì nó
      đã là dấu của header và chân trang; ba lần trên một trang là hết nghĩa.
   2. Đoạn đầu là LEDE: to hơn, nhạt hơn — mắt có chỗ bám trước khi vào chữ nhỏ.
   3. Mỗi h2 có một gạch mảnh chạy hết cột phía trên: chia trang thành các mục rõ
      ràng mà không cần thêm màu hay khối nào. Đúng thủ pháp đã dùng cho gạch
      đầu/chân trang — cùng một màu, cùng một độ mờ.
   --------------------------------------------------------------------------- */
/* ĐẦU TRANG DỰNG THEO CÔNG THỨC CỦA TẤM CTA CUỐI TRANG CHỦ: tấm bo góc, nền teal chuyển
   sắc, dải đồi chạy hết bề ngang ở chân tấm, chữ canh giữa. Markup phần thêm (câu tiếng
   Anh + dải đồi) do bstory_page_header_extras() chèn qua hook `generate_after_page_title`.
   Trước đây chỗ này là chữ đen trên nền trơn kèm một dấu đồi 132px — đúng font đúng màu
   nhưng không mang ngôn ngữ hình nào của site; dấu nhỏ đó nay bỏ hẳn vì cả dải đồi thật
   đã nằm ngay trong tấm.
   RỘNG HƠN CỘT CHỮ (860 so với 600px): tấm này là ảnh bìa của trang, còn 600px là độ dài
   dòng dễ đọc — hai khái niệm khác nhau, ép bằng nhau thì hoặc tấm bìa bé tí hoặc dòng chữ
   quá dài. Cùng lý lẽ với --bstory-measure vs --bstory-prose của trang truyện. */
body.bstory-page .entry-header {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	max-width: 860px;
	margin: 10px auto 44px;
	/* Đệm dưới dày hơn đệm trên: dải đồi cao 78px chiếm phần chân tấm, chữ phải nằm trọn
	   phía trên nó. Đổi chiều cao đồi thì phải đổi cả con số này. */
	padding: 52px 32px 96px;
	border-radius: 24px;
	text-align: center;
	background:
		radial-gradient(120% 90% at 18% 8%, rgba(90, 168, 160, 0.55), transparent 60%),
		linear-gradient(150deg, #2f6f6a 0%, #245853 45%, #16302e 100%);
}
html.bstory-dark body.bstory-page .entry-header {
	background:
		radial-gradient(120% 90% at 18% 8%, rgba(70, 140, 132, 0.45), transparent 60%),
		linear-gradient(150deg, #235450 0%, #1b3b39 45%, #122624 100%);
}
body.bstory-page .bstory-page__hills {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px; /* -1px: tránh khe sáng 1px do làm tròn pixel ở một số tỉ lệ zoom */
	width: 100%;
	height: 78px;
	display: block;
	z-index: -1;
}
body.bstory-page .bstory-page__hill-back  { fill: rgba(8, 26, 25, 0.55); }
body.bstory-page .bstory-page__hill-front { fill: rgba(4, 16, 15, 0.85); }

/* Câu tiếng Anh dưới tiêu đề: cùng cách trình bày với hero và tấm CTA (nghiêng, nhạt hơn,
   ngay dưới câu tiếng Việt) — trang song ngữ thì đầu trang nào cũng nên tự nó song ngữ. */
body.bstory-page .bstory-page__en {
	margin: 8px 0 0;
	font-family: 'Source Serif 4', Georgia, serif;
	font-size: 16px;
	font-style: italic;
	color: rgba(255, 255, 255, 0.72);
}

/* Đoạn mở đầu. `:first-of-type` chứ không phải `:first-child`: trình soạn thảo WP có thể
   chèn khối khác lên trước (ảnh, danh sách), khi đó đoạn văn đầu tiên vẫn phải là lede. */
body.bstory-page .entry-content > p:first-of-type {
	font-size: 19.5px;
	line-height: 1.68;
	color: #5c574f;
	margin-bottom: 26px;
}
html.bstory-dark body.bstory-page .entry-content > p:first-of-type {
	color: #b9b0a1;
}

body.bstory-page .entry-content h2 {
	border-top: 1px solid rgba(47, 111, 106, 0.16);
	padding-top: 30px;
}
html.bstory-dark body.bstory-page .entry-content h2 {
	border-top-color: rgba(111, 179, 172, 0.16);
}
/* h2 ĐẦU TIÊN không cần gạch: ngay trên nó đã là dấu dãy đồi của tiêu đề trang, hai đường
   ngang cách nhau vài chục px đọc ra như lỗi lặp. */
body.bstory-page .entry-content > h2:first-of-type {
	border-top: none;
	padding-top: 0;
	margin-top: 34px;
}

@media (max-width: 600px) {
	body.bstory-page .entry-header { padding: 38px 22px 74px; border-radius: 20px; margin-bottom: 32px; }
	body.bstory-page .bstory-page__hills { height: 58px; }
	body.bstory-page .bstory-page__en { font-size: 15px; }
	body.bstory-page .entry-content > p:first-of-type { font-size: 18px; }
	body.bstory-page .entry-content h2 { padding-top: 24px; }
}

/* ---------------------------------------------------------------------------
   CẢNH RIÊNG CHO TỪNG TRANG (1.9.5) — cùng một tấm, khác hình bóng đứng trên đồi.
   Markup do bstory_page_header_scene() in ra; body có thêm class `bstory-page--<slug>`.
   Xem lý do chọn hình cho từng trang ở chú thích của hàm đó.

   Màu lấy ĐÚNG `hill-front` chứ không sáng hơn: hình bóng đứng TRÊN đồi nên phải dính vào
   đồi thành một khối tiền cảnh — sáng hơn thì nó nổi lên như dán đè, không như đứng trong
   cảnh. Đây là chỗ ngược với luật của cảnh bình minh ở hero (ở đó mọi thứ phải SÁNG hơn
   nền vì nền là màu trang gần đen; ở đây nền là trời teal sáng, nên tiền cảnh phải TỐI).
   --------------------------------------------------------------------------- */
body.bstory-page .bstory-page__scene {
	position: absolute;
	bottom: 20px;
	right: 7%;
	z-index: -1;
	height: auto;
	fill: rgba(4, 16, 15, 0.85);
}
/* Bề rộng đặt riêng từng cảnh vì tỉ lệ 3 ảnh khác hẳn nhau (1.46 / 1.60 / 0.64) — để chung
   một `width` thì khóm tre thành cái que còn xóm nhà thành cái tem. Chọn số sao cho CHIỀU
   CAO xấp xỉ nhau (~74-96px), vì chiều cao mới là thứ mắt so sánh giữa các trang. */
body.bstory-page--gioi-thieu .bstory-page__scene                { width: 124px; }  /* cao ~85 */
body.bstory-page--lien-he .bstory-page__scene                   { width: 122px; }  /* cao ~76 */
body.bstory-page--chinh-sach-quyen-rieng-tu .bstory-page__scene { width: 60px; }   /* cao ~94 */

/* Đàn cò cho trang Điều khoản: bay trên TRỜI, không đứng dưới đất — trang khô khan nhất thì
   để cảnh trống nhất. Vì ở trên trời nên phải SÁNG hơn nền (ngược với ba cảnh kia). */
body.bstory-page .bstory-page__birds {
	position: absolute;
	right: 9%;
	bottom: 104px;
	width: 88px;
	height: 30px;
	fill: none;
	stroke: rgba(255, 255, 255, 0.5);
	stroke-width: 2.2;
	stroke-linecap: round;
	z-index: -1;
}

@media (max-width: 600px) {
	body.bstory-page .bstory-page__scene { bottom: 14px; right: 5%; }
	body.bstory-page--gioi-thieu .bstory-page__scene                { width: 92px; }
	body.bstory-page--lien-he .bstory-page__scene                   { width: 90px; }
	body.bstory-page--chinh-sach-quyen-rieng-tu .bstory-page__scene { width: 44px; }
	body.bstory-page .bstory-page__birds { width: 64px; height: 22px; bottom: 80px; right: 7%; }
}
