/*
Theme Name: SODO66
Theme URI: https://sodo.uno/
Author: SODO
Description: Theme riêng cho sodo.uno — giữ nhận diện đỏ trắng của SODO (logo, menu icon, nút đỏ, banner), cấu trúc chuẩn SEO: 1 H1, 1 mục lục tự sinh, schema JSON-LD @graph (Organization, WebSite, WebPage, Breadcrumb, BlogPosting, FAQ), trang chủ 3 cột, trang con có cột bài random, không jQuery.
Version: 1.0.3
Requires at least: 6.2
Requires PHP: 7.4
Text Domain: sd
*/

/* ============ Tokens ============ */
:root {
	--sd-red: #d30108;
	--sd-red-dk: #6a0008;
	--sd-red-50: #fff1f1;
	--sd-red-100: #fde0e0;
	--sd-ink: #1c1416;
	--sd-ink-2: #4a3f42;
	--sd-mute: #7a6d70;
	--sd-line: #ecdfe0;
	--sd-bg: #f7f3f3;
	--sd-card: #ffffff;
	--sd-gold: #ffcf5a;
	--sd-grad: linear-gradient(268deg, #6a0008, #d30108);
	--sd-shadow: 0 3px 6px -4px rgba(0, 0, 0, .16), 0 3px 10px rgba(80, 0, 4, .12);
	--sd-r: 14px;
	--sd-f-head: "Bai Jamjuree", "Lexend", system-ui, sans-serif;
	--sd-f-body: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
	--sd-f-ui: "Lexend", "Roboto", system-ui, sans-serif;
	--sd-wrap: 1240px;
}

/* ============ Base ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 16px; }
body { margin: 0; background: var(--sd-bg); color: var(--sd-ink); font: 400 16px/1.7 var(--sd-f-body); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--sd-red); text-decoration: none; }
a:hover { color: var(--sd-red-dk); }
:focus-visible { outline: 2px solid var(--sd-red); outline-offset: 2px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sd-skip { position: absolute; left: -9999px; top: 8px; z-index: 99; background: #fff; padding: 8px 14px; }
.sd-skip:focus { left: 8px; }
.sd-wrap { width: 100%; max-width: var(--sd-wrap); margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
.sd-main { min-height: 50vh; padding-bottom: 48px; }
.sd-ico { display: inline-block; vertical-align: middle; flex: none; }

/* ============ Nút ============ */
.sd-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	min-height: 38px; padding: 4px 20px; border: 0; border-radius: 8px;
	background: var(--sd-grad); color: #fff; font: 700 13.5px/1 var(--sd-f-ui); letter-spacing: .02em;
	box-shadow: 0 0 0 1px rgba(255, 207, 90, .55), 0 4px 14px rgba(211, 1, 8, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
	transition: transform .15s ease, box-shadow .15s ease; cursor: pointer;
}
.sd-btn:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(255, 207, 90, .9), 0 6px 18px rgba(211, 1, 8, .45), inset 0 1px 0 rgba(255, 255, 255, .3); }
.sd-btn--ink { background: var(--sd-ink); box-shadow: none; }
.sd-btn--block { display: flex; width: 100%; min-height: 44px; font-size: 15px; }

/* ============ Header ============ */
.sd-header { background: #fff; box-shadow: 0 1px 0 var(--sd-line); position: relative; z-index: 20; }
.sd-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 78px; }
.sd-logo { display: inline-flex; align-items: center; }
.sd-logo__img { width: auto; max-height: 52px; }
.sd-logo--text { font: 800 34px/1 var(--sd-f-head); color: var(--sd-red); letter-spacing: -.02em; }
.sd-cta { display: flex; gap: 10px; }

.sd-nav { border-top: 1px solid var(--sd-line); }
.sd-nav__list { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: 4px; }
.sd-nav__list > li { position: relative; }
.sd-nav__list > li > a {
	display: flex; flex-direction: column; align-items: center; gap: 4px;
	min-width: 104px; padding: 10px 8px 12px; color: var(--sd-ink); font: 700 14px/1.2 var(--sd-f-head); text-align: center;
	border-bottom: 3px solid transparent; transition: color .15s, border-color .15s;
}
.sd-nav__icon { width: 52px; height: 52px; object-fit: contain; transition: transform .2s ease; }
.sd-nav__icon--blank { display: block; border-radius: 50%; background: var(--sd-red-50); }
.sd-nav__list > li > a:hover .sd-nav__icon { transform: translateY(-3px) scale(1.04); }
.sd-nav__text { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.sd-nav__caret .sd-ico { width: 14px; height: 14px; }
.sd-nav__list > li > a:hover,
.sd-nav__list > .current-menu-item > a,
.sd-nav__list > .current-menu-ancestor > a,
.sd-nav__list > .current-menu-parent > a { color: var(--sd-red); border-bottom-color: var(--sd-red); background: none; }
.sd-nav .sub-menu {
	list-style: none; margin: 0; padding: 6px; position: absolute; left: 50%; top: 100%; transform: translate(-50%, 6px);
	min-width: 200px; background: #fff; border: 1px solid var(--sd-line); border-radius: 10px; box-shadow: var(--sd-shadow);
	opacity: 0; visibility: hidden; transition: opacity .15s, transform .15s; z-index: 30;
}
.sd-nav li:hover > .sub-menu, .sd-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.sd-nav .sub-menu a { display: block; padding: 9px 12px; border-radius: 6px; color: var(--sd-ink); font: 600 14px/1.3 var(--sd-f-ui); }
.sd-nav .sub-menu a:hover, .sd-nav .sub-menu .current-menu-item > a { background: var(--sd-red-50); color: var(--sd-red); }

/* Thanh đường dẫn */
.sd-crumbbar { background: #fff; border-bottom: 1px solid var(--sd-line); }
.sd-crumbs ol { list-style: none; margin: 0; padding: 10px 0; display: flex; flex-wrap: wrap; gap: 4px 0; font: 400 14px/1.4 var(--sd-f-ui); color: var(--sd-mute); }
.sd-crumbs li + li::before { content: "»"; margin: 0 8px; color: var(--sd-mute); }
.sd-crumbs a { color: var(--sd-red); }
.sd-crumbs [aria-current] span { color: var(--sd-ink-2); }

/* ============ Trang chủ ============ */
.sd-banner { padding-top: 18px; }
.sd-banner img { width: 100%; border-radius: var(--sd-r); box-shadow: var(--sd-shadow); }
.sd-title-line { display: flex; align-items: center; gap: 18px; margin: 28px 0 22px; color: var(--sd-red); font: 700 clamp(20px, 2.4vw, 28px)/1.3 var(--sd-f-head); text-transform: uppercase; text-align: center; text-wrap: balance; }
.sd-title-line::before, .sd-title-line::after { content: ""; flex: 1; height: 2px; background: linear-gradient(90deg, transparent, var(--sd-red-100) 30%, var(--sd-red)); min-width: 24px; }
.sd-title-line::after { transform: scaleX(-1); }
.sd-title-line span { flex: 0 1 auto; max-width: 900px; }

.sd-tri { display: grid; grid-template-columns: 250px minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.sd-tri__left, .sd-tri__right { position: sticky; top: 16px; }

/* ============ Khung nội dung ============ */
.sd-sheet { background: var(--sd-card); border-radius: var(--sd-r); box-shadow: var(--sd-shadow); padding: clamp(18px, 3vw, 36px); min-width: 0; }
.sd-sheet__head { margin-bottom: 18px; text-align: center; }
.sd-h1 { margin: 6px 0 10px; color: var(--sd-red); font: 700 clamp(24px, 3vw, 32px)/1.3 var(--sd-f-head); text-wrap: balance; }
.sd-meta { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; color: var(--sd-mute); font: 400 13.5px/1.5 var(--sd-f-ui); }
.sd-chip { display: inline-block; padding: 3px 12px; border-radius: 999px; background: var(--sd-red-50); color: var(--sd-red); font: 600 12.5px/1.6 var(--sd-f-ui); }
.sd-hero { margin: 0 0 22px; }
.sd-hero img { width: 100%; border-radius: 10px; }

.sd-solo { max-width: 900px; padding-top: 24px; }
.sd-solo--list { max-width: 1000px; }
.sd-duo { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; padding-top: 24px; }
.sd-duo .sd-sheet__head, .sd-duo .sd-meta { text-align: left; justify-content: flex-start; }
.sd-tri { padding-bottom: 8px; }

/* ============ Nội dung bài ============ */
.sd-prose { font-size: 16.5px; line-height: 1.75; color: var(--sd-ink); overflow-wrap: anywhere; }
.sd-prose > * + * { margin-top: 1em; }
.sd-prose p { margin: 0 0 1em; }
.sd-prose h2 { margin: 1.9em 0 .7em; padding-left: 14px; border-left: 4px solid var(--sd-red); color: var(--sd-red); font: 700 clamp(21px, 2.2vw, 25px)/1.35 var(--sd-f-head); }
.sd-prose h3 { margin: 1.5em 0 .5em; color: var(--sd-ink); font: 700 19px/1.4 var(--sd-f-head); }
.sd-prose h4 { margin: 1.3em 0 .4em; font: 700 17px/1.4 var(--sd-f-head); }
.sd-prose h2:first-child, .sd-prose h3:first-child { margin-top: 0; }
.sd-prose a { color: var(--sd-red); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(211, 1, 8, .3); text-underline-offset: 3px; }
.sd-prose a:hover { text-decoration-color: currentColor; }
.sd-prose strong, .sd-prose b { color: inherit; font-weight: 700; }
.sd-prose ul, .sd-prose ol { margin: 0 0 1em; padding-left: 0; list-style: none; }
.sd-prose li { position: relative; margin: .35em 0; padding-left: 26px; }
.sd-prose ul > li::before { content: ""; position: absolute; left: 6px; top: .72em; width: 7px; height: 7px; background: var(--sd-red); transform: rotate(45deg); }
.sd-prose ol { counter-reset: sd; }
.sd-prose ol > li { counter-increment: sd; padding-left: 34px; }
.sd-prose ol > li::before { content: counter(sd); position: absolute; left: 0; top: .2em; width: 24px; height: 24px; border-radius: 50%; background: var(--sd-red); color: #fff; font: 700 12.5px/24px var(--sd-f-ui); text-align: center; }
.sd-prose figure, .sd-prose .wp-caption { margin: 1.4em auto; max-width: 100% !important; }
.sd-prose figure img, .sd-prose .wp-caption img, .sd-prose p > img { width: 100%; border-radius: 10px; }
.sd-prose figcaption, .sd-prose .wp-caption-text { margin-top: 8px; color: var(--sd-mute); font: italic 400 14px/1.5 var(--sd-f-body); text-align: center; }
.sd-prose .wp-block-table, .sd-prose .sd-tablewrap { overflow-x: auto; margin: 1.4em 0; -webkit-overflow-scrolling: touch; }
.sd-prose table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; min-width: 520px; }
.sd-prose th, .sd-prose td { padding: 10px 12px; border: 1px solid var(--sd-line); text-align: left; vertical-align: top; }
.sd-prose thead th { background: var(--sd-red); font: 600 14.5px/1.4 var(--sd-f-ui); border-color: var(--sd-red); }
.sd-prose tbody tr:nth-child(even) { background: #fbf6f6; }
.sd-prose table:not(:has(thead)) tr:first-child td { background: var(--sd-red); color: #fff; border-color: var(--sd-red); font-family: var(--sd-f-ui); }
.sd-prose thead th { color: #fff; }
.sd-prose blockquote { margin: 1.4em 0; padding: 14px 18px; border-left: 4px solid var(--sd-red); background: var(--sd-red-50); border-radius: 0 10px 10px 0; }
.sd-prose hr { border: 0; height: 1px; background: var(--sd-line); margin: 2em 0; }
.sd-prose .m-a-box, .sd-prose .molongui-clearfix + .m-a-box { display: none !important; }

/* ============ Mục lục ============ */
.sd-toc__box { background: #fff; border: 1px solid var(--sd-line); border-top: 3px solid var(--sd-red); border-radius: 12px; box-shadow: var(--sd-shadow); }
.sd-toc__head { list-style: none; display: flex; align-items: center; gap: 8px; padding: 12px 14px; cursor: pointer; font: 700 15px/1.3 var(--sd-f-head); }
.sd-toc__head::-webkit-details-marker { display: none; }
.sd-toc__title { color: var(--sd-red); text-transform: uppercase; letter-spacing: .04em; }
.sd-toc__count { margin-left: auto; color: var(--sd-mute); font: 400 12.5px/1 var(--sd-f-ui); }
.sd-toc__head .sd-ico { transition: transform .2s; color: var(--sd-mute); }
.sd-toc__box[open] .sd-toc__head .sd-ico { transform: rotate(180deg); }
.sd-toc__body { position: relative; padding: 0 12px 12px 22px; max-height: calc(100vh - 140px); overflow: auto; }
.sd-toc__ruler { position: absolute; left: 12px; top: 2px; bottom: 14px; width: 2px; background: var(--sd-line); }
.sd-toc__fill { position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--sd-read, 0) * 100%); background: var(--sd-red); transition: height .1s linear; }
.sd-toc__list, .sd-toc__list ol { list-style: none; margin: 0; padding: 0; }
.sd-toc__list a { display: block; padding: 6px 8px; border-radius: 6px; color: var(--sd-ink-2); font: 400 14px/1.4 var(--sd-f-ui); }
.sd-toc__list a:hover { background: var(--sd-red-50); color: var(--sd-red); }
.sd-toc__list a[aria-current] { color: var(--sd-red); font-weight: 600; background: var(--sd-red-50); }
.sd-toc__list ol a { padding-left: 22px; font-size: 13.5px; color: var(--sd-mute); }
.sd-toc--inline { margin: 1.2em 0 1.6em; }
.sd-toc--inline .sd-toc__body { max-height: none; }

/* ============ Cột bài random ============ */
.sd-rail { background: #fff; border: 1px solid var(--sd-line); border-top: 3px solid var(--sd-red); border-radius: 12px; box-shadow: var(--sd-shadow); overflow: hidden; }
.sd-rail--sticky { position: sticky; top: 16px; }
.sd-rail__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--sd-line); }
.sd-rail__title { margin: 0; color: var(--sd-red); font: 700 15px/1.3 var(--sd-f-head); text-transform: uppercase; letter-spacing: .04em; }
.sd-rail__swap { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border: 1px solid var(--sd-red-100); border-radius: 999px; background: var(--sd-red-50); color: var(--sd-red); font: 600 12.5px/1 var(--sd-f-ui); cursor: pointer; }
.sd-rail__swap:hover { background: var(--sd-red); color: #fff; }
.sd-rail__swap .sd-ico { width: 14px; height: 14px; }
.sd-rail__list { list-style: none; margin: 0; padding: 6px; counter-reset: rail; }
.sd-rail__item { counter-increment: rail; }
.sd-rail__item a { position: relative; display: grid; grid-template-columns: 30px 1fr; gap: 2px 10px; padding: 10px 8px; border-radius: 8px; color: var(--sd-ink); border: 1px solid transparent; transition: background .15s, border-color .15s; }
.sd-rail__item a::before { content: counter(rail); grid-row: span 2; align-self: start; width: 30px; height: 30px; border-radius: 8px; background: var(--sd-grad); color: #fff; font: 700 14px/30px var(--sd-f-head); text-align: center; }
.sd-rail__item a:hover { background: var(--sd-red-50); border-color: var(--sd-red-100); }
.sd-rail__item a:hover .sd-rail__name { color: var(--sd-red); }
.sd-rail__meta { display: flex; gap: 8px; color: var(--sd-mute); font: 400 12px/1.4 var(--sd-f-ui); }
.sd-rail__meta span + span::before { content: "•"; margin-right: 8px; }
.sd-rail__name { font: 600 14.5px/1.4 var(--sd-f-head); }
.sd-rail.is-swapped .sd-rail__list { animation: sd-fade .35s ease; }
@keyframes sd-fade { from { opacity: .2; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ============ Danh sách bài ============ */
.sd-listhead { margin-bottom: 20px; text-align: center; }
.sd-listhead__desc { max-width: 780px; margin: 0 auto; text-align: left; color: var(--sd-ink-2); }
.sd-cards { display: grid; gap: 14px; }
.sd-card { position: relative; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; padding: 14px; background: #fff; border: 1px solid var(--sd-line); border-radius: 12px; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); transition: border-color .15s, box-shadow .15s, transform .15s; }
.sd-card:hover { border-color: var(--sd-red); box-shadow: var(--sd-shadow); transform: translateY(-2px); }
.sd-card__media img, .sd-card__ph { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px; background: var(--sd-red-50); }
.sd-card__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sd-card__cat { color: var(--sd-red); font: 600 12.5px/1.4 var(--sd-f-ui); text-transform: uppercase; letter-spacing: .04em; }
.sd-card__title { margin: 0; font: 700 18px/1.35 var(--sd-f-head); }
.sd-card__link { color: var(--sd-ink); }
.sd-card__link::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.sd-card:hover .sd-card__link { color: var(--sd-red); }
.sd-card__meta { margin: 0; color: var(--sd-mute); font: 400 13px/1.4 var(--sd-f-ui); }
.sd-card__sum { margin: 2px 0 0; color: var(--sd-ink-2); font-size: 14.5px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sd-pages { margin-top: 24px; }
.sd-pages .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.sd-pages .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid var(--sd-line); border-radius: 8px; background: #fff; color: var(--sd-ink); font: 600 14px/1 var(--sd-f-ui); }
.sd-pages .page-numbers.current, .sd-pages .page-numbers:hover { background: var(--sd-red); border-color: var(--sd-red); color: #fff; }
.sd-termbody { margin-top: 28px; }
.sd-empty { padding: 24px; background: #fff; border-radius: 12px; text-align: center; }

/* Bài trước / sau */
.sd-pnav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 32px; }
.sd-pnav__item { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--sd-line); border-radius: 12px; background: #fff; color: var(--sd-ink); transition: border-color .15s, box-shadow .15s; }
.sd-pnav__item--next { text-align: right; }
.sd-pnav__item:hover { border-color: var(--sd-red); box-shadow: var(--sd-shadow); color: var(--sd-red); }
.sd-pnav__item--empty { border: 0; background: none; }
.sd-pnav__label { color: var(--sd-red); font: 600 12.5px/1.3 var(--sd-f-ui); text-transform: uppercase; letter-spacing: .05em; }
.sd-pnav__title { font: 700 15.5px/1.4 var(--sd-f-head); }
.sd-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; padding: 0; }
.sd-tags a { display: inline-block; padding: 4px 12px; border: 1px solid var(--sd-line); border-radius: 999px; color: var(--sd-ink-2); font: 500 13px/1.6 var(--sd-f-ui); }

/* Tìm kiếm, 404 */
.sd-search { display: flex; gap: 8px; max-width: 520px; margin: 16px auto; }
.sd-search input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border: 1px solid var(--sd-line); border-radius: 8px; font: 400 15px var(--sd-f-body); }
.sd-search button { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 16px; border: 0; border-radius: 8px; background: var(--sd-grad); color: #fff; font: 700 14px var(--sd-f-ui); cursor: pointer; }
.sd-404 { text-align: center; }
.sd-404__code { margin: 0; color: var(--sd-red); font: 800 96px/1 var(--sd-f-head); opacity: .15; }

/* ============ Chân trang ============ */
.sd-foot { background: #fff; border-top: 3px solid var(--sd-red); font: 400 14.5px/1.65 var(--sd-f-body); color: var(--sd-ink-2); }
.sd-foot__grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1.4fr; gap: 32px; padding-top: 40px; padding-bottom: 28px; }
.sd-foot__about .sd-logo { margin-bottom: 14px; }
.sd-foot__about p { margin: 0; }
.sd-foot__title { margin: 4px 0 14px; color: var(--sd-ink); font: 700 15px/1.3 var(--sd-f-head); text-transform: uppercase; letter-spacing: .05em; }
.sd-foot__title::after { content: ""; display: block; width: 32px; height: 3px; margin-top: 8px; background: var(--sd-red); }
.sd-foot__links { list-style: none; margin: 0; padding: 0; }
.sd-foot__links li { border-bottom: 1px solid var(--sd-line); }
.sd-foot__links a { display: flex; align-items: center; gap: 8px; padding: 8px 0; color: var(--sd-ink-2); }
.sd-foot__links a::before { content: "›"; color: var(--sd-red); font-weight: 700; }
.sd-foot__links a:hover { color: var(--sd-red); padding-left: 4px; }
.sd-foot__btns { display: grid; gap: 10px; max-width: 220px; }
.sd-foot__info { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.sd-foot__info b { color: var(--sd-ink); }
.sd-foot__meta { padding-top: 18px; padding-bottom: 22px; border-top: 1px solid var(--sd-line); text-align: center; font-size: 14px; }
.sd-foot__meta p { margin: 0 0 8px; }
.sd-foot__kw b { color: var(--sd-ink); }
.sd-foot__sitemap { font-weight: 600; letter-spacing: .06em; }
.sd-foot__bar { padding: 12px 16px 14px; background: #0a0a0a; color: rgba(255, 255, 255, .55); font: 400 14px/1.6 var(--sd-f-ui); text-align: center; }
.sd-foot__bar b { color: #fff; }
.sd-top { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 40; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--sd-grad); color: #fff; box-shadow: 0 0 0 2px rgba(255, 207, 90, .6), 0 6px 16px rgba(211, 1, 8, .35); opacity: 0; visibility: hidden; transition: opacity .2s; }
.sd-top .sd-ico { transform: rotate(180deg); }
.sd-top.is-on { opacity: 1; visibility: visible; color: #fff; }

/* ============ Responsive ============ */
@media (max-width: 1180px) {
	.sd-tri { grid-template-columns: 220px minmax(0, 1fr); }
	.sd-tri__right { grid-column: 1 / -1; position: static; }
	.sd-nav__list > li > a { min-width: 92px; }
}
@media (max-width: 1023px) {
	.sd-tri, .sd-duo { grid-template-columns: minmax(0, 1fr); }
	.sd-tri__left { position: static; order: 0; }
	.sd-tri__main { order: 1; }
	.sd-tri__right { order: 2; }
	.sd-duo__side .sd-rail--sticky { position: static; }
	.sd-foot__grid { grid-template-columns: 1fr 1fr; }
	/* Menu icon: luôn 1 hàng, vuốt ngang */
	.sd-nav .sd-wrap { padding: 0; }
	.sd-nav__list { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 0 8px; scroll-snap-type: x proximity; }
	.sd-nav__list::-webkit-scrollbar { display: none; }
	.sd-nav__list > li > a { min-width: 84px; padding: 8px 6px 10px; font-size: 13px; scroll-snap-align: start; }
	.sd-nav__icon { width: 42px; height: 42px; }
	.sd-nav .sub-menu { display: contents; }
	.sd-nav .sub-menu li { display: flex; }
	.sd-nav .sub-menu a { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; min-width: 84px; padding: 8px 6px 10px; font: 700 13px/1.2 var(--sd-f-head); white-space: nowrap; border-radius: 0; }
	.sd-nav .sub-menu a::before { content: ""; width: 42px; height: 42px; border-radius: 50%; background: var(--sd-red-50) center / 22px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d30108' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 3'/%3E%3C/svg%3E"); }
	.sd-nav__caret { display: none; }
}
@media (max-width: 640px) {
	.sd-bar { min-height: 64px; gap: 10px; }
	.sd-logo__img { max-height: 40px; }
	.sd-cta { gap: 6px; }
	.sd-btn { min-height: 34px; padding: 4px 12px; font-size: 12.5px; }
	.sd-title-line { gap: 10px; margin: 20px 0 16px; }
	.sd-sheet { border-radius: 12px; }
	.sd-prose { font-size: 16px; }
	.sd-card { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 10px; }
	.sd-card__media img, .sd-card__ph { aspect-ratio: 1; }
	.sd-card__title { font-size: 16px; }
	.sd-card__sum { display: none; }
	.sd-pnav { grid-template-columns: 1fr; }
	.sd-pnav__item--next { text-align: left; }
	.sd-pnav__item--empty { display: none; }
	.sd-foot__grid { grid-template-columns: 1fr; gap: 24px; }
	.sd-foot__btns { max-width: none; grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ============ Khối tải app (trang chủ) ============ */
.sd-prose .sd-appdl { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 22px; margin: 26px 0 30px; padding: 18px; background: linear-gradient(135deg, #fff 0%, var(--sd-red-50) 100%); border: 1px solid var(--sd-line); border-top: 3px solid var(--sd-red); border-radius: var(--sd-r); box-shadow: var(--sd-shadow); }
.sd-prose .sd-appdl figure { margin: 0; }
.sd-prose .sd-appdl img { display: block; width: 100%; height: auto; border-radius: 10px; }
.sd-prose .sd-appdl figcaption { margin-top: 6px; font-size: 12.5px; }
.sd-appdl__body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sd-prose .sd-appdl__title { margin: 0; font: 700 19px/1.3 var(--sd-f-head); color: var(--sd-ink); }
.sd-prose .sd-appdl__note { margin: 0; color: var(--sd-ink-2); font-size: 14.5px; line-height: 1.55; }
.sd-appdl__btns { display: grid; grid-template-columns: 1fr; gap: 10px; }
.sd-prose a.sd-store { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 8px 14px; background: var(--sd-ink); color: #fff; border-radius: 10px; text-decoration: none; box-shadow: 0 0 0 1px rgba(255, 207, 90, .35), 0 6px 14px rgba(28, 20, 22, .18); transition: background .2s ease, transform .15s ease; }
.sd-prose a.sd-store:hover { background: var(--sd-grad); color: #fff; transform: translateY(-1px); }
.sd-store svg { flex: none; width: 26px; height: 26px; fill: currentColor; }
.sd-store span { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.sd-store small { font: 400 11px/1.2 var(--sd-f-ui); opacity: .8; letter-spacing: .02em; }
.sd-store b { font: 700 15px/1.25 var(--sd-f-head); white-space: nowrap; }
@media (max-width: 720px) {
	.sd-prose .sd-appdl { grid-template-columns: 1fr; gap: 14px; padding: 12px; margin: 20px 0 24px; }
	.sd-prose .sd-appdl__title { font-size: 17px; }
	.sd-prose a.sd-store { min-height: 50px; padding: 8px 10px; gap: 8px; }
	.sd-store svg { width: 22px; height: 22px; }
	.sd-store b { font-size: 14px; }
	.sd-appdl__btns { grid-template-columns: 1fr 1fr; }
}