/*
 * Nội dung blog RIGPC: trang danh sách, thẻ bài, bài viết, kiểu chữ cho bài dài tiếng Việt, các khung (callout) dùng chung với Next.
 * Màu lấy từ app/globals.css và components/blog/*. Kiểu bên trong bài chỉ áp dưới .rigpc-wp để không đè CSS của plugin ngoài vùng bài;
 * ngay cả trong bài, ta chỉ đặt kiểu cho thẻ HTML thường gặp, không reset hàng loạt (khối của plugin Mục lục / Yoast FAQ giữ nguyên kiểu của chúng).
 */

html { overflow-x: clip; scroll-padding-top: 90px; }
@media (min-width: 1024px) { html { scroll-padding-top: 150px; } }
body.rigpc-blog { overflow-x: clip; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; }
/* Vầng sáng mờ nền trang (ba quả cầu cố định như trang /tin-tuc của Next) */
body.rigpc-blog::before {
	content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
	background:
		radial-gradient(420px circle at -4% 14%, rgba(0, 175, 255, .07), transparent 70%),
		radial-gradient(400px circle at 104% 42%, rgba(139, 92, 246, .07), transparent 70%),
		radial-gradient(300px circle at 36% 92%, rgba(232, 121, 249, .05), transparent 70%);
}
.rigpc-blog .wp-site-blocks { position: relative; z-index: 1; }
.rigpc-blog :focus-visible { outline: 2px solid #00E5FF; outline-offset: 2px; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.rb-khung { width: 100%; max-width: 1320px; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 640px) { .rb-khung { padding-inline: 24px; } }
@media (min-width: 1024px) { .rb-khung { padding-inline: 32px; } }
.rb-main { padding-bottom: 48px; }
.rb-main :is(h1, h2, h3, p, ul, ol, figure) { margin-block-start: 0; }

/* ── Đường dẫn ─────────────────────────────────────────────────────────── */
.rb-dd ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; margin: 0; padding: 6px 0; list-style: none; font-size: 13.5px; color: #7A93AD; }
.rb-dd a { display: inline-block; padding-block: 11px; color: #7A93AD; text-decoration: none; transition: color .15s; }
.rb-dd a:hover { color: #fff; }
.rb-dd [aria-current] { color: #E8F1FB; font-weight: 600; }
.rb-dd__cach { opacity: .4; }
.rb-dd li { min-width: 0; max-width: 100%; }
.rb-dd [aria-current] span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Hero (khung RGB chạy như hero-rgb-frame) ───────────────────────────── */
.rb-hero {
	position: relative; overflow: hidden; margin: 0 0 24px; padding: 40px 24px; border-radius: 16px; border: 1.5px solid transparent;
	display: flex; flex-direction: column; justify-content: center; min-height: 340px;
	background:
		linear-gradient(90deg, rgba(7, 21, 39, .95) 0%, rgba(7, 21, 39, .82) 35%, rgba(7, 21, 39, .5) 70%, rgba(7, 21, 39, .25) 100%) padding-box,
		var(--rb-hero-anh, url('/images/hero/hero-setup-gaming-rigpc.webp')) right center / cover no-repeat padding-box,
		linear-gradient(#071527, #071527) padding-box,
		linear-gradient(90deg, #00AFFF, #8B5CF6, #E879F9, #00AFFF) border-box;
	background-size: 100% 100%, cover, 100% 100%, 300% 100%;
	box-shadow: 0 0 42px rgba(0, 175, 255, .14), 0 0 60px rgba(139, 92, 246, .08);
	animation: rb-rgb 8s linear infinite;
}
.rb-hero::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, #00AFFF 0%, #8B5CF6 60%, #00AFFF 100%); z-index: 1; }
.rb-hero > * { position: relative; z-index: 2; max-width: 100%; }
@media (min-width: 640px) { .rb-hero { padding: 40px; } }
@media (min-width: 1024px) { .rb-hero > * { max-width: 62%; } .rb-hero { min-height: 340px; } }
.rb-hero--gon {
	min-height: 0; padding-block: 28px;
	background:
		radial-gradient(520px circle at 85% 0%, rgba(0, 175, 255, .16), transparent 70%) padding-box,
		radial-gradient(420px circle at 100% 100%, rgba(139, 92, 246, .14), transparent 70%) padding-box,
		linear-gradient(#071527, #071527) padding-box,
		linear-gradient(90deg, #00AFFF, #8B5CF6, #E879F9, #00AFFF) border-box;
	background-size: 100% 100%, 100% 100%, 100% 100%, 300% 100%;
	animation-name: rb-rgb-gon;
}
@keyframes rb-rgb { to { background-position: 0 0, right center, 0 0, 300% 0; } }
@keyframes rb-rgb-gon { to { background-position: 0 0, 0 0, 0 0, 300% 0; } }
@media (prefers-reduced-motion: reduce) { .rb-hero { animation: none; } .rb-gradient { animation: none !important; } }

.rb-eyebrow {
	display: inline-flex; align-items: center; gap: 8px; width: fit-content; margin: 0 0 16px; padding: 6px 14px; border-radius: 9999px;
	background: rgba(0, 175, 255, .10); border: 1px solid rgba(0, 175, 255, .4); color: #00E5FF; font-size: 12.5px; font-weight: 700; line-height: 1.5; text-transform: uppercase; letter-spacing: .08em;
}
.rb-eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 9999px; background: #00E5FF; box-shadow: 0 0 8px #00E5FF; }
.rb-h1 { margin: 0 0 12px; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.15; font-weight: 800; letter-spacing: -.02em; color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, .5); overflow-wrap: break-word; }
.rb-gradient { background: linear-gradient(90deg, #00AFFF, #8B5CF6, #00E5FF, #00AFFF); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: rb-doi-mau 6s linear infinite; }
@keyframes rb-doi-mau { to { background-position: 300% 0; } }
.rb-hero__mo-ta { margin: 0 0 20px; max-width: 520px; font-size: 15px; line-height: 1.65; color: #C8DCF0; }
.rb-hero__mo-ta:empty { display: none; }
.rb-nut-hang { margin-top: 20px; }

/* Ô tìm bài (khối Tìm kiếm của lõi) */
.rb-tim-bai { max-width: 560px; margin: 0; }
.rb-tim-bai .wp-block-search__inside-wrapper { display: flex; gap: 8px; padding: 4px; border-radius: 12px; background: #10243A; border: 1px solid rgba(0, 175, 255, .55); }
.rb-tim-bai .wp-block-search__inside-wrapper:focus-within { border-color: rgba(0, 175, 255, .6); box-shadow: 0 0 0 2px rgba(0, 175, 255, .3); }
.rb-tim-bai .wp-block-search__input { flex: 1; min-width: 0; min-height: 44px; padding: 8px 12px; border: 0; background: transparent; color: #fff; font: inherit; font-size: 16px; outline: none; }
.rb-tim-bai .wp-block-search__input::placeholder { color: #93A9C0; opacity: 1; }
.rb-tim-bai .wp-block-search__button { flex-shrink: 0; min-height: 44px; margin: 0; padding: 0 20px; border: 0; border-radius: 9px; background: linear-gradient(135deg, #007BC2, #00669F); color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.rb-tim-bai .wp-block-search__button:hover { filter: brightness(1.12); }

/* Nút lõi dùng chung */
.wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; text-decoration: none; transition: filter .15s, transform .15s; background: linear-gradient(135deg, #007BC2, #00669F); }
.wp-block-button__link:hover { filter: brightness(1.12); transform: translateY(-1px); color: #fff; }
.wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; color: #00AFFF; border: 1.5px solid rgba(0, 175, 255, .55); }
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: rgba(0, 175, 255, .12); color: #00E5FF; }
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── Chip chủ đề ───────────────────────────────────────────────────────── */
.rb-chu-de { margin: 0 -16px 24px; padding-inline: 16px; overflow-x: auto; scrollbar-width: none; }
.rb-chu-de::-webkit-scrollbar { display: none; }
.rb-chu-de ul { display: flex; gap: 8px; margin: 0; padding: 0 0 4px; list-style: none; width: max-content; }
@media (min-width: 1024px) { .rb-chu-de { margin-inline: 0; padding-inline: 0; overflow: visible; } .rb-chu-de ul { flex-wrap: wrap; width: auto; } }
.rb-chip {
	display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 16px; border-radius: 9999px; white-space: nowrap;
	background: rgba(255, 255, 255, .04); border: 1px solid rgba(148, 163, 184, .22); color: #A9BDD2; font-size: 14px; font-weight: 600; text-decoration: none; transition: all .15s;
}
.rb-chip span { font-size: 12.5px; font-weight: 500; opacity: .75; }
.rb-chip:hover { border-color: rgba(0, 175, 255, .45); color: #fff; }
.rb-chip.is-dang { background: rgba(0, 175, 255, .15); border-color: rgba(0, 175, 255, .45); color: #4CC4FF; }

/* ── Lưới thẻ bài ──────────────────────────────────────────────────────── */
.rb-luoi { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .rb-luoi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .rb-luoi { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.rb-luoi > li { display: flex; margin: 0; }
.rb-luoi > li > .rb-the { width: 100%; }
.rb-the {
	display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: 12px; background: #0B1D33; border: 1px solid #1A3050; transition: border-color .15s, transform .15s, box-shadow .15s;
}
.rb-the:hover { border-color: rgba(0, 175, 255, .4); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0, 175, 255, .1); }
@media (prefers-reduced-motion: reduce) { .rb-the:hover { transform: none; } }
.rb-the__anh { display: block; position: relative; aspect-ratio: 16 / 9; margin: 0; overflow: hidden; background: #10243A; }
.rb-the__anh a, .rb-the__anh img { display: block; width: 100%; height: 100%; }
.rb-the__anh img { object-fit: cover; object-position: center 30%; transition: transform .4s; }
.rb-the:hover .rb-the__anh img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .rb-the:hover .rb-the__anh img { transform: none; } }
.rb-the__anh--trong { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #0B1D33, #151B3D); }
.rb-anh-trong { font-size: 34px; font-weight: 800; letter-spacing: -.015em; color: #fff; opacity: .9; }
.rb-anh-trong b { color: #00AFFF; font-weight: 800; }
.rb-the__than { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 16px; }
.rb-nhan, .rb-nhan a, a.rb-nhan { text-decoration: none; }
.rb-nhan { margin: 0; }
.rb-nhan a, a.rb-nhan { display: inline-block; align-self: flex-start; padding: 2px 8px; border-radius: 4px; background: rgba(0, 175, 255, .12); color: #4CC4FF; font-size: 12.5px; font-weight: 700; line-height: 1.6; text-transform: uppercase; letter-spacing: .06em; }
.rb-nhan a:hover, a.rb-nhan:hover { background: rgba(0, 175, 255, .22); color: #fff; }
.rb-nhan a, a.rb-nhan { position: relative; }
/* Vùng bấm mở rộng lên 44px cao mà chip vẫn gọn trên mắt */
.rb-nhan a::after, a.rb-nhan::after { content: ''; position: absolute; inset: -10px -4px; }
.rb-nhan--lon a { font-size: 13px; padding: 4px 12px; border-radius: 9999px; }
.rb-the__tieu-de { margin: 0 !important; font-family: var(--wp--preset--font-family--archivo); font-size: 18px !important; font-weight: 700; line-height: 1.4; letter-spacing: -.01em; color: #F2F7FC; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rb-the__tieu-de a { color: inherit; text-decoration: none; }
.rb-the__tieu-de a:hover { color: #00E5FF; }
.rb-the__tom-tat { margin: 0 !important; font-size: 14.5px; line-height: 1.65; color: #9FB3C8; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rb-the__tom-tat p { margin: 0; }
.rb-the .rb-tt { margin-top: auto; padding-top: 4px; }

.rb-tt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 13.5px; color: #8FA9C4; }
.rb-tt__muc, .rb-tt__tac-gia { display: inline-flex; align-items: center; gap: 6px; }
.rb-tt__avt { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; border-radius: 9999px; background: linear-gradient(135deg, #007BC2, #6D3FE0); color: #fff; font-size: 12.5px; font-weight: 700; }
.rb-tt__ten { font-weight: 500; color: #B7C9DC; }
.rb-tt__cap-nhat { font-weight: 500; color: #4ADE80; }
.rb-ds-bai { margin-bottom: 8px; }

/* Phân trang */
.rb-phan-trang { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 32px; }
.rb-phan-trang :is(a, .page-numbers) {
	display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; padding: 8px 14px; border-radius: 8px;
	background: #0B1D33; border: 1px solid #1A3352; color: #D8E7FF; font-size: 15px; font-weight: 600; text-decoration: none; transition: border-color .15s, color .15s;
}
.rb-phan-trang a:hover { border-color: rgba(0, 175, 255, .55); color: #fff; }
.rb-phan-trang .page-numbers.current { background: linear-gradient(135deg, #007BC2, #00669F); border-color: transparent; color: #fff; }
.rb-phan-trang .page-numbers.dots { border-color: transparent; background: none; }
.wp-block-query-pagination-numbers { display: flex; flex-wrap: wrap; gap: 8px; }
.rb-rong { padding: 32px 0; color: #9FB3C8; }

/* ── Bài viết ─────────────────────────────────────────────────────────── */
.rb-bai__dau { padding: 8px 0 20px; }
.rb-bai__dau > * + * { margin-top: 14px; }
.rb-h1--bai { margin: 0; }
.rb-bai__tom-tat { margin: 0; max-width: 760px; font-size: 17px; line-height: 1.7; color: #B0C4D9; }
.rb-bai__tom-tat p { margin: 0; }
/* Ảnh đại diện: khung theo nhóm tỷ lệ (inc/khoi-bai.php). Rộng tối đa = cột nội dung 820px, cao tối đa 440px trên desktop. */
.rb-bai__anh { position: relative; overflow: hidden; width: 100%; max-width: 820px; aspect-ratio: 16 / 9; margin: 8px 0 28px; border-radius: 16px; border: 1px solid #1A3050; background: #0B1D33; }
.rb-bai__anh img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.rb-bai__anh--doc img { object-fit: contain; }
/* 11/11/2026: ảnh chụp 4:3/3:2 ⇒ khung 3:2 phủ kín (không dải mờ hai bên). */
.rb-bai__anh--ngang { aspect-ratio: 3 / 2; }
.rb-bai__anh--doc::before, .rb-bai__anh--rong::before {
	content: ''; position: absolute; inset: -24px; z-index: 0; background: var(--rb-anh-nen, none) center / cover no-repeat; filter: blur(22px) brightness(.45) saturate(1.1);
}
.rb-bai__anh--rong { width: 100%; aspect-ratio: var(--rb-ti-le, 2.333); }
@media (max-width: 639px) {
	/* Mobile: tràn hết bề ngang màn hình (16:9 ⇒ ~211–220px cao ở 375–390px), mọi nhóm cùng một khung. */
	.rb-bai__anh, .rb-bai__anh--rong { width: auto; max-width: none; aspect-ratio: 16 / 9; margin-inline: -16px; border-radius: 0; border-inline: 0; }
	.rb-bai__anh--rong img { object-fit: contain; }
}
.rb-bai-luoi { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
@media (min-width: 1024px) { .rb-bai-luoi { grid-template-columns: minmax(0, 1fr) 340px; column-gap: 40px; } }
.rb-bai-chinh { min-width: 0; max-width: 820px; }
.rb-bai-ben { display: none; }
@media (min-width: 1024px) {
	.rb-bai-ben { display: flex; flex-direction: column; gap: 20px; position: sticky; top: calc(150px + var(--wp-admin--admin-bar--height, 0px)); max-height: calc(100vh - 170px); overflow-y: auto; }
	.rb-cta--cuoi { display: none; }
}
.rb-the-bai { margin: 28px 0 0; font-size: 14px; color: #8FA9C4; }
.rb-the-bai a { display: inline-block; margin: 0 4px 6px 0; padding: 4px 12px; border-radius: 9999px; border: 1px solid rgba(148, 163, 184, .25); color: #A9BDD2; text-decoration: none; }
.rb-the-bai a:hover { color: #4CC4FF; border-color: rgba(0, 175, 255, .45); }

.rb-muc-luc { padding: 16px; border-radius: 12px; background: rgba(0, 175, 255, .04); border: 1px solid #1A3050; }
.rb-muc-luc__tieu-de { margin: 0 0 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #4CC4FF; }
.rb-muc-luc ol { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.rb-muc-luc a { display: block; padding: 6px 0 6px 12px; border-left: 2px solid #1A3050; color: #9FB3C8; font-size: 14px; line-height: 1.5; text-decoration: none; }
.rb-muc-luc a:hover { color: #fff; border-left-color: #00AFFF; }
.rb-muc-luc__buoc a { padding-left: 24px; font-size: 13.5px; }

.rb-cta { position: relative; overflow: hidden; padding: 20px; border-radius: 12px; background: linear-gradient(135deg, rgba(0, 175, 255, .08), rgba(139, 92, 246, .06)); border: 1px solid rgba(0, 175, 255, .22); }
.rb-cta::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, #00AFFF, #8B5CF6); }
.rb-cta__tieu-de { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: #fff; }
.rb-cta__mo-ta { margin: 0 0 14px; font-size: 14px; color: #9FB3C8; }
.rb-cta__nut { display: flex; flex-direction: column; gap: 8px; }
.rb-nut { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 16px; border-radius: 12px; color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; transition: filter .15s; }
.rb-nut:hover { filter: brightness(1.12); color: #fff; }
.rb-nut--xanh { background: linear-gradient(135deg, #007BC2, #00669F); }
.rb-nut--cam { background: linear-gradient(135deg, #C2410C, #9A3412); }
.rb-cta__lien-ket { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; color: #4CC4FF; font-size: 14px; font-weight: 600; text-decoration: none; }
.rb-cta__lien-ket:hover { text-decoration: underline; }
.rb-cta--thu-mua { margin: 0 0 24px; } /* C1 12/11/2026: khối thu mua trang đầu Tin tức như production */
.rb-cta--cuoi { margin-top: 36px; }
@media (min-width: 640px) { .rb-cta--cuoi .rb-cta__nut { flex-direction: row; } .rb-cta--cuoi .rb-nut { flex: 1; } }

.rb-lien-quan { margin-top: 56px; }
.rb-h2 { position: relative; margin: 0 0 20px; padding-bottom: 14px; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.25; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.rb-h2::after { content: ''; position: absolute; left: 0; bottom: 0; width: 48px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #00AFFF, #8B5CF6); }
.rb-lien-quan__ve { margin: 20px 0 0; }
.rb-lien-quan__ve a { display: inline-flex; align-items: center; min-height: 44px; color: #4CC4FF; font-weight: 600; text-decoration: none; }
.rb-lien-quan__ve a:hover { text-decoration: underline; }
.rb-trang-don { max-width: 820px; padding: 16px 0 24px; }
.rb-luoi--tho > .rb-the { height: 100%; }

/* ═══ Kiểu chữ thân bài ═══════════════════════════════════════════════════ */
.rigpc-wp { color: #C8D8E8; font-size: 17px; line-height: 1.8; overflow-wrap: break-word; }
@media (min-width: 1024px) { .rigpc-wp { font-size: 17.5px; } }
.rigpc-wp > :first-child { margin-top: 0; }
.rigpc-wp > :last-child { margin-bottom: 0; }
.rigpc-wp p { margin: 0 0 1.15em; }
.rigpc-wp strong, .rigpc-wp b { color: #fff; font-weight: 700; }
.rigpc-wp a { color: #4CC4FF; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .15s; }
.rigpc-wp a:hover { color: #00E5FF; }
.rigpc-wp :is(h2, h3, h4, h5, h6) { font-family: var(--wp--preset--font-family--archivo); letter-spacing: -.015em; scroll-margin-top: 90px; color: #fff; }
@media (min-width: 1024px) { .rigpc-wp :is(h2, h3, h4, h5, h6) { scroll-margin-top: 150px; } }
.rigpc-wp h2 { position: relative; margin: 2.2rem 0 1rem; padding-bottom: 14px; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.25; font-weight: 800; letter-spacing: -.02em; }
.rigpc-wp h2::after { content: ''; position: absolute; left: 0; bottom: 0; width: 48px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #00AFFF, #8B5CF6); }
.rigpc-wp h3 { margin: 1.8rem 0 .7rem; font-size: 20px; line-height: 1.4; font-weight: 700; color: #F2F7FC; }
.rigpc-wp h4 { margin: 1.5rem 0 .5rem; font-size: 18px; font-weight: 700; color: #C4D8EF; }
.rigpc-wp h5 { margin: 1.25rem 0 .4rem; font-size: 16px; font-weight: 700; color: #B0C8E0; }
.rigpc-wp h6 { margin: 1.25rem 0 .4rem; font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #8FB0CE; }
.rigpc-wp :is(ul, ol) { margin: 0 0 1.2em; padding-left: 1.5em; }
.rigpc-wp li { margin: 0 0 .5em; padding-left: .2em; }
.rigpc-wp li::marker { color: #00AFFF; }
.rigpc-wp li > :is(ul, ol) { margin: .5em 0 0; }
.rigpc-wp img { max-width: 100%; height: auto; border-radius: 12px; }
.rigpc-wp figure { margin: 1.5rem 0; max-width: 100%; }
.rigpc-wp figcaption, .rigpc-wp .wp-element-caption { margin-top: .6rem; color: #8FA9C4; font-size: 14px; line-height: 1.6; text-align: center; }
.rigpc-wp .aligncenter { margin-inline: auto; display: block; }
.rigpc-wp .alignwide, .rigpc-wp .alignfull { width: 100%; max-width: 100%; margin-inline: 0; }
.rigpc-wp .alignleft { float: left; margin: .3em 1.5em 1em 0; max-width: 50%; }
.rigpc-wp .alignright { float: right; margin: .3em 0 1em 1.5em; max-width: 50%; }
@media (max-width: 600px) { .rigpc-wp .alignleft, .rigpc-wp .alignright { float: none; max-width: 100%; margin: 1rem 0; } }
.rigpc-wp blockquote { margin: 1.5rem 0; padding: 14px 20px; border-left: 3px solid #00AFFF; border-radius: 0 12px 12px 0; background: rgba(0, 175, 255, .05); color: #D8E7FF; }
.rigpc-wp blockquote p:last-child { margin-bottom: 0; }
.rigpc-wp blockquote cite { display: block; margin-top: .5rem; color: #8FA9C4; font-size: 14px; font-style: normal; }
.rigpc-wp pre { margin: 1.5rem 0; padding: 16px; overflow-x: auto; border: 1px solid #1A3050; border-radius: 12px; background: #0B1D33; color: #C8D8E8; font-size: 14.5px; line-height: 1.6; overflow-wrap: normal; white-space: pre; }
.rigpc-wp code { padding: .12em .4em; border-radius: 6px; background: #0B1D33; color: #E2F0FF; font-family: var(--wp--preset--font-family--may-in); font-size: .9em; }
.rigpc-wp pre code { padding: 0; background: none; }
.rigpc-wp hr, .rigpc-wp .wp-block-separator { margin: 2.2rem 0; border: 0; border-top: 1px solid #1A3050; background: none; opacity: 1; }
.rigpc-wp mark { background: rgba(250, 204, 21, .22); color: #FDE68A; padding: 0 .2em; border-radius: 4px; }
.rigpc-wp kbd { padding: .1em .45em; border: 1px solid #2A4468; border-bottom-width: 2px; border-radius: 6px; background: #10243A; font-size: .88em; }

/* Bảng: cuộn ngang trong khung, không làm vỡ trang */
.rigpc-wp .wp-block-table, .rigpc-wp figure:has(> table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rigpc-wp > table { display: block; max-width: 100%; overflow-x: auto; margin: 1.5rem 0; }
.rigpc-wp table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 15px; line-height: 1.55; overflow-wrap: normal; }
.rigpc-wp th { background: #0B1D33; color: #E2F0FF; font-weight: 700; text-align: left; }
.rigpc-wp th, .rigpc-wp td { padding: 10px 14px; border: 1px solid #1A3050; color: #B8CCE0; vertical-align: top; }
.rigpc-wp th { color: #E2F0FF; }
.rigpc-wp .is-style-stripes tbody tr:nth-child(odd) td { background: rgba(255, 255, 255, .02); }
.rigpc-wp .wp-block-table figcaption { text-align: left; }

/* Nhúng / video: giữ khung 16:9 nhờ lớp tỉ lệ của lõi, chỉ bổ sung khi lõi không đặt tỉ lệ */
.rigpc-wp iframe { max-width: 100%; border: 0; border-radius: 12px; }
.rigpc-wp .wp-block-embed:not([class*='wp-embed-aspect']) iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; }
.rigpc-wp .wp-block-embed__wrapper:empty, .rigpc-wp figure.wp-block-embed:has(.wp-block-embed__wrapper:empty) { display: none; }
.rigpc-wp video, .rigpc-wp audio { display: block; max-width: 100%; border-radius: 12px; }
.rigpc-wp .wp-block-gallery { gap: 12px; }
.rigpc-wp .wp-block-gallery figcaption { text-align: center; }
.rigpc-wp .wp-block-columns { gap: 24px; margin: 1.5rem 0; }
.rigpc-wp .wp-block-column > :first-child { margin-top: 0; }

/* Khung nhúng chi tiết / FAQ (khối Chi tiết của lõi) */
.rigpc-wp details { margin: 0 0 .75rem; border: 1px solid #1A3050; border-radius: 12px; background: #0B1D33; }
.rigpc-wp summary { cursor: pointer; padding: 14px 18px; color: #fff; font-size: 16px; font-weight: 600; line-height: 1.5; }
.rigpc-wp summary:hover { color: #4CC4FF; }
.rigpc-wp details[open] > summary { border-bottom: 1px solid #1A3050; }
.rigpc-wp details > :not(summary) { margin: 0; padding: 12px 18px 4px; color: #B0C4D9; font-size: 16px; }
.rigpc-wp details > :not(summary):last-child { padding-bottom: 16px; }

/* ── Khung callout dùng chung với bài của Next (rigpc-*): không scope .rigpc-wp để Site Editor cũng thấy ───────── */
.rigpc-tra-loi-nhanh, .rigpc-tom-tat, .rigpc-chuan-bi { margin: 0 0 1.5rem; padding: 16px 20px; border-radius: 12px; }
.rigpc-tra-loi-nhanh { background: rgba(0, 175, 255, .04); border: 1px solid rgba(0, 175, 255, .22); border-left: 3px solid #00AFFF; }
.rigpc-tom-tat { background: linear-gradient(135deg, rgba(0, 175, 255, .06) 0%, rgba(139, 92, 246, .06) 100%); border: 1px solid rgba(0, 175, 255, .2); }
.rigpc-chuan-bi { background: #0B1D33; border: 1px solid #1A3050; }
.rigpc-nhan { margin: 0 0 8px; color: #4CC4FF; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.rigpc-chuan-bi .rigpc-nhan { color: #E879F9; }
.rigpc-tra-loi-nhanh p:last-child { margin-bottom: 0; color: #E2EAF4; }
.rigpc-tom-tat ul, .rigpc-chuan-bi ul { list-style: none; margin: 0; padding: 0; }
.rigpc-wp .rigpc-tom-tat ul, .rigpc-wp .rigpc-chuan-bi ul { padding-left: 0; }
.rigpc-tom-tat li { position: relative; padding-left: 24px !important; color: #E2EAF4; font-size: 16px; margin-bottom: .4em; }
.rigpc-tom-tat li::before { content: '✓'; position: absolute; left: 0; color: #00AFFF; }
.rigpc-chuan-bi li { position: relative; padding-left: 28px !important; font-size: 16px; }
.rigpc-chuan-bi li::before { content: '✓'; position: absolute; left: 0; top: 4px; display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: 1.5px solid rgba(139, 92, 246, .5); border-radius: 4px; color: #8B5CF6; font-size: 11px; }
.rigpc-tom-tat li::marker, .rigpc-chuan-bi li::marker { content: ''; }

/* Thẻ bước: số bước tự đếm (bản Next gắn data-buoc ở bước chuyển đổi; ở WordPress dùng counter).
   Huy hiệu số nằm trên CHÍNH tiêu đề của bước (không phải trên khung nhóm): có thứ gì chen lên trước tiêu đề trong nhóm
   (vd khung mục lục của plugin) thì huy hiệu vẫn đi theo tiêu đề, không đè lên nó và không làm lệch số đếm. */
.rigpc-wp { counter-reset: rigpc-buoc; }
.rigpc-buoc { position: relative; margin: 0 0 1.5rem; padding: 20px 24px; border: 1px solid #1A3050; border-radius: 12px; background: #0B1D33; overflow: hidden; }
.rigpc-buoc::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, #00AFFF, #8B5CF6); opacity: .5; }
.rigpc-buoc > :is(h3, h4):first-of-type { position: relative; display: flex; align-items: center; min-height: 36px; margin: 0 0 1rem !important; padding-left: 48px; counter-increment: rigpc-buoc; }
.rigpc-buoc > :is(h3, h4):first-of-type::before {
	content: counter(rigpc-buoc); position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px;
	background: linear-gradient(135deg, #007BC2, #6D3FE0); box-shadow: 0 0 14px rgba(0, 175, 255, .25); color: #fff; font-size: 15px; font-weight: 900; line-height: 1;
}
.rigpc-buoc p { margin: 0 0 .6em; color: #C8D8E8; font-size: 16.5px; line-height: 1.78; }
.rigpc-buoc .rigpc-cong-cu { color: #8FA9C4; font-size: 14.5px; }
.rigpc-meo, .rigpc-luu-y, .rigpc-chuyen-gia { margin-top: 12px; padding: 12px 16px; border-radius: 8px; }
.rigpc-meo p, .rigpc-luu-y p, .rigpc-chuyen-gia p { margin: 0 !important; color: #B7CADD !important; font-size: 15.5px !important; line-height: 1.7; }
.rigpc-meo { background: rgba(0, 175, 255, .1); border: 1px solid rgba(0, 175, 255, .22); }
.rigpc-luu-y { background: rgba(249, 115, 22, .1); border: 1px solid rgba(249, 115, 22, .25); }
.rigpc-chuyen-gia { background: rgba(139, 92, 246, .1); border: 1px solid rgba(139, 92, 246, .25); }
.rigpc-meo p::before { content: '💡 Tip: '; color: #4CC4FF; font-weight: 600; }
.rigpc-luu-y p::before { content: '⚠️ Lưu ý: '; color: #FB923C; font-weight: 600; }
.rigpc-chuyen-gia p::before { content: '⭐ Pro: '; color: #E879F9; font-weight: 600; }
.rigpc-wp ul.rigpc-nen-tranh { display: grid; gap: 8px; list-style: none; margin: 0 0 1.5rem; padding: 0; }
.rigpc-nen-tranh li { position: relative; margin: 0; padding: 8px 12px 8px 32px !important; border: 1px solid rgba(239, 68, 68, .2); border-radius: 8px; background: rgba(239, 68, 68, .06); color: #FCA5A5; font-size: 15.5px; }
.rigpc-nen-tranh li::before { content: '✗'; position: absolute; left: 12px; }
.rigpc-nen-tranh li::marker { content: ''; }
.rigpc-wp .rigpc-faq { display: grid; gap: 12px; margin: 0 0 1.5rem; }
.rigpc-wp .rigpc-faq details { margin: 0; }
@media (min-width: 640px) { .rigpc-wp ul.rigpc-nen-tranh, .rigpc-wp .rigpc-faq { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
@media (max-width: 639px) { .rigpc-buoc { padding: 16px; } }

/* Mobile/tablet: chữ hero nằm chồng lên ảnh nên phủ thêm một lớp tối để đạt tương phản AA */
@media (max-width: 1023px) { .rb-hero:not(.rb-hero--gon)::after { content: ''; position: absolute; inset: 0; z-index: 1; background: rgba(7, 21, 39, .5); pointer-events: none; } }

/* ── Plugin Easy Table of Contents: cùng dáng với khối Mục lục của theme, trên nền tối ────────────────────
   Plugin tự đặt nền #F9F9F9, viền xám, chữ #444 và tô màu icon bằng style trong dòng, nên phải ghi đè bằng
   độ đặc hiệu cao hơn các biến thể màu của nó (ez-toc-white/black...) và !important cho phần nằm trong thuộc tính style. */
div#ez-toc-container[class], div#ez-toc-container[class] * { box-sizing: border-box; }
div#ez-toc-container[class] {
	display: block; width: 100%; max-width: 100%; margin: 0 0 1.5rem; padding: 16px; border-radius: 12px; font-size: 14px; line-height: 1.5;
	background: rgba(0, 175, 255, .04); border: 1px solid #1A3050; box-shadow: none; color: #9FB3C8;
}
div#ez-toc-container[class] .ez-toc-title-container { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
div#ez-toc-container[class] p.ez-toc-title {
	display: block; margin: 0; padding: 0; color: #4CC4FF; font-family: inherit; font-size: 12.5px; font-weight: 700; line-height: 1.45; letter-spacing: .08em; text-transform: uppercase;
}
div#ez-toc-container[class] .ez-toc-title-toggle { display: block; flex-shrink: 0; }
div#ez-toc-container[class] a.ez-toc-toggle {
	display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: -8px -8px -8px 0; padding: 0; float: none;
	background: none; border: 0; box-shadow: none; text-shadow: none; color: #9FB3C8;
}
div#ez-toc-container[class] .ez-toc-js-icon-con { float: none; left: 0; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid #1A3050; border-radius: 8px; background: none; }
div#ez-toc-container[class] .ez-toc-icon-toggle-span { width: 100%; height: 100%; }
div#ez-toc-container[class] svg { fill: #9FB3C8 !important; color: #9FB3C8 !important; }
div#ez-toc-container[class] a.ez-toc-toggle:hover .ez-toc-js-icon-con { border-color: rgba(0, 175, 255, .45); }
div#ez-toc-container[class] a.ez-toc-toggle:hover svg { fill: #fff !important; color: #fff !important; }
div#ez-toc-container[class] nav { margin: 0; }
div#ez-toc-container[class] ul.ez-toc-list { margin: 8px 0 0; padding: 0; }
div#ez-toc-container[class] ul ul { margin-left: 1.25em; }
div#ez-toc-container[class] li { color: #9FB3C8; line-height: 1.5; }
div#ez-toc-container[class] a.ez-toc-link, div#ez-toc-container[class] a.ez-toc-link:visited {
	display: inline-flex; align-items: baseline; min-height: 32px; padding: 6px 0; color: #9FB3C8; font-size: 14.5px; line-height: 1.5; text-decoration: none; transition: color .15s;
}
div#ez-toc-container[class] a.ez-toc-link:hover { color: #fff; text-decoration: underline; }
div#ez-toc-container[class] a.ez-toc-link:focus-visible, div#ez-toc-container[class] a.ez-toc-toggle:focus-visible { outline: 2px solid #00E5FF; outline-offset: 2px; border-radius: 4px; }
div#ez-toc-container[class].counter-hierarchy ul li a::before,
div#ez-toc-container[class].counter-flat ul li a::before { color: #4CC4FF; }
div#ez-toc-container[class] .ez-toc-heading-level-3 > a.ez-toc-link { font-size: 14px; }
@media (max-width: 767px) { div#ez-toc-container[class] a.ez-toc-link { min-height: 44px; align-items: center; } }

/* ── Hero trang chủ đề (P1 UI/UX 10/11/2026): hai cột chữ + ảnh, viền và gradient nhẹ, không chạy hiệu ứng ── */
.rb-hero-cd {
	display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; margin: 0 0 24px; border-radius: 16px; border: 1px solid rgba(0, 175, 255, .28);
	background: radial-gradient(480px circle at 0% 0%, rgba(0, 175, 255, .10), transparent 70%), radial-gradient(420px circle at 100% 100%, rgba(139, 92, 246, .10), transparent 70%), #0A1A2E;
}
.rb-hero-cd__chu { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 16px 18px 18px; }
.rb-hero-cd .rb-eyebrow { margin-bottom: 12px; }
.rb-hero-cd__h1 { margin: 0 0 10px; text-shadow: none; }
.rb-hero-cd .rb-hero-cd__mo-ta { margin: 0; max-width: 60ch; font-size: 15.5px; line-height: 1.65; color: #C3D5E8; }
.rb-hero-cd .rb-hero-cd__so { display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 14px; font-weight: 600; color: #8FB4D6; }
.rb-hero-cd__so svg { color: #00AFFF; }
.rb-hero-cd__anh { order: -1; position: relative; margin: 0; aspect-ratio: 12 / 5; background: #10243A; }
.rb-hero-cd__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.rb-hero-cd__anh::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04); pointer-events: none; }
@media (min-width: 768px) {
	.rb-hero-cd { grid-template-columns: minmax(0, 1fr) minmax(0, 42%); align-items: center; gap: 28px; padding: 24px; min-height: 240px; }
	.rb-hero-cd__chu { padding: 4px 0 4px 8px; }
	.rb-hero-cd__anh { order: 0; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; border: 1px solid #1A3050; }
}
@media (min-width: 1024px) {
	.rb-hero-cd { grid-template-columns: minmax(0, 1fr) 440px; gap: 40px; padding: 28px 28px 28px 36px; }
	.rb-hero-cd .rb-hero-cd__mo-ta { font-size: 16.5px; }
}

/* ── UI/UX nghiệm thu 10/11/2026 (bằng chứng: nghiem-thu-e2e-cuoi-20261110/wordpress-uiux/defects.md) ─────────────── */
/* UX-01 Khối Nút (core/button) trong bài: `.rigpc-wp a` (đặc hiệu 0,1,1) đè `.wp-block-button__link` (0,1,0) ⇒ chữ xanh trên nền xanh, gạch chân. */
.rigpc-wp .wp-block-button__link, .rigpc-wp .wp-block-button__link:visited { color: #fff; text-decoration: none; }
.rigpc-wp .wp-block-button__link:hover { color: #fff; }
.rigpc-wp .wp-block-button.is-style-outline > .wp-block-button__link { color: #00AFFF; }
.rigpc-wp .wp-block-button.is-style-outline > .wp-block-button__link:hover { color: #00E5FF; }
.rigpc-wp .wp-block-button__link:focus-visible { outline: 2px solid #00E5FF; outline-offset: 3px; }
/* UX-02 Nhóm nút không có khoảng cách với đoạn trước/sau. */
.rigpc-wp .wp-block-buttons { margin: 1.5rem 0; }
/* UX-03 Tiêu đề bài dính sát đoạn tóm tắt: `.rb-bai__tom-tat` (margin 0) khai báo sau, đè khoảng cách của `.rb-bai__dau > * + *`. */
.rb-bai__dau > .rb-bai__tom-tat { margin-top: 12px; }
/* UX-04 Bảng trên điện thoại: ô hẹp bẻ "i5-12400F" thành hai dòng; bảng tràn mà không có gợi ý cuộn, không cuộn được bằng bàn phím.
   Cột co theo nội dung (tối đa 22em rồi mới xuống dòng), gợi ý "vuốt ngang" chỉ hiện khi bảng thật sự tràn (rigpc.js gắn lớp). */
.rigpc-wp table { width: max-content; min-width: 100%; }
.rigpc-wp :is(th, td) { max-width: 22em; }
.rigpc-wp .wp-block-table:focus-visible { outline: 2px solid #00E5FF; outline-offset: 2px; border-radius: 4px; }
.rigpc-wp .rb-bang--cuon::before { content: 'Vuốt ngang để xem đủ bảng →'; position: sticky; left: 0; display: block; margin-bottom: 6px; color: #8FA9C4; font-size: 13px; }
/* UX-05 Không có kết quả: liên kết "quay lại" lẫn vào chữ thường, không có lối đi tiếp. */
.rb-rong { margin: 8px 0 0; padding: 24px; border: 1px dashed #2A4468; border-radius: 16px; background: rgba(0, 175, 255, .04); color: #B0C4D9; font-size: 16px; line-height: 1.7; }
.rb-rong a { color: #4CC4FF; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.rb-rong a:hover { color: #00E5FF; }
/* UX-06 Mục lục trên điện thoại/máy tính bảng: cột bên (.rb-bai-ben) ẩn dưới 1024px ⇒ bài dài không có mục lục. Bản thu gọn đặt trên thân bài. */
.rb-muc-luc--gon { margin: 0 0 24px; }
.rb-muc-luc--gon > summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; cursor: pointer; list-style: none; }
.rb-muc-luc--gon > summary::-webkit-details-marker { display: none; }
.rb-muc-luc--gon > summary::after { content: '+'; color: #4CC4FF; font-size: 20px; line-height: 1; }
.rb-muc-luc--gon[open] > summary::after { content: '–'; }
.rb-muc-luc--gon > summary .rb-muc-luc__tieu-de { margin: 0; }
.rb-muc-luc--gon > summary:focus-visible { outline: 2px solid #00E5FF; outline-offset: 2px; border-radius: 6px; }
.rb-muc-luc--gon a { min-height: 40px; display: flex; align-items: center; }
@media (min-width: 1024px) { .rb-muc-luc-gon { display: none; } }

/* ── Hoàn thiện trang bài 11/11/2026 (chủ shop: khoảng trắng desktop, ảnh dải mờ, mục lục lệch) ───────────────
 * Tiêu đề + ảnh đại diện nằm trong cột chính (templates/single.html) ⇒ cột bên (mục lục + liên hệ) bắt đầu ngang tiêu đề, không còn ô trống
 * 340×700px bên phải đầu bài. Cột bên dính khi cuộn như cũ. */
.rb-h1--bai, .rb-muc-luc a { text-wrap: pretty; }
@media (min-width: 1024px) { .rb-bai-ben { padding-top: 4px; } }

/* C1 (11/11/2026): dịch vụ thu mua dưới bài (như trang bài production) + thẻ bài liên quan chọn tay không ảnh. */
.rb-dich-vu { margin-top: 16px; }
.rb-dich-vu__tieu-de { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: #fff; }
.rb-dich-vu__ds { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.rb-dich-vu__muc { display: flex; flex-direction: column; min-height: 44px; padding: 10px 12px; border: 1px solid #1A3050; border-radius: 10px; background: #0B1D33; color: #fff; text-decoration: none; }
.rb-dich-vu__muc span { color: #9FB3C8; font-size: 13px; }
.rb-dich-vu__muc:hover { border-color: rgba(0, 175, 255, .4); }
.rb-the--chon .rb-the__than { padding-top: 16px; }