/* Visa Global landing
 * Palette: passport ink, security-paper mint, stamp violet, marigold for actions.
 * The one loud element is the visa-sticker form in the hero (guilloche, MRZ, ink stamp on success).
 */

body.vgl-page {
	--vgl-ink: #15213d;
	--vgl-ink-2: #22315a;
	--vgl-ink-3: #0e1730;
	--vgl-paper: #f4f7f2;
	--vgl-mint: #dfece4;
	--vgl-mint-line: #9cc7b3;
	--vgl-violet: #5b3e9e;
	--vgl-violet-soft: #efeaf9;
	--vgl-marigold: #f2b23a;
	--vgl-marigold-2: #e3a020;
	--vgl-text: #1c2740;
	--vgl-muted: #56607a;
	--vgl-line: #d8dee6;
	--vgl-red: #b42318;
	--vgl-zalo: #0068ff;
	--vgl-radius: 14px;
	--vgl-display: "VGL Display", "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--vgl-body: "VGL Body", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	margin: 0;
	background: #fff;
	color: var(--vgl-text);
	font: 400 16px/1.65 var(--vgl-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

:where(.vgl-page) *,
:where(.vgl-page) *::before,
:where(.vgl-page) *::after { box-sizing: border-box; }
.vgl-page [hidden] { display: none !important; }
:where(.vgl-page) img { max-width: 100%; height: auto; display: block; }
:where(.vgl-page) :is(h1, h2, h3) {
	margin: 0;
	font-family: var(--vgl-display);
	font-weight: 700;
	color: var(--vgl-ink);
	text-wrap: balance;
}
:where(.vgl-page) p { margin: 0; }
:where(.vgl-page) :is(ul, ol) { margin: 0; padding: 0; list-style: none; }
:where(.vgl-page) a { color: inherit; }
:where(.vgl-page) button { font: inherit; }
.vgl-page :focus-visible { outline: 3px solid var(--vgl-violet); outline-offset: 2px; }

.vgl-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.vgl-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vgl-skip { position: absolute; left: -9999px; top: 12px; z-index: 100; background: #fff; padding: 10px 14px; border-radius: 8px; }
.vgl-skip:focus { left: 16px; }

/* ---------- Buttons & links ---------- */
.vgl-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 48px; padding: 12px 22px;
	border: 2px solid transparent; border-radius: 10px;
	font: 600 1rem/1.2 var(--vgl-body); text-decoration: none; cursor: pointer;
	transition: background-color .15s, border-color .15s, color .15s;
}
.vgl-btn .vgl-icon { width: 20px; height: 20px; flex: none; }
.vgl-btn--primary { background: var(--vgl-marigold); color: var(--vgl-ink); }
.vgl-btn--primary:hover { background: var(--vgl-marigold-2); }
.vgl-btn--light { background: #fff; color: var(--vgl-ink); }
.vgl-btn--light:hover { background: var(--vgl-paper); }
.vgl-btn--outline-light { border-color: rgba(255, 255, 255, .5); color: #fff; background: transparent; }
.vgl-btn--outline-light:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }
.vgl-btn--ghost { border-color: var(--vgl-line); color: var(--vgl-ink); background: #fff; }
.vgl-btn--ghost:hover { border-color: var(--vgl-ink); }
.vgl-btn--sm { min-height: 40px; padding: 8px 16px; font-size: .9375rem; }
.vgl-btn--block { width: 100%; }
.vgl-btn:disabled { opacity: .7; cursor: progress; }

.vgl-link {
	padding: 0; border: 0; background: none; cursor: pointer;
	color: var(--vgl-violet); font: 600 .9375rem/1.4 var(--vgl-body);
	text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px;
	text-align: left;
}
.vgl-link:hover { color: var(--vgl-ink); }

/* ---------- Header ---------- */
.vgl-header {
	position: sticky; top: 0; z-index: 50;
	background: rgba(255, 255, 255, .97);
	border-bottom: 1px solid transparent;
	transition: box-shadow .2s, border-color .2s;
}
.admin-bar .vgl-header { top: 32px; }
.vgl-header.is-scrolled { border-color: var(--vgl-line); box-shadow: 0 8px 24px -16px rgba(21, 33, 61, .45); }
.vgl-header-inner { display: flex; align-items: center; gap: 28px; height: 72px; }
.vgl-brand { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.vgl-brand img { height: 44px; width: auto; }
.vgl-wordmark {
	display: inline-flex; align-items: center; gap: 8px;
	font: 800 1.25rem/1 var(--vgl-display); letter-spacing: -.01em; color: var(--vgl-ink);
}
.vgl-wordmark .vgl-icon { color: var(--vgl-violet); width: 26px; height: 26px; }
.vgl-nav { margin-left: auto; }
.vgl-nav ul { display: flex; gap: 26px; }
.vgl-nav a { text-decoration: none; font-weight: 500; font-size: .9375rem; color: var(--vgl-text); padding: 6px 0; }
.vgl-nav a:hover { color: var(--vgl-violet); text-decoration: underline; text-underline-offset: 6px; }
.vgl-nav-hotline { display: none; }
.vgl-header-actions { display: flex; align-items: center; gap: 16px; }
.vgl-hotline { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; text-decoration: none; color: var(--vgl-ink); white-space: nowrap; }
.vgl-hotline .vgl-icon { width: 20px; height: 20px; color: var(--vgl-violet); }
.vgl-menu-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--vgl-line); border-radius: 10px; background: #fff; color: var(--vgl-ink); cursor: pointer; place-items: center; }
.vgl-menu-toggle .vgl-i-close { display: none; }
.vgl-menu-open .vgl-menu-toggle .vgl-i-open { display: none; }
.vgl-menu-open .vgl-menu-toggle .vgl-i-close { display: block; }

/* ---------- Flash (no-JS form result) ---------- */
.vgl-flash { padding: 14px 0; font-size: .9375rem; }
.vgl-flash.is-ok { background: #e6f4ec; color: #14532d; }
.vgl-flash.is-err { background: #fdecea; color: var(--vgl-red); }

/* ---------- Hero ---------- */
.vgl-hero {
	position: relative; overflow: hidden;
	padding: 72px 0 96px;
	background: var(--vgl-ink);
	color: #fff;
}
.vgl-hero.has-photo {
	background:
		linear-gradient(90deg, rgba(21, 33, 61, .95) 0%, rgba(21, 33, 61, .85) 48%, rgba(21, 33, 61, .55) 100%),
		var(--vgl-hero-photo) center / cover no-repeat;
}
.vgl-hero::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 110px;
	background: url(../img/waves.svg) center bottom / 100% 100% no-repeat;
	opacity: .14; pointer-events: none;
}
.vgl-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 64px; align-items: center; }
.vgl-hero h1 {
	color: #fff;
	font-size: clamp(2.25rem, 1.25rem + 3.2vw, 3.6rem);
	line-height: 1.12;
	letter-spacing: -.022em;
	font-weight: 700;
}
.vgl-hero-lead { margin-top: 22px; max-width: 34em; font-size: 1.125rem; color: rgba(255, 255, 255, .82); }
.vgl-hero-cta { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.vgl-facts { margin: 44px 0 0; padding-top: 22px; display: flex; flex-wrap: wrap; row-gap: 16px; border-top: 1px solid rgba(255, 255, 255, .18); }
.vgl-facts div { padding-right: 26px; margin-right: 26px; border-right: 1px solid rgba(255, 255, 255, .18); }
.vgl-facts div:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.vgl-facts dt { font: 700 1.125rem/1.3 var(--vgl-display); color: #fff; }
.vgl-facts dd { margin: 2px 0 0; font-size: .875rem; color: rgba(255, 255, 255, .68); }

/* The visa sticker */
.vgl-visa {
	position: relative;
	padding: 26px 28px 0;
	border-radius: 14px;
	background: #fbfcf8 url(../img/guilloche.svg) no-repeat right -130px top -110px / 440px;
	color: var(--vgl-text);
	box-shadow: 0 34px 70px -24px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .08);
	overflow: hidden;
}
.vgl-visa::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, rgba(223, 236, 228, .85) 0%, rgba(251, 252, 248, 0) 38%);
}
.vgl-visa > * { position: relative; }
.vgl-visa-head {
	display: flex; align-items: center; gap: 18px;
	padding-bottom: 16px; margin-bottom: 18px;
	border-bottom: 1px dashed var(--vgl-mint-line);
}
.vgl-visa-word {
	font: 800 3.4rem/.85 var(--vgl-display);
	letter-spacing: .01em;
	color: transparent;
	-webkit-text-stroke: 1.6px var(--vgl-violet);
	flex: none;
}
.vgl-visa-title { font-size: 1.375rem; line-height: 1.25; }
.vgl-visa-sub { margin-top: 3px; font-size: .875rem; color: var(--vgl-muted); }
.vgl-mrz {
	display: flex; flex-direction: column;
	margin: 22px -28px 0; padding: 12px 28px 14px;
	background: rgba(223, 236, 228, .7);
	border-top: 1px solid var(--vgl-mint-line);
	font: 500 13px/1.55 "OCR B", "OCR-B", "Courier New", ui-monospace, monospace;
	letter-spacing: .16em; color: #4b5a73;
	white-space: nowrap; overflow: hidden;
}

/* ---------- Forms ---------- */
.vgl-form { position: relative; }
.vgl-form-body { display: grid; gap: 14px; }
.vgl-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.vgl-field { min-width: 0; }
.vgl-field > label,
.vgl-field legend { display: block; margin-bottom: 6px; font-size: .8125rem; font-weight: 600; color: var(--vgl-ink); }
.vgl-form input[type="text"],
.vgl-form input[type="tel"],
.vgl-form input[type="email"],
.vgl-form select,
.vgl-form textarea {
	display: block; width: 100%; min-height: 46px; margin: 0;
	padding: 10px 12px;
	border: 1.5px solid #c9d2de; border-radius: 8px;
	background: #fff; color: var(--vgl-text);
	font: 400 1rem/1.4 var(--vgl-body);
	box-shadow: none;
	transition: border-color .15s, box-shadow .15s;
}
.vgl-form select {
	appearance: none; -webkit-appearance: none;
	padding-right: 36px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315213d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 18px;
}
.vgl-form textarea { min-height: 96px; resize: vertical; }
.vgl-form input::placeholder, .vgl-form textarea::placeholder { color: #8a93a6; }
.vgl-form input:focus, .vgl-form select:focus, .vgl-form textarea:focus {
	outline: none; border-color: var(--vgl-violet); box-shadow: 0 0 0 3px rgba(91, 62, 158, .18);
}
.vgl-form [aria-invalid="true"] { border-color: var(--vgl-red); }
.vgl-req { color: var(--vgl-red); }
.vgl-err { margin-top: 6px; color: var(--vgl-red); font-size: .8125rem; line-height: 1.4; }
.vgl-form-error { padding: 10px 12px; border-radius: 8px; background: #fdecea; color: var(--vgl-red); font-size: .875rem; }
.vgl-radios { margin: 0; padding: 0; border: 0; }
.vgl-radios label { display: inline-flex; align-items: center; gap: 8px; margin: 2px 22px 2px 0; font-size: .9375rem; cursor: pointer; }
.vgl-radios input, .vgl-consent input { accent-color: var(--vgl-violet); width: 18px; height: 18px; margin: 0; flex: none; }
.vgl-consent label { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: .8125rem; font-weight: 400; color: var(--vgl-muted); line-height: 1.5; cursor: pointer; }
.vgl-consent input { margin-top: 1px; }
.vgl-consent a { color: var(--vgl-violet); }
.vgl-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Success: the ink stamp lands */
.vgl-success { padding: 8px 0 6px; text-align: center; outline: none; }
.vgl-stamp { display: block; width: 150px; height: 150px; margin: 0 auto 14px; color: var(--vgl-violet); transform: rotate(-8deg); }
.vgl-stamp-band { fill: var(--vgl-stamp-bg, #fbfcf8); }
.vgl-stamp-ring { font: 700 11px var(--vgl-body); letter-spacing: .12em; }
.vgl-stamp-center { font: 800 19px var(--vgl-display); letter-spacing: .05em; }
.vgl-stamp-date { font: 600 11px var(--vgl-body); letter-spacing: .14em; }
.vgl-stamp-star { font-size: 10px; }
.vgl-success.is-stamped .vgl-stamp { animation: vgl-stamp .55s cubic-bezier(.2, .9, .3, 1.25) both; }
@keyframes vgl-stamp {
	0% { opacity: 0; transform: scale(1.9) rotate(-24deg); }
	55% { opacity: 1; transform: scale(.93) rotate(-6deg); }
	100% { opacity: 1; transform: scale(1) rotate(-8deg); }
}
.vgl-success-title { font-size: 1.375rem; }
.vgl-success-text { margin: 8px auto 18px; max-width: 30em; color: var(--vgl-muted); }

/* ---------- Sections ---------- */
.vgl-section { padding: 96px 0; }
.vgl-head { max-width: 680px; margin-bottom: 44px; }
.vgl-head h2,
.vgl-consult-copy h2,
.vgl-faq-side h2 { font-size: clamp(1.75rem, 1.15rem + 1.9vw, 2.5rem); line-height: 1.18; letter-spacing: -.015em; }
.vgl-head p { margin-top: 14px; font-size: 1.0625rem; color: var(--vgl-muted); }
.vgl-head--row { max-width: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.vgl-note { margin-top: 18px; max-width: 760px; font-size: .875rem; color: var(--vgl-muted); }

/* Services */
.vgl-purposes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--vgl-ink); }
.vgl-purpose { display: flex; flex-direction: column; gap: 10px; padding: 26px 26px 6px 0; }
.vgl-purpose + .vgl-purpose { padding-left: 26px; border-left: 1px solid var(--vgl-line); }
.vgl-purpose h3 { font-size: 1.25rem; line-height: 1.3; }
.vgl-purpose p { color: var(--vgl-muted); font-size: .9375rem; flex: 1; }
.vgl-purpose .vgl-link { margin-top: 6px; }
.vgl-extras { margin-top: 56px; padding: 28px 32px; display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: start; background: var(--vgl-paper); border-radius: var(--vgl-radius); }
.vgl-extras-title { font-size: 1.125rem; line-height: 1.35; }
.vgl-extras ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.vgl-extras strong { display: block; color: var(--vgl-ink); font-weight: 600; }
.vgl-extras span { display: block; margin-top: 4px; font-size: .9375rem; color: var(--vgl-muted); }

/* Markets */
.vgl-markets-section { background: var(--vgl-paper); }
.vgl-markets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.vgl-market { --tint: #eaeef3; display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--vgl-line); border-radius: var(--vgl-radius); }
.vgl-region-chau-a { --tint: #dcebe2; }
.vgl-region-chau-au { --tint: #e6e0f5; }
.vgl-region-chau-dai-duong { --tint: #dbe8f4; }
.vgl-region-chau-my { --tint: #f5e6cb; }
.vgl-region-chau-phi { --tint: #f3e3d3; }
.vgl-market-art {
	aspect-ratio: 16 / 9; display: grid; place-items: end center; padding: 14px 20px 0;
	background: var(--tint) url(../img/waves.svg) center bottom / 100% 55% no-repeat;
	color: var(--vgl-ink);
}
.vgl-landmark { width: 100%; height: 100%; max-height: 130px; }
.vgl-sun { fill: var(--vgl-marigold); stroke: none; }
.vgl-sun-stroke { stroke: var(--vgl-marigold); stroke-dasharray: 4 5; }
.vgl-water { opacity: .45; }
.vgl-market-body { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 22px; }
.vgl-market-region { font-size: .8125rem; font-weight: 600; color: var(--vgl-violet); }
.vgl-market h3 { font-size: 1.25rem; line-height: 1.3; }
.vgl-market-body p:not(.vgl-market-region) { flex: 1; font-size: .9375rem; color: var(--vgl-muted); }
.vgl-market .vgl-link { margin-top: 8px; }

/* Worries vs. answers */
.vgl-pairs { border: 1px solid var(--vgl-line); border-radius: var(--vgl-radius); overflow: hidden; }
.vgl-pair { display: grid; grid-template-columns: 1fr 1fr; }
.vgl-pair + .vgl-pair { border-top: 1px solid var(--vgl-line); }
.vgl-pair > * { margin: 0; padding: 20px 28px; display: flex; gap: 14px; align-items: flex-start; }
.vgl-pair--head > * { padding-top: 14px; padding-bottom: 14px; font-size: .875rem; font-weight: 700; color: var(--vgl-ink); background: var(--vgl-paper); }
.vgl-pair--head > *:last-child { background: var(--vgl-violet-soft); color: var(--vgl-violet); }
.vgl-pair-fix { background: #faf8fe; }
.vgl-pair .vgl-icon { flex: none; width: 22px; height: 22px; margin-top: 2px; }
.vgl-pair-worry .vgl-icon { color: #9aa3b5; }
.vgl-pair-fix .vgl-icon { color: var(--vgl-violet); stroke-width: 2.4; }
.vgl-center-cta { margin-top: 32px; }

/* Advantages (dark band) */
.vgl-advantages { background: var(--vgl-ink); color: rgba(255, 255, 255, .78); }
.vgl-advantages h2, .vgl-advantages h3 { color: #fff; }
.vgl-adv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 48px; }
.vgl-adv li { padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .16); }
.vgl-adv-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; border: 1.5px solid var(--vgl-marigold); border-radius: 50%; color: var(--vgl-marigold); }
.vgl-adv-icon .vgl-icon { width: 22px; height: 22px; }
.vgl-adv h3 { font-size: 1.1875rem; line-height: 1.35; }
.vgl-adv p { margin-top: 6px; font-size: .9375rem; }

/* Prices */
.vgl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.vgl-chip { padding: 8px 16px; border: 1.5px solid var(--vgl-line); border-radius: 999px; background: #fff; color: var(--vgl-text); font: 500 .9375rem/1.2 var(--vgl-body); cursor: pointer; }
.vgl-chip:hover { border-color: var(--vgl-ink); }
.vgl-chip[aria-pressed="true"] { background: var(--vgl-ink); border-color: var(--vgl-ink); color: #fff; }
.vgl-table-wrap { border: 1px solid var(--vgl-line); border-radius: var(--vgl-radius); overflow: hidden; }
.vgl-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.vgl-table thead th { padding: 14px 20px; text-align: left; font-size: .8125rem; font-weight: 600; color: var(--vgl-muted); background: var(--vgl-paper); border-bottom: 1px solid var(--vgl-line); }
.vgl-table tbody th,
.vgl-table td { padding: 16px 20px; text-align: left; vertical-align: middle; font-weight: 400; border-bottom: 1px solid var(--vgl-line); }
.vgl-table tbody tr:last-child > * { border-bottom: 0; }
.vgl-table tbody tr:hover { background: #fafbfc; }
.vgl-t-name { display: block; font: 700 1.0625rem/1.35 var(--vgl-display); color: var(--vgl-ink); }
.vgl-t-type { display: block; font-size: .875rem; color: var(--vgl-muted); }
.vgl-t-fee { font-weight: 700; color: var(--vgl-ink); }
.vgl-t-fee.is-empty { font-weight: 500; color: var(--vgl-violet); }
.vgl-t-act { text-align: right !important; white-space: nowrap; }

/* Steps: numbered stamps along a dashed route */
.vgl-steps-section { background: var(--vgl-paper); }
.vgl-steps { position: relative; display: grid; grid-template-columns: repeat(var(--vgl-steps, 5), minmax(0, 1fr)); gap: 28px; }
.vgl-steps::before { content: ""; position: absolute; top: 28px; left: 28px; right: calc((100% - (var(--vgl-steps, 5) - 1) * 28px) / var(--vgl-steps, 5) - 28px); border-top: 2px dashed var(--vgl-mint-line); }
.vgl-steps li { position: relative; }
.vgl-step-no {
	display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 18px;
	border: 2px solid var(--vgl-violet); border-radius: 50%;
	background: #fff; box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 5.5px var(--vgl-violet);
	color: var(--vgl-violet); font: 800 1.375rem/1 var(--vgl-display);
	transform: rotate(-6deg);
}
.vgl-steps li:nth-child(even) .vgl-step-no { transform: rotate(5deg); }
.vgl-steps h3 { font-size: 1.125rem; line-height: 1.35; }
.vgl-steps p { margin-top: 6px; font-size: .9375rem; color: var(--vgl-muted); }

/* Gallery */
.vgl-gallery-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.vgl-gallery-grid a { display: block; border-radius: 10px; overflow: hidden; }
.vgl-gallery-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; }

/* Reviews */
.vgl-reviews { background: var(--vgl-paper); }
.vgl-review-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.vgl-review { display: flex; flex-direction: column; padding: 24px; background: #fff; border: 1px solid var(--vgl-line); border-radius: var(--vgl-radius); }
.vgl-review blockquote { margin: 0; font-size: 1rem; }
.vgl-review blockquote p + p { margin-top: 10px; }
.vgl-review-proof { position: relative; display: block; margin-top: 16px; border-radius: 8px; overflow: hidden; }
.vgl-review-proof img { width: 100%; max-height: 200px; object-fit: cover; }
.vgl-review-proof span { position: absolute; right: 8px; bottom: 8px; padding: 3px 9px; border-radius: 6px; background: rgba(21, 33, 61, .85); color: #fff; font-size: .75rem; }
.vgl-review footer { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--vgl-line); }
.vgl-avatar { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--vgl-violet-soft); color: var(--vgl-violet); font-weight: 700; text-transform: uppercase; }
.vgl-review-who strong { display: block; color: var(--vgl-ink); font-size: .9375rem; }
.vgl-review-who small { display: block; color: var(--vgl-muted); font-size: .8125rem; }
.vgl-badge { margin-left: auto; padding: 3px 10px; border-radius: 999px; background: var(--vgl-mint); color: var(--vgl-ink); font-size: .75rem; font-weight: 600; }

/* 1:1 consultation */
.vgl-consult { background: #e9f2ec url(../img/guilloche.svg) no-repeat left -180px bottom -220px / 600px; }
.vgl-consult-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; align-items: start; }
.vgl-consult-copy > p { margin-top: 14px; font-size: 1.0625rem; color: var(--vgl-muted); }
.vgl-contact-list { display: grid; gap: 16px; margin-top: 30px; }
.vgl-contact-list li { display: flex; align-items: flex-start; gap: 14px; font-size: .875rem; color: var(--vgl-muted); }
.vgl-contact-list .vgl-icon { width: 40px; height: 40px; padding: 9px; flex: none; border-radius: 50%; background: #fff; color: var(--vgl-violet); }
.vgl-contact-list a { color: var(--vgl-ink); font-weight: 700; font-size: 1rem; text-decoration: none; }
.vgl-contact-list a:hover { text-decoration: underline; }
.vgl-addr { color: var(--vgl-text); font-size: .9375rem; }
.vgl-consult-form { padding: 32px; background: #fff; border-radius: 16px; box-shadow: 0 28px 56px -30px rgba(21, 33, 61, .5); }
.vgl-consult-form .vgl-stamp-band { fill: #fff; }

/* Blog */
.vgl-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.vgl-post { display: flex; flex-direction: column; height: 100%; overflow: hidden; background: #fff; border: 1px solid var(--vgl-line); border-radius: var(--vgl-radius); color: inherit; text-decoration: none; }
.vgl-post-img { display: grid; place-items: center; aspect-ratio: 16 / 9; background: var(--vgl-paper); color: var(--vgl-mint-line); }
.vgl-post-img img { width: 100%; height: 100%; object-fit: cover; }
.vgl-post-img .vgl-icon { width: 48px; height: 48px; }
.vgl-post-body { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 22px; }
.vgl-post-body time { font-size: .8125rem; color: var(--vgl-muted); }
.vgl-post-body strong { font: 700 1.125rem/1.35 var(--vgl-display); color: var(--vgl-ink); }
.vgl-post-body span { font-size: .9375rem; color: var(--vgl-muted); }
.vgl-post:hover strong { text-decoration: underline; text-underline-offset: 4px; }

/* Page content */
.vgl-prose { max-width: 800px; }
.vgl-prose h2 { font-size: 1.75rem; margin: 1.6em 0 .5em; }
.vgl-prose h3 { font-size: 1.25rem; margin: 1.4em 0 .4em; }
.vgl-prose p, .vgl-prose ul, .vgl-prose ol { margin: 0 0 1em; }
.vgl-prose ul { list-style: disc; padding-left: 1.4em; }
.vgl-prose ol { list-style: decimal; padding-left: 1.4em; }

/* FAQ */
.vgl-faq { background: var(--vgl-paper); }
.vgl-faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.vgl-faq-side { position: sticky; top: 110px; }
.vgl-faq-side .vgl-note { margin-top: 14px; }
.vgl-faq-side > p:not(.vgl-note) { margin-top: 28px; font-weight: 600; color: var(--vgl-ink); }
.vgl-faq-side .vgl-btn { margin-top: 12px; }
.vgl-accordion details { border-bottom: 1px solid var(--vgl-line); }
.vgl-accordion details:first-child { border-top: 1px solid var(--vgl-line); }
.vgl-accordion summary { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 20px 0; list-style: none; cursor: pointer; font-weight: 600; font-size: 1.0625rem; color: var(--vgl-ink); }
.vgl-accordion summary::-webkit-details-marker { display: none; }
.vgl-accordion summary .vgl-icon { flex: none; margin-top: 2px; color: var(--vgl-violet); transition: transform .2s; }
.vgl-accordion details[open] summary .vgl-icon { transform: rotate(180deg); }
.vgl-accordion summary:hover span { color: var(--vgl-violet); }
.vgl-answer { padding: 0 40px 22px 0; }
.vgl-answer p + p { margin-top: 10px; }

/* Closing call to action */
.vgl-cta { position: relative; overflow: hidden; padding: 88px 0; background: var(--vgl-ink); color: rgba(255, 255, 255, .8); }
.vgl-cta-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; }
.vgl-cta h2 { color: #fff; font-size: clamp(1.9rem, 1.2rem + 2.3vw, 2.9rem); line-height: 1.15; letter-spacing: -.02em; max-width: 18em; }
.vgl-cta p { margin-top: 14px; max-width: 36em; font-size: 1.0625rem; }
.vgl-cta-actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.vgl-cta-stamp .vgl-stamp { width: 240px; height: 240px; margin: 0; color: var(--vgl-marigold); transform: rotate(-12deg); --vgl-stamp-bg: var(--vgl-ink); }
.vgl-page .vgl-cta :focus-visible,
.vgl-page .vgl-hero :focus-visible,
.vgl-page .vgl-footer :focus-visible { outline-color: var(--vgl-marigold); }
.vgl-page .vgl-hero .vgl-visa :focus-visible { outline-color: var(--vgl-violet); }

/* Footer */
.vgl-footer { padding: 64px 0 28px; background: var(--vgl-ink-3); color: rgba(255, 255, 255, .7); font-size: .9375rem; }
.vgl-footer-grid { display: grid; grid-template-columns: 1.3fr 1.5fr 1fr .8fr; gap: 40px; }
.vgl-footer .vgl-wordmark { color: #fff; }
.vgl-footer .vgl-wordmark .vgl-icon { color: var(--vgl-marigold); }
.vgl-footer-brand img { height: 44px; width: auto; }
.vgl-footer-brand p { margin-top: 14px; }
.vgl-legal { font-size: .8125rem; color: rgba(255, 255, 255, .55); }
.vgl-page .vgl-footer-h { margin-bottom: 14px; font: 700 .9375rem/1.4 var(--vgl-body); color: #fff; }
.vgl-footer-list { display: grid; gap: 10px; }
.vgl-footer-list strong { color: rgba(255, 255, 255, .9); font-weight: 600; }
.vgl-footer a { color: rgba(255, 255, 255, .88); text-decoration: none; }
.vgl-footer a:hover { color: #fff; text-decoration: underline; }
.vgl-social { display: flex; flex-wrap: wrap; gap: 10px; }
.vgl-social a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%; }
.vgl-social a:hover { border-color: #fff; text-decoration: none; }
.vgl-social .vgl-icon { width: 20px; height: 20px; }
.vgl-footer-bottom { display: flex; justify-content: space-between; gap: 24px; margin-top: 48px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .8125rem; color: rgba(255, 255, 255, .55); }
.vgl-footer-bottom p:first-child { max-width: 760px; }

/* Floating contact (desktop) and bottom bar (mobile) */
.vgl-float { position: fixed; right: 20px; bottom: 24px; z-index: 40; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.vgl-float a { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; text-decoration: none; box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .45); }
.vgl-float em { position: absolute; right: 66px; padding: 6px 10px; border-radius: 6px; background: var(--vgl-ink); color: #fff; font: normal 600 .8125rem/1.2 var(--vgl-body); white-space: nowrap; opacity: 0; transform: translateX(6px); pointer-events: none; transition: opacity .15s, transform .15s; }
.vgl-float a:hover em, .vgl-float a:focus-visible em { opacity: 1; transform: none; }
.vgl-float-zalo { background: var(--vgl-zalo); color: #fff; }
.vgl-float-zalo span { font: 800 .9375rem/1 var(--vgl-body); letter-spacing: -.01em; }
.vgl-float-msg { background: #fff; color: #0866ff; }
.vgl-float-call { background: var(--vgl-marigold); color: var(--vgl-ink); }
.vgl-float .vgl-icon { width: 26px; height: 26px; }
.vgl-bar { display: none; }

/* Popup */
.vgl-dialog {
	width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 32px);
	margin: auto; padding: 0; border: 0; border-radius: 16px;
	background: #fff; color: var(--vgl-text);
	box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .5);
	overflow: auto;
}
.vgl-dialog[open] { animation: vgl-pop .2s ease-out; }
@keyframes vgl-pop { from { opacity: 0; transform: translateY(14px); } }
.vgl-dialog::backdrop { background: rgba(14, 23, 48, .62); }
.vgl-dialog-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 22px 24px 16px; border-bottom: 1px dashed var(--vgl-mint-line); background: linear-gradient(180deg, #e3eee7, #fff); }
.vgl-dialog-head h2 { font-size: 1.375rem; line-height: 1.25; }
.vgl-dialog-context { margin-top: 3px; font-size: .875rem; font-weight: 600; color: var(--vgl-violet); }
.vgl-dialog-close { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border: 1px solid var(--vgl-line); border-radius: 50%; background: #fff; color: var(--vgl-ink); cursor: pointer; }
.vgl-dialog .vgl-form { padding: 20px 24px 24px; }
.vgl-dialog .vgl-stamp-band { fill: #fff; }
body.vgl-dialog-open { overflow: hidden; }

/* Admin-only hints */
.vgl-admin-hint { padding: 16px 0; }
.vgl-admin-hint p { padding: 12px 16px; border: 2px dashed #c4b5e6; border-radius: 10px; background: #faf8fe; font-size: .875rem; }
.vgl-admin-hint a { color: var(--vgl-violet); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
	.vgl-header-inner { gap: 16px; }
	.vgl-nav {
		display: none; position: fixed; left: 0; right: 0; top: 72px; z-index: 49;
		margin: 0; padding: 12px 24px 24px;
		background: #fff; border-bottom: 1px solid var(--vgl-line);
		box-shadow: 0 20px 30px -20px rgba(21, 33, 61, .4);
	}
	.admin-bar .vgl-nav { top: 104px; }
	.vgl-menu-open .vgl-nav { display: block; }
	.vgl-nav ul { flex-direction: column; gap: 0; }
	.vgl-nav li a { display: block; padding: 14px 0; border-bottom: 1px solid var(--vgl-line); font-size: 1rem; }
	.vgl-nav-hotline { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-weight: 700; color: var(--vgl-ink); text-decoration: none; }
	.vgl-nav-hotline .vgl-icon { color: var(--vgl-violet); }
	.vgl-header-actions { margin-left: auto; }
	.vgl-menu-toggle { display: grid; }
	.vgl-markets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
	.vgl-hero { padding: 48px 0 72px; }
	.vgl-hero-grid { grid-template-columns: 1fr; gap: 40px; }
	.vgl-visa { max-width: 600px; }
	.vgl-purposes { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
	.vgl-purpose, .vgl-purpose + .vgl-purpose { padding: 24px 0; border-left: 0; border-bottom: 1px solid var(--vgl-line); }
	.vgl-extras { grid-template-columns: 1fr; }
	.vgl-adv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vgl-review-list, .vgl-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vgl-consult-grid, .vgl-faq-grid { grid-template-columns: 1fr; gap: 36px; }
	.vgl-faq-side { position: static; }
	.vgl-footer-grid { grid-template-columns: 1fr 1fr; }
	.vgl-gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.vgl-steps { grid-template-columns: 1fr; gap: 26px; }
	.vgl-steps::before { top: 28px; bottom: 28px; left: 27px; right: auto; border-top: 0; border-left: 2px dashed var(--vgl-mint-line); }
	.vgl-steps li { padding-left: 80px; min-height: 56px; }
	.vgl-step-no { position: absolute; left: 0; top: 0; margin: 0; }
}

@media (max-width: 782px) {
	.admin-bar .vgl-header { top: 46px; }
	.admin-bar .vgl-nav { top: 118px; }
}

@media (max-width: 760px) {
	body.vgl-page { padding-bottom: 72px; }
	.vgl-wrap { padding: 0 18px; }
	.vgl-section { padding: 64px 0; }
	.vgl-head { margin-bottom: 32px; }
	.vgl-head--row { flex-direction: column; align-items: flex-start; }
	.vgl-header-inner { height: 64px; }
	.vgl-nav { top: 64px; }
	.admin-bar .vgl-nav { top: 110px; }
	.vgl-header-actions .vgl-btn { display: none; }
	.vgl-hotline span { display: none; }
	.vgl-hotline { width: 44px; height: 44px; justify-content: center; border-radius: 10px; background: var(--vgl-violet-soft); }
	.vgl-brand img { height: 36px; }
	.vgl-hero-lead { font-size: 1.0625rem; }
	.vgl-facts div { padding-right: 18px; margin-right: 18px; }
	.vgl-visa { padding: 22px 18px 0; }
	.vgl-visa-word { font-size: 2.6rem; }
	.vgl-visa-title { font-size: 1.1875rem; }
	.vgl-mrz { margin: 20px -18px 0; padding: 10px 18px 12px; font-size: 11px; }
	.vgl-extras { padding: 22px; }
	.vgl-extras ul { grid-template-columns: 1fr; gap: 16px; }
	.vgl-pair { grid-template-columns: 1fr; }
	.vgl-pair--head { display: none; }
	.vgl-pair > * { padding: 16px 18px; }
	.vgl-pair-worry { padding-bottom: 6px !important; }
	.vgl-pair-fix { background: transparent; padding-top: 6px !important; }
	.vgl-adv { gap: 28px; }
	.vgl-table, .vgl-table tbody, .vgl-table tr, .vgl-table th, .vgl-table td { display: block; }
	.vgl-table thead { display: none; }
	.vgl-table tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; padding: 16px 18px; border-bottom: 1px solid var(--vgl-line); }
	.vgl-table tbody tr:last-child { border-bottom: 0; }
	.vgl-table tbody th, .vgl-table td { padding: 0; border: 0; }
	.vgl-table tbody th, .vgl-t-act { grid-column: 1 / -1; }
	.vgl-t-act { text-align: left !important; }
	.vgl-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: .75rem; font-weight: 500; color: var(--vgl-muted); }
	.vgl-consult-form { padding: 22px 18px; }
	.vgl-cta { padding: 64px 0; }
	.vgl-cta-inner { grid-template-columns: 1fr; }
	.vgl-cta-stamp { display: none; }
	.vgl-footer-bottom { flex-direction: column; gap: 8px; }
	.vgl-float { display: none; }
	.vgl-bar {
		display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: 8px;
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
		padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
		background: #fff; border-top: 1px solid var(--vgl-line);
		box-shadow: 0 -10px 24px -18px rgba(21, 33, 61, .5);
	}
	.vgl-bar a, .vgl-bar button {
		display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
		padding: 6px; border: 0; border-radius: 10px; background: none; cursor: pointer;
		color: var(--vgl-ink); font: 600 .75rem/1.2 var(--vgl-body); text-decoration: none;
	}
	.vgl-bar .vgl-icon { width: 22px; height: 22px; }
	.vgl-bar .is-primary { flex-direction: row; gap: 8px; background: var(--vgl-marigold); font-size: .875rem; }
	.vgl-dialog { width: 100vw; max-width: 100vw; max-height: 92dvh; margin: auto 0 0; border-radius: 16px 16px 0 0; }
	.vgl-dialog-head { padding: 18px 18px 14px; }
	.vgl-dialog .vgl-form { padding: 16px 18px 22px; }
}

@media (max-width: 600px) {
	.admin-bar .vgl-header { top: 0; }
}

@media (max-width: 560px) {
	.vgl-markets, .vgl-purposes, .vgl-adv, .vgl-review-list, .vgl-posts, .vgl-footer-grid { grid-template-columns: 1fr; }
	.vgl-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vgl-grid-2 { grid-template-columns: 1fr; }
	.vgl-facts { flex-direction: column; }
	.vgl-facts div { border-right: 0; margin-right: 0; padding-right: 0; }
	.vgl-hero-cta .vgl-btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
	.vgl-page *, .vgl-page *::before, .vgl-page *::after { animation: none !important; transition: none !important; }
}