/*
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: 3.5.1
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%; }
/* =============================================================================
18. BỔ SUNG v2.4 – Nội dung bài viết dùng hết chiều ngang
Bỏ giới hạn 74 ký tự/dòng: nhiều bài có bảng, ảnh và mục lục 2 cột,
giới hạn cũ khiến chữ bị bó lại và chừa khoảng trống lớn bên phải.
========================================================================== */
@media (min-width: 992px) {
.sj-layout-full .sj-entry > *,
.sj-layout-full .sj-entry > .alignwide,
.sj-layout-full .sj-entry > .alignfull { max-width: 100%; }
/* Bài không có cột bên: khung nội dung rộng hơn, vẫn giữ khoảng thở hai bên */
.sj-layout-full > .sj-content { max-width: 100%; }
.sj-layout-full .sj-card { padding: 34px 40px 36px; }
/* Màn hình rất rộng: giới hạn nhẹ để dòng chữ không dài quá mức */
.sj-layout-full .sj-entry { max-width: 108ch; }
}
/* Mục lục do bài viết hoặc plugin chèn: canh cho hợp với theme */
.sj-entry .ez-toc, .sj-entry #toc_container,
.sj-entry .lwptoc, .sj-entry .wp-block-rank-math-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;
margin: 0 0 26px;
max-width: 100%;
}
.sj-entry .ez-toc ul, .sj-entry #toc_container ul,
.sj-entry .lwptoc ul, .sj-entry .wp-block-rank-math-toc ul {
columns: 2;
column-gap: 30px;
}
@media (max-width: 767px) {
.sj-entry .ez-toc ul, .sj-entry #toc_container ul,
.sj-entry .lwptoc ul, .sj-entry .wp-block-rank-math-toc ul { columns: 1; }
}
/* =============================================================================
19. BỔ SUNG v2.5 – Bỏ cột bên, nội dung chạy toàn chiều rộng
========================================================================== */
.sj-layout-full { display: block; }
.sj-layout-full > .sj-content { width: 100%; max-width: 100%; }
.sj-layout-full .sj-list { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 991px) {
.sj-layout-full .sj-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
.sj-layout-full .sj-list { grid-template-columns: 1fr; }
}
/* =============================================================================
20. BỔ SUNG v2.6 – Bảng trong bài viết
Đồng bộ với giao diện lúc soạn thảo: dòng tiêu đề nền cam, chữ trắng đậm.
Trước đây theme ghi đè nền cam bằng nền kem nên chữ trắng của bảng
gần như biến mất khi bài được xuất bản.
========================================================================== */
.sj-entry table {
width: 100%;
border-collapse: collapse;
background: #fff;
font-size: 15px;
line-height: 1.6;
}
/* Dòng tiêu đề */
.sj-entry thead th,
.sj-entry thead td,
.sj-entry tr:first-child > th {
background: var(--sj-accent);
color: #fff;
font-weight: 700;
text-align: left;
vertical-align: middle;
padding: 13px 16px;
border-color: rgba(255, 255, 255, .28);
}
.sj-entry thead th a,
.sj-entry thead th strong,
.sj-entry tr:first-child > th a,
.sj-entry tr:first-child > th strong { color: #fff; }
/* Ô dữ liệu */
.sj-entry tbody th,
.sj-entry td {
padding: 12px 16px;
border: 1px solid var(--sj-line);
vertical-align: top;
color: var(--sj-ink);
}
.sj-entry tbody th { background: var(--sj-mist); font-weight: 600; text-align: left; }
/* Dòng chẵn nhạt màu cho dễ dò mắt */
.sj-entry tbody tr:nth-child(even) > td { background: #fffaf7; }
.sj-entry tbody tr:hover > td { background: var(--sj-accent-soft); }
/* Bảng đặt trong khung cuộn ngang: bo góc cho gọn */
.sj-table-scroll { background: #fff; }
.sj-table-scroll table { border-radius: 0; }
/* Chữ đánh dấu (highlight) giữ đúng màu như lúc soạn thảo */
.sj-entry mark {
background: #fff59d;
color: var(--sj-ink);
padding: 1px 3px;
border-radius: 3px;
}
/* Chữ cái đầu đoạn (drop cap) của trình soạn thảo */
.sj-entry .has-drop-cap:not(:focus):first-letter {
float: left;
font-family: var(--sj-serif);
font-size: 3.2em;
line-height: .8;
margin: .08em .12em 0 0;
color: var(--sj-accent);
font-weight: 600;
}
@media (max-width: 767px) {
.sj-entry table { font-size: 14px; }
.sj-entry thead th, .sj-entry td, .sj-entry tbody th { padding: 10px 12px; }
}
/* =============================================================================
21. BỔ SUNG v2.7 – Cứu dòng tiêu đề bảng bị "chữ trắng trên nền trắng"
Nhiều bảng dán từ nơi khác không có : dòng tiêu đề nằm trong
và chữ được đặt màu trắng ngay trong nội dung. Ra ngoài website, nền trắng
khiến chữ biến mất. Đoạn dưới đây phủ nền cam cho các trường hợp đó.
========================================================================== */
/* Ưu tiên cao hơn mọi quy tắc chung của theme */
.sj-entry thead tr > th,
.sj-entry thead tr > td {
background: var(--sj-accent) !important;
color: #fff !important;
font-weight: 700;
}
/* Dòng được JS đánh dấu là tiêu đề (chữ quá nhạt so với nền) */
.sj-entry tr.sj-row-head > td,
.sj-entry tr.sj-row-head > th {
background: var(--sj-accent) !important;
color: #fff !important;
font-weight: 700;
}
.sj-entry tr.sj-row-head > td *,
.sj-entry tr.sj-row-head > th *,
.sj-entry thead tr > th *,
.sj-entry thead tr > td * {
color: #fff !important;
background: transparent !important;
}
/* Chữ trong ô dữ liệu luôn đủ đậm để đọc, kể cả khi bài đặt màu quá nhạt */
.sj-entry tbody tr:not(.sj-row-head) > td.sj-cell-fix,
.sj-entry tbody tr:not(.sj-row-head) > td.sj-cell-fix * { color: var(--sj-ink) !important; }
/* =============================================================================
22. BỔ SUNG v2.9 – Lưới an toàn cho hiệu ứng hiện dần
Nếu JavaScript không chạy (lỗi mạng, trình duyệt chặn), nội dung vẫn phải
hiển thị bình thường thay vì ẩn mất.
========================================================================== */
/* Chỉ ẩn khi JS đã sẵn sàng và thực sự theo dõi được khối đó */
.sj-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.sj-reveal.is-in { opacity: 1; transform: none; }
/* Khi in ấn hoặc khi người dùng tắt hiệu ứng: luôn hiện */
@media print, (prefers-reduced-motion: reduce) {
.sj-reveal { opacity: 1 !important; transform: none !important; }
}
/* =============================================================================
23. BỔ SUNG v3.0 – Ảnh trên điện thoại
Trước đây ảnh giữ nguyên kích thước gốc nên trên màn hình hẹp trông rất nhỏ,
nhất là ảnh cỡ medium (300px) do WordPress chèn vào bài.
========================================================================== */
@media (max-width: 767px) {
/* Ảnh trong hero và mục giới thiệu: chiếm trọn chiều ngang */
.sj-hero-media,
.sj-intro-media {
flex: 1 1 100%;
max-width: 100%;
}
.sj-hero-media img,
.sj-intro-media img {
width: 100%;
height: auto;
}
/* Ảnh trong bài viết: ảnh đủ lớn (JS đánh dấu .sj-img-wide) thì phóng hết khung.
Ảnh nhỏ như biểu tượng, chữ ký, logo thì giữ nguyên để không bị vỡ nét. */
.sj-entry img.sj-img-wide {
width: 100%;
height: auto;
}
/* Ảnh canh trái/phải/giữa bỏ float, xuống dòng riêng cho dễ đọc */
.sj-entry .alignleft,
.sj-entry .alignright,
.sj-entry .aligncenter,
.sj-entry figure.wp-block-image,
.sj-entry .wp-caption {
float: none;
width: 100% !important;
max-width: 100% !important;
margin: 0 0 16px;
}
.sj-entry figure img { margin-left: auto; margin-right: auto; }
/* Ảnh đại diện bài viết cao hơn một chút cho dễ nhìn */
.sj-featured img { max-height: 320px; }
/* Ảnh trong thẻ bài viết ở danh sách */
.sj-post-card .sj-thumb img { width: 100%; height: auto; }
}
/* Ảnh trong bài luôn giữ đúng tỉ lệ, không bị bóp méo */
.sj-entry img { height: auto; }
/* =============================================================================
24. BỔ SUNG v3.1 – Nhiều ảnh xếp hàng ngang
Trên máy tính 2–3 ảnh cạnh nhau nhìn đẹp, nhưng trên điện thoại mỗi ảnh chỉ
còn hơn 100px. Dưới đây xếp lại thành 2 cột trên máy tính bảng và 1 cột
trên điện thoại, áp dụng cho: thư viện ảnh kiểu cũ, khối Thư viện, khối Cột,
nhiều ảnh trong một đoạn văn và ảnh nằm trong ô bảng.
========================================================================== */
/* --- Máy tính bảng: 2 cột --------------------------------------------------- */
@media (max-width: 991px) {
.sj-entry .wp-block-gallery.has-nested-images,
.sj-entry .gallery {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 14px !important;
}
.sj-entry .wp-block-gallery.has-nested-images figure,
.sj-entry .gallery .gallery-item {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
float: none !important;
}
.sj-entry .wp-block-gallery.has-nested-images figure img,
.sj-entry .gallery .gallery-item img {
width: 100%;
height: auto;
}
}
/* --- Điện thoại: 1 cột, ảnh phủ hết chiều ngang ----------------------------- */
@media (max-width: 600px) {
.sj-entry .wp-block-gallery.has-nested-images,
.sj-entry .gallery {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
/* Khối Cột của trình soạn thảo */
.sj-entry .wp-block-columns {
display: block !important;
}
.sj-entry .wp-block-column {
width: 100% !important;
flex-basis: 100% !important;
margin-left: 0 !important;
margin-bottom: 16px;
}
/* Nhiều ảnh trong cùng một đoạn văn hoặc ô bảng (JS đánh dấu) */
.sj-entry .sj-imgs-row {
display: block !important;
text-align: center;
}
/* !important vì nhiều bài đặt sẵn width:48% ngay trong thẻ ảnh */
.sj-entry .sj-imgs-row img.sj-img-stack {
display: block;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin: 0 auto 12px !important;
float: none !important;
}
.sj-entry .sj-imgs-row br { display: none; }
/* Ảnh trong ô bảng: bảng vẫn cuộn ngang nên chỉ cần nới rộng ảnh */
.sj-entry td img { min-width: 140px; }
}
/* Chú thích ảnh trong thư viện luôn nằm dưới ảnh, không đè lên */
.sj-entry .wp-block-gallery figcaption {
position: static !important;
background: none !important;
color: var(--sj-soft) !important;
padding: 6px 0 0 !important;
font-size: 13.5px;
font-style: italic;
text-align: center;
}
/* =============================================================================
25. BỔ SUNG v3.2 – Hàng ảnh tự co giãn
Dùng cho mã ngắn [hang_anh] hoặc gắn class "sj-hang-anh" cho khối bất kỳ.
Máy tính: theo số cột đã chọn · Máy tính bảng: 2 cột · Điện thoại: 1 cột.
========================================================================== */
.sj-hang-anh {
--sj-cot: 3;
--sj-cot-tablet: 2;
--sj-cot-dt: 1;
--sj-gap: 16px;
display: grid;
grid-template-columns: repeat(var(--sj-cot), minmax(0, 1fr));
gap: var(--sj-gap);
margin: 1.6em 0;
align-items: start;
}
.sj-hang-anh > * { margin: 0 !important; min-width: 0; }
.sj-hang-anh img {
display: block;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
border-radius: var(--sj-radius-sm);
float: none !important;
}
.sj-hang-anh figure { width: 100% !important; max-width: 100% !important; }
.sj-hang-anh figcaption {
margin-top: 6px;
font-size: 13.5px;
font-style: italic;
color: var(--sj-soft);
text-align: center;
}
/* Ảnh trong hàng cao bằng nhau cho gọn mắt */
.sj-hang-anh.sj-cao-deu img {
aspect-ratio: 4 / 3;
object-fit: cover;
}
@media (max-width: 991px) {
.sj-hang-anh { grid-template-columns: repeat(var(--sj-cot-tablet), minmax(0, 1fr)); }
}
@media (max-width: 600px) {
.sj-hang-anh {
grid-template-columns: repeat(var(--sj-cot-dt), minmax(0, 1fr));
gap: 12px;
}
}
/* =============================================================================
26. BỔ SUNG v3.3 – Ảnh trong bài luôn đủ lớn trên điện thoại
Trước đây chỉ ảnh gốc từ 400px mới được phóng to, nên ảnh cỡ "medium" của
WordPress (300px) hay ảnh chèn tay vẫn nhỏ. Nay mặc định MỌI ảnh nội dung
đều phủ hết chiều ngang trên điện thoại, trừ ảnh nhỏ thật sự (dưới 150px)
đã được JavaScript đánh dấu là sj-img-small.
========================================================================== */
@media (max-width: 600px) {
.sj-entry img:not(.sj-img-small):not(.emoji):not(.wp-smiley):not(.avatar):not(.sj-img-stack) {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
}
/* Ảnh nhỏ vẫn canh giữa cho gọn */
.sj-entry img.sj-img-small {
display: block;
margin-left: auto;
margin-right: auto;
}
/* Ảnh trong thư viện, hàng ảnh và bảng đã có quy tắc riêng ở trên */
.sj-entry .sj-hang-anh img,
.sj-entry .wp-block-gallery img,
.sj-entry .gallery img { width: 100% !important; }
.sj-entry td img { width: auto !important; max-width: 100% !important; }
/* Ảnh đại diện và ảnh trong thẻ bài viết */
.sj-featured img,
.sj-post-card .sj-thumb img { width: 100% !important; }
}
/* =============================================================================
27. BỔ SUNG v3.4 – Đồng bộ hàng ảnh giữa các bài viết
Có bài chèn ảnh cách nhau bằng dấu cách, có bài dùng xuống dòng (
).
Kiểu thứ hai làm ảnh rơi xuống mỗi ảnh một dòng trên máy tính.
Nay mọi khối có từ 2 ảnh trở lên đều thành lưới đều nhau.
========================================================================== */
.sj-entry .sj-imgs-row {
display: grid !important;
grid-template-columns: repeat(var(--sj-cot, 2), minmax(0, 1fr));
gap: 16px;
margin: 1.6em 0;
align-items: start;
text-align: left;
}
/* Bỏ xuống dòng thừa giữa các ảnh */
.sj-entry .sj-imgs-row br { display: none !important; }
.sj-entry .sj-imgs-row > img,
.sj-entry .sj-imgs-row > a,
.sj-entry .sj-imgs-row > a > img {
display: block;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin: 0 !important;
float: none !important;
border-radius: var(--sj-radius-sm);
}
@media (max-width: 991px) {
.sj-entry .sj-imgs-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}
@media (max-width: 600px) {
.sj-entry .sj-imgs-row { grid-template-columns: 1fr; gap: 12px; }
}
/* =============================================================================
28. BỔ SUNG v3.5 – Đồng bộ kích thước ảnh trong cùng một hàng
Ảnh chụp ngang, dọc, vuông lẫn lộn nên chiều cao lệch nhau. Nay ảnh trong
cùng một hàng được cắt về cùng tỉ lệ, mép trên mép dưới thẳng hàng.
========================================================================== */
.sj-entry .sj-imgs-row > img,
.sj-entry .sj-imgs-row > a > img,
.sj-hang-anh img,
.sj-entry .wp-block-gallery.has-nested-images figure img,
.sj-entry .gallery .gallery-item img {
aspect-ratio: var(--sj-ty-le, 4 / 3);
object-fit: cover;
object-position: center center;
background: var(--sj-mist);
}
/* Muốn giữ nguyên tỉ lệ gốc: thêm class sj-anh-goc cho khối */
.sj-entry .sj-anh-goc img,
.sj-hang-anh.sj-anh-goc img {
aspect-ratio: auto !important;
object-fit: contain !important;
}
/* Ảnh đứng một mình vẫn giữ nguyên tỉ lệ gốc, không bị cắt */
.sj-entry > p > img:only-child,
.sj-entry > figure > img:only-child { aspect-ratio: auto; object-fit: contain; }