/*
Theme Name: Sahaja
Theme URI: https://lopthien.com
Author: Lớp Học Thiền – Sahaja Yoga Việt Nam
Author URI: https://lopthien.com
Description: Theme WordPress dành riêng cho website hướng dẫn thiền Sahaja Yoga. Trang chủ dựng sẵn 5 khối: Giới thiệu Sahaja Yoga, Lớp học & khóa học miễn phí theo thành phố, Khóa học thiền qua audio, Cảm nhận của người thực hành và Báo chí viết về Thiền Sahaja Yoga. Thiết kế nhẹ, bo góc mềm, màu nhấn cam #FF855A, tối ưu cho tiếng Việt và điện thoại.
Version: 2.3.0
Requires at least: 5.9
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sahaja
Tags: blog, education, one-column, two-columns, right-sidebar, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, block-styles, wide-blocks
*/

/* =============================================================================
   0. TOKENS
   ========================================================================== */
:root {
	--sj-accent:      #ff855a;
	--sj-accent-dark: #e96a3d;
	--sj-accent-soft: rgba(255, 133, 90, .10);
	--sj-ink:         #1a1a1a;
	--sj-soft:        #4a4a4a;
	--sj-muted:       #7b7b7b;
	--sj-line:        #e8e8e8;
	--sj-mist:        #fdf7f4;
	--sj-bg:          #f4f2ef;
	--sj-white:       #fff;
	--sj-radius:      14px;
	--sj-radius-sm:   10px;
	--sj-shadow:      0 1px 2px rgba(26, 26, 26, .04);
	--sj-shadow-lg:   0 10px 24px rgba(26, 26, 26, .10);
	--sj-serif:       Lora, Georgia, "Times New Roman", serif;
	--sj-sans:        "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--sj-wrap:        1160px;
}

/* =============================================================================
   1. BASE
   ========================================================================== */
*, *:before, *:after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--sj-sans);
	font-size: 16px;
	line-height: 1.75;
	color: var(--sj-ink);
	background: var(--sj-bg);
	-webkit-font-smoothing: antialiased;
}

img, svg, iframe, video { max-width: 100%; }
img { height: auto; display: block; }

a { color: var(--sj-accent); text-decoration: none; }
a:hover { color: var(--sj-accent-dark); }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--sj-serif);
	font-weight: 600;
	line-height: 1.3;
	margin: 0 0 .6em;
	color: var(--sj-accent);
}

h1 { font-size: 32px; }
h2 { font-size: 26px; }
h3 { font-size: 20px; }
h4 { font-size: 17px; }

p, ul, ol, dl, table, blockquote, figure, pre { margin: 0 0 1.1em; }
ul, ol { padding-left: 1.3em; }

blockquote {
	margin: 1.4em 0;
	padding: 16px 20px;
	background: var(--sj-accent-soft);
	border-left: 3px solid var(--sj-accent);
	border-radius: var(--sj-radius-sm);
	font-family: var(--sj-serif);
	font-style: italic;
}

code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }
pre { padding: 16px; background: #f6f6f6; border-radius: var(--sj-radius-sm); overflow: auto; }

table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 12px; border: 1px solid var(--sj-line); text-align: left; }
th { background: var(--sj-mist); }

input, select, textarea, button { font: inherit; color: inherit; }

input[type=text], input[type=email], input[type=url], input[type=search],
input[type=tel], input[type=password], textarea, select {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--sj-line);
	border-radius: var(--sj-radius-sm);
	background: #fff;
}

input:focus, textarea:focus, select:focus {
	outline: 2px solid var(--sj-accent);
	outline-offset: 1px;
	border-color: var(--sj-accent);
}

a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
	outline: 2px solid var(--sj-accent);
	outline-offset: 2px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 8px;
	z-index: 999;
	background: var(--sj-accent);
	color: #fff;
	padding: 10px 16px;
	border-radius: var(--sj-radius-sm);
}
.skip-link:focus { left: 8px; color: #fff; }

.sj-wrap {
	width: 100%;
	max-width: var(--sj-wrap);
	margin: 0 auto;
	padding: 0 20px;
}

/* Nút dùng chung */
.sj-btn {
	display: inline-block;
	padding: 13px 28px;
	border-radius: 999px;
	background: var(--sj-accent);
	color: #fff !important;
	font-weight: 600;
	font-size: 15px;
	border: 0;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(255, 133, 90, .30);
	transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}

.sj-btn:hover {
	background: var(--sj-accent-dark);
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(255, 133, 90, .38);
}

.sj-btn-ghost {
	background: #fff;
	color: var(--sj-accent) !important;
	border: 1px solid var(--sj-accent);
	box-shadow: none;
}

.sj-btn-ghost:hover { background: var(--sj-accent-soft); box-shadow: none; }

.sj-more {
	display: inline-block;
	font-size: 14px;
	font-weight: 600;
	color: var(--sj-accent);
	border-bottom: 1px solid rgba(255, 133, 90, .4);
}

.sj-more:hover { color: var(--sj-accent-dark); border-bottom-color: var(--sj-accent-dark); }

/* =============================================================================
   2. HEADER
   ========================================================================== */
.sj-header {
	background: #fff;
	border-bottom: 1px solid var(--sj-line);
	position: sticky;
	top: 0;
	z-index: 100;
}

body.admin-bar .sj-header { top: 32px; }

.sj-header-inner {
	display: flex;
	align-items: center;
	gap: 20px;
	padding-top: 14px;
	padding-bottom: 14px;
}

.sj-brand { display: flex; align-items: center; gap: 12px; margin-right: auto; min-width: 0; }
.sj-brand img { max-height: 56px; width: auto; }

.sj-site-title {
	font-family: var(--sj-serif);
	font-size: 19px;
	line-height: 1.25;
	margin: 0;
	color: var(--sj-accent);
}
.sj-site-title a { color: inherit; }
.sj-site-desc { margin: 2px 0 0; font-size: 12.5px; color: var(--sj-muted); font-family: var(--sj-sans); }

.sj-header-cta { flex: 0 0 auto; }
.sj-header-cta .sj-btn { padding: 10px 20px; font-size: 14px; }

.sj-nav-toggle {
	display: none;
	width: 44px; height: 44px;
	border: 1px solid var(--sj-line);
	border-radius: var(--sj-radius-sm);
	background: #fff;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 4px;
	cursor: pointer;
}
.sj-nav-toggle span { display: block; width: 20px; height: 2px; background: var(--sj-ink); border-radius: 2px; }

/* Menu chính */
.sj-nav { border-top: 1px solid var(--sj-line); background: #fff; }
.sj-nav .sj-wrap { display: flex; }

.sj-menu, .sj-menu ul { list-style: none; margin: 0; padding: 0; }
.sj-menu { display: flex; flex-wrap: wrap; }
.sj-menu li { position: relative; }

.sj-menu a {
	display: block;
	padding: 14px 16px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--sj-ink);
}

.sj-menu > li > a:after {
	content: "";
	display: block;
	height: 2px;
	margin-top: 6px;
	background: var(--sj-accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .25s ease;
}

.sj-menu > li:hover > a:after,
.sj-menu > li.current-menu-item > a:after,
.sj-menu > li.current-menu-parent > a:after { transform: scaleX(1); }

.sj-menu li:hover > a { color: var(--sj-accent); }

.sj-menu ul {
	position: absolute;
	left: 0; top: 100%;
	min-width: 230px;
	background: #fff;
	border: 1px solid var(--sj-line);
	border-radius: var(--sj-radius-sm);
	box-shadow: var(--sj-shadow-lg);
	padding: 6px 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .2s ease, transform .2s ease;
	z-index: 20;
}

.sj-menu li:hover > ul,
.sj-menu li:focus-within > ul { opacity: 1; visibility: visible; transform: translateY(0); }

.sj-menu ul a { padding: 9px 16px; font-weight: 500; }
.sj-menu ul ul { left: 100%; top: -7px; }

/* Menu điện thoại */
.sj-mobile-nav {
	display: none;
	border-top: 1px solid var(--sj-line);
	background: #fff;
	padding: 8px 0 16px;
}
.sj-mobile-nav.is-open { display: block; }
.sj-mobile-nav .sj-menu { display: block; }
.sj-mobile-nav .sj-menu a { padding: 11px 0; border-bottom: 1px solid var(--sj-line); }
.sj-mobile-nav .sj-menu > li > a:after { display: none; }
.sj-mobile-nav .sj-menu ul {
	position: static; opacity: 1; visibility: visible; transform: none;
	box-shadow: none; border: 0; padding: 0 0 0 16px;
}

/* =============================================================================
   3. LAYOUT
   ========================================================================== */
.sj-main { padding: 30px 0 40px; }

.sj-layout { display: flex; gap: 30px; align-items: flex-start; }
.sj-content { flex: 1 1 auto; min-width: 0; }
.sj-sidebar { flex: 0 0 320px; }
.sj-layout-full .sj-content { flex: 1 1 100%; }

.sj-breadcrumb { font-size: 13px; color: var(--sj-muted); margin-bottom: 14px; }
.sj-breadcrumb a { color: var(--sj-soft); }
.sj-breadcrumb a:hover { color: var(--sj-accent); }
.sj-breadcrumb span + span:before { content: "›"; margin: 0 7px; color: #bbb; }

.sj-card {
	background: #fff;
	border: 1px solid var(--sj-line);
	border-radius: var(--sj-radius);
	box-shadow: var(--sj-shadow);
	padding: 30px;
	margin-bottom: 26px;
}

.sj-page-title { margin-bottom: 6px; }
.sj-page-head { margin-bottom: 22px; }
.sj-page-head p { color: var(--sj-soft); margin: 0; }

/* Bài viết trong danh sách */
.sj-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-bottom: 26px; }

.sj-post-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--sj-line);
	border-radius: var(--sj-radius-sm);
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.sj-post-card:hover { transform: translateY(-3px); border-color: #e0d5cf; box-shadow: var(--sj-shadow-lg); }

.sj-post-card .sj-thumb { display: block; overflow: hidden; background: var(--sj-mist); }
.sj-post-card .sj-thumb img { width: 100%; transition: transform .35s ease; }
.sj-post-card:hover .sj-thumb img { transform: scale(1.03); }

.sj-post-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1 1 auto; }
.sj-post-body h2, .sj-post-body h3 { font-size: 17px; margin: 0 0 8px; }
.sj-post-body h2 a, .sj-post-body h3 a { color: var(--sj-ink); }
.sj-post-body h2 a:hover, .sj-post-body h3 a:hover { color: var(--sj-accent); }
.sj-post-body p { font-size: 14.5px; margin: 0 0 12px; }
.sj-post-body .sj-more { margin-top: auto; align-self: flex-start; }

.sj-meta { font-size: 13px; color: var(--sj-muted); margin: 0 0 8px; }
.sj-meta a { color: var(--sj-muted); }
.sj-meta a:hover { color: var(--sj-accent); }

/* Bài đơn */
.sj-entry { font-size: 16.5px; }
.sj-entry img { border-radius: var(--sj-radius-sm); }
.sj-entry h2, .sj-entry h3, .sj-entry h4 { margin-top: 1.4em; }
.sj-entry figcaption { font-size: 13.5px; color: var(--sj-muted); font-style: italic; margin-top: 6px; }
.sj-entry .wp-caption { max-width: 100%; }
.alignleft { float: left; margin: 0 20px 14px 0; }
.alignright { float: right; margin: 0 0 14px 20px; }
.aligncenter { margin: 0 auto 14px; }
.alignwide, .alignfull { max-width: 100%; }

.sj-featured { margin: 0 0 22px; }
.sj-featured img { width: 100%; border-radius: var(--sj-radius-sm); }

.sj-tags { margin-top: 22px; font-size: 14px; }
.sj-tags a {
	display: inline-block;
	padding: 4px 12px;
	margin: 0 6px 6px 0;
	background: var(--sj-mist);
	border-radius: 999px;
	color: var(--sj-soft);
	font-size: 13px;
}
.sj-tags a:hover { background: var(--sj-accent); color: #fff; }

.sj-post-nav { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.sj-post-nav > div { flex: 1 1 240px; }
.sj-post-nav span { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--sj-muted); margin-bottom: 4px; }
.sj-post-nav a { font-weight: 600; color: var(--sj-ink); }
.sj-post-nav a:hover { color: var(--sj-accent); }

/* Phân trang */
.sj-pagination { margin: 6px 0 26px; }
.sj-pagination .page-numbers {
	display: inline-block;
	min-width: 40px;
	padding: 8px 12px;
	margin: 0 4px 6px 0;
	text-align: center;
	background: #fff;
	border: 1px solid var(--sj-line);
	border-radius: var(--sj-radius-sm);
	color: var(--sj-ink);
	font-weight: 600;
	font-size: 14px;
}
.sj-pagination .page-numbers:hover,
.sj-pagination .page-numbers.current { background: var(--sj-accent); border-color: var(--sj-accent); color: #fff; }

/* Bình luận */
.sj-comments { margin-top: 6px; }
.sj-comments ol { list-style: none; padding: 0; }
.sj-comments .children { padding-left: 26px; }
.sj-comments .comment-body {
	padding: 18px 20px;
	border: 1px solid var(--sj-line);
	border-radius: var(--sj-radius-sm);
	margin-bottom: 16px;
	background: #fff;
}
.sj-comments .comment-author img { border-radius: 50%; margin-right: 10px; float: left; }
.sj-comments .comment-meta { font-size: 13px; color: var(--sj-muted); margin-bottom: 8px; }
.sj-comments .reply a { font-size: 13px; font-weight: 600; }

/* Sidebar & widget */
.sj-widget {
	background: #fff;
	border: 1px solid var(--sj-line);
	border-radius: var(--sj-radius);
	padding: 22px 24px;
	margin-bottom: 22px;
	box-shadow: var(--sj-shadow);
}
.sj-widget-title { font-size: 17px; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--sj-line); }
.sj-widget ul { list-style: none; padding: 0; margin: 0; }
.sj-widget li { padding: 7px 0; border-bottom: 1px dashed var(--sj-line); font-size: 15px; }
.sj-widget li:last-child { border-bottom: 0; }
.sj-widget a { color: var(--sj-ink); }
.sj-widget a:hover { color: var(--sj-accent); }

/* Hộp đăng ký ở sidebar */
.sj-widget-cta { background: linear-gradient(135deg, #fff1ea 0%, #ffe3d6 100%); border-color: rgba(255, 133, 90, .25); text-align: center; }
.sj-widget-cta .sj-widget-title { border-bottom: 0; padding-bottom: 0; }

/* =============================================================================
   4. FOOTER
   ========================================================================== */
.sj-footer { background: #fff; border-top: 1px solid var(--sj-line); margin-top: 20px; }
.sj-footer-widgets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; padding: 40px 0 10px; }
.sj-footer-widgets .sj-widget { border: 0; box-shadow: none; padding: 0; background: transparent; }
.sj-footer-widgets .sj-widget-title { font-size: 16px; }

.sj-footer-bottom {
	border-top: 1px solid var(--sj-line);
	padding: 18px 0;
	font-size: 14px;
	color: var(--sj-soft);
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: space-between;
	align-items: center;
}

.sj-to-top {
	position: fixed;
	right: 18px; bottom: 18px;
	width: 44px; height: 44px;
	border-radius: 50%;
	background: var(--sj-accent);
	color: #fff;
	display: none;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	line-height: 1;
	box-shadow: 0 6px 16px rgba(255, 133, 90, .35);
	z-index: 90;
	border: 0;
	cursor: pointer;
}
.sj-to-top.is-visible { display: flex; }

/* =============================================================================
   5. TRANG CHỦ
   ========================================================================== */
.sj-home { color: var(--sj-ink); }

.sj-section {
	background: #fff;
	border: 1px solid var(--sj-line);
	border-radius: var(--sj-radius);
	box-shadow: var(--sj-shadow);
	padding: 30px 30px 34px;
	margin-bottom: 30px;
}
.sj-section > *:last-child { margin-bottom: 0; }

.sj-head { margin: 0 0 22px; }
.sj-head h2 { font-size: 26px; margin: 0; color: var(--sj-accent); }
.sj-head p { margin: 6px 0 0; font-size: 14.5px; color: var(--sj-soft); }
.sj-head:after {
	content: "";
	display: block;
	height: 1px;
	margin-top: 16px;
	background: linear-gradient(to right, var(--sj-line) 0%, rgba(232, 232, 232, 0) 85%);
}

.sj-channels {
	display: block;
	width: 54px; height: 4px;
	border-radius: 2px;
	margin-bottom: 12px;
	background: linear-gradient(to right, #ffc4ad 0%, var(--sj-accent) 55%, var(--sj-accent-dark) 100%);
}

/* Hero */
.sj-hero {
	background:
		radial-gradient(120% 140% at 100% 0%, rgba(255, 133, 90, .12) 0%, rgba(255, 255, 255, 0) 55%),
		linear-gradient(180deg, #fffaf8 0%, #fff 60%);
	border: 1px solid var(--sj-line);
	border-top: 3px solid var(--sj-accent);
	border-radius: var(--sj-radius);
	box-shadow: var(--sj-shadow);
	padding: 36px 30px;
	margin-bottom: 18px;
}

.sj-hero-grid { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; }
.sj-hero-text { flex: 1 1 340px; }
.sj-hero-media { flex: 0 1 360px; max-width: 100%; }
.sj-hero-media img { width: 100%; border-radius: var(--sj-radius-sm); }
.sj-hero-media figcaption { font-size: 13px; font-style: italic; color: var(--sj-soft); margin-top: 8px; text-align: center; }
.sj-hero h1 { font-size: 33px; margin: 0 0 14px; }
.sj-hero p { font-size: 16.5px; margin: 0 0 16px; }
.sj-hero-logo { height: 54px; width: auto; margin-bottom: 14px; }

.sj-eyebrow {
	font-size: 12px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--sj-accent);
	font-weight: 700;
	margin: 0 0 10px;
}

.sj-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

.sj-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.sj-jump a {
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 600;
	color: var(--sj-ink);
	background: #fff;
	border: 1px solid var(--sj-line);
	border-radius: 999px;
	transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.sj-jump a:hover { border-color: var(--sj-accent); background: var(--sj-accent-soft); color: var(--sj-accent); }

/* Lưới */
.sj-grid { display: grid; gap: 20px; }
.sj-grid-2 { grid-template-columns: repeat(2, 1fr); }
.sj-grid-3 { grid-template-columns: repeat(3, 1fr); }
.sj-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Giới thiệu */
.sj-intro-grid { display: flex; flex-wrap: wrap; gap: 28px; }
.sj-intro-media { flex: 0 1 320px; }
.sj-intro-media img { width: 100%; border-radius: var(--sj-radius-sm); }
.sj-intro-media figcaption { font-size: 13px; font-style: italic; color: var(--sj-soft); margin-top: 8px; }
.sj-intro-text { flex: 1 1 340px; }
.sj-intro-text h3 { font-size: 19px; margin: 0 0 10px; }
.sj-intro-text p { margin: 0 0 14px; }

.sj-quote {
	border-left: 3px solid var(--sj-accent);
	background: var(--sj-accent-soft);
	border-radius: var(--sj-radius-sm);
	padding: 16px 20px;
	margin: 22px 0 0;
	font-family: var(--sj-serif);
	font-size: 16px;
	font-style: italic;
	line-height: 1.7;
}
.sj-quote cite { display: block; margin-top: 8px; font-size: 13px; font-style: normal; color: var(--sj-soft); }

.sj-benefits { margin-top: 26px; }
.sj-benefit {
	background: var(--sj-mist);
	border: 1px solid transparent;
	border-radius: var(--sj-radius-sm);
	padding: 18px 18px 20px;
	transition: border-color .25s ease, background .25s ease;
}
.sj-benefit:hover { background: #fff; border-color: rgba(255, 133, 90, .35); }
.sj-benefit h4 { font-size: 15px; margin: 0 0 6px; color: var(--sj-ink); font-family: var(--sj-sans); font-weight: 700; }
.sj-benefit p { margin: 0; font-size: 14.5px; line-height: 1.65; }

/* Thành phố & địa điểm */
.sj-city {
	background: #fff;
	border: 1px solid var(--sj-line);
	border-left: 3px solid var(--sj-accent);
	border-radius: var(--sj-radius-sm);
	padding: 20px 22px 22px;
	transition: transform .25s ease, box-shadow .25s ease;
}
.sj-city:hover { transform: translateY(-2px); box-shadow: var(--sj-shadow-lg); }

.sj-city-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.sj-city-head h3 { margin: 0; font-size: 20px; }

.sj-city-free {
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-weight: 700;
	color: #fff;
	background: var(--sj-accent);
	padding: 4px 12px;
	border-radius: 999px;
}

.sj-city-online {
	grid-column: 1 / -1;
	border-left-color: var(--sj-accent-dark);
	background: linear-gradient(135deg, rgba(255, 133, 90, .10) 0%, rgba(255, 255, 255, 0) 45%), #fff;
}
.sj-city-online .sj-city-head h3:before {
	content: "";
	display: inline-block;
	width: 8px; height: 8px;
	margin-right: 8px;
	vertical-align: middle;
	border-radius: 50%;
	background: var(--sj-accent);
	box-shadow: 0 0 0 4px rgba(255, 133, 90, .20);
}
.sj-city-online .sj-city-free { background: var(--sj-accent-dark); }

.sj-venue { padding-top: 14px; margin-top: 14px; border-top: 1px dashed var(--sj-line); }
.sj-venue:first-of-type { border-top: 0; margin-top: 6px; padding-top: 0; }
.sj-venue-num {
	display: inline-block;
	font-size: 11px; font-weight: 700; letter-spacing: .1em;
	text-transform: uppercase; color: var(--sj-muted); margin-bottom: 6px;
}
.sj-venue dl { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: 14.5px; }
.sj-venue dt {
	margin: 0; padding-top: 2px;
	font-size: 12.5px; font-weight: 700; letter-spacing: .06em;
	text-transform: uppercase; color: var(--sj-muted);
}
.sj-venue dd { margin: 0; line-height: 1.6; }
.sj-venue-alt { color: var(--sj-muted); font-size: 13px; font-style: italic; }

.sj-free-note {
	margin: 22px 0 0;
	padding: 13px 16px;
	font-size: 14.5px;
	background: var(--sj-accent-soft);
	border-left: 3px solid var(--sj-accent);
	border-radius: 0 var(--sj-radius-sm) var(--sj-radius-sm) 0;
}

/* Audio */
.sj-audio-grid { display: flex; flex-wrap: wrap; gap: 28px; }
.sj-audio-player { flex: 1 1 380px; min-width: 0; }
.sj-embed { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: var(--sj-radius-sm); background: #000; }
.sj-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sj-audio-note { font-size: 14.5px; margin-top: 14px; }

.sj-lessons { flex: 1 1 320px; min-width: 0; list-style: none; margin: 0; padding: 0; }
.sj-lessons li { border-bottom: 1px solid var(--sj-line); }
.sj-lessons li:last-child { border-bottom: 0; }
.sj-lessons a {
	display: flex; gap: 14px; align-items: baseline;
	padding: 11px 12px;
	border-radius: 999px;
	color: var(--sj-ink);
	font-size: 15px;
	transition: background .2s ease, padding-left .2s ease, color .2s ease;
}
.sj-lessons a:hover { background: var(--sj-accent-soft); color: var(--sj-accent); padding-left: 18px; }
.sj-lessons .sj-num { flex: 0 0 auto; font-family: var(--sj-serif); font-size: 13px; font-weight: 600; color: var(--sj-accent); min-width: 22px; }

/* Cảm nhận */
.sj-testi {
	background: var(--sj-mist);
	border-radius: var(--sj-radius-sm);
	padding: 22px 22px 20px;
	position: relative;
	transition: transform .25s ease, box-shadow .25s ease;
}
.sj-testi:hover { transform: translateY(-2px); box-shadow: var(--sj-shadow-lg); }
.sj-testi:before {
	content: "\201C";
	position: absolute; top: 10px; right: 18px;
	font-family: var(--sj-serif); font-size: 54px; line-height: 1;
	color: rgba(255, 133, 90, .28);
}
.sj-testi blockquote { margin: 0; padding: 0; background: none; border: 0; font-size: 15px; line-height: 1.75; font-style: italic; }
.sj-testi footer { margin-top: 14px; font-size: 13px; color: var(--sj-soft); }
.sj-testi footer strong { display: block; font-size: 14px; color: var(--sj-accent); }

/* Báo chí – tường logo */
.sj-press-wall { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.sj-press-wall > li { margin: 0; }
.sj-press-wall a {
	--sj-brand: var(--sj-accent);
	display: flex; align-items: center; justify-content: center;
	height: 100px;
	padding: 16px 14px;
	background: #fff;
	border: 1px solid var(--sj-line);
	border-radius: var(--sj-radius-sm);
	position: relative;
	overflow: hidden;
	text-align: center;
	transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.sj-press-wall a:after {
	content: "";
	position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
	background: var(--sj-brand);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .3s ease;
}
.sj-press-wall a:hover, .sj-press-wall a:focus-visible {
	border-color: var(--sj-brand);
	box-shadow: var(--sj-shadow-lg);
	transform: translateY(-3px);
}
.sj-press-wall a:hover:after, .sj-press-wall a:focus-visible:after { transform: scaleX(1); }
.sj-press-wall img { max-height: 46px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .72; transition: filter .25s ease, opacity .25s ease; }
.sj-press-wall a:hover img, .sj-press-wall a:focus-visible img { filter: none; opacity: 1; }

.sj-wordmark { line-height: 1.15; color: var(--sj-muted); }
.sj-wordmark em { display: block; font-family: var(--sj-serif); font-style: normal; font-weight: 600; font-size: 19px; color: var(--sj-soft); }
.sj-wordmark small { display: block; margin-top: 6px; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; }
.sj-press-wall a:hover .sj-wordmark em { color: var(--sj-brand); }

/* Khối đăng ký */
.sj-cta {
	background: linear-gradient(135deg, #fff1ea 0%, #ffe3d6 100%);
	border: 1px solid rgba(255, 133, 90, .25);
	border-radius: var(--sj-radius);
	box-shadow: 0 10px 26px rgba(255, 133, 90, .18);
	padding: 36px 30px;
	text-align: center;
	margin-bottom: 30px;
}
.sj-cta h2 { font-size: 26px; margin: 0 0 10px; }
.sj-cta p { max-width: 640px; margin: 0 auto 20px; font-size: 16.5px; }
.sj-cta strong { color: var(--sj-accent-dark); }
.sj-cta-contact { margin-top: 18px; font-size: 14.5px; }
.sj-cta-contact a { color: var(--sj-accent-dark); text-decoration: underline; }

/* =============================================================================
   6. RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
	.sj-sidebar { flex-basis: 280px; }
}

@media (max-width: 991px) {
	.sj-nav { display: none; }
	.sj-nav-toggle { display: flex; }
	.sj-layout { flex-direction: column; }
	.sj-sidebar { flex: 1 1 auto; width: 100%; }
	.sj-grid-4 { grid-template-columns: repeat(2, 1fr); }
	.sj-press-wall { grid-template-columns: repeat(3, 1fr); }
	.sj-footer-widgets { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
	body { font-size: 15.5px; }
	.sj-section, .sj-hero, .sj-card, .sj-cta { padding: 22px 18px 24px; }
	.sj-hero h1 { font-size: 25px; }
	.sj-head h2, .sj-cta h2 { font-size: 21px; }
	.sj-list, .sj-grid-2, .sj-grid-3, .sj-grid-4 { grid-template-columns: 1fr; }
	.sj-actions .sj-btn { width: 100%; text-align: center; }
	.sj-header-cta { display: none; }
	.sj-venue dl { grid-template-columns: 1fr; gap: 2px; }
	.sj-venue dt { margin-top: 8px; }
	.sj-footer-widgets { grid-template-columns: 1fr; }
	.alignleft, .alignright { float: none; margin: 0 0 14px; }
}

@media (max-width: 640px) {
	.sj-press-wall { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.sj-press-wall a { height: 86px; padding: 10px 8px; }
	.sj-hero-logo { height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { transition: none !important; animation: none !important; }
	.sj-post-card:hover, .sj-city:hover, .sj-testi:hover, .sj-press-wall a:hover, .sj-btn:hover { transform: none; }
}

@media print {
	.sj-header, .sj-footer, .sj-sidebar, .sj-to-top, .sj-jump, .sj-cta { display: none !important; }
	body { background: #fff; }
}

/* =============================================================================
   7. BỔ SUNG v1.1 – nền, khối mới, hiệu ứng
   ========================================================================== */

/* --- Nền trang: hoa văn nhẹ, nội dung nổi trên nền --------------------------- */
body {
	background-color: #f6f2ee;
	background-position: center top;
}

/* Lớp phủ sáng dần từ trên xuống để phần đầu trang thoáng hơn */
body:before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: -1;
	background: linear-gradient(180deg, rgba(255, 255, 255, .72) 0%, rgba(255, 255, 255, .35) 38%, rgba(255, 255, 255, 0) 100%);
}

.sj-header { background: rgba(255, 255, 255, .96); backdrop-filter: saturate(1.2) blur(6px); }
.sj-footer { background: rgba(255, 255, 255, .96); }

/* Khối nền kem xen kẽ cho trang chủ đỡ đơn điệu */
.sj-section-soft {
	background:
		radial-gradient(90% 120% at 0% 0%, rgba(255, 133, 90, .07) 0%, rgba(255, 255, 255, 0) 55%),
		var(--sj-mist);
}

/* --- Dải số liệu ------------------------------------------------------------ */
.sj-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--sj-line);
	border: 1px solid var(--sj-line);
	border-radius: var(--sj-radius);
	overflow: hidden;
	margin-bottom: 18px;
	box-shadow: var(--sj-shadow);
}

.sj-stat {
	background: #fff;
	padding: 22px 18px;
	text-align: center;
	transition: background .25s ease;
}

.sj-stat:hover { background: var(--sj-mist); }

.sj-stat strong {
	display: block;
	font-family: var(--sj-serif);
	font-size: 30px;
	line-height: 1.1;
	color: var(--sj-accent);
	margin-bottom: 6px;
}

.sj-stat span { display: block; font-size: 13.5px; line-height: 1.5; color: var(--sj-soft); }

/* --- Bốn bước bắt đầu ------------------------------------------------------- */
.sj-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	counter-reset: sj-step;
}

.sj-step {
	position: relative;
	background: #fff;
	border: 1px solid var(--sj-line);
	border-radius: var(--sj-radius-sm);
	padding: 26px 20px 22px;
	transition: transform .25s ease, box-shadow .25s ease;
}

.sj-step:hover { transform: translateY(-3px); box-shadow: var(--sj-shadow-lg); }

/* Đường nối giữa các bước trên màn hình rộng */
.sj-step:not(:last-child):after {
	content: "";
	position: absolute;
	top: 34px;
	right: -20px;
	width: 20px;
	height: 2px;
	background: repeating-linear-gradient(to right, var(--sj-line) 0 5px, transparent 5px 10px);
}

.sj-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin-bottom: 12px;
	border-radius: 50%;
	background: var(--sj-accent);
	color: #fff;
	font-family: var(--sj-serif);
	font-size: 17px;
	font-weight: 600;
	box-shadow: 0 4px 12px rgba(255, 133, 90, .28);
}

.sj-step h3 { font-size: 17px; margin: 0 0 8px; }
.sj-step p { margin: 0; font-size: 14.5px; line-height: 1.65; }

.sj-steps-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 0; }

/* --- Hỏi & Đáp -------------------------------------------------------------- */
.sj-faq { display: grid; gap: 12px; }

.sj-faq details {
	background: #fff;
	border: 1px solid var(--sj-line);
	border-radius: var(--sj-radius-sm);
	overflow: hidden;
	transition: border-color .25s ease, box-shadow .25s ease;
}

.sj-faq details[open] { border-color: rgba(255, 133, 90, .45); box-shadow: var(--sj-shadow); }

.sj-faq summary {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px 20px;
	cursor: pointer;
	list-style: none;
	font-family: var(--sj-serif);
	font-size: 17px;
	font-weight: 600;
	color: var(--sj-ink);
}

.sj-faq summary::-webkit-details-marker { display: none; }

.sj-faq summary:before {
	content: "+";
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	margin-top: 2px;
	border-radius: 50%;
	background: var(--sj-accent-soft);
	color: var(--sj-accent);
	font-family: var(--sj-sans);
	font-size: 17px;
	line-height: 23px;
	text-align: center;
	transition: transform .25s ease, background .25s ease, color .25s ease;
}

.sj-faq details[open] summary { color: var(--sj-accent); }
.sj-faq details[open] summary:before { content: "–"; background: var(--sj-accent); color: #fff; transform: rotate(180deg); }

.sj-faq summary:hover { background: var(--sj-mist); }

.sj-faq-answer { padding: 0 20px 18px 56px; }
.sj-faq-answer p { margin: 0; font-size: 15px; line-height: 1.75; }

.sj-faq-note { margin: 18px 0 0; font-size: 14.5px; color: var(--sj-soft); }

/* --- Thanh CTA cố định trên điện thoại -------------------------------------- */
.sj-sticky-cta {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 95;
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
	background: rgba(255, 255, 255, .97);
	border-top: 1px solid var(--sj-line);
	box-shadow: 0 -6px 20px rgba(26, 26, 26, .08);
	transform: translateY(110%);
	transition: transform .3s ease;
}

.sj-sticky-cta.is-visible { transform: translateY(0); }
.sj-sticky-cta strong { display: block; font-size: 14px; color: var(--sj-ink); }
.sj-sticky-cta span { display: block; font-size: 11.5px; color: var(--sj-muted); }
.sj-sticky-cta .sj-btn { padding: 11px 18px; font-size: 14px; white-space: nowrap; }

@media (max-width: 767px) {
	.sj-sticky-cta { display: flex; }
	body { padding-bottom: 74px; }
	.sj-to-top { bottom: 84px; }
}

/* --- Hiệu ứng hiện dần khi cuộn --------------------------------------------- */
.sj-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.sj-reveal.is-in { opacity: 1; transform: none; }

/* --- Vài điểm nhấn nhỏ ------------------------------------------------------ */
.sj-hero { position: relative; overflow: hidden; }

.sj-hero:after {
	content: "";
	position: absolute;
	right: -70px;
	bottom: -90px;
	width: 240px;
	height: 240px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 133, 90, .10) 0%, rgba(255, 133, 90, 0) 70%);
	pointer-events: none;
}

.sj-city-free, .sj-step-num { letter-spacing: .02em; }

.sj-press-wall a { background: rgba(255, 255, 255, .98); }

/* --- Responsive cho khối mới ------------------------------------------------ */
@media (max-width: 991px) {
	.sj-stats { grid-template-columns: repeat(2, 1fr); }
	.sj-steps { grid-template-columns: repeat(2, 1fr); }
	.sj-step:nth-child(2):after { display: none; }
}

@media (max-width: 767px) {
	.sj-stats { grid-template-columns: repeat(2, 1fr); }
	.sj-stat { padding: 16px 12px; }
	.sj-stat strong { font-size: 24px; }
	.sj-steps { grid-template-columns: 1fr; }
	.sj-step:after { display: none !important; }
	.sj-steps-cta .sj-btn { width: 100%; text-align: center; }
	.sj-faq summary { font-size: 15.5px; padding: 14px 16px; }
	.sj-faq-answer { padding: 0 16px 16px 50px; }
	body:before { background: linear-gradient(180deg, rgba(255,255,255,.8) 0%, rgba(255,255,255,.4) 40%, rgba(255,255,255,0) 100%); }
}

@media (prefers-reduced-motion: reduce) {
	.sj-reveal { opacity: 1; transform: none; }
	.sj-sticky-cta { transition: none; }
}

/* =============================================================================
   8. BỔ SUNG v1.2 – Header: dải logo trên, thanh menu tối bên dưới
   ========================================================================== */

/* Header không còn dính; chỉ thanh menu dính khi cuộn */
.sj-header {
	position: static;
	background: transparent;
	border-bottom: 0;
	backdrop-filter: none;
}

/* --- Dải logo --------------------------------------------------------------- */
.sj-masthead {
	position: relative;
	overflow: hidden;
	background:
		repeating-conic-gradient(from 200deg at 50% -35%,
			rgba(255, 255, 255, .55) 0deg 2.4deg,
			rgba(255, 255, 255, 0) 2.4deg 7deg),
		linear-gradient(160deg, #ffe9d4 0%, #ffdcc0 45%, #ffcfae 100%);
	padding: 26px 0 22px;
	text-align: center;
}

.sj-masthead:after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 1px;
	background: rgba(255, 133, 90, .35);
}

.sj-masthead .sj-brand {
	display: block;
	margin: 0;
	position: relative;
	z-index: 1;
}

.sj-masthead .custom-logo-link { display: inline-block; }
.sj-masthead .custom-logo,
.sj-masthead .sj-brand img {
	max-height: 104px;
	width: auto;
	margin: 0 auto;
}

.sj-masthead .sj-site-title {
	font-size: 34px;
	margin: 0;
	color: var(--sj-accent-dark);
	letter-spacing: -.01em;
}

.sj-masthead .sj-site-title a { color: inherit; }

.sj-masthead .sj-site-desc {
	margin: 4px 0 0;
	font-size: 14px;
	color: #9a6a4e;
	letter-spacing: .02em;
}

/* --- Thanh menu tối --------------------------------------------------------- */
.sj-nav {
	position: sticky;
	top: 0;
	z-index: 100;
	background: #2b2b2b;
	border-top: 0;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}

body.admin-bar .sj-nav { top: 32px; }

.sj-nav-inner {
	display: flex;
	align-items: stretch;
	gap: 0;
}

.sj-nav .sj-menu { flex: 1 1 auto; }

.sj-nav .sj-menu > li > a {
	color: #ececec;
	padding: 15px 18px;
	font-size: 14.5px;
	border-right: 1px solid rgba(255, 255, 255, .07);
}

.sj-nav .sj-menu > li:first-child > a { border-left: 1px solid rgba(255, 255, 255, .07); }

.sj-nav .sj-menu > li > a:after { display: none; background: none; }

.sj-nav .sj-menu > li:hover > a,
.sj-nav .sj-menu > li:focus-within > a,
.sj-nav .sj-menu > li.current-menu-item > a,
.sj-nav .sj-menu > li.current-menu-parent > a {
	background: var(--sj-accent);
	color: #fff;
}

/* Nút trang chủ hình ngôi nhà */
.sj-home-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	flex: 0 0 auto;
	background: var(--sj-accent);
	color: #fff;
}

.sj-home-btn:hover, .sj-home-btn.is-current { background: var(--sj-accent-dark); color: #fff; }

/* Menu con */
.sj-nav .sj-menu ul {
	background: #333;
	border: 0;
	border-radius: 0 0 var(--sj-radius-sm) var(--sj-radius-sm);
	padding: 4px 0;
	box-shadow: 0 12px 24px rgba(0, 0, 0, .22);
}

.sj-nav .sj-menu ul a { color: #e2e2e2; padding: 10px 18px; font-size: 14px; }
.sj-nav .sj-menu ul li:hover > a { background: var(--sj-accent); color: #fff; }

/* Mũi tên báo có menu con */
.sj-nav .sj-menu > li.menu-item-has-children > a:before {
	content: "";
	display: inline-block;
	width: 0; height: 0;
	margin: 0 7px 2px 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	opacity: .8;
	vertical-align: middle;
}

/* Nút đăng ký nằm cuối thanh menu */
.sj-nav-cta {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	padding: 0 20px;
	background: rgba(255, 255, 255, .10);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	transition: background .2s ease;
}

.sj-nav-cta:hover { background: var(--sj-accent); color: #fff; }

/* Nút mở menu trên điện thoại */
.sj-nav .sj-nav-toggle {
	background: transparent;
	border: 0;
	border-left: 1px solid rgba(255, 255, 255, .1);
	border-radius: 0;
	width: 56px;
	height: auto;
	margin-left: auto;
}

.sj-nav .sj-nav-toggle span { background: #fff; width: 22px; }

/* Menu điện thoại xổ ngay dưới thanh tối */
.sj-nav .sj-mobile-nav {
	background: #2b2b2b;
	border-top: 1px solid rgba(255, 255, 255, .08);
	padding: 6px 0 18px;
}

.sj-nav .sj-mobile-nav .sj-menu a { color: #ececec; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.sj-nav .sj-mobile-nav .sj-menu a:hover { color: var(--sj-accent); }

/* --- Responsive ------------------------------------------------------------- */
@media (max-width: 1100px) {
	.sj-nav .sj-menu > li > a { padding: 15px 13px; font-size: 14px; }
	.sj-nav-cta { padding: 0 14px; }
}

@media (max-width: 991px) {
	.sj-nav { display: block; }
	.sj-nav .sj-menu { display: none; }
	.sj-nav .sj-mobile-nav .sj-menu { display: block; }
	.sj-nav-cta { margin-left: auto; }
	.sj-nav .sj-nav-toggle { display: flex; margin-left: 0; }
	.sj-masthead { padding: 20px 0 18px; }
	.sj-masthead .custom-logo, .sj-masthead .sj-brand img { max-height: 74px; }
	.sj-masthead .sj-site-title { font-size: 26px; }
}

@media (max-width: 600px) {
	.sj-nav-cta { display: none; }
	.sj-masthead .custom-logo, .sj-masthead .sj-brand img { max-height: 58px; }
	.sj-masthead .sj-site-title { font-size: 22px; }
	.sj-masthead .sj-site-desc { font-size: 12.5px; }
	.sj-home-btn { width: 48px; }
	.sj-nav .sj-nav-toggle { width: 52px; }
}

/* Dải logo: chiều cao tối thiểu để cân đối kể cả khi logo nhỏ */
.sj-masthead { min-height: 128px; display: flex; align-items: center; }
.sj-masthead > .sj-wrap { width: 100%; }

@media (max-width: 600px) { .sj-masthead { min-height: 96px; } }

/* =============================================================================
   9. BỔ SUNG v1.3 – Ảnh nền phủ kín toàn trang
   ========================================================================== */

/* Lớp ảnh nền: cố định, phủ kín, không bị giật trên iOS vì dùng phần tử riêng */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -2;
	background: none;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	pointer-events: none;
}

/* Lớp phủ sáng để chữ luôn dễ đọc trên mọi ảnh nền */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(255, 255, 255, .72) 0%, rgba(255, 255, 255, .35) 38%, rgba(255, 255, 255, 0) 100%);
}

/* Nội dung nổi rõ hơn khi đặt trên ảnh nền */
.sj-section, .sj-hero, .sj-card, .sj-stats, .sj-widget {
	box-shadow: 0 2px 14px rgba(26, 26, 26, .06);
}

@media (max-width: 767px) {
	/* Ảnh nền dịch nhẹ về giữa để giữ được chủ thể trên màn hình hẹp */
	body::before { background-position: center top; }
}

/* =============================================================================
   10. BỔ SUNG v1.4 – Ảnh nền phủ toàn trang, xuyên qua cả đầu trang
   ========================================================================== */

/* Ảnh nền phủ kín từ trên xuống dưới, cố định khi cuộn */
body::before {
	background-size: cover;
	background-position: center top;
	background-attachment: scroll; /* phần tử đã fixed nên không cần */
}

/* Lớp phủ rất nhẹ – chỉ đủ để chữ dễ đọc, không làm bạc ảnh nền */
body::after {
	background: rgba(255, 255, 255, .10);
}

/* Đầu trang trong suốt để ảnh nền hiện xuyên qua */
.sj-masthead {
	background: none;
	padding: 22px 0 18px;
}

.sj-masthead:after { display: none; }

/* Chữ trên dải logo có viền sáng nhẹ để nổi trên mọi ảnh nền */
.sj-masthead .sj-site-title { text-shadow: 0 1px 2px rgba(255, 255, 255, .85); }
.sj-masthead .sj-site-desc { color: #7a5540; text-shadow: 0 1px 2px rgba(255, 255, 255, .8); }

/* Khi không dùng ảnh nền phủ kín (chọn hoa văn hoặc không nền)
   thì đầu trang lấy lại dải cam chuyển sắc */
body.sj-bg-pattern .sj-masthead {
	background:
		repeating-conic-gradient(from 200deg at 50% -35%,
			rgba(255, 255, 255, .55) 0deg 2.4deg,
			rgba(255, 255, 255, 0) 2.4deg 7deg),
		linear-gradient(160deg, #ffe9d4 0%, #ffdcc0 45%, #ffcfae 100%);
}

body.sj-bg-pattern .sj-masthead:after { display: block; }

/* Nội dung nổi rõ trên ảnh nền */
body.sj-bg-cover .sj-section,
body.sj-bg-cover .sj-hero,
body.sj-bg-cover .sj-card,
body.sj-bg-cover .sj-stats,
body.sj-bg-cover .sj-widget,
body.sj-bg-cover .sj-cta {
	box-shadow: 0 4px 20px rgba(26, 26, 26, .10);
}

body.sj-bg-cover .sj-footer { background: rgba(255, 255, 255, .94); }
body.sj-bg-cover .sj-jump a { background: rgba(255, 255, 255, .92); }

/* =============================================================================
   11. BỔ SUNG v1.5 – Logo và chân trang đầy đủ
   ========================================================================== */

/* --- Logo ------------------------------------------------------------------- */
.sj-logo-link { display: inline-block; }

.sj-masthead .sj-logo,
.sj-masthead .custom-logo {
	max-height: 104px;
	width: auto;
	margin: 0 auto;
	/* logo nền trắng vẫn hoà vào ảnh nền sáng */
	mix-blend-mode: multiply;
}

@media (max-width: 991px) { .sj-masthead .sj-logo, .sj-masthead .custom-logo { max-height: 74px; } }
@media (max-width: 600px) { .sj-masthead .sj-logo, .sj-masthead .custom-logo { max-height: 58px; } }

/* --- Chân trang ------------------------------------------------------------- */
.sj-footer { padding-top: 6px; }

.sj-footer-cols {
	display: grid;
	grid-template-columns: 1.35fr 1.15fr .9fr 1fr;
	gap: 34px;
	padding: 42px 0 34px;
}

.sj-footer-col p { font-size: 14.5px; line-height: 1.7; color: var(--sj-soft); }
.sj-footer-col .sj-widget-title { font-size: 16px; margin-bottom: 14px; }
.sj-footer-col ul { list-style: none; margin: 0; padding: 0; }

.sj-footer-logo, .sj-footer-about .custom-logo {
	max-height: 68px;
	width: auto;
	margin-bottom: 14px;
}

/* Mạng xã hội */
.sj-socials { display: flex; gap: 10px; margin-top: 16px !important; }

.sj-socials a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--sj-accent-soft);
	color: var(--sj-accent);
	transition: background .2s ease, color .2s ease, transform .2s ease;
}

.sj-socials a:hover { background: var(--sj-accent); color: #fff; transform: translateY(-2px); }

/* Danh sách địa điểm ở chân trang */
.sj-footer-cities li {
	padding: 9px 0;
	border-bottom: 1px dashed var(--sj-line);
	font-size: 14px;
	line-height: 1.55;
}

.sj-footer-cities li:last-child { border-bottom: 0; }
.sj-footer-cities strong { display: block; color: var(--sj-accent); font-size: 15px; }
.sj-footer-cities span { display: block; color: var(--sj-soft); font-size: 13.5px; }

/* Liên kết nhanh */
.sj-footer-links li { padding: 6px 0; font-size: 14.5px; }

.sj-footer-links a {
	color: var(--sj-ink);
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.sj-footer-links a:before {
	content: "";
	width: 5px; height: 5px;
	border-radius: 50%;
	background: var(--sj-accent);
	flex: 0 0 auto;
	opacity: .55;
}

.sj-footer-links a:hover { color: var(--sj-accent); }
.sj-footer-links a:hover:before { opacity: 1; }

/* Khối đăng ký ở chân trang */
.sj-footer-cta {
	background: linear-gradient(135deg, #fff1ea 0%, #ffe3d6 100%);
	border: 1px solid rgba(255, 133, 90, .25);
	border-radius: var(--sj-radius);
	padding: 22px 22px 20px;
}

.sj-footer-cta .sj-widget-title { border-bottom: 0; padding-bottom: 0; }
.sj-footer-cta p { color: var(--sj-ink); }
.sj-footer-note { font-size: 13.5px !important; margin-bottom: 0 !important; }

/* Dòng cuối */
.sj-footer-bottom { padding: 16px 0 20px; }
.sj-footer-bottom .sj-menu { gap: 4px; }
.sj-footer-bottom .sj-menu a { padding: 4px 10px; font-size: 13.5px; color: var(--sj-soft); }
.sj-footer-bottom .sj-menu a:hover { color: var(--sj-accent); }
.sj-footer-bottom .sj-menu > li > a:after { display: none; }

@media (max-width: 991px) {
	.sj-footer-cols { grid-template-columns: repeat(2, 1fr); gap: 28px; padding: 32px 0 26px; }
}

@media (max-width: 600px) {
	.sj-footer-cols { grid-template-columns: 1fr; gap: 26px; }
	.sj-footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* =============================================================================
   12. BỔ SUNG v1.6 – Dải logo: logo bên trái, nút đăng ký bên phải
   ========================================================================== */

.sj-masthead {
	min-height: 0;
	display: block;
	padding: 16px 0;
	text-align: left;
	background: rgba(255, 255, 255, .82);
	border-bottom: 1px solid rgba(255, 133, 90, .18);
}

.sj-masthead > .sj-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.sj-masthead .sj-brand { margin: 0; display: flex; align-items: center; min-width: 0; }

.sj-masthead .sj-logo,
.sj-masthead .custom-logo {
	max-height: 66px;
	width: auto;
	margin: 0;
	mix-blend-mode: normal;
}

.sj-masthead .sj-site-title { font-size: 22px; margin: 0; text-align: left; }
.sj-masthead .sj-site-desc { text-align: left; }

.sj-masthead-cta { flex: 0 0 auto; }
.sj-masthead-cta .sj-btn { padding: 11px 24px; font-size: 14.5px; }

/* Nút cũ trong thanh menu không dùng nữa */
.sj-nav-cta { display: none !important; }

/* Thanh menu: đẩy nút mở menu sang phải */
.sj-nav .sj-nav-toggle { margin-left: auto; }

@media (max-width: 991px) {
	.sj-masthead { padding: 12px 0; }
	.sj-masthead .sj-logo, .sj-masthead .custom-logo { max-height: 52px; }
}

@media (max-width: 600px) {
	.sj-masthead .sj-logo, .sj-masthead .custom-logo { max-height: 42px; }
	.sj-masthead-cta .sj-btn { padding: 9px 16px; font-size: 13px; }
}

@media (max-width: 420px) {
	.sj-masthead-cta { display: none; }
}

/* Logo nền trắng hoà vào dải sáng phía sau */
.sj-masthead .sj-logo { mix-blend-mode: multiply; }
.sj-footer-logo { mix-blend-mode: multiply; }

/* =============================================================================
   13. BỔ SUNG v1.7 – Chữ tiếng Việt: bỏ viết hoa toàn bộ, chỉnh lại font
   Chữ hoa toàn bộ làm dấu tiếng Việt (ằ, ề, ỗ, ữ) bị cắt và khó đọc,
   nên các nhãn dưới đây trả về cách viết hoa chữ đầu bình thường.
   ========================================================================== */

.sj-eyebrow,
.sj-city-free,
.sj-venue dt,
.sj-venue-num,
.sj-post-nav span,
.sj-wordmark small,
.sj-stat span {
	text-transform: none;
}

/* Nhãn nhỏ: giãn chữ vừa phải để không rời rạc */
.sj-eyebrow {
	font-size: 13px;
	letter-spacing: .08em;
	font-weight: 700;
}

.sj-city-free {
	font-size: 12px;
	letter-spacing: .01em;
	font-weight: 600;
	padding: 4px 13px;
}

.sj-venue dt {
	font-size: 13px;
	letter-spacing: 0;
	font-weight: 600;
	color: #8a8a8a;
}

.sj-venue-num {
	font-size: 12.5px;
	letter-spacing: .01em;
	font-weight: 600;
	color: var(--sj-muted);
}

.sj-post-nav span { font-size: 13px; letter-spacing: 0; }
.sj-wordmark small { font-size: 11.5px; letter-spacing: .02em; }

/* Tiêu đề: bỏ giãn chữ âm để dấu tiếng Việt không chạm nhau */
h1, h2, h3, h4, h5, h6,
.sj-hero h1, .sj-head h2, .sj-cta h2, .sj-site-title, .sj-masthead .sj-site-title {
	letter-spacing: 0;
	line-height: 1.34;
	word-spacing: .01em;
}

/* Chữ thân bài dễ đọc hơn với tiếng Việt */
body { letter-spacing: .002em; }
.sj-entry, .sj-hero p, .sj-section p { text-rendering: optimizeLegibility; }

/* Nút bấm và menu viết hoa chữ đầu, không in hoa toàn bộ */
.sj-btn, .sj-menu a, .sj-nav-cta, .sj-sticky-cta .sj-btn { text-transform: none; }

/* =============================================================================
   14. BỔ SUNG v1.8 – Khối "Tóm tắt nhanh" & tinh chỉnh phục vụ SEO/GEO
   ========================================================================== */

/* Chừa chỗ cho thanh menu dính khi bấm vào liên kết neo */
[id] { scroll-margin-top: 76px; }

.sj-keyfacts {
	background: #fff;
	border: 1px solid var(--sj-line);
	border-left: 4px solid var(--sj-accent);
	border-radius: var(--sj-radius);
	box-shadow: 0 2px 14px rgba(26, 26, 26, .06);
	padding: 26px 28px 24px;
	margin-bottom: 18px;
}

.sj-keyfacts h2 {
	font-size: 20px;
	margin: 0 0 12px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.sj-keyfacts h2:before {
	content: "";
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--sj-accent-soft);
	box-shadow: inset 0 0 0 2px var(--sj-accent);
}

.sj-keyfacts-lead {
	margin: 0 0 18px;
	font-size: 16.5px;
	line-height: 1.75;
	color: var(--sj-ink);
}

.sj-keyfacts-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px 24px;
	margin: 0;
	padding-top: 16px;
	border-top: 1px dashed var(--sj-line);
}

.sj-keyfacts-list > div { min-width: 0; }

.sj-keyfacts-list dt {
	font-size: 13px;
	font-weight: 700;
	color: var(--sj-accent);
	margin-bottom: 3px;
}

.sj-keyfacts-list dd {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--sj-ink);
}

.sj-keyfacts-updated {
	margin: 16px 0 0;
	font-size: 13px;
	color: var(--sj-muted);
	font-style: italic;
}

@media (max-width: 991px) {
	.sj-keyfacts-list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
	.sj-keyfacts { padding: 20px 18px; }
	.sj-keyfacts h2 { font-size: 18px; }
	.sj-keyfacts-lead { font-size: 15.5px; }
	.sj-keyfacts-list { grid-template-columns: 1fr; gap: 12px; }
}

/* =============================================================================
   15. BỔ SUNG v1.9 – Thanh menu mới: tông xanh ngọc lấy từ logo
   Bỏ nền đen và các vạch chia cứng, chuyển sang nút bo tròn cho nhẹ mắt.
   ========================================================================== */

:root {
	--sj-nav-1:   #14776e;  /* xanh ngọc, cùng họ với chữ trong logo */
	--sj-nav-2:   #0d5d56;
	--sj-nav-txt: #eafaf7;
}

.sj-nav {
	background: linear-gradient(96deg, var(--sj-nav-1) 0%, var(--sj-nav-2) 100%);
	box-shadow: 0 6px 18px rgba(13, 93, 86, .22);
	border-bottom: 3px solid var(--sj-accent);
}

.sj-nav-inner {
	align-items: center;
	gap: 4px;
	min-height: 56px;
}

/* Nút trang chủ: bo tròn, nổi trên nền xanh */
.sj-home-btn {
	width: 42px;
	height: 42px;
	margin-right: 8px;
	border-radius: 12px;
	background: var(--sj-accent);
	color: #fff;
	box-shadow: 0 4px 12px rgba(255, 133, 90, .35);
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.sj-home-btn:hover, .sj-home-btn.is-current {
	background: var(--sj-accent-dark);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(255, 133, 90, .45);
}

/* Mục menu dạng nút bo tròn, không còn vạch chia */
.sj-nav .sj-menu { align-items: center; gap: 2px; }

.sj-nav .sj-menu > li > a {
	position: relative;
	padding: 9px 15px;
	margin: 0;
	border: 0;
	border-radius: 999px;
	color: var(--sj-nav-txt);
	font-size: 14.5px;
	font-weight: 600;
	transition: background .22s ease, color .22s ease;
}

.sj-nav .sj-menu > li:first-child > a { border-left: 0; }

.sj-nav .sj-menu > li > a:hover,
.sj-nav .sj-menu > li:focus-within > a {
	background: rgba(255, 255, 255, .14);
	color: #fff;
}

/* Mục đang xem: viên thuốc màu cam */
.sj-nav .sj-menu > li.current-menu-item > a,
.sj-nav .sj-menu > li.current-menu-parent > a,
.sj-nav .sj-menu > li.current-menu-ancestor > a {
	background: var(--sj-accent);
	color: #fff;
	box-shadow: 0 4px 12px rgba(255, 133, 90, .35);
}

/* Mũi tên menu con: nhỏ, đặt sau chữ cho cân */
.sj-nav .sj-menu > li.menu-item-has-children > a:before { display: none; }

.sj-nav .sj-menu > li.menu-item-has-children > a:after {
	content: "";
	display: inline-block;
	width: 0; height: 0;
	background: none;
	transform: none;
	margin: 0 0 0 7px;
	vertical-align: 2px;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	opacity: .75;
	transform: none;
	transition: transform .2s ease;
}

.sj-nav .sj-menu > li.menu-item-has-children:hover > a:after { transform: translateY(2px); }

/* Menu con: thẻ trắng mềm thay vì nền tối */
.sj-nav .sj-menu ul {
	top: calc(100% + 6px);
	min-width: 244px;
	background: #fff;
	border: 1px solid var(--sj-line);
	border-radius: 14px;
	padding: 8px;
	box-shadow: 0 18px 36px rgba(13, 93, 86, .18);
}

.sj-nav .sj-menu ul:before {
	content: "";
	position: absolute;
	top: -6px; left: 24px;
	width: 12px; height: 12px;
	background: #fff;
	border-left: 1px solid var(--sj-line);
	border-top: 1px solid var(--sj-line);
	transform: rotate(45deg);
	border-radius: 2px;
}

.sj-nav .sj-menu ul a {
	color: var(--sj-ink);
	padding: 9px 14px;
	border-radius: 9px;
	font-size: 14.5px;
	font-weight: 500;
}

.sj-nav .sj-menu ul li:hover > a,
.sj-nav .sj-menu ul li:focus-within > a {
	background: var(--sj-accent-soft);
	color: var(--sj-accent-dark);
}

.sj-nav .sj-menu ul ul { top: -8px; left: calc(100% + 6px); }
.sj-nav .sj-menu ul ul:before { display: none; }

/* Nút tìm kiếm và nút mở menu */
.sj-search-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px; height: 40px;
	margin-left: auto;
	border: 0;
	border-radius: 12px;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	cursor: pointer;
	transition: background .2s ease;
}

.sj-search-toggle:hover, .sj-search-toggle[aria-expanded="true"] { background: rgba(255, 255, 255, .24); }

.sj-nav .sj-nav-toggle {
	width: 42px; height: 40px;
	margin-left: 8px;
	border: 0;
	border-radius: 12px;
	background: rgba(255, 255, 255, .12);
}

.sj-nav .sj-nav-toggle:hover { background: rgba(255, 255, 255, .24); }

/* Khung tìm kiếm xổ xuống */
.sj-search-panel {
	display: none;
	background: rgba(255, 255, 255, .97);
	border-top: 1px solid rgba(255, 255, 255, .25);
	padding: 16px 0;
}

.sj-search-panel.is-open { display: block; }
.sj-search-panel .sj-search-form { display: flex; gap: 10px; align-items: center; }
.sj-search-panel .sj-search-form label { flex: 1 1 auto; margin: 0; }
.sj-search-panel .sj-search-form p { margin: 0 !important; }

/* Menu điện thoại: nền xanh cùng tông */
.sj-nav .sj-mobile-nav {
	background: var(--sj-nav-2);
	border-top: 1px solid rgba(255, 255, 255, .14);
	padding: 10px 0 18px;
}

.sj-nav .sj-mobile-nav .sj-menu a {
	color: var(--sj-nav-txt);
	border-bottom: 1px solid rgba(255, 255, 255, .12);
	border-radius: 0;
	padding: 12px 2px;
}

.sj-nav .sj-mobile-nav .sj-menu a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.sj-nav .sj-mobile-nav .sj-menu ul a { padding-left: 16px; font-size: 14px; opacity: .92; }
.sj-nav .sj-mobile-nav .sj-menu ul { background: transparent; border: 0; box-shadow: none; padding: 0 0 0 12px; }
.sj-nav .sj-mobile-nav .sj-menu ul:before { display: none; }

/* Dải logo hoà với thanh menu mới */
.sj-masthead { border-bottom: 0; }

@media (max-width: 1100px) {
	.sj-nav .sj-menu > li > a { padding: 9px 11px; font-size: 14px; }
}

@media (max-width: 991px) {
	.sj-nav-inner { min-height: 52px; }
	.sj-home-btn { width: 38px; height: 38px; border-radius: 11px; }
}

/* Sửa: khung menu điện thoại nằm trong .sj-nav nên bị dính display:flex */
.sj-nav .sj-mobile-nav .sj-wrap { display: block; }

.sj-nav .sj-mobile-nav p { margin: 16px 0 4px; }

.sj-nav .sj-mobile-nav .sj-btn {
	display: block;
	width: 100%;
	text-align: center;
	border-radius: 12px;
}

/* =============================================================================
   16. BỔ SUNG v2.0 – Thanh menu nền trắng, chữ đen
   ========================================================================== */

.sj-nav {
	background: rgba(255, 255, 255, .97);
	border-bottom: 3px solid var(--sj-accent);
	box-shadow: 0 4px 14px rgba(26, 26, 26, .07);
	backdrop-filter: saturate(1.2) blur(6px);
}

/* Mục menu: chữ đen, rê chuột nền cam nhạt */
.sj-nav .sj-menu > li > a { color: var(--sj-ink); }

.sj-nav .sj-menu > li > a:hover,
.sj-nav .sj-menu > li:focus-within > a {
	background: var(--sj-accent-soft);
	color: var(--sj-accent-dark);
}

/* Mục đang xem giữ viên thuốc cam, chữ trắng cho nổi */
.sj-nav .sj-menu > li.current-menu-item > a,
.sj-nav .sj-menu > li.current-menu-parent > a,
.sj-nav .sj-menu > li.current-menu-ancestor > a {
	background: var(--sj-accent);
	color: #fff;
}

/* Nút tìm kiếm và nút mở menu trên nền trắng */
.sj-search-toggle,
.sj-nav .sj-nav-toggle {
	background: #f3f0ec;
	color: var(--sj-ink);
	border: 1px solid var(--sj-line);
}

.sj-search-toggle:hover,
.sj-search-toggle[aria-expanded="true"],
.sj-nav .sj-nav-toggle:hover {
	background: var(--sj-accent-soft);
	border-color: rgba(255, 133, 90, .45);
	color: var(--sj-accent-dark);
}

.sj-nav .sj-nav-toggle span { background: var(--sj-ink); }

/* Ô tìm kiếm xổ xuống */
.sj-search-panel {
	background: #fff;
	border-top: 1px solid var(--sj-line);
}

/* Menu con: viền rõ hơn để tách khỏi thanh trắng */
.sj-nav .sj-menu ul {
	border-color: var(--sj-line);
	box-shadow: 0 16px 34px rgba(26, 26, 26, .14);
}

/* Menu điện thoại: nền trắng, chữ đen */
.sj-nav .sj-mobile-nav {
	background: #fff;
	border-top: 1px solid var(--sj-line);
}

.sj-nav .sj-mobile-nav .sj-menu a {
	color: var(--sj-ink);
	border-bottom: 1px solid var(--sj-line);
}

.sj-nav .sj-mobile-nav .sj-menu a:hover {
	color: var(--sj-accent-dark);
	background: var(--sj-accent-soft);
}

.sj-nav .sj-mobile-nav .sj-menu ul a { color: var(--sj-soft); }

/* Dải logo phía trên tách nhẹ khỏi thanh menu trắng */
.sj-masthead { border-bottom: 1px solid rgba(255, 133, 90, .16); }

/* =============================================================================
   17. BỔ SUNG v2.1 – Bài viết & trang: đọc tốt trên mọi thiết bị
   ========================================================================== */

/* --- Khung nội dung --------------------------------------------------------- */
.sj-layout { gap: 32px; }

/* Cột bên bám theo khi cuộn trên màn hình lớn */
@media (min-width: 992px) {
	.sj-sidebar {
		position: sticky;
		top: 84px;
		max-height: calc(100vh - 100px);
		overflow-y: auto;
		scrollbar-width: thin;
	}

	.sj-sidebar::-webkit-scrollbar { width: 6px; }
	.sj-sidebar::-webkit-scrollbar-thumb { background: var(--sj-line); border-radius: 3px; }

	/* Bài viết không có cột bên thì giới hạn bề rộng dòng cho dễ đọc */
	.sj-layout-full .sj-entry > * { max-width: 74ch; }
	.sj-layout-full .sj-entry > .alignwide,
	.sj-layout-full .sj-entry > .alignfull,
	.sj-layout-full .sj-entry > figure,
	.sj-layout-full .sj-entry > table,
	.sj-layout-full .sj-entry > .sj-table-scroll { max-width: 100%; }
}

/* --- Chữ trong bài: co giãn theo màn hình ----------------------------------- */
.sj-entry {
	font-size: clamp(15.5px, 0.55vw + 14.6px, 17.5px);
	line-height: 1.8;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.sj-entry > * + * { margin-top: 1.15em; }
.sj-entry p { margin: 0 0 1.15em; }

.sj-entry h2 { font-size: clamp(20px, 1.4vw + 15px, 27px); margin-top: 1.7em; }
.sj-entry h3 { font-size: clamp(17.5px, 0.9vw + 14px, 22px); margin-top: 1.5em; }
.sj-entry h4 { font-size: clamp(16px, 0.5vw + 14.5px, 18.5px); }

.sj-entry ul, .sj-entry ol { padding-left: 1.35em; }
.sj-entry li + li { margin-top: .4em; }

.sj-entry a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.sj-entry a:hover { text-decoration-thickness: 2px; }

.sj-entry img, .sj-entry video { height: auto; border-radius: var(--sj-radius-sm); }
.sj-entry figure { margin: 1.6em 0; }
.sj-entry figure img { margin: 0 auto; }

/* Video, bản đồ nhúng luôn vừa khung */
.sj-entry iframe,
.sj-entry embed,
.sj-entry object {
	max-width: 100%;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
	border-radius: var(--sj-radius-sm);
}

.sj-entry iframe[src*="google.com/maps"] { aspect-ratio: 4 / 3; }

/* Bảng dài: cuộn ngang thay vì vỡ khung trên điện thoại */
.sj-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 1.5em 0;
	border: 1px solid var(--sj-line);
	border-radius: var(--sj-radius-sm);
}

.sj-table-scroll table { margin: 0; border: 0; min-width: 520px; }
.sj-table-scroll th, .sj-table-scroll td { border-left: 0; border-right: 0; }

.sj-entry pre { max-width: 100%; overflow-x: auto; }

/* --- Đầu bài viết ----------------------------------------------------------- */
.sj-page-title { font-size: clamp(24px, 2.2vw + 17px, 36px); }
.sj-readtime { margin: 6px 0 0; font-size: 13.5px; color: var(--sj-muted); }

.sj-featured img {
	width: 100%;
	max-height: 460px;
	object-fit: cover;
	border-radius: var(--sj-radius-sm);
}

/* --- Mục lục ---------------------------------------------------------------- */
.sj-toc {
	background: var(--sj-mist);
	border: 1px solid var(--sj-line);
	border-left: 4px solid var(--sj-accent);
	border-radius: var(--sj-radius-sm);
	padding: 18px 22px 16px;
	margin: 0 0 26px;
}

.sj-toc-title { font-size: 16px; margin: 0 0 10px; }

.sj-toc ol {
	margin: 0;
	padding-left: 1.25em;
	columns: 2;
	column-gap: 30px;
	font-size: 14.5px;
}

.sj-toc li { margin: 4px 0; break-inside: avoid; }
.sj-toc a { color: var(--sj-ink); text-decoration: none; }
.sj-toc a:hover { color: var(--sj-accent); text-decoration: underline; }

/* --- Nút chia sẻ ------------------------------------------------------------ */
.sj-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 26px;
	padding-top: 20px;
	border-top: 1px solid var(--sj-line);
}

.sj-share-label { font-size: 14px; font-weight: 600; color: var(--sj-soft); }

.sj-share-btn {
	display: inline-block;
	padding: 8px 16px;
	border: 1px solid var(--sj-line);
	border-radius: 999px;
	background: #fff;
	color: var(--sj-ink);
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.sj-share-btn:hover {
	background: var(--sj-accent-soft);
	border-color: rgba(255, 133, 90, .45);
	color: var(--sj-accent-dark);
}

.sj-share-btn.is-copied { background: var(--sj-accent); border-color: var(--sj-accent); color: #fff; }

/* --- Điều hướng bài & bình luận -------------------------------------------- */
.sj-post-nav > div {
	background: #fff;
	border: 1px solid var(--sj-line);
	border-radius: var(--sj-radius-sm);
	padding: 14px 18px;
}

.sj-comments .comment-body { overflow-wrap: anywhere; }
.sj-comments .comment-form { display: grid; gap: 12px; }
.sj-comments .comment-form p { margin: 0; }
.sj-comments .comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; }
.sj-comments .comment-form-cookies-consent input { width: auto; }

/* --- Máy tính bảng ---------------------------------------------------------- */
@media (max-width: 1100px) and (min-width: 992px) {
	.sj-sidebar { flex-basis: 300px; }
	.sj-card { padding: 26px 24px; }
}

/* --- Điện thoại ------------------------------------------------------------- */
@media (max-width: 767px) {
	.sj-main { padding: 18px 0 30px; }
	.sj-wrap { padding: 0 14px; }
	.sj-card { padding: 20px 16px 22px; border-radius: 12px; }

	.sj-page-head { margin-bottom: 16px; }
	.sj-featured img { max-height: 280px; }

	.sj-toc { padding: 16px 16px 14px; }
	.sj-toc ol { columns: 1; }

	.sj-entry ul, .sj-entry ol { padding-left: 1.15em; }
	.sj-entry figure { margin: 1.3em 0; }

	.sj-share { gap: 8px; }
	.sj-share-label { width: 100%; margin-bottom: 2px; }
	.sj-share-btn { flex: 1 1 auto; text-align: center; padding: 10px 12px; }

	.sj-post-nav { flex-direction: column; gap: 12px; }
	.sj-comments .children { padding-left: 12px; }
	.sj-comments .comment-body { padding: 14px 14px; }
	.sj-breadcrumb { font-size: 12.5px; }
}

@media (max-width: 380px) {
	.sj-wrap { padding: 0 12px; }
	.sj-share-btn { font-size: 13px; padding: 9px 10px; }
}

/* Sửa: khi xếp dọc, các cột phải rộng bằng khung chứ không giãn theo nội dung
   (bảng dài trước đây kéo cả trang rộng ra và gây cuộn ngang trên điện thoại) */
@media (max-width: 991px) {
	.sj-layout { align-items: stretch; }
	.sj-layout > .sj-content,
	.sj-layout > .sj-sidebar { width: 100%; max-width: 100%; min-width: 0; }
}

/* Chặn cuộn ngang ngoài ý muốn ở mọi kích thước */
html, body { overflow-x: hidden; }
.sj-content, .sj-entry, .sj-card { min-width: 0; max-width: 100%; }