/* ==========================================================================
   VssID Cẩm Nang – main.css
   Palette: xanh nhà nước (#0F4C97) + cam nhấn (#F28C1D)
   ========================================================================== */

:root {
	--c-primary: #0F4C97;
	--c-primary-dark: #082E5C;
	--c-primary-soft: #E8F0FA;
	--c-accent: #F28C1D;
	--c-accent-soft: #FFF3E2;
	--c-success: #1E9E5A;
	--c-success-soft: #E7F6EE;
	--c-danger: #D93025;
	--c-danger-soft: #FDECEA;
	--c-ink: #1B2430;
	--c-muted: #5B6B7F;
	--c-line: #E2E8F0;
	--c-surface: #FFFFFF;
	--c-canvas: #F4F7FB;
	--radius: 6px;
	--radius-sm: 4px;
	--shadow-sm: 0 1px 2px rgba(16, 32, 54, .06), 0 2px 6px rgba(16, 32, 54, .05);
	--shadow-md: 0 4px 16px rgba(16, 32, 54, .08);
	--wrap: 1100px;   /* khung ngoài, dùng cho MỌI trang */
	--read: 700px;    /* cột chữ để đọc, bằng đúng cột bài viết sau khi trừ cột bên */
	--gap: 24px;
	--header-h: 76px;
	--font: Roboto, system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	margin: 0;
	font-family: var(--font);
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--c-ink);
	background: var(--c-surface);
	-webkit-font-smoothing: antialiased;
}

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

a { color: var(--c-primary); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--c-primary-dark); }

h1, h2, h3, h4 { font-weight: 600; line-height: 1.32; color: var(--c-ink); margin: 0 0 .5em; letter-spacing: -.005em; }

:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; border-radius: 4px; }

.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:focus {
	position: fixed; top: 8px; left: 8px; z-index: 999; width: auto; height: auto; clip: auto;
	background: var(--c-surface); padding: 10px 16px; border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
}

.container { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }
/* Hai lớp dưới giữ lại cho tương thích, nay cùng một khung với .container.
   Khác biệt chỉ nằm ở cột CHỮ bên trong, xem --read. */
.container--narrow,
.container--wide { max-width: var(--wrap); }

.icon { flex: 0 0 auto; }
.icon--sm { width: 16px; height: 16px; }

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 12px 20px; border-radius: var(--radius); font-weight: 500; font-size: 1rem;
	text-decoration: none; border: 1px solid transparent; cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn--primary { background: var(--c-primary); color: #fff; }
.btn--primary:hover { background: var(--c-primary-dark); color: #fff; }
.btn--dark { background: var(--c-ink); color: #fff; }
.btn--dark:hover { background: #000; color: #fff; }
.btn--ghost { background: transparent; color: var(--c-primary); border-color: var(--c-line); }

.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; text-decoration: none; }
.link-arrow:hover { gap: 10px; }

/* ---------- Header ---------- */
.site-header {
	position: sticky; top: 0; z-index: 90;
	background: rgba(255, 255, 255, .97);
	backdrop-filter: saturate(150%) blur(10px);
	border-bottom: 1px solid var(--c-line);
}
.site-header__inner { display: flex; align-items: center; gap: 32px; min-height: var(--header-h); }

.site-brand__text { display: flex; flex-direction: column; text-decoration: none; line-height: 1.15; }
.site-brand__mark { font-size: 1.5rem; font-weight: 700; color: var(--c-primary); letter-spacing: -.01em; }
.site-brand__mark span { color: var(--c-accent); }
.site-brand__tag { font-size: .75rem; color: var(--c-muted); font-weight: 500; }
.custom-logo { max-height: 44px; width: auto; }

.nav-toggle {
	margin-left: auto; display: none; align-items: center; justify-content: center;
	width: 42px; height: 42px; border: 1px solid var(--c-line); border-radius: var(--radius-sm);
	background: var(--c-surface); color: var(--c-ink); cursor: pointer;
}
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

.site-nav { margin-left: auto; display: flex; align-items: center; }
.site-nav__list { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.site-nav__list li { position: relative; }
.site-nav__list a {
	display: block; padding: 10px 14px; border-radius: var(--radius-sm);
	font-size: .9375rem; font-weight: 500; color: var(--c-ink); text-decoration: none;
	white-space: nowrap;
}
.site-nav__list a:hover { background: var(--c-primary-soft); color: var(--c-primary); }
.site-nav__list .current-menu-item > a,
.site-nav__list .current-menu-parent > a { color: var(--c-primary); background: var(--c-primary-soft); }

/* dropdown */
.site-nav__list .sub-menu {
	position: absolute; top: calc(100% + 6px); left: 0; min-width: 240px;
	background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius);
	box-shadow: var(--shadow-md); padding: 8px; list-style: none; margin: 0;
	display: none; z-index: 20;
}
.site-nav__list li:hover > .sub-menu,
.site-nav__list li:focus-within > .sub-menu { display: block; }
.site-nav__list .sub-menu a { padding: 8px 10px; font-weight: 500; }

@media (max-width: 1024px) {
	.nav-toggle { display: inline-flex; }
	.site-nav {
		position: fixed; inset: var(--header-h) 0 auto 0;
		background: var(--c-surface); border-bottom: 1px solid var(--c-line);
		flex-direction: column; align-items: stretch; gap: 10px; padding: 16px 20px 22px;
		box-shadow: var(--shadow-md); display: none; max-height: calc(100vh - var(--header-h)); overflow-y: auto;
	}
	.site-nav.is-open { display: flex; }
	.site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.site-nav__list a { padding: 12px 10px; border-radius: 8px; white-space: normal; }
	.site-nav__list .sub-menu {
		position: static; display: block; border: 0; box-shadow: none; padding: 0 0 6px 14px; min-width: 0;
	}
}

/* ---------- Hero ---------- */
.hero {
	background:
		radial-gradient(1000px 420px at 12% -10%, rgba(242, 140, 29, .12), transparent 60%),
		linear-gradient(170deg, #F7FAFE 0%, #EDF3FB 100%);
	border-bottom: 1px solid var(--c-line);
	padding: 52px 0 56px;
}
.hero__inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: start; }
.hero__kicker {
	display: inline-block; margin: 0 0 14px; padding: 5px 13px; border-radius: 999px;
	background: var(--c-surface); border: 1px solid var(--c-line); color: var(--c-primary);
	font-size: .8125rem; font-weight: 600;
}
.hero__title { font-size: clamp(1.6rem, 3.3vw, 2.25rem); margin: 0 0 14px; letter-spacing: -.012em; line-height: 1.25; font-weight: 700; }
.hero__desc { font-size: 1.0625rem; color: var(--c-muted); margin: 0 0 24px; }
.hero__trust { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 10px; font-size: .9375rem; color: var(--c-ink); }
.hero__cta { margin: 0; }
.hero__cta .link-arrow { font-size: 1rem; }
.hero__trust li { display: flex; align-items: center; gap: 9px; }
.hero__trust .icon { color: var(--c-success); }
@media (max-width: 900px) {
	.hero { padding: 34px 0 38px; }
	.hero__inner { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------- App box ----------
   Gọn hết mức: tiêu đề, hai badge, một dòng thông tin, một dòng cảnh báo.
   Phải ghi đè quy tắc chung .entry-content h2, vì quy tắc đó thêm 48px lề
   trên và ép cỡ chữ lên 24px, làm khung phình ra gần gấp đôi.            */
.app-box {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	padding: 20px;
}
.app-box--compact { padding: 16px; }

.entry-content .app-box__title,
.app-box__title {
	margin: 0 0 14px;
	padding: 0;
	font-size: 1.125rem;
	line-height: 1.35;
	letter-spacing: -.005em;
}
.app-box__title span {
	font-size: .875rem; font-weight: 400; color: var(--c-muted);
}
.app-box__title span::before { content: ' · '; }
.app-box--compact .app-box__title { font-size: 1rem; margin-bottom: 12px; }
.app-box--compact .app-box__title span { display: block; }
.app-box--compact .app-box__title span::before { content: none; }

.app-box__meta {
	margin: 14px 0 0;
	font-size: .8125rem;
	color: var(--c-muted);
	line-height: 1.6;
}

.app-box__warn {
	display: flex; gap: 8px; align-items: flex-start;
	margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--c-line);
	font-size: .8125rem; color: var(--c-muted); line-height: 1.55;
}
.app-box--compact .app-box__warn { margin-top: 12px; }
.app-box__warn .icon { color: var(--c-accent); margin-top: 2px; flex-shrink: 0; }

/* ---------- Huy hiệu cửa hàng chính thức ----------
   Hai badge có tỷ lệ khác nhau nên phải khớp CHIỀU CAO, chiều rộng tự co.
   Ghi đè quy tắc ảnh chung (max-width:100%; height:auto) của theme.        */
.store-badges {
	--badge-h: 44px;
	display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
}
.store-badge {
	display: inline-flex; line-height: 0; border-radius: 8px;
	transition: opacity .15s ease, transform .15s ease;
}
.store-badge img {
	display: block;
	height: var(--badge-h);
	width: auto;
	max-width: none;
}
.store-badge:hover { opacity: .82; transform: translateY(-1px); }
.store-badge:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 3px; border-radius: 8px; }

.app-box--compact .store-badges { --badge-h: 38px; gap: 10px; }

@media (max-width: 480px) {
	.store-badges { --badge-h: 42px; gap: 10px; }
}

/* ---------- Sections ---------- */
.section { padding: 52px 0; }
.section--quick { background: var(--c-surface); }
.section--hubs { background: var(--c-canvas); border-block: 1px solid var(--c-line); }
.section__title { font-size: clamp(1.25rem, 2.2vw, 1.55rem); margin: 0 0 8px; }
.section__lead { color: var(--c-muted); margin: 0 0 26px; }
.section__empty { color: var(--c-muted); }

/* Quick grid */
.quick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.quick-card {
	position: relative; display: flex; flex-direction: column; gap: 6px;
	padding: 20px; border: 1px solid var(--c-line); border-radius: var(--radius);
	background: var(--c-surface); text-decoration: none; color: var(--c-ink);
	transition: border-color .15s, box-shadow .15s, transform .15s;
}
a.quick-card:hover { border-color: var(--c-primary); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.quick-card__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--c-primary-soft); color: var(--c-primary); margin-bottom: 6px; }
.quick-card__title { font-weight: 700; font-size: 1.0625rem; }
.quick-card__desc { font-size: .875rem; color: var(--c-muted); }
.quick-card--soon { opacity: .62; }
.quick-card__soon { position: absolute; top: 14px; right: 14px; font-size: .6875rem; font-weight: 700; color: var(--c-muted); background: var(--c-canvas); border: 1px solid var(--c-line); padding: 2px 8px; border-radius: 999px; }
@media (max-width: 900px) { .quick-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .quick-grid { grid-template-columns: 1fr; } }

/* Hub */
.hub + .hub { margin-top: 44px; }
.hub__head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.hub__title { font-size: 1.1875rem; margin: 0; }
.hub__title a { text-decoration: none; color: inherit; }
.hub__title a:hover { color: var(--c-primary); }
.hub__desc { color: var(--c-muted); font-size: .9375rem; margin: 0; flex: 1 1 260px; }
.hub__more { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; font-weight: 500; text-decoration: none; white-space: nowrap; }

/* ---------- Cards ---------- */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .card-grid, .card-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .card-grid, .card-grid--2, .card-grid--3 { grid-template-columns: 1fr; } }

.card {
	display: flex; flex-direction: column; background: var(--c-surface);
	border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden;
	transition: border-color .15s, box-shadow .15s, transform .15s;
}
.card:hover { border-color: #C9D8EC; box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card__media { display: block; aspect-ratio: 16 / 9; background: var(--c-canvas); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__placeholder { display: grid; place-items: center; width: 100%; height: 100%; color: #B6C6DA; }
.card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card__title { font-size: 1rem; margin: 0; line-height: 1.45; }
.card__title a { color: inherit; text-decoration: none; }
.card__title a:hover { color: var(--c-primary); }
.card__excerpt { font-size: .875rem; color: var(--c-muted); margin: 0; }
.card__meta { margin: auto 0 0; font-size: .75rem; color: var(--c-muted); display: flex; align-items: center; gap: 6px; }
.card__sep { opacity: .6; }

.pill {
	display: inline-flex; align-items: center; align-self: flex-start;
	font-size: .75rem; font-weight: 700; text-decoration: none;
	background: var(--c-primary-soft); color: var(--c-primary);
	padding: 3px 10px; border-radius: 999px;
}
.pill--ghost { background: var(--c-surface); border: 1px solid var(--c-line); color: var(--c-muted); font-weight: 600; }
.pill--ghost:hover { border-color: var(--c-primary); color: var(--c-primary); }
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }

/* ---------- Trust ---------- */
.section--trust { background: var(--c-surface); border-top: 1px solid var(--c-line); }
.trust { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.trust h2 { display: flex; align-items: center; gap: 10px; font-size: 1.1875rem; }
.trust h2 .icon { color: var(--c-primary); }
.trust p { color: var(--c-muted); margin: 0 0 12px; }
@media (max-width: 800px) { .trust { grid-template-columns: 1fr; gap: 24px; } }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs { font-size: .8125rem; color: var(--c-muted); padding: 18px 0 12px; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.breadcrumbs li + li::before { content: '/'; margin-right: 6px; opacity: .55; }
.breadcrumbs a { color: var(--c-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--c-primary); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--c-ink); font-weight: 600; }

/* ---------- Single ---------- */
.single__layout { display: grid; grid-template-columns: minmax(0, var(--read)) 320px; gap: 40px; align-items: start; padding-bottom: 20px; }
@media (max-width: 1024px) { .single__layout { grid-template-columns: 1fr; gap: 32px; } }

.entry-header { margin-bottom: 22px; }
.entry-title { font-size: clamp(1.5rem, 3vw, 2rem); margin: 10px 0 12px; line-height: 1.25; }
.entry-standfirst { font-size: 1.125rem; color: var(--c-muted); margin: 0 0 18px; }

.post-meta {
	display: flex; flex-wrap: wrap; align-items: center; gap: 22px;
	padding: 14px 0; border-block: 1px solid var(--c-line); font-size: .8125rem;
}
.post-meta__author { display: flex; align-items: center; gap: 11px; }
.post-meta__author > div { min-width: 0; }
.post-meta__avatar { width: 44px; height: 44px; object-fit: cover; border-radius: 999px; flex: 0 0 auto; }
.post-meta__label { display: block; color: var(--c-muted); font-size: .6875rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.post-meta__name { font-weight: 700; text-decoration: none; }
.post-meta__title { display: block; color: var(--c-muted); font-size: .75rem; }
.post-meta__item span:last-child, .post-meta__item time, .post-meta__item a { font-weight: 600; }

.entry-media { margin: 0 0 24px; }
.entry-media img { border-radius: var(--radius); width: 100%; }
.entry-media figcaption { font-size: .8125rem; font-style: italic; color: var(--c-muted); margin-top: 10px; text-align: center; line-height: 1.6; }

.editorial-note {
	display: flex; gap: 11px; align-items: flex-start;
	background: var(--c-primary-soft); border-radius: var(--radius-sm);
	padding: 13px 16px; font-size: .8125rem; color: #26456F; margin: 0 0 26px;
}
.editorial-note .icon { color: var(--c-primary); margin-top: 2px; }

/* ---------- Entry content typography ---------- */
.entry-content { font-size: 1.0625rem; }
.entry-content > * + * { margin-top: 1.15em; }
/* Khoảng cách quanh tiêu đề trong bài, đã giảm 40% so với bản đầu.
   Quy tắc "tiêu đề + phần tử liền sau" cần thiết vì khoảng trống phía dưới
   thực chất do lề trên của phần tử kế tiếp quyết định, không phải lề dưới
   của chính tiêu đề.                                                      */
.entry-content h2 {
	font-size: 1.3125rem; margin-top: 1.2em; padding-top: .2em; margin-bottom: .55em;
	scroll-margin-top: calc(var(--header-h) + 16px);
}
.entry-content h3 {
	font-size: 1.0625rem; margin-top: 1em; margin-bottom: .6em;
	scroll-margin-top: calc(var(--header-h) + 16px);
}
.entry-content h4 { font-size: 1rem; margin-top: .9em; margin-bottom: .6em; }

.entry-content p { margin: 0; }
.entry-content ul, .entry-content ol { margin: 0; padding-left: 1.4em; }
.entry-content li + li { margin-top: .4em; }
.entry-content strong { font-weight: 500; }
/* ---------- Căn đều hai bên cho phần chữ ----------
   Chỉ dòng cuối của mỗi đoạn là không bị kéo giãn, nên đoạn ngắn hay mục
   danh sách một dòng sẽ không đổi. Bảng và chú thích ảnh được loại trừ.   */
.entry-content p,
.entry-content li,
.entry-content blockquote p,
.entry-content dd {
	text-align: justify;
	text-justify: inter-word;
}

/* Loại trừ: ô bảng, chú thích ảnh, và các khối giao diện có bố cục riêng */
.entry-content th,
.entry-content td,
.entry-content th p,
.entry-content td p,
.entry-content th li,
.entry-content td li,
.entry-content figcaption,
.entry-content .calc p,
.entry-content .calc li,
.entry-content .app-box p,
.entry-content .store-badges,
.entry-content .toc a,
.entry-content .toc li {
	text-align: left;
	text-justify: auto;
}

/* ---------- Ảnh trong bài ----------
   Ảnh để trần: không viền, không nền, không đổ bóng, không đệm.
   Chỉ bo góc rất nhẹ cho khớp với phần còn lại của giao diện.            */
.entry-content img {
	border: 0;
	background: none;
	padding: 0;
	box-shadow: none;
	border-radius: var(--radius-sm);
}
.entry-content figure { margin: 1.8em 0; }
.entry-content figure img { display: block; height: auto; }

/* Chú thích ảnh: căn giữa, in nghiêng */
.entry-content figcaption {
	font-size: .8125rem;
	font-style: italic;
	color: var(--c-muted);
	text-align: center;
	margin-top: 10px;
	line-height: 1.6;
}

/* Các lớp căn chỉnh của WordPress */
.entry-content .aligncenter,
.entry-content figure.aligncenter,
.entry-content .wp-block-image.aligncenter {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.entry-content .aligncenter img,
.entry-content .wp-block-image.aligncenter img {
	margin-left: auto;
	margin-right: auto;
}

.entry-content .alignleft {
	float: left;
	margin: .4em 1.6em 1.2em 0;
	max-width: 50%;
}
.entry-content .alignright {
	float: right;
	margin: .4em 0 1.2em 1.6em;
	max-width: 50%;
}
.entry-content .alignnone {
	margin-left: 0;
	margin-right: 0;
}

/* Cột chữ đã bằng đúng bề ngang cho phép, nên ảnh rộng chỉ kéo hết cột */
.entry-content .alignwide,
.entry-content .alignfull {
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}
.entry-content .alignwide img,
.entry-content .alignfull img { width: 100%; }

/* Phần tử ngay sau tiêu đề không tự thêm lề trên nữa. Nếu để nguyên thì
   đoạn văn cho ra 7px còn bảng cho ra 31px, hai khoảng trống lệch nhau. */
.entry-content > h2 + *,
.entry-content > h3 + *,
.entry-content > h4 + * { margin-top: 0; }

/* Dọn dòng sau ảnh thả trôi */
.entry-content::after { content: ''; display: table; clear: both; }

/* ---------- Nhịp dọc thống nhất cho thân bài ----------
   Trước đây mỗi loại khối tự đặt lề riêng: đoạn văn và danh sách bị ép về 0,
   bảng và ảnh cộng thêm 1,8em, nên chỗ dính sát chỗ giãn rộng. Từ đây mọi khối
   con trực tiếp của thân bài dùng chung một khoảng --flow; chỉ tiêu đề có
   khoảng riêng, và khối ngay sau tiêu đề thì bám sát tiêu đề.
   Lặp lớp .entry-content để thắng các quy tắc lẻ phía trên mà không phải sửa
   chúng, vì các khối lồng bên trong (FAQ, callout, ô bảng) vẫn cần chúng.  */
.entry-content { --flow: 1.2rem; }
.entry-content.entry-content > * { margin-top: 0; margin-bottom: 0; }
.entry-content.entry-content > * + * { margin-top: var(--flow); }
.entry-content.entry-content > h2 { margin-top: 1.2em; margin-bottom: .55em; }
.entry-content.entry-content > h3 { margin-top: 1.4em; margin-bottom: .6em; }
.entry-content.entry-content > h4 { margin-top: 1.4em; margin-bottom: .6em; }
.entry-content.entry-content > :is(h2, h3, h4) + * { margin-top: 0; }

@media (max-width: 600px) {
	.entry-content .alignleft,
	.entry-content .alignright {
		float: none;
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
	}
}
.entry-content blockquote {
	margin: 1.8em 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--c-accent);
	color: var(--c-ink); font-size: 1.0625rem;
}
.entry-content blockquote p { margin: 0; }
.entry-content hr { border: 0; border-top: 1px solid var(--c-line); margin: 2.4em 0; }
.entry-content a { font-weight: 500; }

/* ordered steps */
.entry-content .steps { list-style: none; padding-left: 0; counter-reset: step; }
.entry-content .steps > li {
	counter-increment: step; position: relative; padding: 14px 18px 14px 56px;
	background: var(--c-canvas); border: 1px solid var(--c-line); border-radius: var(--radius-sm);
}
.entry-content .steps > li + li { margin-top: 10px; }
.entry-content .steps > li::before {
	content: counter(step); position: absolute; left: 16px; top: 14px;
	width: 26px; height: 26px; border-radius: 999px; background: var(--c-primary); color: #fff;
	display: grid; place-items: center; font-size: .8125rem; font-weight: 700;
}

/* tables */
.table-wrap { overflow: hidden auto; overflow-x: auto; margin: 1.8em 0; border: 1px solid var(--c-line); border-radius: var(--radius-sm); }
.entry-content table { width: 100%; border-collapse: collapse; font-size: .9375rem; margin: 0; }
/* WordPress mặc định kẻ viền quanh mọi ô bằng màu chữ và gạch đậm 3px dưới
   phần đầu bảng. Gỡ hết, chỉ giữ một đường kẻ ngang nhạt. */
.entry-content table th,
.entry-content table td,
.entry-content .wp-block-table th,
.entry-content .wp-block-table td {
	border: 0;
	border-bottom: 1px solid var(--c-line);
	padding: 11px 14px;
	text-align: left;
}
.entry-content .wp-block-table thead,
.entry-content .wp-block-table tfoot { border: 0; }
.entry-content thead th { background: var(--c-canvas); font-weight: 700; font-size: .875rem; }
.entry-content tbody tr:last-child td { border-bottom: 0; }
.entry-content tbody tr:nth-child(even) { background: #FAFCFE; }

/* quick answer */
.quick-answer {
	background: var(--c-accent-soft); border: 1px solid #F6D9AE; border-left: 4px solid var(--c-accent);
	border-radius: var(--radius-sm); padding: 16px 18px;
}
.quick-answer__label { font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #9A5B06; margin: 0 0 6px; }
.quick-answer > * + * { margin-top: .7em; }
.quick-answer p:last-child { margin-bottom: 0; }

/* callouts */
/* Mặc định xếp dọc. Chỉ bản có icon (shortcode) mới xếp ngang,
   vì bản viết bằng khối soạn thảo không có thẻ bọc nội dung. */
.callout {
	display: block; padding: 16px 18px; border-radius: var(--radius-sm);
	border: 1px solid var(--c-line); background: var(--c-canvas);
}
.callout--icon { display: flex; gap: 13px; }
.callout__icon { margin-top: 3px; flex-shrink: 0; }
.callout__title { font-weight: 700; margin: 0 0 6px; }
.callout > * + *,
.callout__body > * + * { margin-top: .7em; }
.callout > p:last-child,
.callout > ul:last-child,
.callout > ol:last-child,
.callout__body > p:last-child { margin-bottom: 0; }
.callout ul, .callout ol { margin: 0; padding-left: 1.3em; }
.callout--info { background: var(--c-primary-soft); border-color: #CADCF2; }
.callout--info .callout__icon { color: var(--c-primary); }
.callout--warning { background: var(--c-accent-soft); border-color: #F6D9AE; }
.callout--warning .callout__icon { color: #C97806; }
.callout--success { background: var(--c-success-soft); border-color: #BFE6CF; }
.callout--success .callout__icon { color: var(--c-success); }
.callout--danger { background: var(--c-danger-soft); border-color: #F5C6C2; }
.callout--danger .callout__icon { color: var(--c-danger); }

/* ---------- TOC ---------- */
.toc {
	background: var(--c-canvas); border: 1px solid var(--c-line); border-radius: var(--radius);
	padding: 4px 18px; margin: 26px 0 30px;
}
.toc summary {
	display: flex; align-items: center; gap: 9px; cursor: pointer; list-style: none;
	font-weight: 700; padding: 14px 0; color: var(--c-ink);
}
.toc summary::-webkit-details-marker { display: none; }
.toc summary .icon { color: var(--c-primary); }
.toc__list { margin: 0 0 16px; padding-left: 1.3em; font-size: .9375rem; }
.toc__list > li { margin-bottom: 6px; }
.toc__list a { text-decoration: none; }
.toc__list a:hover { text-decoration: underline; }
.toc__list a.is-active { font-weight: 700; color: var(--c-primary-dark); }
.toc__sub { list-style: circle; margin: 6px 0 0; padding-left: 1.2em; color: var(--c-muted); }
.toc__sub a { color: var(--c-muted); }

/* ---------- FAQ ---------- */
.faq { margin-top: 1.4em; }
.faq__item {
	border: 1px solid var(--c-line); border-radius: var(--radius-sm); background: var(--c-surface);
	padding: 0 14px; margin-top: 8px;
}
.faq__item[open] { border-color: #C9D8EC; }

.faq__q {
	display: flex; align-items: center; gap: 10px;
	cursor: pointer; list-style: none; padding: 11px 0; color: var(--c-ink);
}
.faq__q::-webkit-details-marker { display: none; }

/* Dấu hỏi đứng trước câu hỏi */
.faq__q::before {
	content: '?';
	flex: 0 0 auto; width: 20px; height: 20px;
	display: grid; place-items: center;
	border-radius: 999px; background: var(--c-primary-soft); color: var(--c-primary);
	font-size: .75rem; font-weight: 700; line-height: 1;
}

/* Ghi đè quy tắc chung .entry-content h3 vốn đẩy chữ tụt xuống 1,7em */
.entry-content .faq__h,
.faq__h {
	flex: 1;
	font-size: .9375rem; font-weight: 600; line-height: 1.45;
	margin: 0; padding: 0;
	scroll-margin-top: calc(var(--header-h) + 16px);
}

.faq__q::after {
	content: ''; flex: 0 0 auto; width: 8px; height: 8px;
	border-right: 2px solid var(--c-muted); border-bottom: 2px solid var(--c-muted);
	transform: rotate(45deg) translate(-2px, -2px); transition: transform .18s ease;
}
.faq__item[open] .faq__q::after { transform: rotate(225deg) translate(-2px, -2px); }
.faq__item[open] .faq__q::before { background: var(--c-primary); color: #fff; }

.faq__a { padding: 0 0 12px 30px; font-size: .9375rem; }
.faq__a > * + * { margin-top: .7em; }
.faq__a > *:first-child { margin-top: 0; }

/* ---------- Sources ---------- */
.sources { margin-top: 40px; padding: 20px 22px; background: var(--c-canvas); border: 1px solid var(--c-line); border-radius: var(--radius); }
.sources__title { display: flex; align-items: center; gap: 9px; font-size: 1.0625rem; margin: 0 0 12px; }
.sources__title .icon { color: var(--c-primary); }
.sources__list { margin: 0; padding-left: 1.3em; font-size: .9375rem; }
.sources__list li + li { margin-top: 6px; }
.sources__host { color: var(--c-muted); font-size: .8125rem; }

/* ---------- Tags, author box, related ---------- */
.entry-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 28px; font-size: .875rem; color: var(--c-muted); }

.author-box {
	display: flex; align-items: flex-start; gap: 20px; margin-top: 36px; padding: 22px;
	border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-surface);
	box-shadow: var(--shadow-sm);
}
/* Không có ba thuộc tính dưới đây thì flex kéo giãn ảnh thành hình bầu dục. */
.author-box__avatar {
	width: 88px; height: 88px; object-fit: cover;
	border-radius: 999px; flex: 0 0 auto; align-self: flex-start;
}
.author-box__eyebrow { font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--c-muted); }
.author-box__name { font-size: 1.0625rem; margin: 2px 0 4px; }
.author-box__name a { text-decoration: none; color: inherit; }
.author-box__title { color: var(--c-primary); font-weight: 600; font-size: .875rem; margin: 0 0 8px; }
.author-box p { font-size: .9375rem; color: var(--c-muted); margin: 0 0 8px; }
.author-box__exp { border-left: 3px solid var(--c-primary-soft); padding-left: 12px; }
.author-box__links { display: flex; gap: 14px; font-size: .875rem; }
@media (max-width: 560px) { .author-box { flex-direction: column; gap: 14px; } }

.related { margin-top: 44px; }
.related__title { font-size: 1.125rem; margin-bottom: 16px; }

/* ---------- Sidebar ---------- */
.sticky-stack { display: grid; gap: 20px; position: sticky; top: calc(var(--header-h) + 18px); }
@media (max-width: 1024px) { .sticky-stack { position: static; } }
.widget { padding: 18px; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-surface); }
.widget-title { display: flex; align-items: center; gap: 8px; font-size: .9375rem; margin: 0 0 12px; }
.widget--warn { background: var(--c-danger-soft); border-color: #F5C6C2; }
.widget--warn .widget-title { color: #A4241B; }
.widget--warn p { font-size: .875rem; margin: 0; color: #7A2A24; }
.link-list { list-style: none; margin: 0; padding: 0; font-size: .9375rem; }
.link-list li + li { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--c-line); }
.link-list a { text-decoration: none; font-weight: 500; }
.link-list a:hover { text-decoration: underline; }

/* ---------- Archive ---------- */
div.container.archive { padding-bottom: 28px; }
.archive-header { margin-bottom: 26px; }
.archive-title { font-size: clamp(1.4rem, 2.8vw, 1.85rem); margin: 8px 0 10px; }
.archive-desc { color: var(--c-muted); }
div.container.page { padding-bottom: 28px; }
/* Trang tĩnh không có cột bên nên dùng trọn chiều rộng khung, bằng header
   và chân trang, tránh để trống hẳn một bên phải. */
.page-meta { display: flex; align-items: center; gap: 7px; font-size: .8125rem; color: var(--c-muted); }
.section--copy { margin-top: 44px; padding-top: 30px; border-top: 1px solid var(--c-line); }
.section--copy .entry-content { margin-inline: 0; }

.search-big { display: flex; gap: 10px; margin-top: 18px; max-width: 520px; }
.search-big input {
	flex: 1; padding: 12px 16px; border: 1px solid var(--c-line); border-radius: var(--radius);
	font: inherit; font-size: .9375rem;
}
div.container.error-404 { padding: 40px 0 28px; }
.error-404 > .search-big { max-width: 520px; }
.error-404 .card-grid { margin-top: 36px; }

/* pagination */
.pagination { margin-top: 36px; }
.nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.page-numbers {
	display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 12px;
	border: 1px solid var(--c-line); border-radius: var(--radius-sm); text-decoration: none;
	font-weight: 600; font-size: .9375rem; color: var(--c-ink);
}
.page-numbers:hover { border-color: var(--c-primary); color: var(--c-primary); }
.page-numbers.current { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }

/* ---------- Footer ---------- */
.site-footer { background: var(--c-primary-dark); color: #C6D5EA; margin-top: 40px; font-size: .9375rem; }
.site-footer__grid { display: grid; grid-template-columns: var(--footer-cols, 1.7fr 1fr 1fr 1fr); gap: 36px; padding: 48px 20px 36px; }
/* Danh sách liên kết tự nhập trong Footer Settings */
.site-footer__html ul { list-style: none; margin: 0; padding: 0; }
.site-footer__html li + li { margin-top: 9px; }
.site-footer__html p { margin: 0 0 9px; }
.site-footer__html--inline ul { display: flex; flex-wrap: wrap; gap: 18px; }
.site-footer__html--inline li + li { margin-top: 0; }
.site-brand__mark--footer { display: inline-block; margin-bottom: 12px; color: #fff; }
.site-brand__mark--footer span { color: var(--c-accent); }
.site-footer p { margin: 0 0 12px; }
/* Dòng miễn trừ dùng đúng kiểu chữ của đoạn giới thiệu phía trên: cùng cỡ,
   cùng màu, không biểu tượng, không thụt lề. */
.site-footer__disclaimer { font-size: inherit; color: inherit; }
.site-footer a { color: #E4EBF5; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer__title { font-size: .8125rem; text-transform: uppercase; letter-spacing: .06em; color: #8FA9CC; margin: 0 0 14px; }
.site-footer__list { list-style: none; margin: 0; padding: 0; }
.site-footer__list li + li { margin-top: 9px; }
.site-footer__list a { display: inline-flex; align-items: center; gap: 5px; }
.site-footer__list .icon { opacity: .55; }
.site-footer__note { margin-top: 12px; font-size: .75rem; color: #8FA9CC; }
.site-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .12); }
.site-footer__bottom-inner { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; padding: 16px 20px; font-size: .8125rem; }
.site-footer__bottom p { margin: 0; color: #9FB6D4; }
.site-footer__legal-list { list-style: none; display: flex; flex-wrap: wrap; gap: 18px; margin: 0; padding: 0; }
@media (max-width: 980px) { .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 600px) { .site-footer__grid { grid-template-columns: 1fr; } }

/* ---------- To top ---------- */
.to-top {
	position: fixed; right: 18px; bottom: 18px; z-index: 80;
	width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--c-line);
	background: var(--c-surface); color: var(--c-primary); box-shadow: var(--shadow-md);
	display: grid; place-items: center; cursor: pointer;
}
.to-top .icon { transform: rotate(-90deg); }
.to-top[hidden] { display: none; }

/* ---------- Print ---------- */
@media print {
	.site-header, .site-footer, .single__aside, .to-top, .related, .toc { display: none !important; }
	body { font-size: 12pt; }
}

/* ==========================================================================
   Công cụ tính
   ========================================================================== */

.calc {
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	background: var(--c-surface);
	box-shadow: var(--shadow-sm);
	padding: 22px;
	margin: 2em 0;
}
.entry-content .calc > * + * { margin-top: 0; }

.calc__head { margin-bottom: 18px; }
.calc__title {
	display: flex; align-items: center; gap: 10px;
	font-size: 1.25rem; margin: 0 0 8px; scroll-margin-top: calc(var(--header-h) + 16px);
}
.entry-content .calc__title { margin-top: 0; padding-top: 0; }
.calc__title .icon { color: var(--c-primary); }
.calc__privacy {
	display: flex; align-items: flex-start; gap: 8px;
	font-size: .8125rem; color: #10703C; background: var(--c-success-soft);
	border-radius: var(--radius-sm); padding: 9px 12px; margin: 0;
}
.calc__privacy .icon { color: var(--c-success); margin-top: 2px; }

.calc__form { display: grid; gap: 16px; }
.calc__field { display: grid; gap: 6px; }
.calc__field > label { font-weight: 500; font-size: .9375rem; }
.calc__input { position: relative; display: flex; align-items: center; }
.calc__input input,
.calc__input select {
	width: 100%; font: inherit; font-size: 1rem;
	padding: 11px 14px; border: 1px solid var(--c-line); border-radius: var(--radius-sm);
	background: var(--c-surface); color: var(--c-ink); -webkit-appearance: none; appearance: none;
}
.calc__input select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235B6B7F' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px;
}
.calc__input input:focus, .calc__input select:focus {
	outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(15, 76, 151, .14);
}
.calc__input input[data-type="money"] { padding-right: 72px; font-variant-numeric: tabular-nums; }
.calc__suffix {
	position: absolute; right: 14px; font-size: .8125rem; color: var(--c-muted); pointer-events: none;
}
.calc__hint { font-size: .8125rem; color: var(--c-muted); margin: 0; }
.calc__error { font-size: .8125rem; color: var(--c-danger); font-weight: 600; margin: 0; }
.calc__field--error .calc__input input { border-color: var(--c-danger); }
.calc__field--error .calc__input input:focus { box-shadow: 0 0 0 3px rgba(217, 48, 37, .14); }

.calc__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }

.calc__result {
	margin-top: 20px; padding: 20px; border-radius: var(--radius);
	background: var(--c-primary-soft); border: 1px solid #CADCF2;
}
.calc__result--error { background: var(--c-danger-soft); border-color: #F5C6C2; color: #8A2A22; }
.calc__result--error p { margin: 0; font-weight: 600; }
.calc__total-label { font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #26456F; margin: 0 0 2px; }
.calc__total {
	font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 700; color: var(--c-primary-dark);
	margin: 0 0 16px; font-variant-numeric: tabular-nums; letter-spacing: -.005em;
}
.calc__table { width: 100%; border-collapse: collapse; font-size: .9375rem; margin: 0 0 14px; }
.calc__table th, .calc__table td { padding: 9px 0; border-bottom: 1px solid rgba(15, 76, 151, .14); text-align: left; }
.calc__table th { font-weight: 500; color: #26456F; }
.calc__table td { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc__table tr:last-child th, .calc__table tr:last-child td { border-bottom: 0; }
.calc__formula { font-size: .8125rem; color: #26456F; margin: 0 0 10px; }
.calc__notes { margin: 0; padding-left: 1.2em; font-size: .8125rem; color: #26456F; }
.calc__notes li + li { margin-top: 5px; }

.calc__footnote {
	margin: 16px 0 0; padding-top: 14px; border-top: 1px dashed var(--c-line);
	font-size: .8125rem; color: var(--c-muted);
}

@media (max-width: 560px) {
	.calc { padding: 18px; }
	.calc__actions .btn { flex: 1 1 auto; justify-content: center; }
	.calc__table th, .calc__table td { display: block; padding: 4px 0; }
	.calc__table th { border-bottom: 0; }
	.calc__table td { text-align: left; border-bottom: 1px solid rgba(15, 76, 151, .14); padding-bottom: 9px; }
}

/* ==========================================================================
   Biểu mẫu liên hệ
   ========================================================================== */

.cform { margin: 1.8em 0 0; }
.cform__notice { margin-bottom: 20px; }

.cform__form {
	display: grid; gap: 16px;
	padding: 22px;
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	background: var(--c-surface);
	box-shadow: var(--shadow-sm);
}

.cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 620px) { .cform__row { grid-template-columns: 1fr; } }

.cform__field { display: grid; gap: 6px; }
.cform__field > label { font-weight: 500; font-size: .9375rem; }
.cform__req { color: var(--c-danger); }

.cform__field input,
.cform__field select,
.cform__field textarea {
	width: 100%; font: inherit; font-size: 1rem;
	padding: 11px 14px;
	border: 1px solid var(--c-line); border-radius: var(--radius-sm);
	background: var(--c-surface); color: var(--c-ink);
	-webkit-appearance: none; appearance: none;
}
.cform__field textarea { resize: vertical; min-height: 150px; line-height: 1.6; }
.cform__field select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235B6B7F' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px;
}
.cform__field input:focus,
.cform__field select:focus,
.cform__field textarea:focus {
	outline: none; border-color: var(--c-primary);
	box-shadow: 0 0 0 3px rgba(15, 76, 151, .14);
}
/* Chỉ báo đỏ sau khi người dùng đã nhập rồi rời ô, không báo ngay khi tải trang */
.cform__field input:user-invalid,
.cform__field textarea:user-invalid { border-color: var(--c-danger); }

.cform__hint { font-size: .8125rem; color: var(--c-muted); margin: 0; }

.cform__actions {
	display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
	padding-top: 4px;
}
.cform__privacy {
	display: flex; align-items: center; gap: 7px;
	font-size: .8125rem; color: var(--c-muted); margin: 0;
}
.cform__privacy .icon { color: var(--c-success); flex-shrink: 0; }

/* Ô bẫy thư rác: ẩn với người, vẫn có trong mã để máy tự điền vào */
.cform__trap {
	position: absolute !important;
	width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}