/* =========================================================
   Tính năng bổ sung: vùng miền, thông tin nhanh, mục lục,
   thanh chia sẻ, chế độ tối.
   ========================================================= */

/* ---------- Khám phá theo vùng ---------- */
.regions-wrap { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 34px; align-items: center; background: var(--c-card); border-radius: 28px; padding: clamp(18px, 3vw, 32px); box-shadow: var(--shadow); }
.regions-map svg { width: 100%; height: auto; max-height: 560px; display: block; }
.rg { cursor: pointer; outline: none; }
.rg path { fill: #ffe3cc; stroke: #f2b48c; stroke-width: 1; stroke-linejoin: round; transition: fill .2s; }
.rg .isl, .rg .isl-group circle { fill: #f2b48c; transition: fill .2s; }
.rg .rg-label { font: 700 15px var(--font); fill: var(--c-text); pointer-events: none; }
.rg .isl-label { font: italic 600 9.5px var(--font); fill: var(--c-muted); pointer-events: none; }
.regions-map .sea { font: italic 500 12px var(--font); fill: var(--c-muted); opacity: .6; letter-spacing: .12em; }
.rg:hover path, .rg:focus-visible path { fill: #ffc9a3; }
.rg.is-active path { fill: var(--c-primary); stroke: var(--c-primary); }
.rg.is-active .isl, .rg.is-active .isl-group circle { fill: var(--c-primary); }
.rg.is-active .rg-label { fill: #fff; }
.rg-nam.is-active path { fill: var(--c-accent); stroke: var(--c-accent); }
.rg-nam.is-active .isl { fill: var(--c-accent); }
.region-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.region-tab { border: 0; font: inherit; font-weight: 700; font-size: .9rem; padding: 8px 20px; border-radius: 999px; background: var(--c-soft); color: var(--c-text); cursor: pointer; transition: background .15s, color .15s; }
.region-tab:hover { background: #ffd9bf; }
.region-tab.is-active { background: var(--c-primary); color: #fff; }
.region-panel { display: none; }
.region-panel.is-active { display: block; }
.region-count { margin: 0 0 12px; font-size: .86rem; color: var(--c-muted); }
.region-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.region-chips a { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--c-line); font-size: .88rem; font-weight: 600; color: var(--c-ink); background: var(--c-card); }
.region-chips a:hover { text-decoration: none; background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.region-chips small { font-size: .72rem; font-weight: 700; color: var(--c-primary); background: var(--c-soft); border-radius: 999px; padding: 1px 8px; }
.region-chips a:hover small { background: rgba(255,255,255,.25); color: #fff; }

/* ---------- Hộp thông tin nhanh ---------- */
.info-box { margin: 4px 0 22px; padding: 18px 22px; border-radius: 18px; background: var(--c-soft); border: 1px solid var(--c-line); }
.info-title { margin: 0 0 10px; font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--c-primary); }
.info-box dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 24px; }
.info-box dt { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--c-muted); }
.info-box dd { margin: 2px 0 0; font-weight: 600; color: var(--c-ink); }
.info-box a { color: inherit; border-bottom: 1.5px solid var(--c-sun); }
.read-time::before { content: '·'; margin-right: 12px; opacity: .6; }

/* ---------- Mục lục ---------- */
.toc { margin: 0 0 1.6em; padding: 6px 20px 14px; border-radius: 18px; background: var(--c-soft); border: 1px solid var(--c-line); font-size: .96rem; line-height: 1.5; }
.toc-head { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 0; border: 0; background: none; font: inherit; font-weight: 800; color: var(--c-ink); cursor: pointer; }
.toc-head::after { content: ''; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; margin-top: -3px; }
.toc.is-collapsed .toc-head::after { transform: rotate(-45deg); }
.toc.is-collapsed ol { display: none; }
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc li { margin: 0; padding: 4px 0; }
.toc li.lv2 { counter-increment: toc; }
.toc li.lv2 > a::before { content: counter(toc) '. '; color: var(--c-primary); font-weight: 700; }
.toc li.lv3 { padding-left: 22px; font-size: .92em; }
.toc a { color: var(--c-text); }
.toc a:hover { color: var(--c-primary); }
.entry-content h2[id], .entry-content h3[id] { scroll-margin-top: 90px; }

/* ---------- Thanh chia sẻ (điện thoại) ---------- */
.share-bar { display: none; }
@media (max-width: 720px) {
	.share-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: flex; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--c-nav); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--c-line); box-shadow: 0 -8px 24px rgba(0,0,0,.08); }
	.share-bar > * { flex: 1; text-align: center; border: 0; font: inherit; font-size: .84rem; font-weight: 700; padding: 10px 6px; border-radius: 999px; background: var(--c-soft); color: var(--c-ink); cursor: pointer; }
	.share-bar .share-native { background: var(--c-primary); color: #fff; }
	.share-bar .share-fb { background: #1877f2; color: #fff; }
	.share-bar a:hover { text-decoration: none; }
	.single .site-footer { padding-bottom: 64px; }
	.single .to-top { bottom: 76px; }
}

/* ---------- Nút đổi giao diện sáng/tối ---------- */
.topbar-right { display: inline-flex; align-items: center; gap: 12px; }
.theme-toggle { width: 30px; height: 30px; display: inline-grid; place-items: center; border: 0; border-radius: 50%; background: rgba(154,106,63,.12); color: inherit; cursor: pointer; }
.theme-toggle:hover { background: rgba(154,106,63,.25); }
.theme-toggle .ico { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; box-shadow: inset 5px -5px 0 0 currentColor; transform: rotate(-20deg); }

@media (max-width: 800px) {
	.regions-wrap { grid-template-columns: 1fr; }
	.regions-map { max-width: 300px; margin: 0 auto; }
}

/* ---------- Chế độ tối ---------- */
html[data-theme="dark"] {
	--c-bg: #14110f;
	--c-card: #1f1a17;
	--c-soft: #2b231e;
	--c-ink: #f5ede4;
	--c-text: #d8cec3;
	--c-muted: #9d9186;
	--c-line: #3a312b;
	--c-nav: rgba(31,26,23,.92);
	--c-banner: linear-gradient(135deg, #2e211a 0%, #3a2619 55%, #33291a 100%);
	--c-video: linear-gradient(135deg, #2b211b, #33271a 60%, #1d2a21);
	--shadow: 0 2px 6px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.25);
	--shadow-lg: 0 4px 10px rgba(0,0,0,.35), 0 24px 48px rgba(0,0,0,.35);
	color-scheme: dark;
}
html[data-theme="dark"] body, html[data-theme="dark"] body.custom-background { background-color: var(--c-bg) !important; background-image: none !important; color: var(--c-text); }
html[data-theme="dark"] .topbar { background: #221b17; color: #c9a77f; }
html[data-theme="dark"] .theme-toggle .ico { box-shadow: none; background: currentColor; transform: none; }
html[data-theme="dark"] .region-tab:hover { background: #4a3426; }
html[data-theme="dark"] .rg path { fill: #3a2c23; stroke: #5a4232; }
html[data-theme="dark"] .rg .isl, html[data-theme="dark"] .rg .isl-group circle { fill: #7a5a43; }
html[data-theme="dark"] .rg:hover path, html[data-theme="dark"] .rg:focus-visible path { fill: #4d3828; }
html[data-theme="dark"] .rg.is-active path { fill: var(--c-primary); stroke: var(--c-primary); }
html[data-theme="dark"] .rg.is-active .isl, html[data-theme="dark"] .rg.is-active .isl-group circle { fill: var(--c-primary); }
html[data-theme="dark"] .rg-nam.is-active path { fill: var(--c-accent); stroke: var(--c-accent); }
html[data-theme="dark"] .rg-nam.is-active .isl { fill: var(--c-accent); }
html[data-theme="dark"] .badge { background: rgba(18,161,80,.2); color: #6fdc9b; }
html[data-theme="dark"] .thumb-ph { background: radial-gradient(circle at 25% 25%, #6b5320, transparent 55%), linear-gradient(135deg, #5a3a28, #2f4a39); }
html[data-theme="dark"] .main-nav a:hover, html[data-theme="dark"] .main-nav .sub-menu a:hover { background: var(--c-soft); }
html[data-theme="dark"] .main-nav .current-menu-item > a, html[data-theme="dark"] .main-nav .current-menu-ancestor > a { background: var(--c-primary); color: #fff; }
html[data-theme="dark"] img { filter: brightness(.94); }