/* vangsonha-gold — màu theo site (#ac2b36). Chỉ nạp trên trang có shortcode vsg_/goldbox. */
.vsg { --vsg-chinh: #ac2b36; --vsg-vien: #e6dcdc; --vsg-nen: #fbf6f6; --vsg-tang: #1b7f3a; --vsg-giam: #c62828; margin: 0 0 24px; }
.vsg h2 { margin: 24px 0 8px; }
.vsg-h1 { margin: 0 0 12px; font-size: 1.9em; line-height: 1.25; }
.vsg-breadcrumb ol { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; font-size: .9em; }
.vsg-breadcrumb li + li::before { content: "›"; margin-right: 4px; color: #888; }
.vsg-cap-nhat { margin: 0 0 8px; font-size: .95em; }
.vsg-cuon { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.vsg table { width: 100%; border-collapse: collapse; margin: 0 0 8px; }
.vsg th { background: var(--vsg-chinh); color: #fff; text-align: left; padding: 8px 10px; font-weight: 600; }
@media (max-width: 480px) { .vsg th, .vsg td { padding: 7px 6px; } .vsg table { font-size: .92em; } }
.vsg td { padding: 8px 10px; border-bottom: 1px solid var(--vsg-vien); }
/* 2026-10-27: Flatsome `td:first-child`/`td:last-child { padding: 0 }` thắng 2 dòng trên → chữ cột đầu/cuối dính viền khung. */
.vsg th:first-child, .vsg td:first-child { padding-left: 10px; }
.vsg th:last-child, .vsg td:last-child { padding-right: 10px; }
@media (max-width: 549px) { .vsg th:first-child, .vsg td:first-child { padding-left: 6px; } .vsg th:last-child, .vsg td:last-child { padding-right: 6px; } }
.vsg td { background: #fff; color: #222; }
.vsg td:nth-child(n+2) { white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
.vsg th:nth-child(n+2) { text-align: right; }
.vsg-hang { display: block; font-size: .78em; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--vsg-chinh); }
.vsg tbody tr:nth-child(even) td { background: var(--vsg-nen); }
.vsg-tang { color: var(--vsg-tang); }
.vsg-giam { color: var(--vsg-giam); }
.vsg-cu td { color: #777; }
.vsg-sao { color: var(--vsg-giam); cursor: help; }
.vsg-canh-bao { color: #b71c1c; margin: 0 0 8px; }
.vsg-chu-thich, .vsg-nguon { font-size: .85em; color: #666; }
.vsg-thong-bao { border: 1px solid #e0b84f; background: #fff8e1; padding: 14px 16px; border-radius: 6px; margin: 0 0 16px; }
.vsg-hanh-chinh { background: var(--vsg-nen); border-left: 3px solid var(--vsg-chinh); padding: 8px 12px; }
.vsg-cta { border: 1px solid var(--vsg-chinh); border-radius: 8px; padding: 14px 16px; margin: 16px 0; }
.vsg-cta p { margin: 0 0 8px; }
.vsg-nut { display: inline-block; background: var(--vsg-chinh); color: #fff !important; padding: 8px 16px; border-radius: 4px; text-decoration: none; margin: 0 6px 6px 0; }
.vsg-nut-phu { background: #fff; color: var(--vsg-chinh) !important; border: 1px solid var(--vsg-chinh); }
/* Biểu đồ: radio + CSS, không JS. */
.vsg-bd-tab { position: relative; }
.vsg-bd-tab input { position: absolute; opacity: 0; pointer-events: none; }
.vsg-bd-tab label { display: inline-block; padding: 4px 12px; margin: 0 4px 8px 0; border: 1px solid var(--vsg-vien); border-radius: 14px; cursor: pointer; font-size: .9em; }
.vsg-bd-tab input:checked + label { background: var(--vsg-chinh); color: #fff; border-color: var(--vsg-chinh); }
.vsg-bd-tab input:focus-visible + label { outline: 2px solid var(--vsg-chinh); outline-offset: 2px; }
.vsg-bd-k { display: none; }
.vsg-bd-tab .r30:checked ~ .k30, .vsg-bd-tab .r90:checked ~ .k90, .vsg-bd-tab .r365:checked ~ .k365 { display: block; }
.vsg-bd svg { width: 100%; height: auto; display: block; }
.vsg-bd .vsg-luoi { stroke: #eee; stroke-width: 1; }
.vsg-bd .vsg-chu { font-size: 15px; fill: #777; }
.vsg-bd polyline { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.vsg-bd .vsg-ban { stroke: #ac2b36; }
.vsg-bd .vsg-mua { stroke: #c9a227; }
.vsg-bd-chu-giai { font-size: .85em; color: #555; }
.vsg-l-ban, .vsg-l-mua { display: inline-block; width: 14px; height: 3px; vertical-align: middle; background: #ac2b36; }
.vsg-l-mua { background: #c9a227; margin-left: 8px; }
.vsg-bd-bang caption { text-align: left; font-weight: 600; padding: 8px 0; }
/* Khối link. */
.vsg-lien-ket ul { columns: 2 220px; margin: 0 0 12px 1.2em; }
.vsg-lien-ket .vsg-danh-ba { columns: 1; }
.vsg-tinh-moi { font-weight: 600; }
/* Tiện ích dưới bảng tiệm (tien-ich.php). */
.vsg-dien-giai { border-left: 4px solid #c9a227; background: #fdfaf0; padding: 12px 16px; margin: 12px 0; border-radius: 4px; font-size: .95em; }
.vsg-dien-giai p { margin: 0 0 6px; }
.vsg-ti-tab { position: relative; margin: 12px 0; }
.vsg-ti-tab > input { position: absolute; opacity: 0; pointer-events: none; }
.vsg-ti-tab > label { display: inline-block; padding: 9px 18px; margin: 0 6px 8px 0; border-radius: 8px; cursor: pointer; font-weight: 600; background: #f3e9d0; color: #5a4a2a; }
.vsg-ti-tab > input:checked + label { background: var(--vsg-chinh); color: #fff; }
.vsg-ti-tab > input:focus-visible + label { outline: 2px solid var(--vsg-chinh); outline-offset: 2px; }
.vsg-ti-k { display: none; padding: 8px 0; }
.vsg-ti-tab .r-bd:checked ~ .k-bd, .vsg-ti-tab .r-xh:checked ~ .k-xh, .vsg-ti-tab .r-ll:checked ~ .k-ll, .vsg-ti-tab .r-qd:checked ~ .k-qd { display: block; }
.vsg-ti-bd summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
.vsg-ti-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; align-items: end; }
.vsg-ti-form label { display: flex; flex-direction: column; gap: 4px; font-size: .9em; font-weight: 600; }
.vsg-ti-form input, .vsg-ti-form select { height: 40px; padding: 0 10px; border: 1px solid var(--vsg-vien); border-radius: 6px; font-size: 1em; margin: 0; }
.vsg-ti-kq { grid-column: 1 / -1; background: var(--vsg-nen); border-radius: 6px; padding: 12px 14px; line-height: 1.7; }
.vsg-ti-form .vsg-chu-thich { grid-column: 1 / -1; margin: 0; }
.vsg-xam { color: #888; font-weight: 400; }
.vsg-tien-ich { text-align: left; }
.vsg-ti-tab > label { white-space: nowrap; }
@media (max-width: 480px) { .vsg-ti-tab > label { padding: 8px 12px; margin: 0 4px 6px 0; font-size: .92em; } }
/* 2026-10-18 mobile: Flatsome `input[type=radio] + label {display:inline}` thắng nhãn tab → không xuống dòng, tab 4 tràn.
   Flex cho hàng tab (panel chiếm trọn dòng); bảng gọn hơn trên điện thoại; diễn dịch gập. */
.vsg-ti-tab { display: flex; flex-wrap: wrap; align-items: flex-start; }
.vsg-ti-tab > .vsg-ti-k { flex: 0 0 100%; min-width: 0; }
.vsg-dg-them summary { cursor: pointer; font-weight: 600; color: var(--vsg-chinh); margin: 4px 0 6px; }
@media (max-width: 549px) {
	.vsg-ti-tab > label { flex: 1 1 auto; text-align: center; padding: 8px 6px; margin: 0 4px 6px 0; font-size: .9em; }
	.vsg-bang th, .vsg-bang td { padding-left: 6px; padding-right: 6px; }
	.vsg-bang table { font-size: .92em; }
	.vsg-dien-giai { padding: 10px 12px; font-size: .9em; }
}