/* VNT39 footer — only loaded when the admin switch "Chân trang" is ON.
   Content comes from VNT39 → Chân trang; every visual decision lives here.
   Every value a manager can change is a CSS variable (--vf-*): the defaults sit in ONE block right below (mirrors
   inc/footer-registry.php), and the admin only prints the few variables that differ, as an inline style on the footer.
   Tiers: main (burgundy + Tokyo silhouette) · quick cards + newsletter (white)
          · brands + payments (charcoal) · bottom legal (near black).
   Breakpoints: >=1180 desktop · 768-1179 tablet · <=767 mobile (accordion). */

.vnt39-footer-on #footer.footer-wrapper { background: none; }

.vnt39-ft {
	/* @vf-defaults-begin — must match the defaults in inc/footer-registry.php (change both together) */
	/* 01. Chung */
	--vf-container: 1300px; --vf-gap-top: 0px; --vf-text: #ffffff; --vf-accent: #ff6b81; --vf-accent2: #a3182d;
	/* 02. Thương hiệu VNT39 */
	--vf-logo-w: 56px; --vf-logo-w-m: 52px; --vf-gap-logo: 14px; --vf-gap-names: 2px; --vf-gap-head: 16px; --vf-gap-desc: 18px; --vf-name-c: #ffffff;
	--vf-name-fs: 25px; --vf-name-fs-m: 25px; --vf-name-fw: 700; --vf-tag-c: #f7e3e6; --vf-tag-fs: 14.5px; --vf-tag-fs-m: 15px; --vf-tag-fw: 400;
	--vf-desc-c: #f6dde1; --vf-desc-fs: 14.5px; --vf-desc-fs-m: 14px; --vf-desc-fw: 400; --vf-desc-lh: 1.6; --vf-desc-lh-m: 1.65;
	/* 03. Mạng xã hội */
	--vf-soc-size: 42px; --vf-soc-size-m: 40px; --vf-soc-icon: 22px; --vf-soc-r: 50%; --vf-soc-gap: 12px; --vf-soc-ty: -3px; --vf-soc-sc: 1.05;
	--vf-soc-sh: 0.38;
	/* 04. Menu Sản phẩm */
	--vf-tc: #ffffff; --vf-tfs: 18px; --vf-row-c: #ffefed; --vf-row-fs: 14px; --vf-row-py: 5px; --vf-row-py-m: 10px; --vf-dis-op: 0.55;
	--vf-row-bg-h: rgba(255,255,255,.15); --vf-row-c-h: #ffffff; --vf-row-r: 8px; --vf-row-tx: 5px;
	/* 07. Thông tin liên hệ */
	--vf-ct-tfs-m: 17px; --vf-ct-ic-c: #f1c3ca; --vf-ct-ic-sz: 20px; --vf-ct-c: #ffffff; --vf-ct-fs: 14px; --vf-ct-gap: 9px; --vf-ct-gap-m: 12px;
	/* 08. Ảnh cửa hàng & Google Maps */
	--vf-st-fit: cover; --vf-st-pos: center; --vf-st-w: 260px; --vf-st-ar: 16 / 10; --vf-st-r: 10px; --vf-st-w-m: 100%; --vf-st-ar-m: 16 / 9;
	--vf-st-r-m: 12px; --vf-st-bd: rgba(255,255,255,.55); --vf-st-bg: rgba(0,0,0,.25); --vf-ph-c: rgba(255,255,255,.5); --vf-ph-bg: rgba(0,0,0,.25);
	--vf-ph-bd: rgba(255,255,255,.55); --vf-map-bg: #ffffff; --vf-map-c: #6f0b1c; --vf-map-ic-c: #b1132a; --vf-map-r: 10px; --vf-map-h: 0px;
	--vf-map-h-m: 48px; --vf-map-fs: 13.5px; --vf-map-fw: 700; --vf-map-sh: 0.25; --vf-map-w-m: 100%; --vf-map-as-m: stretch; --vf-map-bg-h: #ffe1e8;
	--vf-map-c-h: #560615; --vf-map-ty: -2px; --vf-map-sh-h: 0.4;
	/* 09. Nền Tokyo */
	--vf-tk-op: 0.4; --vf-tk-h: 120px; --vf-tk-h-m: 90px; --vf-tk-x: 50%; --vf-tk-y: 100%; --vf-tk-size: cover; --vf-tk-fade: 55%;
	/* 10. Bố cục */
	--vf-main-pt: 34px; --vf-main-pb: 36px; --vf-col-gap: 22px; --vf-tab-cols: 3; --vf-col-gap-t: 28px; --vf-row-gap-t: 34px; --vf-main-pt-t: 34px;
	--vf-main-pb-t: 36px; --vf-dv-c: #ffffff; --vf-dv-o: 0.11; --vf-dv-w: 1px; --vf-dv-x: 0px; --vf-dv-in: 5px;
	/* 11. Thẻ dịch vụ nhanh */
	--vf-quick-bg: #ffffff; --vf-quick-pt: 22px; --vf-quick-pb: 24px; --vf-cards-cols: 5; --vf-card-w-m: 41%; --vf-card-gap: 12px; --vf-card-bg: #f4f6f8;
	--vf-card-r: 12px; --vf-card-img-h: 84px; --vf-card-img-h-m: 74px; --vf-card-fs: 15px; --vf-card-c: #1c1d22; --vf-card-go-bg: #960720;
	--vf-card-go-c: #ffffff; --vf-card-ty: -4px; --vf-card-sc: 1.03; --vf-card-sh-h: 0.16; --vf-card-go-tx: 3px;
	/* 12. Newsletter */
	--vf-news-ic-c: #b1132a; --vf-news-ic-sz: 40px; --vf-news-tc: #a3182d; --vf-news-sc: #45464d; --vf-news-tfs: 18.5px; --vf-news-tfs-m: 16.5px;
	--vf-news-sfs: 14px; --vf-news-gap: 14px; --vf-news-in-h: 50px; --vf-news-btn-h: 50px; --vf-news-btn-bg: #880017; --vf-news-btn-c: #ffffff;
	--vf-news-r: 10px;
	/* 13. Thương hiệu nổi bật */
	--vf-strip-bg: #141316; --vf-strip-pt: 22px; --vf-strip-pb: 24px; --vf-br-tc: #e6e6ea; --vf-br-tfs: 15px; --vf-br-h: 32px; --vf-br-h-m: 26px;
	--vf-br-w: 120px; --vf-br-op: 1; --vf-br-gx: 20px; --vf-br-gy: 12px; --vf-br-pad: 0px; --vf-br-r: 0px; --vf-br-txt-c: #f3f3f5; --vf-br-op-h: 0.78;
	--vf-br-ty: -2px;
	/* 14. Thanh toán */
	--vf-pay-h: 24px; --vf-pay-w: 84px; --vf-pay-ch: 32px; --vf-pay-px: 7px; --vf-pay-gap: 6px; --vf-pay-bg: #ffffff; --vf-pay-r: 6px; --vf-pay-op: 1;
	--vf-pay-tc: #26272c;
	/* 15. Thanh cuối & Lên đầu trang */
	--vf-bt-bg: #0f0f11; --vf-bt-py: 14px; --vf-bt-link-c: #b9b9c0; --vf-bt-link-h: #ffffff; --vf-bt-fs: 14.5px; --vf-bt-fs-m: 13.5px;
	--vf-cp-c: #9c9ca4; --vf-cp-fs: 14px; --vf-cp-fs-m: 12.5px;
	/* 16. Mobile */
	--vf-m-px: 16px; --vf-m-pt: 28px; --vf-m-pb: 26px; --vf-m-brand-gap: 18px; --vf-m-contact-gap: 22px; --vf-m-qk-pt: 18px; --vf-m-qk-pb: 20px;
	--vf-m-sp-pt: 18px; --vf-m-sp-pb: 20px; --vf-acc-h: 52px; --vf-acc-fs: 16.5px; --vf-acc-bd: rgba(255,255,255,.18); --vf-acc-px: 0px;
	--vf-acc-pb: 12px;
	/* 17. Hiệu ứng */
	--vf-dur: 0.2s;
	/* shared */
	--vf-cols: minmax(0, 25fr) minmax(0, 16fr) minmax(0, 19fr) minmax(0, 19fr) minmax(0, 21fr);
	--vf-row-sh-h: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 2px 8px rgba(0, 0, 0, .18); --vf-chev-tx: 4px; --vf-chev-d: block; --vf-tk-d: block;
	--vf-dv-d: block; --vf-card-go-d: block; --vf-map-bd-w: 0px; --vf-card-bd-w: 0px; --vf-news-pad: 0px;
	--vf-news-br: 0px; --vf-logo-f: url(#vnt39-ft-white);
	/* @vf-defaults-end */
	font-size: 15px;
	line-height: 1.5;
	color: #fff;
	text-align: left;
	margin-top: var(--vf-gap-top);
}
.vnt39-ft *, .vnt39-ft *::before, .vnt39-ft *::after { box-sizing: border-box; }
.vnt39-ft ul, .vnt39-ft li { list-style: none; margin: 0; padding: 0; }
.vnt39-ft h3, .vnt39-ft div:where(.vnt39-hx) { margin: 0; padding: 0; text-transform: none; letter-spacing: 0; color: inherit; font-family: inherit; }
.vnt39-ft p { margin: 0; }
.vnt39-ft a { color: inherit; text-decoration: none; }
.vnt39-ft img { display: block; max-width: 100%; }
.vnt39-ft a:focus-visible, .vnt39-ft button:focus-visible, .vnt39-ft input:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.vnt39-ft-wrap { width: 100%; max-width: var(--vf-container); margin: 0 auto; padding: 0 20px; }
.vnt39-ft-ico { display: block; width: 24px; height: 24px; flex: none; }
.vnt39-ft-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

/* ---------------------------------------------------------------- B. main */
.vnt39-ft-main {
	--m: var(--vnt39-ft-main, #4a040f);
	position: relative; isolation: isolate; overflow: hidden;
	padding: var(--vf-main-pt) 0 var(--vf-main-pb); color: var(--vf-text);
	background: linear-gradient(100deg, color-mix(in srgb, var(--m) 68%, #000) 0%, var(--m) 52%, color-mix(in srgb, var(--m) 72%, #b01830) 100%);
}
.vnt39-ft-main::before {
	content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: var(--vf-tk-h); display: var(--vf-tk-d);
	background: var(--vnt39-ft-skyline, url(../images/footer-tokyo.svg)) var(--vf-tk-x) var(--vf-tk-y) / var(--vf-tk-size) no-repeat;
	opacity: var(--vf-tk-op); pointer-events: none;
	-webkit-mask-image: linear-gradient(to top, #000 var(--vf-tk-fade), transparent); mask-image: linear-gradient(to top, #000 var(--vf-tk-fade), transparent);
}
.vnt39-ft-main__grid {
	display: grid; align-items: start; column-gap: var(--vf-col-gap);
	grid-template-columns: var(--vf-cols);
}

.vnt39-ft-brand__head { display: flex; align-items: center; gap: var(--vf-gap-logo); margin-bottom: var(--vf-gap-head); }
/* footer-only logo colour: --vf-logo-f is url(#vnt39-ft-white) (an SVG filter printed with the footer: forces the chosen colour AND drops the PNG's
   faint alpha haze that otherwise shows as a pale square) or "none" for the original logo. The header/site logo file is never touched. */
.vnt39-ft-brand__logo { width: var(--vf-logo-w); height: var(--vf-logo-w); object-fit: contain; flex: none; filter: var(--vf-logo-f); }
.vnt39-ft-brand__names { display: flex; flex-direction: column; gap: var(--vf-gap-names); min-width: 0; }
.vnt39-ft-brand__names strong { font-size: var(--vf-name-fs); white-space: nowrap; line-height: 1.1; font-weight: var(--vf-name-fw); letter-spacing: .2px; color: var(--vf-name-c); }
.vnt39-ft-brand__names span { font-size: var(--vf-tag-fs); color: var(--vf-tag-c); font-weight: var(--vf-tag-fw); }
/* .vnt39-ft p resets margin, so the description needs the extra class */
.vnt39-ft .vnt39-ft-brand__desc { color: var(--vf-desc-c); font-size: var(--vf-desc-fs); font-weight: var(--vf-desc-fw); line-height: var(--vf-desc-lh); margin-bottom: var(--vf-gap-desc); }
.vnt39-ft-social { display: flex; flex-wrap: wrap; gap: var(--vf-soc-gap); }
.vnt39-ft-soc { display: grid; place-items: center; width: var(--vf-soc-size); height: var(--vf-soc-size); border-radius: var(--vf-soc-r); color: var(--vf-soc-fg, #fff); }
.vnt39-ft-soc .vnt39-ft-ico, .vnt39-ft-soc__img { width: var(--vf-soc-icon); height: var(--vf-soc-icon); }
.vnt39-ft-soc__img { object-fit: contain; }
/* --vf-soc-bg / --vf-soc-fg are set per network (inline on the link) only when the manager picked a colour */
.vnt39-ft-soc--facebook { background: var(--vf-soc-bg, #1877f2); }
.vnt39-ft-soc--zalo { background: var(--vf-soc-bg, #0068ff); }
.vnt39-ft-soc__txt { font-size: 11.5px; font-weight: 800; letter-spacing: -.2px; }
.vnt39-ft-soc--tiktok { background: var(--vf-soc-bg, #000); }
.vnt39-ft-soc--youtube { background: var(--vf-soc-bg, #ff0000); }
.vnt39-ft-soc--instagram { background: var(--vf-soc-bg, linear-gradient(45deg, #f9a03f 0%, #e1306c 48%, #7b3fe4 100%)); }
.vnt39-ft-soc--x { background: var(--vf-soc-bg, #000); }

/* link columns (the per-column overrides arrive as an inline style on each <nav>) */
.vnt39-ft-col__title, .vnt39-ft-contact__title { font-size: var(--vf-tfs); font-weight: 700; line-height: 1.3; padding-bottom: 10px; margin-bottom: 10px; position: relative; }
.vnt39-ft .vnt39-ft-col__title, .vnt39-ft .vnt39-ft-contact__title { color: var(--vf-tc); }
.vnt39-ft-col__title::after, .vnt39-ft-contact__title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 30px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .8); }
.vnt39-ft-col__toggle {
	display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 700;
	text-align: left; text-transform: none; letter-spacing: 0; cursor: default; box-shadow: none; min-height: 0; line-height: inherit;
}
.vnt39-ft-col__chev { display: none; }
.vnt39-ft-col__list { position: relative; padding-left: 0; }
/* the thin vertical guide on the left of each list */
.vnt39-ft-col__list::before { content: ""; position: absolute; left: var(--vf-dv-x); top: var(--vf-dv-in); bottom: var(--vf-dv-in); width: var(--vf-dv-w); background: var(--vf-dv-c); opacity: var(--vf-dv-o); display: var(--vf-dv-d); }
.vnt39-ft-col__list li { margin: 0; }
/* Menu rows: every link is a full-width row (the whole line reacts). Text keeps its old alignment (5px margin + 9px padding = 14px). */
.vnt39-ft-col__list a, .vnt39-ft-col__list span {
	position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px;
	margin: 0 0 0 5px; padding: var(--vf-row-py) 9px; border-radius: var(--vf-row-r);
	color: var(--vf-row-c); font-size: var(--vf-row-fs); line-height: 1.3;
}
.vnt39-ft-col__list a {
	cursor: pointer; background-color: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0);
	transition: transform calc(var(--vf-dur) * .9) ease, background-color calc(var(--vf-dur) * .9) ease, color calc(var(--vf-dur) * .9) ease, box-shadow calc(var(--vf-dur) * .9) ease;
}
.vnt39-ft-col__list a::after {
	content: ""; display: var(--vf-chev-d); flex: none; align-self: center; width: 6px; height: 6px; margin-right: -3px;
	border: solid var(--vf-chev-c, currentColor); border-width: 0 1.5px 1.5px 0;
	transform: rotate(-45deg); opacity: .65; transition: transform calc(var(--vf-dur) * .9) ease, opacity calc(var(--vf-dur) * .9) ease;
}
.vnt39-ft-col__list a.no-chev::after { display: none; }
/* current page: a subtle resting highlight + accent bar (HOVER = where the mouse is, CURRENT = where you are) */
.vnt39-ft-col__list a.is-current { background-color: rgba(255, 255, 255, .14); color: #fff; font-weight: 600; }
.vnt39-ft-col__list a.is-current::before { content: ""; position: absolute; left: 0; top: 5px; bottom: 5px; width: 3px; border-radius: 3px; background: var(--vf-accent); }
.vnt39-ft-col__list a.is-current::after { opacity: 1; }
/* no URL: plain text, not a control (colour alpha = the manager's "opacity of items without a link") */
.vnt39-ft-col__list span { color: color-mix(in srgb, var(--vf-row-c) calc(var(--vf-dis-op) * 100%), transparent); cursor: default; }
/* hover / focus / press (desktop pointer only; keyboard focus gets the same look) */
@media (hover: hover) and (pointer: fine) {
	.vnt39-ft-col__list a:hover { background-color: var(--vf-row-bg-h); color: var(--vf-row-c-h); box-shadow: var(--vf-row-sh-h); }
	.vnt39-ft-col__list a:hover::after { opacity: 1; border-color: var(--vf-chev-c-h, currentColor); }
	.vnt39-ft-col__list a.is-current:hover { background-color: rgba(255, 255, 255, .2); }
}
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
	.vnt39-ft-col__list a:hover { transform: translateX(var(--vf-row-tx)); }
	.vnt39-ft-col__list a:hover::after { transform: translateX(var(--vf-chev-tx)) rotate(-45deg); }
	.vnt39-ft-col__list a:active { transform: translateX(var(--vf-row-tx)) scale(.98); background-color: rgba(255, 255, 255, .24); transition-duration: .1s; }
}
.vnt39-ft-col__list a:focus-visible { background-color: var(--vf-row-bg-h); color: var(--vf-row-c-h); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.vnt39-ft-col__list a:focus-visible::after { opacity: 1; }
@media (min-width: 768px) {
	.vnt39-ft-col__list a:focus-visible { transform: translateX(var(--vf-row-tx)); }
	.vnt39-ft-col__list a:focus-visible::after { transform: translateX(var(--vf-chev-tx)) rotate(-45deg); }
}

/* contact: one compact block (list, then the map button right under it, then the optional store photo) */
.vnt39-ft-contact__body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.vnt39-ft-contact__list { width: 100%; }
.vnt39-ft-contact__list li { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 var(--vf-ct-gap); color: var(--vf-ct-c); font-size: var(--vf-ct-fs); overflow-wrap: break-word; line-height: 1.45; }
.vnt39-ft-contact__list li:last-child { margin-bottom: 0; }
.vnt39-ft-contact__list .vnt39-ft-ico { width: var(--vf-ct-ic-sz); height: var(--vf-ct-ic-sz); color: var(--vf-ct-ic-c); margin-top: 1px; stroke-width: 1.9; }
.vnt39-ft-contact__list a { color: var(--vf-ct-link, currentColor); }
.vnt39-ft .vnt39-ft-map {
	display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 16px; border-radius: var(--vf-map-r); min-height: var(--vf-map-h);
	background: var(--vf-map-bg); color: var(--vf-map-c); font-weight: var(--vf-map-fw); font-size: var(--vf-map-fs); line-height: 1.2; text-align: center;
	border: var(--vf-map-bd-w) solid var(--vf-map-bd, transparent); box-shadow: 0 3px 12px rgba(0, 0, 0, var(--vf-map-sh));
}
.vnt39-ft-map .vnt39-ft-ico { width: 16px; height: 16px; color: var(--vf-map-ic-c); }
.vnt39-ft-contact__frame { display: block; width: 100%; max-width: var(--vf-st-w); aspect-ratio: var(--vf-st-ar); border: 2px solid var(--vf-st-bd); border-radius: var(--vf-st-r); overflow: hidden; background: var(--vf-st-bg); }
.vnt39-ft-contact__photo { width: 100%; height: 100%; object-fit: var(--vf-st-fit); object-position: var(--vf-st-pos); }
.vnt39-ft-contact__frame.is-empty { display: none; background: var(--vf-ph-bg); border-color: var(--vf-ph-bd); }

/* -------------------------------------------- C. quick cards + newsletter */
.vnt39-ft-quick { background: var(--vf-quick-bg); padding: var(--vf-quick-pt) 0 var(--vf-quick-pb); color: #1c1d22; }
.vnt39-ft-quick__grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 36px; align-items: center; }
.vnt39-ft-quick__grid.is-single { grid-template-columns: minmax(0, 1fr); }
.vnt39-ft-cards { display: grid; grid-template-columns: repeat(var(--vf-cards-cols), minmax(0, 1fr)); gap: var(--vf-card-gap); }
.vnt39-ft-card {
	position: relative; display: flex; flex-direction: column; height: 100%; padding: 10px 12px 12px; border-radius: var(--vf-card-r); background: var(--vf-card-bg);
	color: var(--vf-card-c); box-shadow: 0 2px 10px rgba(20, 20, 30, .07); border: var(--vf-card-bd-w) solid var(--vf-card-bd, transparent);
}
.vnt39-ft-card__img { display: block; height: var(--vf-card-img-h); margin-bottom: 8px; }
.vnt39-ft-card__pic { width: 100%; height: 100%; object-fit: contain; }
.vnt39-ft-card__img.is-empty { border-radius: 8px; background: linear-gradient(135deg, #e6eaf0, #f8f9fb); }
.vnt39-ft-card__title { font-weight: 700; font-size: var(--vf-card-fs); line-height: 1.25; padding-right: 30px; }
.vnt39-ft-card__go { position: absolute; right: 10px; bottom: 10px; width: 26px; height: 26px; border-radius: 50%; background: var(--vf-card-go-bg); display: var(--vf-card-go-d); }
.vnt39-ft-card__go::after { content: ""; position: absolute; left: 8px; top: 9px; width: 8px; height: 8px; border: solid var(--vf-card-go-c); border-width: 2px 2px 0 0; transform: translateX(-2px) rotate(45deg) scale(.85); }
.vnt39-ft-card__go::before { content: ""; position: absolute; left: 7px; top: 12px; width: 10px; height: 2px; background: var(--vf-card-go-c); }

.vnt39-ft-news { display: flex; flex-direction: column; gap: var(--vf-news-gap); background: var(--vf-news-bg, transparent); padding: var(--vf-news-pad); border-radius: var(--vf-news-br); }
.vnt39-ft-news__head { display: flex; align-items: center; gap: 14px; }
.vnt39-ft-news__ico { flex: none; color: var(--vf-news-ic-c); }
.vnt39-ft-news__ico .vnt39-ft-ico { width: var(--vf-news-ic-sz); height: var(--vf-news-ic-sz); stroke-width: 1.5; }
.vnt39-ft-news__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vnt39-ft-news__txt strong { color: var(--vf-news-tc); font-size: var(--vf-news-tfs); line-height: 1.25; }
.vnt39-ft-news__txt span { color: var(--vf-news-sc); font-size: var(--vf-news-sfs); }
.vnt39-ft-news__row { display: flex; gap: 10px; }
.vnt39-ft-news__input {
	flex: 1 1 auto; min-width: 0; height: var(--vf-news-in-h); margin: 0; padding: 0 16px; border: 1px solid #d5d7dd; border-radius: var(--vf-news-r); background: #fff;
	color: #1c1d22; font: inherit; font-size: 15px; box-shadow: none;
}
.vnt39-ft-news__input::placeholder { color: #7b7d86; }
.vnt39-ft-news__btn {
	flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: var(--vf-news-btn-h); margin: 0; padding: 0 24px; border: 0; border-radius: var(--vf-news-r);
	background: var(--vf-news-btn-bg); color: var(--vf-news-btn-c); font: inherit; font-size: 15px; font-weight: 700; text-transform: none; letter-spacing: 0; cursor: pointer; box-shadow: none; line-height: 1;
}
.vnt39-ft-news__btn .vnt39-ft-ico { width: 18px; height: 18px; }
.vnt39-ft-news__msg { font-size: 13.5px; color: #1c1d22; }
.vnt39-ft-news__msg.is-ok { color: #12784a; }
.vnt39-ft-news__msg.is-bad { color: var(--vf-accent2); }
.vnt39-ft-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* ------------------------------------------- D. brands + payment methods */
.vnt39-ft-strip { background: var(--vf-strip-bg); padding: var(--vf-strip-pt) 0 var(--vf-strip-pb); }
.vnt39-ft-strip__grid { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr); align-items: start; }
.vnt39-ft-strip__grid.is-single { grid-template-columns: minmax(0, 1fr); }
.vnt39-ft-brands { padding-right: 28px; min-width: 0; }
.vnt39-ft-pays { padding-left: 28px; border-left: 1px solid rgba(255, 255, 255, .14); }
.vnt39-ft-strip__grid.is-single .vnt39-ft-brands, .vnt39-ft-strip__grid.is-single .vnt39-ft-pays { padding: 0; border: 0; }
.vnt39-ft-strip__title { font-size: var(--vf-br-tfs); font-weight: 500; color: var(--vf-br-tc); margin-bottom: 14px; }
/* ONE row, never wraps: more brands than width = horizontal scroll (touch swipe / trackpad / wheel / mouse drag), scrollbar hidden.
 * The list is its own scroll container, so it can never widen the page. Vertical padding+negative margin keep the hover lift un-clipped. */
.vnt39-ft-brands__list { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--vf-br-gx); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; padding: 4px 0; margin: -4px 0; }
.vnt39-ft-brands__list::-webkit-scrollbar { display: none; }
.vnt39-ft-brands__list li { flex: 0 0 auto; }
.vnt39-ft-brands__scroller { position: relative; }
/* ‹ › — only exist when the row overflows, only visible while the whole brand block is hovered / focused (desktop). */
.vnt39-ft-brands__nav { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 22px; height: 22px; margin: 0; padding: 0; min-height: 0; line-height: 1; border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%; background: rgba(20, 19, 22, .6); color: #fff; cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(-50%); transition: opacity .2s ease, background-color .2s ease, border-color .2s ease; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.vnt39-ft-brands__nav[hidden] { display: none; }
.vnt39-ft-brands__nav--prev { left: -26px; } /* in the side gutters, never over a brand name */
.vnt39-ft-brands__nav--next { right: -26px; }
.vnt39-ft-brands.is-overflow.is-hover .vnt39-ft-brands__nav { opacity: 1; pointer-events: auto; }
.vnt39-ft-brands__nav:hover, .vnt39-ft-brands__nav:focus-visible { background: #155209; border-color: #155209; color: #fff; }
@media (hover: none), (max-width: 767px) { .vnt39-ft-brands__nav { display: none; } }
/* 2026-10-19: below 1280px the side gutter is only the 20px wrap padding — keep ‹ › inside it (at -26px the hidden › widened the page by 6px at 1024 / 820). */
@media (max-width: 1279px) { .vnt39-ft-brands__nav { width: 20px; height: 20px; } .vnt39-ft-brands__nav--prev { left: -20px; } .vnt39-ft-brands__nav--next { right: -20px; } }
@media (prefers-reduced-motion: reduce) { .vnt39-ft-brands__nav { transition: none; } }
.vnt39-ft-brands__list.is-dragging { cursor: grabbing; user-select: none; }
.vnt39-ft-brands__list.is-dragging a { pointer-events: none; }
.vnt39-ft-brands__list a { -webkit-user-drag: none; }
.vnt39-ft-brands__list li { background: var(--vf-br-bg, transparent); padding: var(--vf-br-pad); border-radius: var(--vf-br-r); }
.vnt39-ft-brand-logo { height: var(--vf-br-h); width: auto; max-width: var(--vf-br-w); object-fit: contain; opacity: var(--vf-br-op); }
.vnt39-ft-brand-txt { display: block; color: var(--vf-br-txt-c); font-weight: 800; font-size: 14.5px; letter-spacing: .4px; text-transform: uppercase; line-height: 1.2; white-space: nowrap; }
.vnt39-ft-pays__list { display: flex; flex-wrap: wrap; gap: var(--vf-pay-gap); }
.vnt39-ft-pay { display: grid; place-items: center; min-width: 44px; height: var(--vf-pay-ch); padding: 0 var(--vf-pay-px); border-radius: var(--vf-pay-r); background: var(--vf-pay-bg); opacity: var(--vf-pay-op); }
.vnt39-ft-pay-logo { height: var(--vf-pay-h); width: auto; max-width: var(--vf-pay-w); object-fit: contain; }
.vnt39-ft-pay.is-text span { color: var(--vf-pay-tc); font-weight: 800; font-size: 10.5px; white-space: nowrap; }

/* ---------------------------------------------------------- E. bottom bar */
.vnt39-ft-bottom { background: var(--vf-bt-bg); border-top: 1px solid rgba(255, 255, 255, .07); color: #b9b9c0; }
.vnt39-ft-bottom__inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; padding-top: var(--vf-bt-py); padding-bottom: var(--vf-bt-py); padding-right: 20px; min-height: 68px; }
.vnt39-ft-bottom__links { display: flex; flex-wrap: wrap; align-items: center; }
.vnt39-ft-bottom__links li { display: flex; align-items: center; }
.vnt39-ft-bottom__links li + li::before { content: ""; width: 1px; height: 13px; margin: 0 16px; background: rgba(255, 255, 255, .25); }
.vnt39-ft-bottom__links a, .vnt39-ft-bottom__links span { font-size: var(--vf-bt-fs); color: var(--vf-bt-link-c); }
.vnt39-ft-bottom__copy { font-size: var(--vf-cp-fs); color: var(--vf-cp-c); text-align: right; }

/* ----------------------------------------------------- tablet 768 - 1179 */
@media (max-width: 1179px) {
	.vnt39-ft-main { padding: var(--vf-main-pt-t) 0 var(--vf-main-pb-t); }
	.vnt39-ft-main__grid { grid-template-columns: repeat(var(--vf-tab-cols), minmax(0, 1fr)); row-gap: var(--vf-row-gap-t); column-gap: var(--vf-col-gap-t); }
	.vnt39-ft-brand, .vnt39-ft-contact { grid-column: 1 / -1; }
	.vnt39-ft-brand__desc { max-width: 640px; }
	.vnt39-ft-contact__body { max-width: 560px; }
	.vnt39-ft-quick__grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
	.vnt39-ft-strip__grid { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
	.vnt39-ft-brands { padding-right: 0; }
	.vnt39-ft-pays { padding-left: 0; border-left: 0; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .14); }
}

/* ------------------------------------------------------------ mobile <=767 */
@media (max-width: 767px) {
	.vnt39-ft { font-size: 14.5px; }
	.vnt39-ft-wrap { padding: 0 var(--vf-m-px); }

	.vnt39-ft-main { padding: var(--vf-m-pt) 0 var(--vf-m-pb); }
	.vnt39-ft-main::before { height: var(--vf-tk-h-m); }
	.vnt39-ft-main__grid { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
	.vnt39-ft-brand { margin-bottom: var(--vf-m-brand-gap); }
	.vnt39-ft-brand__logo { width: var(--vf-logo-w-m); height: var(--vf-logo-w-m); }
	.vnt39-ft-brand__names strong { font-size: var(--vf-name-fs-m); }
	.vnt39-ft-brand__names span { font-size: var(--vf-tag-fs-m); }
	.vnt39-ft .vnt39-ft-brand__desc { font-size: var(--vf-desc-fs-m); line-height: var(--vf-desc-lh-m); }
	.vnt39-ft-soc { width: var(--vf-soc-size-m); height: var(--vf-soc-size-m); }

	/* accordion (closed by default; footer.js toggles .is-open) */
	.vnt39-ft-col { border-top: 1px solid var(--vf-acc-bd); padding: 0 var(--vf-acc-px); background: var(--vf-acc-bg, transparent); }
	.vnt39-ft-col.is-open { background: var(--vf-acc-bg-o, var(--vf-acc-bg, transparent)); }
	.vnt39-ft-col:last-of-type { border-bottom: 1px solid var(--vf-acc-bd); }
	.vnt39-ft-col__title { padding: 0; margin: 0; font-size: var(--vf-acc-fs); }
	.vnt39-ft-col__title::after { display: none; }
	.vnt39-ft-col__toggle { display: flex; align-items: center; justify-content: space-between; min-height: var(--vf-acc-h); padding: 0; cursor: pointer; }
	.vnt39-ft-col__chev { display: block; width: 9px; height: 9px; margin-right: 4px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); transition: transform .2s ease; }
	.vnt39-ft-col.is-open .vnt39-ft-col__chev { transform: rotate(225deg) translateY(-2px); }
	.vnt39-ft-col__list { display: none; border-left: 0; padding: 0 0 var(--vf-acc-pb); }
	.vnt39-ft-col.is-open .vnt39-ft-col__list { display: block; }
	.vnt39-ft-col__list::before { display: none; }
	.vnt39-ft.vf-dv-m .vnt39-ft-col__list::before { display: var(--vf-dv-d); }
	.vnt39-ft-col__list a, .vnt39-ft-col__list span { margin-left: 0; padding: var(--vf-row-py-m) 8px; min-height: 44px; }
	.vnt39-ft-col__list a::after { display: none; }
	.vnt39-ft-col__list a.is-current::before { top: 9px; bottom: 9px; }
	/* accordion switched off: the three menus stay open, with a plain title */
	.vnt39-ft.vf-no-acc .vnt39-ft-col { border-top: 0; border-bottom: 0; padding: 0 0 18px; background: none; }
	.vnt39-ft.vf-no-acc .vnt39-ft-col__title { padding-bottom: 10px; margin-bottom: 8px; }
	.vnt39-ft.vf-no-acc .vnt39-ft-col__title::after { display: block; }
	.vnt39-ft.vf-no-acc .vnt39-ft-col__toggle { min-height: 0; cursor: default; }
	.vnt39-ft.vf-no-acc .vnt39-ft-col__chev { display: none; }
	.vnt39-ft.vf-no-acc .vnt39-ft-col__list { display: block; padding-bottom: 0; }
	/* accordion icon: plus / minus */
	.vnt39-ft.is-acc-plus .vnt39-ft-col__chev {
		width: 13px; height: 13px; margin-right: 3px; border: 0; transform: none;
		background: linear-gradient(#fff, #fff) center / 100% 2px no-repeat, linear-gradient(#fff, #fff) center / 2px 100% no-repeat;
	}
	.vnt39-ft.is-acc-plus .vnt39-ft-col.is-open .vnt39-ft-col__chev { transform: none; background: linear-gradient(#fff, #fff) center / 100% 2px no-repeat; }

	.vnt39-ft-contact { margin-top: var(--vf-m-contact-gap); }
	.vnt39-ft-contact__title { font-size: var(--vf-ct-tfs-m); margin-bottom: 12px; }
	.vnt39-ft-contact__body { align-items: stretch; gap: 12px; }
	.vnt39-ft-contact__list li { margin-bottom: var(--vf-ct-gap-m); }
	/* order: details, store photo (or placeholder), then the map button */
	.vnt39-ft-contact__frame { order: 1; max-width: none; width: var(--vf-st-w-m); margin-top: 4px; aspect-ratio: var(--vf-st-ar-m); border-radius: var(--vf-st-r-m); }
	.vnt39-ft-contact__photo { display: block; }
	.vnt39-ft-contact__frame.is-empty { display: flex; align-items: center; justify-content: center; color: var(--vf-ph-c); }
	.vnt39-ft-contact__frame.is-empty .vnt39-ft-ico { width: 38px; height: 38px; stroke-width: 1.5; }
	.vnt39-ft .vnt39-ft-map { order: 2; display: flex; width: var(--vf-map-w-m); align-self: var(--vf-map-as-m); min-height: var(--vf-map-h-m); }

	.vnt39-ft-quick { padding: var(--vf-m-qk-pt) 0 var(--vf-m-qk-pb); }
	.vnt39-ft-cards { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; padding: 2px 2px 8px; margin: 0 -2px; -webkit-overflow-scrolling: touch; }
	.vnt39-ft-cards li { flex: 0 0 var(--vf-card-w-m); min-width: 128px; scroll-snap-align: start; }
	.vnt39-ft-card__img { height: var(--vf-card-img-h-m); }
	.vnt39-ft-news__row { flex-direction: column; }
	.vnt39-ft-news__btn { width: 100%; }
	.vnt39-ft-news__txt strong { font-size: var(--vf-news-tfs-m); }

	.vnt39-ft-strip { padding: var(--vf-m-sp-pt) 0 var(--vf-m-sp-pb); }
	.vnt39-ft-brands__list { gap: 22px; }
	.vnt39-ft-brand-txt { font-size: 15px; }
	.vnt39-ft-brand-logo { height: var(--vf-br-h-m); }

	.vnt39-ft-bottom__inner { flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 16px var(--vf-m-px); gap: 10px; }
	.vnt39-ft-bottom__links { justify-content: center; gap: 6px 20px; }
	.vnt39-ft-bottom__links li + li::before { display: none; }
	.vnt39-ft-bottom__links a, .vnt39-ft-bottom__links span { font-size: var(--vf-bt-fs-m); }
	.vnt39-ft-bottom__copy { text-align: center; font-size: var(--vf-cp-fs-m); }
}

/* ================================================================ interaction
   ONE place for every hover / focus / press state of the footer, so peers always behave the same.
   - Only things that are real links or buttons react; text without a URL stays inert (muted, default cursor).
   - Motion never changes layout: transform / opacity / colour / shadow only, so no reflow and no height change.
   - Pointer hover runs only on devices that really hover; keyboard :focus-visible gets the SAME visual;
     touch gets a light :active colour change (no sticky translate/scale). */

/* base (animated) states */
.vnt39-ft-soc { transition: transform var(--vf-dur) ease, box-shadow var(--vf-dur) ease, filter var(--vf-dur) ease; }
.vnt39-ft .vnt39-ft-map { transition: transform var(--vf-dur) ease, box-shadow var(--vf-dur) ease, background-color var(--vf-dur) ease, color var(--vf-dur) ease; }
.vnt39-ft-card { transition: transform calc(var(--vf-dur) * 1.1) ease, box-shadow calc(var(--vf-dur) * 1.1) ease; }
.vnt39-ft-card__pic { transition: transform calc(var(--vf-dur) * 1.1) ease; }
.vnt39-ft-card__go { transition: transform calc(var(--vf-dur) * 1.1) ease; }
.vnt39-ft-brands a { display: block; transition: transform var(--vf-dur) ease, opacity var(--vf-dur) ease; }
.vnt39-ft-contact__list a, .vnt39-ft-bottom__links a {
	text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; text-decoration-thickness: 1px;
	transition: color var(--vf-dur) ease, text-decoration-color var(--vf-dur) ease;
}
.vnt39-ft-news__btn { transition: filter var(--vf-dur) ease, box-shadow var(--vf-dur) ease; }
.vnt39-ft-brand__head { transition: opacity var(--vf-dur) ease; }

/* "on" state = pointer hover (real hover devices only) OR keyboard focus: identical visuals.
   Colour / underline / shadow changes apply at every width; anything that MOVES or SCALES (translate, scale) applies
   only from 768px up, so phones and tablets in narrow windows never get a sticky lifted/shifted state. */
@media (hover: hover) and (pointer: fine) {
	.vnt39-ft-soc:hover { box-shadow: 0 8px 16px rgba(0, 0, 0, var(--vf-soc-sh)); }
	.vnt39-ft .vnt39-ft-map:hover { box-shadow: 0 9px 22px rgba(0, 0, 0, var(--vf-map-sh-h)); background: var(--vf-map-bg-h); color: var(--vf-map-c-h); }
	a.vnt39-ft-card:hover { box-shadow: 0 12px 26px rgba(20, 20, 30, var(--vf-card-sh-h)); }
	.vnt39-ft-brands a:hover { opacity: var(--vf-br-op-h); }
	.vnt39-ft-contact__list a:hover { color: var(--vf-ct-link-h, #fff); text-decoration-color: rgba(255, 255, 255, .85); }
	.vnt39-ft-bottom__links a:hover { color: var(--vf-bt-link-h); text-decoration-color: rgba(255, 255, 255, .85); }
	.vnt39-ft-news__btn:hover { filter: brightness(1.12); box-shadow: 0 6px 16px rgba(136, 0, 23, .35); }
	.vnt39-ft-brand__head:hover { opacity: .85; }
}
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
	.vnt39-ft-soc:hover { transform: translateY(var(--vf-soc-ty)) scale(var(--vf-soc-sc)); }
	.vnt39-ft .vnt39-ft-map:hover { transform: translateY(var(--vf-map-ty)); }
	a.vnt39-ft-card:hover { transform: translateY(var(--vf-card-ty)); }
	a.vnt39-ft-card:hover .vnt39-ft-card__pic { transform: scale(var(--vf-card-sc)); }
	a.vnt39-ft-card:hover .vnt39-ft-card__go { transform: translateX(var(--vf-card-go-tx)); }
	.vnt39-ft-brands a:hover { transform: translateY(var(--vf-br-ty)); }
}
.vnt39-ft-soc:focus-visible { box-shadow: 0 8px 16px rgba(0, 0, 0, var(--vf-soc-sh)); }
.vnt39-ft .vnt39-ft-map:focus-visible { box-shadow: 0 9px 22px rgba(0, 0, 0, var(--vf-map-sh-h)); background: var(--vf-map-bg-h); color: var(--vf-map-c-h); }
a.vnt39-ft-card:focus-visible { box-shadow: 0 12px 26px rgba(20, 20, 30, var(--vf-card-sh-h)); }
.vnt39-ft-brands a:focus-visible { opacity: var(--vf-br-op-h); }
.vnt39-ft-contact__list a:focus-visible { color: var(--vf-ct-link-h, #fff); text-decoration-color: rgba(255, 255, 255, .85); }
.vnt39-ft-bottom__links a:focus-visible { color: var(--vf-bt-link-h); text-decoration-color: rgba(255, 255, 255, .85); }
.vnt39-ft-news__btn:focus-visible { filter: brightness(1.12); }
.vnt39-ft-brand__head:focus-visible { opacity: .85; }
@media (min-width: 768px) {
	.vnt39-ft-soc:focus-visible { transform: translateY(var(--vf-soc-ty)) scale(var(--vf-soc-sc)); }
	.vnt39-ft .vnt39-ft-map:focus-visible { transform: translateY(var(--vf-map-ty)); }
	a.vnt39-ft-card:focus-visible { transform: translateY(var(--vf-card-ty)); }
	a.vnt39-ft-card:focus-visible .vnt39-ft-card__pic { transform: scale(var(--vf-card-sc)); }
	a.vnt39-ft-card:focus-visible .vnt39-ft-card__go { transform: translateX(var(--vf-card-go-tx)); }
	.vnt39-ft-brands a:focus-visible { transform: translateY(var(--vf-br-ty)); }
}

/* focus rings: white on the dark tiers (global rule above), accent on the white tier */
.vnt39-ft-quick a:focus-visible, .vnt39-ft-quick button:focus-visible, .vnt39-ft-quick input:focus-visible { outline-color: var(--vf-accent2); }
.vnt39-ft-news__input:focus-visible { border-color: var(--vf-accent2); }

/* touch / no-hover devices: light press feedback only (colour), nothing that can stick */
@media (hover: none), (max-width: 767px) {
	.vnt39-ft-col__list a:active { background-color: rgba(255, 255, 255, .16); color: #fff; }
	.vnt39-ft-col__toggle:active { opacity: .75; }
	.vnt39-ft-soc:active { filter: brightness(1.2); }
	.vnt39-ft .vnt39-ft-map:active { background: var(--vf-map-bg-h); }
	a.vnt39-ft-card:active { background: #e9edf1; }
	.vnt39-ft-brands a:active { opacity: .75; }
	.vnt39-ft-contact__list a:active { color: var(--vf-ct-link-h, #fff); text-decoration-color: rgba(255, 255, 255, .85); }
	.vnt39-ft-bottom__links a:active { color: var(--vf-bt-link-h); text-decoration-color: rgba(255, 255, 255, .85); }
	.vnt39-ft-news__btn:active { filter: brightness(1.15); }
	.vnt39-ft-brand__head:active { opacity: .8; }
}

/* manager switched every animation off (Hiệu ứng → tắt): no transitions, nothing moves, colours still change */
.vnt39-ft.vf-fx-off *, .vnt39-ft.vf-fx-off *::before, .vnt39-ft.vf-fx-off *::after { transition: none; }
.vnt39-ft.vf-fx-off .vnt39-ft-col__list a:hover, .vnt39-ft.vf-fx-off .vnt39-ft-col__list a:active, .vnt39-ft.vf-fx-off .vnt39-ft-col__list a:focus-visible,
.vnt39-ft.vf-fx-off .vnt39-ft-soc:hover, .vnt39-ft.vf-fx-off .vnt39-ft-soc:focus-visible, .vnt39-ft.vf-fx-off .vnt39-ft-map:hover, .vnt39-ft.vf-fx-off .vnt39-ft-map:focus-visible,
.vnt39-ft.vf-fx-off a.vnt39-ft-card:hover, .vnt39-ft.vf-fx-off a.vnt39-ft-card:focus-visible, .vnt39-ft.vf-fx-off .vnt39-ft-brands a:hover, .vnt39-ft.vf-fx-off .vnt39-ft-brands a:focus-visible { transform: none; }
.vnt39-ft.vf-fx-off .vnt39-ft-col__list a:hover::after, .vnt39-ft.vf-fx-off .vnt39-ft-col__list a:focus-visible::after { transform: rotate(-45deg); }
.vnt39-ft.vf-fx-off a.vnt39-ft-card:hover .vnt39-ft-card__pic, .vnt39-ft.vf-fx-off a.vnt39-ft-card:hover .vnt39-ft-card__go,
.vnt39-ft.vf-fx-off a.vnt39-ft-card:focus-visible .vnt39-ft-card__pic, .vnt39-ft.vf-fx-off a.vnt39-ft-card:focus-visible .vnt39-ft-card__go { transform: none; }

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

/* "Thương hiệu nổi bật" text links: pointer + VNT39 green on hover/focus (logo-less brands only render text). */
.vnt39-ft-brands a { cursor: pointer; }
.vnt39-ft-brand-txt { transition: color var(--vf-dur) ease; }
@media (hover: hover) { .vnt39-ft-brands a:hover .vnt39-ft-brand-txt { color: #155209; } }
.vnt39-ft-brands a:focus-visible .vnt39-ft-brand-txt { color: #155209; }

/* Footer re-arrangement: the shop photo now sits in the brand column (logo / name / tagline → photo → description) and the social icons moved under the contact block (details → map button → icons).
   Same classes, same admin-driven variables — only the spacing around the two moved items is set here. */
.vnt39-ft-brand .vnt39-ft-contact__frame { margin: 0 0 14px; }
.vnt39-ft-contact__body .vnt39-ft-social { margin-top: 2px; }
@media (max-width: 767px) {
	.vnt39-ft-brand .vnt39-ft-contact__frame { order: 0; width: 100%; margin: 4px 0 12px; }
	.vnt39-ft-contact__body .vnt39-ft-social { order: 3; margin-top: 4px; } /* the map button is order 2 on phones: icons stay after it */
}

/* labelled numbers (Hotline Nhật / Zalo Việt Nam), 2026-10-18 */
.vnt39-ft-contact__lbl { opacity: .8; }

/* 2026-10-19 (round 2) — phones: payment methods in ONE row that scrolls sideways inside the block (no wrapping, same tile size and
 * text size as before, same order, no auto-scroll). The row runs to the right screen edge so the next tile peeks out, and ends with
 * 80px of room so the last tile can be scrolled clear of the floating contact / ↑ buttons. Desktop / tablet unchanged. */
@media (max-width: 767px) {
	.vnt39-ft .vnt39-ft-pays__list { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scrollbar-width: none; margin-right: calc(-1 * var(--vf-m-px)); padding: 2px 80px 2px 0; }
	.vnt39-ft-pays__list::-webkit-scrollbar { display: none; }
	.vnt39-ft-pays__list > li { flex: 0 0 auto; scroll-snap-align: start; }
}