/*
 Theme Name:   Vay Ngay (GeneratePress Child)
 Theme URI:    https://generatepress.com
 Description:  Child theme website Vay Ngay - vay tiền online đến 10 triệu, giải ngân 10 phút.
 Author:       Vay Ngay
 Template:     generatepress
 Version:      1.0.0
 Text Domain:  vayngay
*/

/* ==========================================================================
   1. VARIABLES (mau trich tu logo.png: lime #60B10E + xanh rung #027500;
      nut dung thang xanh rung; neutral muc den o liu #1E2618; nen kem giay bac)
   ========================================================================== */

:root {
	--vn-primary: #027500;         /* nut / link, chu trang 5,9:1 */
	--vn-primary-dark: #005A00;    /* hover 8,5:1 */
	--vn-accent-1: #60B10E;        /* lime logo: mang trang tri */
	--vn-accent-2: #8BCB3A;        /* lime sang cho gradient */
	--vn-accent-text: #2F7D12;     /* chu nhan xanh tren trang / kem */
	--vn-navy: #1E2618;            /* muc den o liu: heading, footer, LCD */
	--vn-olive: #3D4636;           /* o liu sang hon: than may, kep tien */
	--vn-text: #4A5344;
	--vn-muted: #5F6A58;
	--vn-bg-soft: #F2F9E8;         /* lime nhat */
	--vn-bg-paper: #FAF7EC;        /* kem giay bac */
	--vn-white: #FFFFFF;
	--vn-border: #DCEBC8;
	--vn-border-paper: #E8E0C6;
	--vn-gradient: linear-gradient(135deg, #8BCB3A 0%, #60B10E 45%, #027500 100%);
	--vn-shadow-sm: 0 4px 14px rgba(30, 38, 24, .07);
	--vn-shadow-md: 0 10px 28px rgba(30, 38, 24, .10);
	--vn-shadow-lg: 0 22px 50px rgba(30, 38, 24, .14);
	--vn-radius: 14px;
	--vn-radius-lg: 22px;
	--vn-radius-btn: 10px;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */

html,
body {
	overflow-x: clip;
}

body.vn-body {
	background: var(--vn-white);
	color: var(--vn-text);
}

.vn-body a {
	color: var(--vn-primary);
}

.vn-body a:hover,
.vn-body a:focus {
	color: var(--vn-primary-dark);
}

.vn-container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}

.vn-main {
	display: block;
}

.vn-main :where(h1, h2, h3, h4, h5, h6) {
	margin: 0 0 .6em;
	color: var(--vn-navy);
	font-weight: 700;
	line-height: 1.3;
}

.vn-main :where(h2) {
	font-size: clamp(20px, 3vw, 27px);
}

.vn-main :where(h3) {
	font-size: 19px;
}

.vn-main :where(h4, h5, h6) {
	font-size: 17px;
}

.vn-main :where(p) {
	margin: 0 0 1em;
}

.vn-main :where(ul, ol) {
	margin: 0;
	padding: 0;
}

.vn-body dt {
	font-weight: 400;
}

.vn-body dd {
	margin: 0;
}

.vn-skip {
	position: absolute;
	left: -9999px;
	top: 8px;
	z-index: 2000;
	padding: 10px 16px;
	border-radius: var(--vn-radius-btn);
	background: var(--vn-navy);
	color: #fff;
}

.vn-body .vn-skip:focus {
	left: 12px;
	color: #fff;
}

/* ==========================================================================
   3. BUTTONS (CTA pattern) + CHIP
   ========================================================================== */

.vn-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 30px;
	border: 0;
	border-radius: var(--vn-radius-btn);
	font-size: 16px;
	font-weight: 800;
	line-height: 1.5;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease, color .2s ease;
}

.vn-body .vn-btn--primary {
	background: var(--vn-primary);
	color: var(--vn-white);
	box-shadow: 0 10px 22px rgba(2, 117, 0, .24);
}

.vn-body .vn-btn--primary:hover,
.vn-body .vn-btn--primary:focus {
	background: var(--vn-primary-dark);
	color: var(--vn-white);
	transform: translateY(-1px);
	box-shadow: 0 12px 26px rgba(0, 90, 0, .3);
}

/* Nut trang tren nen xanh (CTA band) */
.vn-body .vn-btn--light {
	background: #fff;
	color: var(--vn-primary);
	box-shadow: 0 10px 22px rgba(0, 0, 0, .16);
}

.vn-body .vn-btn--light:hover,
.vn-body .vn-btn--light:focus {
	background: var(--vn-navy);
	color: #fff;
	transform: translateY(-1px);
}

.vn-btn--block {
	width: 100%;
}

.vn-btn:focus-visible {
	outline: 3px solid var(--vn-accent-2);
	outline-offset: 3px;
}

.vn-btn .btn-text {
	transition: opacity .15s ease;
}

.vn-btn.btn-loading {
	pointer-events: none;
}

.vn-btn.btn-loading .btn-text {
	opacity: 0;
}

.vn-btn.btn-loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	margin: -10px 0 0 -10px;
	border: 2.5px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: vn-spin .7s linear infinite;
}

@keyframes vn-spin {
	to { transform: rotate(360deg); }
}

.vn-body .vn-chip {
	padding: 7px 14px;
	border: 1.5px solid var(--vn-border);
	border-radius: 9px;
	background: #fff;
	color: var(--vn-navy);
	font-size: 14.5px;
	font-weight: 800;
	line-height: 1.4;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.vn-body .vn-chip:hover,
.vn-body .vn-chip:focus {
	border-color: var(--vn-accent-1);
	background: var(--vn-bg-soft);
	color: var(--vn-navy);
}

.vn-body .vn-chip[aria-pressed="true"] {
	border-color: var(--vn-primary);
	background: var(--vn-primary);
	color: #fff;
}

.vn-chip:focus-visible {
	outline: 3px solid var(--vn-accent-2);
	outline-offset: 2px;
}

/* ==========================================================================
   4. HEADER
   ========================================================================== */

/* KHONG sticky, KHONG z-index (khong tao stacking context -> panel menu mobile noi tren overlay) */
.vn-header {
	position: relative;
	background: #fff;
	border-bottom: 1px solid var(--vn-border);
}

.vn-header__inner {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: 78px;
}

.vn-body .vn-header__brand {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	text-decoration: none;
}

.vn-header__logo {
	display: block;
	width: auto;
	height: 36px;
}

.vn-nav {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.vn-nav__head,
.vn-nav__cta {
	display: none;
}

.vn-nav__list {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vn-body .vn-nav__link {
	display: block;
	padding: 8px 16px;
	border-radius: var(--vn-radius-btn);
	color: var(--vn-navy);
	font-weight: 600;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}

.vn-body .vn-nav__link:hover,
.vn-body .vn-nav__link:focus {
	background: var(--vn-bg-soft);
	color: var(--vn-primary);
}

.vn-body .vn-nav__link--active {
	background: var(--vn-bg-soft);
	color: var(--vn-primary);
	pointer-events: none;
}

.vn-header__actions {
	display: flex;
	align-items: center;
	gap: 10px;
}

.vn-header__cta {
	padding: 10px 24px;
}

.vn-body .vn-header__toggle {
	display: none;
	position: relative;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--vn-border);
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
}

.vn-body .vn-header__toggle:hover,
.vn-body .vn-header__toggle:focus {
	background: var(--vn-bg-soft);
	border-color: var(--vn-border);
}

.vn-header__toggle-bar,
.vn-header__toggle-bar::before,
.vn-header__toggle-bar::after {
	position: absolute;
	left: 50%;
	width: 20px;
	height: 3px;
	margin-left: -10px;
	border-radius: 2px;
	background: var(--vn-navy);
	content: "";
}

.vn-header__toggle-bar {
	top: 50%;
	margin-top: -1.5px;
}

.vn-header__toggle-bar::before {
	top: -7px;
	left: 0;
	margin: 0;
}

.vn-header__toggle-bar::after {
	top: 7px;
	left: 6px;
	width: 14px;
	margin: 0;
	background: var(--vn-accent-1);
}

.vn-nav-overlay {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: rgba(30, 38, 24, .55);
}

.vn-nav-overlay[hidden] {
	display: none;
}

/* ==========================================================================
   5. HERO (giu nguyen bo cuc CLAUDE-TEMPLATE.md)
   ========================================================================== */

.vn-hero {
	position: relative;
	padding: 56px 0 132px;
	background:
		radial-gradient(520px 360px at 6% 94%, rgba(232, 224, 198, .55), transparent 70%),
		radial-gradient(480px 320px at 96% 4%, rgba(96, 177, 14, .16), transparent 70%),
		linear-gradient(180deg, #F2F9E8 0%, #FFFFFF 100%);
}

.vn-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, .8fr);
	gap: 48px;
	align-items: center;
}

.vn-main h1.vn-hero__title {
	margin: 0 0 14px;
	font-size: clamp(1.3rem, 5vw, 2rem);
	line-height: 1.3;
	color: var(--vn-navy);
}

.vn-hero__desc {
	max-width: 580px;
	font-size: 17px;
	color: var(--vn-text);
}

.vn-hero__art {
	max-width: 500px;
	margin-top: 4px;
}

/* Kep tien + 3 to tien xoe (SVG) */
.vn-clip {
	display: block;
	width: 100%;
	height: auto;
}

.vn-clip__base {
	fill: #E3F3CC;
}

.vn-clip__speed line {
	stroke: var(--vn-accent-1);
	stroke-width: 10;
	stroke-linecap: round;
}

.vn-clip__bill rect:first-child {
	stroke-width: 3;
}

.vn-clip__bill--back rect:first-child {
	fill: #FAF3D9;
	stroke: #D6C996;
}

.vn-clip__bill--mid rect:first-child {
	fill: #B6E07F;
	stroke: var(--vn-accent-1);
}

.vn-clip__bill--front rect:first-child {
	fill: #2A8E1A;
	stroke: var(--vn-primary);
}

.vn-clip__frame {
	fill: none;
	stroke: rgba(2, 117, 0, .3);
	stroke-width: 2;
}

.vn-clip__bill--front .vn-clip__frame {
	stroke: rgba(255, 255, 255, .45);
}

.vn-clip__rosette {
	fill: none;
	stroke: rgba(2, 117, 0, .35);
	stroke-width: 2;
	stroke-dasharray: 3 4;
}

.vn-clip__coin {
	fill: var(--vn-accent-2);
}

.vn-clip__d {
	fill: #fff;
	font-size: 36px;
	font-weight: 900;
	text-anchor: middle;
}

.vn-clip__line {
	fill: rgba(255, 255, 255, .55);
}

.vn-clip__metal rect:first-child {
	fill: var(--vn-olive);
}

.vn-clip__shine {
	fill: rgba(255, 255, 255, .35);
}

.vn-clip__string {
	fill: none;
	stroke: var(--vn-olive);
	stroke-width: 3;
	stroke-dasharray: 2 6;
	stroke-linecap: round;
}

.vn-clip__tag path {
	fill: #fff;
	stroke: var(--vn-primary);
	stroke-width: 3;
	stroke-linejoin: round;
}

.vn-clip__tag circle {
	fill: #E3F3CC;
	stroke: var(--vn-primary);
	stroke-width: 2;
}

.vn-clip__tag text {
	fill: var(--vn-primary);
	font-size: 22px;
	font-weight: 900;
	font-style: italic;
	text-anchor: middle;
}

.vn-hero__content {
	justify-self: end;
	width: 100%;
	max-width: 470px;
}

/* Widget uoc tinh khoan vay */
.vn-loan {
	padding: 28px 28px 22px;
	border: 1px solid var(--vn-border);
	border-radius: var(--vn-radius-lg);
	background: #fff;
	box-shadow: var(--vn-shadow-lg);
}

.vn-loan__title {
	margin: 0 0 18px;
	color: var(--vn-navy);
	font-size: 19px;
	font-weight: 800;
}

.vn-loan__amount {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

.vn-loan__label {
	display: block;
	margin: 0;
	color: var(--vn-muted);
	font-size: 15px;
	font-weight: 600;
}

.vn-loan__value {
	color: var(--vn-primary);
	font-size: 26px;
	font-weight: 900;
	font-style: italic;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.vn-loan__range {
	--vn-fill: 47.37%;
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	height: 10px;
	margin: 6px 0 8px;
	border-radius: 999px;
	background: linear-gradient(to right, #8BCB3A 0%, #027500 var(--vn-fill), #E4EED8 var(--vn-fill), #E4EED8 100%);
	cursor: pointer;
	outline: none;
}

.vn-loan__range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 28px;
	height: 28px;
	border: 6px solid var(--vn-primary);
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 4px 12px rgba(2, 117, 0, .3);
	cursor: grab;
}

.vn-loan__range::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border: 6px solid var(--vn-primary);
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 4px 12px rgba(2, 117, 0, .3);
	cursor: grab;
}

.vn-loan__range:focus-visible {
	outline: 3px solid var(--vn-accent-2);
	outline-offset: 6px;
}

.vn-loan__scale {
	display: flex;
	justify-content: space-between;
	margin-bottom: 8px;
	color: var(--vn-muted);
	font-size: 13px;
}

.vn-loan__rows {
	margin: 12px 0 18px;
}

.vn-loan__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 0;
	border-bottom: 1px dashed var(--vn-border);
}

.vn-loan__row dt {
	color: var(--vn-text);
	font-size: 15px;
}

.vn-loan__hint {
	color: var(--vn-muted);
	font-size: 13px;
}

.vn-loan__row dd {
	color: var(--vn-navy);
	font-size: 16px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.vn-loan__row--total {
	padding-top: 14px;
	border-bottom: 0;
}

.vn-loan__row--total dt {
	color: var(--vn-navy);
	font-weight: 700;
}

.vn-loan__row--total dd {
	color: var(--vn-primary);
	font-size: 23px;
	font-weight: 900;
}

.vn-loan__note {
	margin: 12px 0 0;
	color: var(--vn-muted);
	font-size: 13px;
	line-height: 1.5;
	text-align: center;
}

.vn-body .vn-loan__note a {
	color: var(--vn-primary);
	text-decoration: none;
}

/* ==========================================================================
   6. STATS BAR (chi tablet/mobile)
   ========================================================================== */

.vn-stats {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	margin: -16px 0 0;
	padding: 16px;
	border: 1px solid var(--vn-border);
	border-radius: var(--vn-radius);
	background: #fff;
	box-shadow: var(--vn-shadow-md);
	list-style: none;
}

.vn-stats__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	text-align: center;
}

.vn-stats__num {
	color: var(--vn-primary);
	font-size: 19px;
	font-weight: 900;
	font-style: italic;
	white-space: nowrap;
}

.vn-stats__label {
	color: var(--vn-muted);
	font-size: 13px;
	line-height: 1.35;
}

/* ==========================================================================
   7. SECTION CHUNG + BANG + CHECKLIST
   ========================================================================== */

.vn-section {
	padding: 80px 0;
}

.vn-section--soft {
	background: var(--vn-bg-soft);
}

.vn-section--paper {
	background: var(--vn-bg-paper);
}

.vn-section--flush-top {
	padding-top: 40px;
}

.vn-section--flush-top-sm {
	padding-top: 8px;
}

.vn-section--flush-bottom {
	padding-bottom: 24px;
}

.vn-section__head {
	max-width: 720px;
	margin-bottom: 36px;
}

.vn-section__head--center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.vn-main .vn-section__title {
	margin-bottom: 12px;
	font-size: clamp(20px, 3vw, 27px);
}

.vn-section__desc {
	color: var(--vn-text);
	font-size: 16.5px;
}

.vn-section__head .vn-section__desc {
	margin-bottom: 0;
}

.vn-table-wrap {
	overflow-x: auto;
	margin: 0 0 1.2em;
	border: 1px solid var(--vn-border);
	border-radius: var(--vn-radius);
	background: #fff;
	-webkit-overflow-scrolling: touch;
}

.vn-table-wrap table {
	width: 100%;
	min-width: 440px;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: 15px;
}

.vn-table-wrap th,
.vn-table-wrap td {
	padding: 12px 16px;
	border: 0;
	border-bottom: 1px solid var(--vn-border);
	text-align: left;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.vn-table-wrap th {
	background: var(--vn-navy);
	color: #fff;
	font-weight: 700;
}

.vn-table-wrap tbody tr:last-child td {
	border-bottom: 0;
}

.vn-table-wrap tbody tr:nth-child(even) td {
	background: #F7FBF1;
}

.vn-check {
	display: grid;
	gap: 10px;
	margin: 16px 0 24px;
	list-style: none;
}

.vn-check li {
	position: relative;
	padding-left: 32px;
}

.vn-check li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .2em;
	width: 20px;
	height: 20px;
	border-radius: 6px;
	background: var(--vn-bg-soft);
}

.vn-check li::after {
	content: "";
	position: absolute;
	left: 5px;
	top: .5em;
	width: 10px;
	height: 5px;
	border: solid var(--vn-primary);
	border-width: 0 0 2.5px 2.5px;
	transform: rotate(-45deg);
}

.vn-section--soft .vn-check li::before {
	background: #fff;
}

/* ==========================================================================
   8. SIGNATURE: MAY DEM TIEN 10 PHUT
   ========================================================================== */

.vn-counter__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
	gap: 56px;
	align-items: center;
}

.vn-counter__steps {
	display: grid;
	gap: 6px;
	margin: 24px 0 28px;
	list-style: none;
}

.vn-counter__step {
	position: relative;
	padding: 4px 0 14px 34px;
	transition: opacity .35s ease;
}

/* Ray doc noi 3 moc */
.vn-counter__step::before {
	content: "";
	position: absolute;
	left: 8px;
	top: 10px;
	bottom: -8px;
	width: 3px;
	border-radius: 2px;
	background: repeating-linear-gradient(180deg, var(--vn-accent-1) 0 8px, transparent 8px 14px);
}

.vn-counter__step:last-child::before {
	display: none;
}

.vn-counter__step::after {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	width: 19px;
	height: 19px;
	border: 4px solid var(--vn-primary);
	border-radius: 50%;
	background: #fff;
	box-sizing: border-box;
	transition: background-color .35s ease, box-shadow .35s ease;
}

.vn-counter__step.is-on::after,
.vn-counter:not(.is-armed) .vn-counter__step::after {
	background: var(--vn-accent-1);
	box-shadow: 0 0 0 5px rgba(96, 177, 14, .2);
}

.vn-counter.is-armed .vn-counter__step:not(.is-on) {
	opacity: .42;
}

.vn-counter__when {
	display: inline-block;
	margin-bottom: 2px;
	color: var(--vn-accent-text);
	font-size: 14px;
	font-weight: 800;
	font-style: italic;
	letter-spacing: .02em;
}

.vn-main h3.vn-counter__label {
	margin: 0 0 4px;
	font-size: 18px;
}

.vn-counter__desc {
	margin: 0;
	font-size: 15.5px;
}

/* San khau may dem tien */
.vn-counter__stage {
	position: relative;
	justify-self: center;
	width: 100%;
	max-width: 420px;
	padding-top: 78px;
}

.vn-machine {
	position: relative;
}

.vn-machine__hopper {
	position: absolute;
	left: 50%;
	top: -66px;
	width: 62%;
	height: 84px;
	transform: translateX(-50%);
	perspective: 600px;
}

.vn-machine__bill {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 6px;
	height: 58px;
	border: 2px solid var(--vn-accent-1);
	border-radius: 8px;
	background: #FAF3D9;
	box-shadow: inset 0 0 0 4px #FAF3D9, inset 0 0 0 5.5px rgba(2, 117, 0, .3);
	transform-origin: 50% 100%;
}

.vn-machine__bill::after {
	content: "đ";
	position: absolute;
	right: 12px;
	top: 50%;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	margin-top: -13px;
	border-radius: 50%;
	background: var(--vn-accent-2);
	color: #fff;
	font-size: 16px;
	font-weight: 900;
	line-height: 1;
}

.vn-machine__bill:nth-child(even) {
	background: #CDEBA8;
	box-shadow: inset 0 0 0 4px #CDEBA8, inset 0 0 0 5.5px rgba(2, 117, 0, .3);
}

.vn-machine__bill:nth-child(1) { transform: translateY(-16px) rotate(-6deg); }
.vn-machine__bill:nth-child(2) { transform: translateY(-12px) rotate(-3deg); }
.vn-machine__bill:nth-child(3) { transform: translateY(-8px) rotate(0deg); }
.vn-machine__bill:nth-child(4) { transform: translateY(-4px) rotate(3deg); }
.vn-machine__bill:nth-child(5) { transform: translateY(0) rotate(6deg); }

/* Dang dem: to tien lat xoe lan luot vao khe may */
.vn-counter.is-running .vn-machine__bill {
	animation: vn-riffle .9s ease-in infinite;
}

.vn-counter.is-running .vn-machine__bill:nth-child(1) { animation-delay: 0s; }
.vn-counter.is-running .vn-machine__bill:nth-child(2) { animation-delay: .18s; }
.vn-counter.is-running .vn-machine__bill:nth-child(3) { animation-delay: .36s; }
.vn-counter.is-running .vn-machine__bill:nth-child(4) { animation-delay: .54s; }
.vn-counter.is-running .vn-machine__bill:nth-child(5) { animation-delay: .72s; }

@keyframes vn-riffle {
	0% { transform: translateY(-14px) rotateX(0deg) rotate(-4deg); opacity: 1; }
	55% { transform: translateY(10px) rotateX(64deg) rotate(4deg); opacity: 1; }
	70% { transform: translateY(20px) rotateX(80deg) rotate(6deg); opacity: 0; }
	100% { transform: translateY(-14px) rotateX(0deg) rotate(-4deg); opacity: 0; }
}

.vn-machine__body {
	position: relative;
	z-index: 1;
	padding: 30px 24px 22px;
	border-radius: 28px 28px 18px 18px;
	background: linear-gradient(180deg, #4C5843 0%, #3D4636 55%, #303828 100%);
	box-shadow: var(--vn-shadow-lg), inset 0 2px 0 rgba(255, 255, 255, .12);
}

/* Khe nap tien */
.vn-machine__body::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 10px;
	width: 68%;
	height: 10px;
	border-radius: 6px;
	background: #1A2014;
	transform: translateX(-50%);
}

.vn-machine__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.vn-machine__brand {
	color: var(--vn-accent-2);
	font-size: 14px;
	font-weight: 900;
	font-style: italic;
	letter-spacing: .14em;
}

.vn-machine__led {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--vn-accent-2);
	box-shadow: 0 0 0 4px rgba(139, 203, 58, .2), 0 0 12px rgba(139, 203, 58, .8);
}

.vn-counter.is-armed:not(.is-running):not(.is-done) .vn-machine__led {
	background: #6B7563;
	box-shadow: none;
}

.vn-counter.is-running .vn-machine__led {
	animation: vn-blink .5s steps(2, end) infinite;
}

@keyframes vn-blink {
	50% { opacity: .3; }
}

.vn-machine__screen {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	padding: 14px 18px 12px;
	border: 3px solid #12170D;
	border-radius: 12px;
	background: linear-gradient(180deg, #172010 0%, #10160B 100%);
	box-shadow: inset 0 0 24px rgba(139, 203, 58, .12);
}

.vn-machine__caption {
	color: #7FA65A;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.vn-machine__digits {
	color: #A6E85C;
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Courier New", monospace;
	font-size: clamp(28px, 4.2vw, 38px);
	font-weight: 700;
	line-height: 1.15;
	font-variant-numeric: tabular-nums;
	text-shadow: 0 0 10px rgba(166, 232, 92, .45);
	white-space: nowrap;
}

.vn-machine__status {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 12px 0 14px;
	color: #DCEBC8;
	font-size: 14px;
	font-weight: 600;
}

.vn-machine__status::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--vn-accent-2);
}

.vn-machine__keys {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
}

.vn-machine__keys span {
	height: 12px;
	border-radius: 6px;
	background: #5C6852;
	box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25);
}

.vn-machine__keys span:first-child {
	background: var(--vn-accent-1);
}

.vn-machine__tray {
	position: relative;
	width: 84%;
	height: 40px;
	margin: -4px auto 0;
	border-radius: 0 0 18px 18px;
	background: linear-gradient(180deg, #262E1E 0%, #333D29 100%);
}

.vn-machine__stack {
	position: absolute;
	left: 18%;
	right: 18%;
	bottom: 9px;
	height: 22px;
	border-radius: 4px;
	background: repeating-linear-gradient(180deg, #FAF3D9 0 3px, #8BCB3A 3px 4px, #CDEBA8 4px 7px, #60B10E 7px 8px);
	transform-origin: 50% 100%;
	transition: transform .6s ease;
}

.vn-counter.is-armed .vn-machine__stack {
	transform: scaleY(.15);
}

.vn-counter.is-running .vn-machine__stack {
	transform: scaleY(.6);
	transition-duration: 2.4s;
}

.vn-counter.is-done .vn-machine__stack {
	transform: scaleY(1);
}

.vn-counter__chip {
	display: flex;
	align-items: center;
	gap: 10px;
	width: fit-content;
	max-width: 100%;
	margin: 18px auto 0;
	padding: 10px 16px;
	border: 2px solid var(--vn-accent-1);
	border-radius: 12px;
	background: #fff;
	box-shadow: var(--vn-shadow-md);
	color: var(--vn-navy);
	font-size: 14.5px;
	font-weight: 700;
	box-sizing: border-box;
	transition: opacity .45s ease, transform .45s ease;
}

.vn-counter__chip b {
	color: var(--vn-primary);
	font-size: 16px;
	font-weight: 900;
	font-style: italic;
}

.vn-counter.is-armed:not(.is-done) .vn-counter__chip {
	opacity: 0;
	transform: translateY(10px);
}

/* ==========================================================================
   9. THONG SO: SAU TO TIEN MENH GIA
   ========================================================================== */

.vn-notes__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 26px;
	list-style: none;
}

.vn-note {
	position: relative;
	padding: 28px 26px 34px;
	border: 1px solid var(--vn-border-paper);
	border-radius: var(--vn-radius);
	background:
		repeating-linear-gradient(135deg, rgba(96, 177, 14, .05) 0 2px, transparent 2px 10px),
		var(--vn-bg-paper);
	box-shadow: var(--vn-shadow-sm);
	overflow: hidden;
	transform: rotate(-1deg);
	transition: transform .25s ease, box-shadow .25s ease;
}

.vn-note:nth-child(even) {
	transform: rotate(1deg);
}

.vn-note:hover {
	transform: rotate(0) translateY(-4px);
	box-shadow: var(--vn-shadow-md);
}

/* Khung vien doi nhu to tien */
.vn-note::before {
	content: "";
	position: absolute;
	inset: 9px;
	border: 3px double rgba(2, 117, 0, .32);
	border-radius: 9px;
	pointer-events: none;
}

/* Hoa van guilloche goc phai */
.vn-note::after {
	content: "";
	position: absolute;
	right: 20px;
	top: 20px;
	width: 78px;
	height: 78px;
	border-radius: 50%;
	background: repeating-radial-gradient(circle, rgba(96, 177, 14, .32) 0 1.5px, transparent 1.5px 6px);
	pointer-events: none;
}

.vn-note__value {
	position: relative;
	z-index: 1;
	margin: 0 0 8px;
	padding-right: 64px;
	color: var(--vn-primary);
	font-size: clamp(24px, 2.6vw, 30px);
	font-weight: 900;
	font-style: italic;
	line-height: 1.15;
	font-variant-numeric: tabular-nums;
}

.vn-main h3.vn-note__label {
	position: relative;
	z-index: 1;
	margin: 0 0 4px;
	font-size: 17.5px;
}

.vn-note__desc {
	position: relative;
	z-index: 1;
	margin: 0;
	color: var(--vn-muted);
	font-size: 15px;
}

.vn-note__mini {
	position: absolute;
	right: 22px;
	bottom: 15px;
	color: rgba(2, 117, 0, .45);
	font-size: 12px;
	font-weight: 900;
	font-style: italic;
	letter-spacing: .04em;
}

.vn-notes__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px 28px;
	margin-top: 40px;
	text-align: center;
}

.vn-notes__warn {
	margin: 0;
	padding: 10px 16px;
	border-left: 4px solid var(--vn-accent-1);
	border-radius: 0 10px 10px 0;
	background: var(--vn-bg-soft);
	color: var(--vn-navy);
	font-size: 15px;
	text-align: left;
}

/* ==========================================================================
   10. VI DU: PHIEU UOC TINH CO DONG BANG CHU
   ========================================================================== */

.vn-slip__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: 40px;
	align-items: start;
}

.vn-slip__card {
	padding: 24px;
	border-radius: var(--vn-radius-lg);
	background: #fff;
	box-shadow: var(--vn-shadow-md);
}

.vn-slip__controls {
	display: grid;
	gap: 12px;
}

.vn-slip__group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.vn-slip__group-label {
	min-width: 72px;
	color: var(--vn-muted);
	font-size: 14px;
	font-weight: 700;
}

.vn-slip__paper {
	position: relative;
	margin-top: 20px;
	padding: 24px 26px 22px;
	border: 1px solid var(--vn-border-paper);
	border-radius: 12px;
	background: #FFFDF5;
	box-shadow: inset 0 0 0 6px #FFFDF5, inset 0 0 0 7.5px rgba(2, 117, 0, .22);
}

.vn-slip__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}

.vn-slip__name {
	margin: 0;
	color: var(--vn-navy);
	font-size: 14px;
	font-weight: 900;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.vn-slip__stamp {
	flex: none;
	padding: 3px 10px;
	border: 2px dashed var(--vn-primary);
	border-radius: 6px;
	color: var(--vn-primary);
	font-size: 11.5px;
	font-weight: 900;
	letter-spacing: .06em;
	text-transform: uppercase;
	transform: rotate(-6deg);
}

.vn-slip__line {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 0;
	border-bottom: 1.5px dotted #D3C89E;
}

.vn-slip__line dt {
	color: var(--vn-text);
	font-size: 15px;
}

.vn-slip__formula {
	display: block;
	color: var(--vn-muted);
	font-size: 12.5px;
	font-variant-numeric: tabular-nums;
}

.vn-slip__line dd {
	color: var(--vn-navy);
	font-size: 16px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.vn-slip__line--total {
	padding-top: 12px;
	border-bottom: 0;
}

.vn-slip__line--total dt {
	color: var(--vn-navy);
	font-weight: 800;
}

.vn-slip__line--total dd {
	color: var(--vn-primary);
	font-size: 25px;
	font-weight: 900;
	font-style: italic;
}

.vn-slip__line--total dd.is-pulse {
	animation: vn-pulse .45s ease;
}

@keyframes vn-pulse {
	40% { transform: scale(1.08); }
}

.vn-slip__words {
	margin: 12px 0 0;
	padding: 12px 14px;
	border-left: 4px solid var(--vn-accent-1);
	border-radius: 0 10px 10px 0;
	background: var(--vn-bg-soft);
	color: var(--vn-navy);
	font-size: 15px;
}

.vn-slip__words-label {
	color: var(--vn-muted);
	font-weight: 700;
}

.vn-slip__words em {
	font-weight: 600;
}

.vn-slip__sign {
	margin-top: 22px;
	text-align: right;
}

.vn-slip__sign span {
	display: inline-block;
	min-width: 60%;
	padding-top: 6px;
	border-top: 1.5px dashed #BDB28A;
	color: var(--vn-muted);
	font-size: 12.5px;
	text-align: center;
}

.vn-main h3.vn-slip__side-title {
	margin: 4px 0 10px;
	font-size: 20px;
}

.vn-slip__rule {
	padding: 12px 16px;
	border-left: 4px solid var(--vn-primary);
	border-radius: 0 10px 10px 0;
	background: #fff;
	color: var(--vn-navy);
}

.vn-slip__note {
	margin: 0;
	color: var(--vn-muted);
	font-size: 14.5px;
}

/* ==========================================================================
   11. DIEU KIEN: CHUM NAM CHIA KHOA
   ========================================================================== */

.vn-keys__grid {
	display: grid;
	grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
	gap: 56px;
	align-items: center;
}

.vn-keys__done {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 6px 0 24px;
	padding: 10px 16px;
	border: 1.5px dashed var(--vn-accent-1);
	border-radius: 12px;
	background: var(--vn-bg-soft);
	color: var(--vn-navy);
	font-weight: 700;
}

.vn-keys__done::before {
	content: "";
	flex: none;
	width: 10px;
	height: 5px;
	margin-top: -3px;
	border: solid var(--vn-primary);
	border-width: 0 0 2.5px 2.5px;
	transform: rotate(-45deg);
}

.vn-keys__list {
	position: relative;
	display: grid;
	gap: 22px;
	list-style: none;
}

.vn-key {
	position: relative;
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	align-items: center;
	transition: transform .25s ease;
}

.vn-key:nth-child(even) {
	margin-left: 30px;
}

.vn-key:hover {
	transform: translateX(8px);
}

.vn-key__head {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--vn-gradient);
	box-shadow: inset 0 0 0 6px rgba(255, 255, 255, .25), var(--vn-shadow-sm);
	color: #fff;
	font-size: 22px;
	font-weight: 900;
	font-style: italic;
}

/* Lo xo chia */
.vn-key__head::before {
	content: "";
	position: absolute;
	left: 9px;
	top: 50%;
	width: 10px;
	height: 10px;
	margin-top: -5px;
	border-radius: 50%;
	background: #fff;
}

.vn-key__head span {
	margin-left: 10px;
}

.vn-key__blade {
	position: relative;
	margin-left: -10px;
	padding: 14px 68px 14px 24px;
	border: 1.5px solid var(--vn-border);
	border-left: 0;
	border-radius: 0 14px 14px 0;
	background: linear-gradient(180deg, #FFFFFF 0%, #F8FCF2 100%);
	box-shadow: var(--vn-shadow-sm);
}

/* Rang chia: bac rang nho thong xuong duoi mep phai cua than chia */
.vn-key__blade::after {
	content: "";
	position: absolute;
	right: 18px;
	bottom: -11px;
	width: 50px;
	height: 12px;
	background: var(--vn-accent-2);
	clip-path: polygon(0 0, 100% 0, 100% 55%, 84% 55%, 84% 100%, 66% 100%, 66% 35%, 48% 35%, 48% 100%, 28% 100%, 28% 70%, 0 70%);
}

.vn-main h3.vn-key__title {
	margin: 0 0 2px;
	font-size: 17.5px;
}

.vn-key__desc {
	margin: 0;
	color: var(--vn-muted);
	font-size: 15px;
}

/* ==========================================================================
   12. QUY TRINH: BON XAP TIEN DAY DAN
   ========================================================================== */

.vn-stacks__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px;
	list-style: none;
}

.vn-stack {
	display: flex;
	flex-direction: column;
	padding: 24px 22px;
	border-radius: 18px;
	background: #fff;
	box-shadow: var(--vn-shadow-sm);
}

.vn-stack__pile {
	position: relative;
	height: 92px;
	margin-bottom: 16px;
}

.vn-stack__bill {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 116px;
	height: 46px;
	border: 2px solid var(--vn-accent-2);
	border-radius: 8px;
	background: #FAF3D9;
	box-shadow: 0 3px 0 rgba(30, 38, 24, .06);
	box-sizing: border-box;
	transition: transform .45s cubic-bezier(.3, 1.4, .5, 1), opacity .3s ease;
}

.vn-stack__bill::before {
	content: "";
	position: absolute;
	inset: 4px;
	border: 1px dashed rgba(2, 117, 0, .35);
	border-radius: 5px;
}

.vn-stack__bill::after {
	content: "đ";
	position: absolute;
	right: 9px;
	top: 50%;
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	border-radius: 50%;
	background: var(--vn-accent-1);
	color: #fff;
	font-size: 12px;
	font-weight: 900;
	line-height: 1;
}

.vn-stack__bill:nth-child(even) {
	background: #CDEBA8;
}

.vn-stack__bill:nth-child(2) { bottom: 13px; left: 8px; }
.vn-stack__bill:nth-child(3) { bottom: 26px; left: 16px; }
.vn-stack__bill:nth-child(4) { bottom: 39px; left: 24px; }

.vn-stack--done .vn-stack__bill {
	border-color: var(--vn-primary);
}

.vn-stack--done .vn-stack__bill:last-child {
	box-shadow: 0 0 0 5px rgba(96, 177, 14, .2), 0 8px 18px rgba(2, 117, 0, .2);
}

/* JS: to tien roi vao xap lan luot */
.vn-stacks__list.is-armed .vn-stack__bill {
	opacity: 0;
	transform: translateY(-34px);
}

.vn-stacks__list.is-in .vn-stack__bill {
	opacity: 1;
	transform: none;
}

.vn-stack:nth-child(2) .vn-stack__bill { transition-delay: .2s; }
.vn-stack:nth-child(3) .vn-stack__bill { transition-delay: .4s; }
.vn-stack:nth-child(4) .vn-stack__bill { transition-delay: .6s; }
.vn-stack:nth-child(2) .vn-stack__bill:nth-child(2) { transition-delay: .32s; }
.vn-stack:nth-child(3) .vn-stack__bill:nth-child(2) { transition-delay: .52s; }
.vn-stack:nth-child(3) .vn-stack__bill:nth-child(3) { transition-delay: .64s; }
.vn-stack:nth-child(4) .vn-stack__bill:nth-child(2) { transition-delay: .72s; }
.vn-stack:nth-child(4) .vn-stack__bill:nth-child(3) { transition-delay: .84s; }
.vn-stack:nth-child(4) .vn-stack__bill:nth-child(4) { transition-delay: .96s; }

.vn-stack__num {
	color: var(--vn-accent-text);
	font-size: 13.5px;
	font-weight: 900;
	font-style: italic;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.vn-main h3.vn-stack__title {
	margin: 4px 0 6px;
	font-size: 18px;
}

.vn-stack__desc {
	margin: 0 0 14px;
	font-size: 15px;
}

.vn-stack__time {
	align-self: flex-start;
	margin-top: auto;
	padding: 5px 12px;
	border-radius: 8px;
	background: var(--vn-bg-soft);
	color: var(--vn-primary);
	font-size: 13.5px;
	font-weight: 800;
}

.vn-stacks__foot {
	margin-top: 36px;
	text-align: center;
}

/* ==========================================================================
   13. QUAN LY KHOAN VAY: HANH TRINH CO LOI TAT
   ========================================================================== */

.vn-route__track {
	position: relative;
	height: 134px;
	margin: 8px 0 28px;
}

.vn-route__line {
	position: absolute;
	left: 6%;
	right: 6%;
	top: 80px;
	height: 8px;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--vn-accent-2) 0%, var(--vn-accent-1) 50%, var(--vn-primary) 100%);
}

.vn-route__span {
	position: absolute;
	left: 6%;
	top: 46px;
	color: var(--vn-muted);
	font-size: 13.5px;
	font-weight: 700;
}

/* Moc tren dai: vong tron tren duong, nhan ben duoi */
.vn-route__dot,
.vn-route__bell {
	position: absolute;
	top: 72px;
	display: block;
	transform: translateX(-50%);
	color: var(--vn-navy);
	font-size: 14px;
	font-weight: 800;
	line-height: 20px;
	text-align: center;
	white-space: nowrap;
}

.vn-route__dot::before,
.vn-route__bell::before {
	content: "";
	display: block;
	width: 24px;
	height: 24px;
	margin: 0 auto 10px;
	border: 5px solid var(--vn-primary);
	border-radius: 50%;
	background: #fff;
	box-sizing: border-box;
}

.vn-route__bell::before {
	width: 20px;
	height: 20px;
	margin: 2px auto 12px;
	border-width: 4px;
	border-color: var(--vn-accent-1);
	border-radius: 50% 50% 4px 4px;
}

.vn-route__dot--start { left: 6%; }
.vn-route__bell--a { left: 30%; }
.vn-route__bell--b { left: 56%; }
.vn-route__dot--end { left: 94%; }

.vn-route__dot--end::before {
	background: var(--vn-accent-1);
}

.vn-route__dot b,
.vn-route__bell b,
.vn-route__shortcut b {
	display: inline-grid;
	place-items: center;
	width: 20px;
	height: 20px;
	margin-right: 6px;
	border-radius: 50%;
	background: var(--vn-primary);
	color: #fff;
	font-size: 12px;
	font-style: italic;
	vertical-align: 1px;
}

.vn-route__dot--end b {
	display: none;
}

/* Cung net dut "loi tat: tra truoc han" */
.vn-route__shortcut {
	position: absolute;
	left: 44%;
	right: 6%;
	top: 14px;
	height: 70px;
	border: 2.5px dashed var(--vn-accent-text);
	border-bottom: 0;
	border-radius: 50% 50% 0 0 / 100% 100% 0 0;
	color: var(--vn-accent-text);
	font-size: 13.5px;
	font-weight: 800;
	text-align: center;
}

.vn-route__shortcut b {
	background: var(--vn-accent-text);
}

/* Nhan cua cung nam tren dinh cung */
.vn-route__shortcut-label {
	position: absolute;
	left: 50%;
	top: 0;
	padding: 2px 10px;
	background: #fff;
	line-height: 1.4;
	white-space: nowrap;
	transform: translate(-50%, -55%);
}

.vn-route__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
	list-style: none;
}

.vn-route__card {
	position: relative;
	padding: 26px 24px 22px;
	border: 1.5px solid var(--vn-border);
	border-radius: 16px;
	background: #fff;
	box-shadow: var(--vn-shadow-sm);
}

.vn-route__card--shortcut {
	border: 2px dashed var(--vn-accent-1);
	background: #FBFDF7;
}

.vn-route__badge {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	margin-bottom: 12px;
	border-radius: 50%;
	background: var(--vn-gradient);
	color: #fff;
	font-size: 16px;
	font-weight: 900;
	font-style: italic;
}

.vn-main h3.vn-route__title {
	margin: 0 0 6px;
	font-size: 18px;
}

.vn-route__desc {
	margin: 0;
	font-size: 15px;
}

/* ==========================================================================
   14. UU DIEM + LUU Y: NAM CAP QUYEN LOI - VIEC NEN LAM
   ========================================================================== */

.vn-pairs__list {
	display: grid;
	gap: 16px;
	max-width: 1000px;
	margin: 0 auto;
	list-style: none;
}

.vn-pair {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr);
	align-items: stretch;
}

/* Net dut noi hai the */
.vn-pair::before {
	content: "";
	position: absolute;
	left: 46%;
	right: 46%;
	top: 50%;
	border-top: 2px dashed var(--vn-accent-1);
}

.vn-pair__gain,
.vn-pair__duty {
	position: relative;
	padding: 18px 22px;
	border-radius: var(--vn-radius);
}

.vn-pair__gain {
	border-left: 5px solid var(--vn-accent-1);
	background: #fff;
	box-shadow: var(--vn-shadow-sm);
}

.vn-pair__duty {
	border: 1.5px solid #C9D3BE;
	background: #FFFDF5;
}

.vn-pair__kicker {
	display: block;
	color: var(--vn-accent-text);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.vn-pair__duty .vn-pair__kicker {
	color: var(--vn-muted);
}

.vn-main h3.vn-pair__title {
	margin: 3px 0 4px;
	font-size: 17.5px;
}

.vn-pair__desc {
	margin: 0;
	font-size: 15px;
}

.vn-pair__link {
	position: relative;
	z-index: 1;
	align-self: center;
	justify-self: center;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--vn-primary);
	box-shadow: 0 0 0 6px var(--vn-bg-paper);
}

.vn-pair__link::before {
	content: "⇄";
	color: #fff;
	font-size: 20px;
	font-weight: 900;
	line-height: 1;
}

/* ==========================================================================
   15. PHAP NHAN: BIEN HIEU DOANH NGHIEP
   ========================================================================== */

.vn-plate__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
	gap: 56px;
	align-items: center;
}

.vn-plate__text p {
	font-size: 16.5px;
}

.vn-plate__board {
	position: relative;
	padding: 36px 34px 28px;
	border-radius: 18px;
	background: linear-gradient(160deg, #2E3826 0%, #1E2618 60%, #172012 100%);
	box-shadow: var(--vn-shadow-lg), inset 0 0 0 1px rgba(255, 255, 255, .06);
	color: #DCE6D2;
}

.vn-plate__board::before {
	content: "";
	position: absolute;
	inset: 10px;
	border: 1.5px solid rgba(139, 203, 58, .45);
	border-radius: 12px;
	pointer-events: none;
}

.vn-plate__screw {
	position: absolute;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #EEF2E8 0%, #8C977F 75%);
}

.vn-plate__screw::after {
	content: "";
	position: absolute;
	left: 2px;
	right: 2px;
	top: 50%;
	height: 1.5px;
	margin-top: -.75px;
	background: #5B6550;
	transform: rotate(-35deg);
}

.vn-plate__screw--tl { left: 20px; top: 20px; }
.vn-plate__screw--tr { right: 20px; top: 20px; }
.vn-plate__screw--bl { left: 20px; bottom: 20px; }
.vn-plate__screw--br { right: 20px; bottom: 20px; }

.vn-plate__logo-chip {
	display: inline-flex;
	padding: 8px 14px;
	border-radius: 10px;
	background: #fff;
}

.vn-plate__logo {
	display: block;
	width: auto;
	height: 28px;
}

.vn-plate__kicker {
	margin: 18px 0 2px;
	color: #A9C48A;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.vn-main .vn-plate__name {
	margin: 0 0 14px;
	color: #fff;
	font-size: clamp(19px, 2.2vw, 22px);
	font-weight: 900;
	letter-spacing: .03em;
}

.vn-plate__rows {
	margin: 0;
}

.vn-plate__row {
	display: grid;
	grid-template-columns: 124px minmax(0, 1fr);
	gap: 12px;
	padding: 9px 0;
	border-top: 1px dashed rgba(255, 255, 255, .14);
}

.vn-plate__row dt {
	color: #A9C48A;
	font-size: 14px;
}

.vn-plate__row dd {
	color: #F4F8EF;
	font-size: 15px;
	overflow-wrap: anywhere;
}

.vn-body .vn-plate__row a {
	color: #B8E07E;
	text-decoration: none;
}

.vn-body .vn-plate__row a:hover,
.vn-body .vn-plate__row a:focus {
	color: #fff;
	text-decoration: underline;
}

/* ==========================================================================
   16. KHOI NOI DUNG SEO (CO collapse)
   ========================================================================== */

.vn-seo {
	padding: 76px 0 88px;
	background: var(--vn-bg-soft);
}

.vn-seo__card {
	position: relative;
	max-width: 920px;
	margin: 0 auto;
	padding: 48px 56px;
	border: 1px solid #a8a8a8;
	border-radius: var(--vn-radius-lg);
	background: #fff;
	box-shadow: var(--vn-shadow-sm);
	box-sizing: border-box;
}

.vn-seo__inner {
	position: relative;
	counter-reset: vnh2;
	color: var(--vn-text);
}

/* Sapo: cac doan truoc H2 dau tien */
.vn-seo__inner > p:not(h2 ~ p) {
	padding-left: 18px;
	border-left: 4px solid var(--vn-accent-1);
	color: var(--vn-navy);
}

.vn-seo__inner strong {
	color: var(--vn-navy);
}

.vn-main .vn-seo__inner h2 {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 44px 0 16px;
	padding-top: 30px;
	border-top: 1px dashed var(--vn-border);
	font-size: clamp(20px, 2.6vw, 25px);
	counter-increment: vnh2;
}

.vn-main .vn-seo__inner > h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

/* So H2 trong chip hinh to tien nho (vien doi) */
.vn-main .vn-seo__inner h2::before {
	content: counter(vnh2, decimal-leading-zero);
	display: grid;
	flex: none;
	place-items: center;
	width: 54px;
	height: 34px;
	border: 2px solid var(--vn-primary);
	border-radius: 6px;
	background: var(--vn-bg-paper);
	box-shadow: inset 0 0 0 3px var(--vn-bg-paper), inset 0 0 0 4.5px rgba(2, 117, 0, .35);
	color: var(--vn-primary);
	font-size: 15px;
	font-weight: 900;
	font-style: italic;
	box-sizing: border-box;
}

.vn-main .vn-seo__inner h3 {
	position: relative;
	margin: 28px 0 10px;
	padding-left: 34px;
	font-size: 19px;
}

/* Bullet H3: 3 vet toc do cua logo */
.vn-main .vn-seo__inner h3::before {
	content: "";
	position: absolute;
	left: 0;
	top: .42em;
	width: 24px;
	height: 13px;
	background:
		linear-gradient(var(--vn-accent-1), var(--vn-accent-1)) 4px 0 / 20px 3px no-repeat,
		linear-gradient(var(--vn-accent-1), var(--vn-accent-1)) 0 5px / 24px 3px no-repeat,
		linear-gradient(var(--vn-accent-2), var(--vn-accent-2)) 7px 10px / 15px 3px no-repeat;
}

.vn-seo__inner ul {
	display: grid;
	gap: 8px;
	margin: 0 0 1.2em;
	list-style: none;
}

.vn-seo__inner ul li {
	position: relative;
	padding-left: 24px;
}

.vn-seo__inner ul li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: .65em;
	width: 11px;
	height: 4px;
	border-radius: 2px;
	background: var(--vn-accent-1);
}

.vn-seo__inner ol {
	margin: 0 0 1.2em 1.3em;
}

.vn-seo__inner ol li {
	margin-bottom: 6px;
}

.vn-seo__figure {
	max-width: 560px;
	margin: 28px auto 6px;
}

.vn-seo__img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--vn-border);
	border-radius: var(--vn-radius);
	box-shadow: var(--vn-shadow-sm);
}

.vn-seo__inner.is-collapsed {
	max-height: 620px;
	overflow: hidden;
}

.vn-seo__inner.is-collapsed::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 160px;
	background: linear-gradient(rgba(255, 255, 255, 0), #fff 88%);
	pointer-events: none;
}

.vn-seo__inner.is-animating {
	overflow: hidden;
	transition: max-height .6s ease;
}

.vn-seo__toggle-wrap {
	display: none;
	margin-top: 20px;
	text-align: center;
}

.vn-seo.is-collapsible .vn-seo__toggle-wrap {
	display: block;
}

.vn-body .vn-seo__toggle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 24px;
	border: 1.5px solid var(--vn-primary);
	border-radius: var(--vn-radius-btn);
	background: #fff;
	color: var(--vn-primary);
	font-size: 15.5px;
	font-weight: 800;
	line-height: 1.5;
	cursor: pointer;
}

.vn-body .vn-seo__toggle:hover,
.vn-body .vn-seo__toggle:focus {
	background: var(--vn-bg-soft);
	color: var(--vn-primary-dark);
}

.vn-seo__toggle-icon {
	width: 8px;
	height: 8px;
	margin-top: -4px;
	border: solid currentColor;
	border-width: 0 2.5px 2.5px 0;
	transform: rotate(45deg);
	transition: transform .3s ease;
}

.vn-seo__toggle[aria-expanded="true"] .vn-seo__toggle-icon {
	margin-top: 4px;
	transform: rotate(-135deg);
}

/* Trang van ban dai (chinh sach, dieu khoan): tai su dung card SEO, KHONG collapse */
.vn-seo__card--doc {
	max-width: 900px;
}

/* ==========================================================================
   17. SUBPAGES
   ========================================================================== */

.vn-page-hero {
	padding: 44px 0 52px;
	background:
		radial-gradient(420px 260px at 8% 100%, rgba(232, 224, 198, .5), transparent 70%),
		radial-gradient(420px 260px at 94% 0%, rgba(96, 177, 14, .14), transparent 70%),
		linear-gradient(180deg, #F2F9E8 0%, #FFFFFF 100%);
	text-align: center;
}

.vn-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
	font-size: 14.5px;
}

.vn-breadcrumbs__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--vn-text);
}

.vn-breadcrumbs__item + .vn-breadcrumbs__item::before {
	content: "";
	width: 6px;
	height: 6px;
	border: solid var(--vn-muted);
	border-width: 1.5px 1.5px 0 0;
	transform: rotate(45deg);
}

.vn-body .vn-breadcrumbs__link {
	color: var(--vn-primary-dark);
	font-weight: 700;
	text-decoration: none;
}

.vn-body .vn-breadcrumbs__link:hover,
.vn-body .vn-breadcrumbs__link:focus {
	text-decoration: underline;
}

.vn-main h1.vn-page-hero__title {
	max-width: 780px;
	margin: 0 auto 14px;
	font-size: clamp(1.3rem, 5vw, 2rem);
}

.vn-page-hero__desc {
	max-width: 700px;
	margin: 0 auto;
	color: var(--vn-text);
	font-size: 16.5px;
}

/* Gioi thieu */
.vn-about {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
	gap: 48px;
	align-items: start;
}

.vn-about__text p {
	font-size: 16.5px;
}

.vn-about__facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	list-style: none;
}

.vn-about__fact {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 22px 20px;
	border: 1px solid var(--vn-border-paper);
	border-radius: var(--vn-radius);
	background: var(--vn-bg-paper);
}

.vn-about__fact::before {
	content: "";
	position: absolute;
	inset: 6px;
	border: 3px double rgba(2, 117, 0, .25);
	border-radius: 9px;
	pointer-events: none;
}

.vn-about__fact strong {
	color: var(--vn-primary);
	font-size: 26px;
	font-weight: 900;
	font-style: italic;
}

.vn-about__fact span {
	color: var(--vn-muted);
	font-size: 14.5px;
}

.vn-values {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
	list-style: none;
}

.vn-value {
	padding: 26px 24px;
	border-top: 4px solid var(--vn-accent-1);
	border-radius: 0 0 var(--vn-radius) var(--vn-radius);
	background: #fff;
	box-shadow: var(--vn-shadow-sm);
}

.vn-value:nth-child(2) {
	border-top-color: var(--vn-primary);
}

.vn-value:nth-child(3) {
	border-top-color: var(--vn-olive);
}

.vn-main h3.vn-value__title {
	margin: 0 0 8px;
}

.vn-value__desc {
	margin: 0;
	font-size: 15.5px;
}

/* Cach vay */
.vn-steps {
	display: grid;
	gap: 18px;
	list-style: none;
}

.vn-step {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	gap: 20px;
	align-items: start;
	padding: 22px 24px;
	border: 1px solid var(--vn-border);
	border-radius: var(--vn-radius);
	background: #fff;
}

.vn-step__num {
	display: grid;
	place-items: center;
	width: 66px;
	height: 44px;
	border: 2px solid var(--vn-primary);
	border-radius: 8px;
	background: var(--vn-bg-paper);
	box-shadow: inset 0 0 0 3px var(--vn-bg-paper), inset 0 0 0 4.5px rgba(2, 117, 0, .35);
	color: var(--vn-primary);
	font-size: 20px;
	font-weight: 900;
	font-style: italic;
	box-sizing: border-box;
}

.vn-main h3.vn-step__title {
	margin: 4px 0 6px;
}

.vn-step__body p {
	margin: 0;
}

.vn-guide__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.vn-guide__box {
	padding: 28px;
	border-radius: var(--vn-radius-lg);
	background: #fff;
	box-shadow: var(--vn-shadow-sm);
}

.vn-main .vn-guide__title {
	margin: 0;
	font-size: clamp(20px, 2.4vw, 23px);
}

.vn-guide__box .vn-check {
	margin-bottom: 0;
}

.vn-guide__note {
	margin: 18px 0 0;
	padding: 12px 16px;
	border-radius: 12px;
	background: var(--vn-bg-paper);
	color: var(--vn-navy);
	font-size: 15px;
}

/* FAQ */
.vn-faq {
	max-width: 880px;
	display: grid;
	gap: 12px;
}

.vn-faq__item {
	border: 1px solid var(--vn-border);
	border-radius: var(--vn-radius);
	background: #fff;
	overflow: hidden;
}

.vn-main .vn-faq__q {
	margin: 0;
	font-size: inherit;
}

.vn-body .vn-faq__btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 18px 22px;
	border: 0;
	background: #fff;
	color: var(--vn-navy);
	font-size: 17.5px;
	font-weight: 700;
	line-height: 1.4;
	text-align: left;
	cursor: pointer;
}

.vn-body .vn-faq__btn:hover,
.vn-body .vn-faq__btn:focus {
	background: var(--vn-bg-soft);
	color: var(--vn-primary);
}

.vn-faq__icon {
	position: relative;
	flex: none;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--vn-bg-soft);
}

.vn-faq__icon::before,
.vn-faq__icon::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 12px;
	height: 2.5px;
	margin: -1.25px 0 0 -6px;
	border-radius: 2px;
	background: var(--vn-primary);
	transition: transform .25s ease;
}

.vn-faq__icon::after {
	transform: rotate(90deg);
}

.vn-faq__btn[aria-expanded="true"] .vn-faq__icon::after {
	transform: rotate(0deg);
}

.vn-faq__a {
	padding: 0 22px 18px;
}

.vn-faq__a p {
	margin: 0;
}

/* Lien lac */
.vn-contact {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	list-style: none;
}

.vn-contact__card {
	padding: 24px 22px;
	border: 1px solid var(--vn-border);
	border-top: 4px solid var(--vn-accent-1);
	border-radius: var(--vn-radius);
	background: #fff;
}

.vn-main .vn-contact__title {
	margin: 0 0 8px;
	color: var(--vn-muted);
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.vn-contact__value {
	margin: 0 0 6px;
	color: var(--vn-navy);
	font-size: 18px;
	font-weight: 800;
	overflow-wrap: anywhere;
}

.vn-body .vn-contact__value a {
	color: var(--vn-primary);
	text-decoration: none;
}

.vn-contact__desc {
	margin: 0;
	color: var(--vn-muted);
	font-size: 14.5px;
}

/* CTA band (trang con): xanh rung + 3 vet toc do lime bang anh nen (khong them phan tu tran) */
.vn-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px 40px;
	padding: 40px 48px;
	border-radius: var(--vn-radius-lg);
	background:
		linear-gradient(rgba(139, 203, 58, .55), rgba(139, 203, 58, .55)) right 40px top 12px / 70px 5px no-repeat,
		linear-gradient(rgba(139, 203, 58, .38), rgba(139, 203, 58, .38)) right 24px top 21px / 100px 5px no-repeat,
		linear-gradient(rgba(139, 203, 58, .22), rgba(139, 203, 58, .22)) right 52px top 30px / 56px 5px no-repeat,
		linear-gradient(135deg, #0C8A07 0%, #027500 55%, #005A00 100%);
	color: #fff;
}

.vn-main h2.vn-cta__title {
	margin: 0 0 6px;
	color: #fff;
	font-size: clamp(20px, 2.6vw, 25px);
}

.vn-cta__desc {
	margin: 0;
	color: #E2F3CF;
}

.vn-cta .vn-btn {
	flex: none;
}

/* ==========================================================================
   18. 404
   ========================================================================== */

.vn-404 {
	padding: 88px 0 104px;
	text-align: center;
}

.vn-404__code {
	margin: 0 0 30px;
	font-size: clamp(92px, 20vw, 196px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: .01em;
	color: var(--vn-navy);
	font-variant-numeric: tabular-nums;
}

@supports ((-webkit-text-stroke: 1px currentColor) and (paint-order: stroke)) {
	.vn-404__code {
		color: var(--vn-accent-1);
		-webkit-text-stroke: .055em var(--vn-navy);
		paint-order: stroke fill;
		text-shadow: .035em .045em 0 rgba(0, 0, 0, .18);
	}
}

.vn-main h1.vn-404__title {
	max-width: 56ch;
	margin: 0 auto 30px;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.6;
	color: var(--vn-text);
}

/* ==========================================================================
   19. FOOTER
   ========================================================================== */

.vn-footer {
	padding: 64px 0 0;
	background: var(--vn-navy);
	color: #C3CDB8;
	font-size: 15px;
}

.vn-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, .8fr) minmax(0, .8fr) minmax(0, 1.2fr);
	gap: 36px;
}

.vn-body .vn-footer__logo-link {
	display: inline-flex;
	padding: 9px 14px;
	border-radius: 10px;
	background: #fff;
}

.vn-footer__logo {
	display: block;
	width: auto;
	height: 30px;
}

.vn-footer__desc {
	margin: 18px 0 12px;
}

.vn-footer__legal {
	margin: 0 0 12px;
}

.vn-footer__legal strong {
	color: #fff;
}

.vn-footer__warn {
	margin: 0;
	padding: 12px 14px;
	border-left: 3px solid var(--vn-accent-1);
	border-radius: 0 10px 10px 0;
	background: rgba(255, 255, 255, .05);
	font-size: 14px;
}

.vn-footer__title {
	margin: 0 0 14px;
	color: #fff;
	font-size: 16px;
	font-weight: 800;
}

.vn-footer__links,
.vn-footer__contact {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vn-body .vn-footer a {
	color: #E8F0E0;
	text-decoration: none;
}

.vn-body .vn-footer a:hover,
.vn-body .vn-footer a:focus {
	color: var(--vn-accent-2);
	text-decoration: underline;
}

.vn-footer__contact li {
	display: grid;
	gap: 2px;
}

.vn-footer__label {
	color: #93A386;
	font-size: 13px;
}

.vn-footer__bottom {
	margin-top: 44px;
	padding: 20px 0 24px;
	border-top: 1px solid rgba(255, 255, 255, .1);
}

.vn-footer__copy {
	margin: 0;
	color: #93A386;
	font-size: 14px;
	text-align: center;
}

/* ==========================================================================
   20. RESPONSIVE
   ========================================================================== */

@media (min-width: 1025px) {
	.vn-stats {
		display: none;
	}
}

@media (max-width: 1024px) {
	.vn-hero {
		padding: 40px 0 88px;
	}

	.vn-hero__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.vn-hero__visual {
		display: contents;
	}

	.vn-main h1.vn-hero__title {
		order: 1;
	}

	.vn-hero__desc {
		order: 2;
		margin-bottom: 24px;
	}

	.vn-hero__content {
		order: 3;
		justify-self: center;
		max-width: 560px;
	}

	.vn-hero__art {
		order: 4;
		justify-self: center;
		width: 100%;
		margin-top: 28px;
	}

	.vn-stats {
		margin-bottom: 8px;
	}

	.vn-counter__grid,
	.vn-slip__grid,
	.vn-keys__grid,
	.vn-plate__grid,
	.vn-about {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.vn-counter__stage {
		justify-self: center;
	}

	.vn-notes__grid,
	.vn-values,
	.vn-stacks__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.vn-slip__card {
		max-width: 640px;
		width: 100%;
		margin: 0 auto;
		box-sizing: border-box;
	}

	.vn-keys__list {
		max-width: 640px;
		margin-top: 20px;
	}

	.vn-plate__holder {
		max-width: 620px;
		width: 100%;
		margin: 0 auto;
	}

	.vn-route__shortcut {
		left: 40%;
	}

	.vn-contact {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.vn-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.vn-footer__brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 768px) {
	.vn-header__inner {
		min-height: 66px;
		gap: 12px;
	}

	.vn-header__logo {
		height: 30px;
	}

	.vn-header__cta {
		display: none;
	}

	.vn-body .vn-header__toggle {
		display: block;
	}

	.vn-header__actions {
		margin-left: auto;
	}

	/* Panel off-canvas: fixed, KHONG nam trong phan tu co z-index so (header khong dat z-index) */
	.vn-nav {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 1001;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		width: min(86vw, 340px);
		padding: 20px;
		background: #fff;
		box-shadow: -12px 0 40px rgba(30, 38, 24, .18);
		transform: translateX(100%);
		visibility: hidden;
		transition: transform .3s ease, visibility .3s ease;
		overflow-y: auto;
		box-sizing: border-box;
	}

	.vn-nav.is-open {
		transform: translateX(0);
		visibility: visible;
	}

	.vn-nav__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 16px;
		padding-bottom: 14px;
		border-bottom: 1px solid var(--vn-border);
	}

	.vn-nav__label {
		color: var(--vn-muted);
		font-size: 14px;
		font-weight: 700;
		letter-spacing: .04em;
		text-transform: uppercase;
	}

	.vn-body .vn-nav__close {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		height: 42px;
		padding: 0 14px;
		border: 1px solid var(--vn-border);
		border-radius: 10px;
		background: #fff;
		color: var(--vn-navy);
		font-size: 15px;
		font-weight: 700;
		line-height: 1;
		cursor: pointer;
	}

	.vn-body .vn-nav__close:hover,
	.vn-body .vn-nav__close:focus {
		background: var(--vn-bg-soft);
		color: var(--vn-primary);
	}

	.vn-nav__close-icon {
		position: relative;
		width: 14px;
		height: 14px;
	}

	.vn-nav__close-icon::before,
	.vn-nav__close-icon::after {
		content: "";
		position: absolute;
		left: 50%;
		top: 50%;
		width: 16px;
		height: 2.5px;
		margin: -1.25px 0 0 -8px;
		border-radius: 2px;
		background: currentColor;
		transform: rotate(45deg);
	}

	.vn-nav__close-icon::after {
		transform: rotate(-45deg);
	}

	.vn-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
	}

	.vn-body .vn-nav__link {
		padding: 13px 16px;
		font-size: 17px;
	}

	.vn-nav__cta {
		display: inline-flex;
		margin-top: 20px;
	}

	.vn-hero__art {
		display: none;
	}

	.vn-section {
		padding: 56px 0;
	}

	.vn-section--flush-top {
		padding-top: 32px;
	}

	.vn-section--flush-top-sm {
		padding-top: 4px;
	}

	.vn-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px 8px;
	}

	.vn-loan {
		padding: 22px 18px 18px;
	}

	.vn-counter__stage {
		max-width: 360px;
	}

	.vn-machine__body {
		padding: 28px 18px 18px;
	}

	.vn-notes__grid,
	.vn-values,
	.vn-guide__grid,
	.vn-stacks__list,
	.vn-route__cards {
		grid-template-columns: minmax(0, 1fr);
	}

	.vn-note,
	.vn-note:nth-child(even) {
		transform: none;
	}

	.vn-note:hover {
		transform: translateY(-2px);
	}

	.vn-note::after {
		width: 58px;
		height: 58px;
	}

	.vn-pairs__list {
		gap: 28px;
	}

	.vn-slip__card {
		padding: 18px 14px;
	}

	.vn-slip__paper {
		padding: 20px 16px 18px;
	}

	.vn-slip__group-label {
		width: 100%;
	}

	.vn-slip__line--total dd {
		font-size: 22px;
	}

	.vn-key:nth-child(even) {
		margin-left: 0;
	}

	.vn-key__blade {
		padding-right: 52px;
	}

	.vn-key__blade::after {
		right: 14px;
		width: 40px;
	}

	/* Xap tien nam trai chu */
	.vn-stack {
		display: grid;
		grid-template-columns: 132px minmax(0, 1fr);
		column-gap: 16px;
		align-items: start;
		padding: 20px 18px;
	}

	.vn-stack__pile {
		grid-row: 1 / span 4;
		height: 88px;
		margin: 0;
	}

	.vn-stack__bill {
		width: 100px;
		height: 42px;
	}

	.vn-stack__time {
		margin-top: 0;
	}

	/* Hanh trinh: an dai ngang, the noi bang ray doc ben trai */
	.vn-route__track {
		display: none;
	}

	.vn-route__cards {
		position: relative;
		gap: 16px;
		padding-left: 30px;
	}

	.vn-route__cards::before {
		content: "";
		position: absolute;
		left: 9px;
		top: 18px;
		bottom: 18px;
		width: 4px;
		border-radius: 2px;
		background: linear-gradient(180deg, var(--vn-accent-2), var(--vn-primary));
	}

	.vn-route__card::before {
		content: "";
		position: absolute;
		left: -30px;
		top: 30px;
		width: 22px;
		height: 22px;
		border: 5px solid var(--vn-primary);
		border-radius: 50%;
		background: #fff;
		box-sizing: border-box;
	}

	.vn-route__card--shortcut::before {
		border-color: var(--vn-accent-1);
		border-style: dashed;
	}

	.vn-pair {
		grid-template-columns: minmax(0, 1fr);
	}

	.vn-pair::before {
		display: none;
	}

	.vn-pair__link {
		width: 38px;
		height: 38px;
		margin: -8px 0;
		transform: rotate(90deg);
	}

	.vn-plate__board {
		padding: 32px 22px 26px;
	}

	.vn-plate__row {
		grid-template-columns: minmax(0, 1fr);
		gap: 2px;
	}

	.vn-seo {
		padding: 48px 0 56px;
	}

	.vn-seo__card {
		padding: 30px 20px;
		border-radius: var(--vn-radius);
	}

	.vn-main .vn-seo__inner h2 {
		gap: 14px;
	}

	.vn-main .vn-seo__inner h2::before {
		width: 48px;
		height: 32px;
		font-size: 14px;
	}

	.vn-step {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
		padding: 20px 18px;
	}

	.vn-cta {
		flex-direction: column;
		align-items: flex-start;
		padding: 32px 24px;
		background: linear-gradient(135deg, #0C8A07 0%, #027500 55%, #005A00 100%);
	}

	.vn-contact {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Mobile: cot "Vay Ngay" va "Chinh sach" nam ngang nhau; khoi brand + Lien he trai het chieu ngang */
	.vn-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px 20px;
	}

	.vn-footer__col--contact {
		grid-column: 1 / -1;
	}

	.vn-404 {
		padding: 56px 0 72px;
	}

	.vn-main h1.vn-404__title {
		font-size: 17.5px;
	}
}

@media (max-width: 480px) {
	.vn-about__facts {
		grid-template-columns: minmax(0, 1fr);
	}

	.vn-notes__foot .vn-btn,
	.vn-stacks__foot .vn-btn {
		width: 100%;
	}

	.vn-stack {
		grid-template-columns: 112px minmax(0, 1fr);
	}

	.vn-stack__bill {
		width: 84px;
		height: 38px;
	}

	.vn-key {
		grid-template-columns: 52px minmax(0, 1fr);
	}

	.vn-key__head {
		width: 52px;
		height: 52px;
		font-size: 18px;
	}

	.vn-key__head::before {
		left: 7px;
		width: 8px;
		height: 8px;
		margin-top: -4px;
	}

	.vn-key__blade {
		padding: 12px 46px 12px 20px;
	}

	.vn-machine__digits {
		font-size: 26px;
	}

	.vn-counter__chip {
		font-size: 13.5px;
	}
}

/* ==========================================================================
   21. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		transition-delay: 0s !important;
		scroll-behavior: auto !important;
	}
}