/* Giao diện «bảng điện tiệm vàng» (giao-dien.php) — chỉ áp khi body có .vsg-gd. Bản mẫu user duyệt 2026-10-27. */
.vsg-gd {
	--gd-do: #5c0a10; --gd-do2: #7d1219; --gd-do3: #3d060a; --gd-do4: #2b0407;
	--gd-vang: #d4ad52; --gd-vang2: #f1d68d; --gd-vang3: #fbf3dc;
	--gd-chu-sang: #f4e6c6; --gd-chu-mo: #e5d2ad; --gd-vien: #ead9b4; --gd-nau: #6e5b4e;
}

/* ── Dải pháp lý + nút gọi (trước header) ── */
.vsg-dai { background: var(--gd-do3); color: var(--gd-chu-mo); font-size: 12.5px; line-height: 1.4; }
.vsg-dai-k { display: flex; align-items: center; gap: 16px; min-height: 36px; }
.vsg-dai-ten { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vsg-dai-ten b { color: var(--gd-vang2); font-weight: 600; }
.vsg-dai-gio { white-space: nowrap; }
.vsg-dai-goi { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0; padding: 4px 14px; border-radius: 999px; background: linear-gradient(135deg, var(--gd-vang2), var(--gd-vang)); color: var(--gd-do3) !important; font-weight: 800; font-size: 13px; white-space: nowrap; text-decoration: none !important; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.vsg-dai-goi svg { width: 15px; height: 15px; }

/* ── Header Flatsome: đỏ đô, chữ vàng nhạt ── */
.vsg-gd #header { border-bottom: 2px solid var(--gd-vang) !important; }
.vsg-gd #header .header-main,
.vsg-gd #header .header-bottom { background: linear-gradient(180deg, var(--gd-do2), var(--gd-do)) !important; }
.vsg-gd #header .header-bg-color { background: transparent !important; }
.vsg-gd #header .header-main .nav > li > a,
.vsg-gd #header .header-main .nav-icon > a,
.vsg-gd #header .header-main .icon-menu,
.vsg-gd #header .header-main .icon-search,
.vsg-gd #header .header-bottom .nav > li > a { color: var(--gd-chu-sang) !important; }
.vsg-gd #header .header-main .nav > li > a:hover,
.vsg-gd #header .header-main .nav > li.active > a,
.vsg-gd #header .header-main .nav > li.current-menu-item > a { color: var(--gd-vang2) !important; }
.vsg-gd #header .header-divider { border-color: rgba(212, 173, 82, .35) !important; }
.vsg-gd #header .header-main .nav-dropdown a { color: #333 !important; }
.vsg-gd #logo img { border-radius: 8px; }

/* ── Hero trang chủ: section chứa bảng giá tiệm (hoặc thông báo khi bảng tiệm ẩn vì giá cũ — Ngọc Hà 2026-10-27) ──
   Section nằm trong .row-main (max 1080px) → nền vẽ bằng ::before rộng 100vw để tràn hết bề ngang
   (body Flatsome overflow-x: clip nên không sinh thanh cuộn ngang). */
.vsg-gd.home #content.page-wrapper { padding-top: 0; }
.vsg-gd.home .section:has(.vsg-son-ha, .vsg-thong-bao) { position: relative; isolation: isolate; background: transparent !important; padding-top: 34px !important; padding-bottom: 44px !important; }
.vsg-gd.home .section:has(.vsg-son-ha, .vsg-thong-bao)::before {
	content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%);
	background: radial-gradient(1200px 420px at 50% -80px, rgba(212, 173, 82, .22), transparent 70%), linear-gradient(180deg, var(--gd-do), var(--gd-do3));
}
.vsg-gd.home .section:has(.vsg-son-ha, .vsg-thong-bao) > .section-bg { display: none !important; }
.vsg-gd.home .section:has(.vsg-son-ha, .vsg-thong-bao) :is(h1, h2, h3):not(.vsg *, .vsg-gd-the-ds *),
.vsg-gd.home .section:has(.vsg-son-ha, .vsg-thong-bao) :is(h1, h2, h3):not(.vsg *, .vsg-gd-the-ds *) span { color: var(--gd-vang2) !important; }
.vsg-gd.home .section:has(.vsg-son-ha, .vsg-thong-bao) h1:not(.vsg *) { letter-spacing: .5px; text-shadow: 0 2px 12px rgba(0, 0, 0, .3); }
.vsg-gd.home .section:has(.vsg-son-ha, .vsg-thong-bao) p:not(.vsg *, .vsg-gd-the-ds *) { color: var(--gd-chu-mo) !important; }
.vsg-gd.home .section:has(.vsg-son-ha, .vsg-thong-bao) .vsg > p a { color: var(--gd-vang2) !important; }
/* Banner trang chủ (Mỹ Ngọc): ux_text font_size="2.8" nhân cỡ h1 thành 156px ở màn 750px, tràn khung — có sẵn, đo 2026-10-27. */
.vsg-gd.home .banner h1 { font-size: clamp(30px, 5.5vw, 60px) !important; line-height: 1.15; }
.vsg-gd .gpm-goldbox-container-wrap { background: transparent !important; border: 0 !important; box-shadow: none !important; transform: none !important; overflow: visible !important; border-radius: 0 !important; }

/* ── Bảng giá tiệm = bảng điện tối ── */
.vsg-gd .vsg-son-ha { max-width: 880px; margin: 0 auto 18px; padding: 0; background: linear-gradient(180deg, #2c0609, #1d0306); border: 1px solid rgba(212, 173, 82, .55); border-radius: 14px; overflow: hidden; box-shadow: 0 18px 50px rgba(0, 0, 0, .35); text-align: left; }
.vsg-gd .vsg-son-ha > h2 { margin: 0; padding: 16px 20px 2px; color: var(--gd-vang2) !important; font-size: 18px; }
.vsg-gd .vsg-son-ha > .vsg-cap-nhat { margin: 0; padding: 2px 20px 12px; color: #d9c39a; font-size: 13px; border-bottom: 1px solid rgba(212, 173, 82, .35); }
.vsg-gd .vsg-son-ha > .vsg-cap-nhat::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 3px rgba(61, 220, 132, .18); vertical-align: 1px; }
.vsg-gd .vsg-son-ha > .vsg-cap-nhat strong { color: #fff; }
.vsg-gd .vsg-son-ha > .vsg-canh-bao { margin: 10px 20px; color: #ffd9a8; }
.vsg-gd .vsg-son-ha table { margin: 0; }
.vsg-gd .vsg-son-ha th { background: rgba(0, 0, 0, .25) !important; color: var(--gd-vang) !important; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; padding: 10px 20px !important; border: 0; }
.vsg-gd .vsg-son-ha td { background: transparent !important; color: #fbeed0; border-bottom: 1px solid rgba(212, 173, 82, .14); padding: 12px 20px !important; font-size: 15px; }
.vsg-gd .vsg-son-ha td:nth-child(n+2) { font-weight: 700; font-size: 19px; letter-spacing: .3px; color: #fff; }
.vsg-gd .vsg-son-ha td:nth-child(3) { color: var(--gd-vang2); }
.vsg-gd .vsg-son-ha tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .035) !important; }
.vsg-gd .vsg-son-ha tbody tr:hover td { background: rgba(212, 173, 82, .09) !important; }
.vsg-gd .vsg-son-ha .vsg-tang { color: #47d68a; }
.vsg-gd .vsg-son-ha .vsg-giam { color: #ff8080; }
.vsg-gd .vsg-son-ha small { display: block; font-size: 11.5px; font-weight: 600; }
.vsg-gd .vsg-ti-the { background: #fff; color: #222; padding: 14px 18px 6px; border-top: 1px solid rgba(212, 173, 82, .55); }
.vsg-gd .vsg-thong-bao { max-width: 880px; margin-left: auto; margin-right: auto; text-align: left; }

/* ── Thẻ thông tin cửa hàng ── */
.vsg-gd-the-ds { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; max-width: 880px; margin: 0 auto 30px; text-align: left; }
.vsg-gd-the { display: flex; flex-direction: column; gap: 2px; background: #fff; border: 1px solid var(--gd-vien); border-radius: 12px; padding: 14px 16px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.vsg-gd-bieu { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 6px; border-radius: 10px; background: var(--gd-vang3); color: var(--gd-do); }
.vsg-gd-nhan { font-size: 11.5px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: var(--gd-nau); }
.vsg-gd-gt { font-size: 14.5px; font-weight: 700; line-height: 1.45; color: #2b1b12; }
.vsg-gd-lk { margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--gd-do2) !important; text-decoration: none; }

/* ── Bảng thương hiệu + mọi bảng giá khác: thẻ trắng, đầu bảng đỏ đô ── */
.vsg-gd .vsg-bang:not(.vsg-son-ha) { background: #fff; border: 1px solid var(--gd-vien); border-radius: 12px; overflow: hidden; box-shadow: 0 6px 20px rgba(92, 10, 16, .07); text-align: left; }
.vsg-gd .vsg-bang:not(.vsg-son-ha) > :not(.vsg-cuon) { padding-left: 16px; padding-right: 16px; }
.vsg-gd .vsg-bang:not(.vsg-son-ha) > h2 { margin: 0; padding-top: 14px; color: var(--gd-do) !important; font-size: 20px; }
.vsg-gd .vsg-bang:not(.vsg-son-ha) > .vsg-cap-nhat { color: var(--gd-nau) !important; }
.vsg-gd .vsg-bang:not(.vsg-son-ha) table { margin: 0; }
.vsg-gd .vsg-bang:not(.vsg-son-ha) th { background: var(--gd-do) !important; color: var(--gd-vang2) !important; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }
.vsg-gd .vsg-bang:not(.vsg-son-ha) td:nth-child(n+2) { font-weight: 700; }
.vsg-gd .vsg-bang:not(.vsg-son-ha) tbody tr:nth-child(even) td { background: #fdfaf3; }
.vsg-gd .vsg-hang { display: inline-block; margin: 0 8px 0 0; padding: 1px 7px; border: 1px solid var(--gd-vien); border-radius: 5px; background: var(--gd-vang3); color: var(--gd-do); font-size: 11px; vertical-align: 1px; }
.vsg-gd.home .section:has(.vsg-son-ha, .vsg-thong-bao) .vsg-bang:not(.vsg-son-ha) { max-width: 880px; margin-left: auto; margin-right: auto; }

/* ── Phần dưới trang chủ (user 2026-10-27: «mới được phần phía trên còn phía dưới thì sao») ──
   Các section sau hero (Về chúng tôi, tiêu chí, địa chỉ, bài viết + FAQ): nền kem/trắng xen kẽ tràn ngang, chữ đỏ đô,
   ô tiêu chí thành thẻ, nút/ảnh/bản đồ cùng tông. Bỏ qua section slider (Mỹ Ngọc). */
.vsg-gd.home .section:not(:has(.vsg-son-ha, .vsg-thong-bao, .ux-slider, .banner)) { position: relative; isolation: isolate; background: transparent !important; padding-top: 56px !important; padding-bottom: 56px !important; }
.vsg-gd.home .section:not(:has(.vsg-son-ha, .vsg-thong-bao, .ux-slider, .banner))::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: #fff; border-top: 1px solid var(--gd-vien); }
.vsg-gd.home .section:nth-child(even of .section):not(:has(.vsg-son-ha, .vsg-thong-bao, .ux-slider, .banner))::before { background: #faf6ee; }
.vsg-gd.home .section:not(:has(.vsg-son-ha, .vsg-thong-bao, .ux-slider, .banner)) > .section-bg { display: none !important; }
.vsg-gd.home .section:not(:has(.vsg-son-ha, .vsg-thong-bao)) :is(h2, h4):not(.vsg *) { color: var(--gd-do) !important; letter-spacing: .3px; }
.vsg-gd.home .section:not(:has(.vsg-son-ha, .vsg-thong-bao)) h2:not(.vsg *) { font-weight: 800; }
.vsg-gd.home .section:not(:has(.vsg-son-ha, .vsg-thong-bao)) h3:not(.vsg *, .vsg-faq *) { color: var(--gd-do2) !important; }
.vsg-gd.home .section:not(:has(.vsg-son-ha, .vsg-thong-bao, .ux-slider, .banner)) :is(p, li):not(.vsg-faq *) { color: #3a2a20; line-height: 1.75; }
.vsg-gd.home .section:not(:has(.vsg-son-ha, .vsg-thong-bao)) li::marker { color: var(--gd-vang); }
.vsg-gd.home .section:not(:has(.vsg-son-ha, .vsg-thong-bao)) h2:not(.vsg *, .vsg-faq *):not(.text-center h2, [style*="center"]) { padding-left: 14px; border-left: 4px solid var(--gd-vang); }
.vsg-gd.home .is-divider { background-color: var(--gd-vang) !important; }
/* Ô tiêu chí (row-box-shadow): thẻ trắng viền vàng, icon trong vòng tròn đỏ đô. */
.vsg-gd.home .row-box-shadow-1 > .col > .col-inner { height: 100%; background: #fff !important; border: 1px solid var(--gd-vien); border-radius: 14px; box-shadow: 0 8px 24px rgba(92, 10, 16, .07) !important; transition: transform .2s, box-shadow .2s; }
.vsg-gd.home .row-box-shadow-1 > .col > .col-inner:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(92, 10, 16, .14) !important; }
.vsg-gd.home .row-box-shadow-1 .is-border { display: none; }
.vsg-gd.home .row-box-shadow-1 i[class^="icon-"] { display: inline-grid !important; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: linear-gradient(135deg, var(--gd-do2), var(--gd-do)); color: var(--gd-vang2) !important; font-size: 28px !important; box-shadow: 0 0 0 4px var(--gd-vang3); }
.vsg-gd.home .row-box-shadow-1 h4 { font-size: 15px; letter-spacing: .6px; }
/* Nút, ảnh, bản đồ. */
.vsg-gd .button.primary, .vsg-gd .button.secondary { background: linear-gradient(135deg, var(--gd-do2), var(--gd-do)) !important; color: var(--gd-vang2) !important; border: 1px solid var(--gd-vang) !important; border-radius: 999px !important; box-shadow: 0 4px 14px rgba(92, 10, 16, .25) !important; }
.vsg-gd .button.primary:hover, .vsg-gd .button.secondary:hover { filter: brightness(1.12); }
.vsg-gd.home .section:not(:has(.vsg-son-ha, .vsg-thong-bao, .ux-slider, .banner)) .img-inner { border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 4px var(--gd-vang3), 0 12px 30px rgba(0, 0, 0, .15) !important; }
.vsg-gd.home .section iframe { border: 0 !important; border-radius: 14px; box-shadow: 0 0 0 4px var(--gd-vang3), 0 12px 30px rgba(0, 0, 0, .12); }
/* FAQ: mỗi cặp câu hỏi – trả lời thành một thẻ, viền trái vàng. */
.vsg-gd .vsg-faq > h2 { color: var(--gd-do) !important; }
.vsg-gd .vsg-faq > h3 { margin: 14px 0 0; padding: 12px 16px 6px; background: #fff; border: 1px solid var(--gd-vien); border-bottom: 0; border-left: 4px solid var(--gd-vang); border-radius: 10px 10px 0 0; color: var(--gd-do) !important; font-size: 16px; }
.vsg-gd .vsg-faq > h3 + p { margin: 0; padding: 0 16px 14px; background: #fff; border: 1px solid var(--gd-vien); border-top: 0; border-left: 4px solid var(--gd-vang); border-radius: 0 0 10px 10px; color: #3a2a20; }
/* Lưới đối tác (CSS tại chỗ của doi-tac.php → cần .vsg-gd để thắng). */
.vsg-gd .vsg-doi-tac h2 { color: var(--gd-do) !important; }
.vsg-gd .vsg-doi-tac .vsg-dt-ds a { border-color: var(--gd-vien); border-radius: 12px; }
.vsg-gd .vsg-doi-tac .vsg-dt-ds a:hover { border-color: var(--gd-vang); }
.vsg-gd .vsg-doi-tac .vsg-dt-ten { color: var(--gd-do); }
.vsg-gd .vsg-doi-tac .vsg-dt-ds img { box-shadow: 0 0 0 2px var(--gd-vang3); }

/* ── Footer: đỏ đô (Flatsome #footer; child #site-custom-footer đổi màu trong footer.php vì inline !important) ── */
.vsg-gd #footer.footer-wrapper { background-color: var(--gd-do3) !important; border-top: 2px solid var(--gd-vang); }
.vsg-gd #footer .absolute-footer { background-color: var(--gd-do4) !important; border-top-color: rgba(212, 173, 82, .25) !important; }
.vsg-gd #site-custom-footer { border-top: 2px solid var(--gd-vang); }

@media (max-width: 849px) {
	.vsg-dai-phu, .vsg-dai-gio { display: none; }
	.vsg-gd.home .row-box-shadow-1 > .col { flex-basis: 50%; max-width: 50%; } /* 4 cột hẹp ép chữ xuống từng từ → 2×2 */
	.vsg-gd-the-ds { grid-template-columns: 1fr 1fr; } /* 4 thẻ → 2×2, không lẻ 3+1 */
}
@media (max-width: 549px) {
	.vsg-dai-k { gap: 10px; }
	.vsg-gd.home .section:not(:has(.vsg-son-ha, .vsg-thong-bao, .ux-slider, .banner)) { padding-top: 36px !important; padding-bottom: 36px !important; }
	.vsg-gd.home .row-box-shadow-1 > .col { flex-basis: 100%; max-width: 100%; }
	.vsg-gd.home .section:has(.vsg-son-ha, .vsg-thong-bao) { padding-top: 22px !important; padding-bottom: 30px !important; }
	.vsg-gd .vsg-son-ha { border-radius: 10px; }
	.vsg-gd .vsg-son-ha > h2 { padding: 12px 12px 2px; font-size: 16px; }
	.vsg-gd .vsg-son-ha > .vsg-cap-nhat { padding: 2px 12px 10px; }
	.vsg-gd .vsg-son-ha th, .vsg-gd .vsg-son-ha td { padding-left: 12px !important; padding-right: 12px !important; }
	.vsg-gd .vsg-son-ha td { font-size: 14px; }
	.vsg-gd .vsg-son-ha td:nth-child(n+2) { font-size: 16px; }
	.vsg-gd .vsg-ti-the { padding: 12px 10px 4px; }
	.vsg-gd-the-ds { grid-template-columns: 1fr 1fr; gap: 10px; }
	.vsg-gd-the { padding: 12px; }
	.vsg-gd-gt { font-size: 13.5px; }
	.vsg-gd .vsg-bang:not(.vsg-son-ha) > :not(.vsg-cuon) { padding-left: 10px; padding-right: 10px; }
	.vsg-gd .vsg-bang:not(.vsg-son-ha) .vsg-hang { display: block; width: max-content; margin: 0 0 2px; }
}