/* ============================================================
   Vua Mắm — Pages: Về Vua Mắm / Liên hệ / FAQ / Chính sách / 404
   ============================================================ */

/* Page thường */
.vm-page__body { padding-top: 40px; padding-bottom: 66px; }
.vm-page__card { background: #fff; border: 1px solid var(--vm-line); border-radius: 18px; padding: 36px 40px; }

/* ---------- Về Vua Mắm ---------- */
.vm-abhero {
	position: relative;
	background: radial-gradient(120% 140% at 80% 10%, #a5291f 0%, #8a1e1b 46%, #5c1210 100%);
	color: #fff;
	overflow: hidden;
}

.vm-abhero > .vm-container { padding-top: 60px; padding-bottom: 66px; }

.vm-crumb--light, .vm-crumb--light a { color: #f2c9bd; }
.vm-crumb--light a:hover { color: #fff; }
.vm-crumb--light .cur { color: #fff; }

.vm-abhero__script { font-family: var(--vm-font-script); font-weight: 700; font-size: 30px; color: #f4c9a6; margin-top: 16px; }

.vm-abhero h1 {
	font-family: var(--vm-font-head);
	font-weight: 800;
	font-size: 46px;
	line-height: 1.1;
	margin-top: 6px;
	max-width: 720px;
}

.vm-abhero p { font-size: 16.5px; line-height: 1.75; color: #f6ddd3; margin-top: 20px; max-width: 620px; }

.vm-abstory {
	padding-top: 70px;
	padding-bottom: 70px;
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: 58px;
	align-items: center;
}

.vm-abstory__img {
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 20px 46px rgba(74, 16, 14, 0.14);
	height: 420px;
	position: relative;
	background: var(--vm-cream);
}

.vm-abstory__img img { width: 100%; height: 100%; object-fit: cover; }

.vm-kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; color: var(--vm-red); font-weight: 700; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; }
.vm-kicker span { height: 1px; width: 46px; background: #d8b98a; }

.vm-abstory__text h2 {
	font-family: var(--vm-font-head);
	font-weight: 800;
	font-size: 33px;
	line-height: 1.2;
	color: var(--vm-ink);
	margin-bottom: 18px;
}

.vm-abstory__text p { font-size: 15.5px; line-height: 1.8; color: var(--vm-ink-2); margin-bottom: 15px; }

.vm-abstory__sign {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 20px;
	background: #fff;
	border: 1px solid var(--vm-line);
	border-radius: 14px;
	margin-top: 8px;
}

.vm-abstory__sign .script { font-family: var(--vm-font-script); font-size: 34px; font-weight: 700; color: var(--vm-red); }
.vm-abstory__sign .sub { font-size: 13.5px; color: var(--vm-ink-3); line-height: 1.5; }

.vm-abstats-wrap { background: #fff; border-top: 1px solid var(--vm-line); border-bottom: 1px solid var(--vm-line); }

.vm-abstats {
	padding-top: 46px;
	padding-bottom: 46px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	text-align: center;
}

.vm-abstats .num { font-family: var(--vm-font-head); font-weight: 800; font-size: 40px; color: var(--vm-red); }
.vm-abstats .label { font-size: 14px; color: var(--vm-ink-3); margin-top: 4px; }

.vm-abhead { text-align: center; margin-bottom: 40px; }
.vm-abhead h2 { font-family: var(--vm-font-head); font-weight: 800; font-size: 32px; color: var(--vm-ink); text-transform: uppercase; letter-spacing: 0.6px; }
.vm-abhead p { font-size: 15px; color: var(--vm-ink-3); margin-top: 10px; }

.vm-abvals-wrap { padding-top: 66px; padding-bottom: 20px; }
.vm-abvals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.vm-abval { background: #fff; border: 1px solid var(--vm-line); border-radius: 18px; padding: 30px; text-align: center; }

.vm-abval .icon {
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: linear-gradient(140deg, #a5291f, #791512);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 22px rgba(138, 30, 27, 0.26);
}

.vm-abval .name { font-family: var(--vm-font-head); font-weight: 700; font-size: 20px; color: var(--vm-ink); margin: 16px 0 8px; }
.vm-abval p { font-size: 14px; line-height: 1.7; color: var(--vm-ink-3); }

.vm-absteps-wrap { padding-top: 56px; padding-bottom: 70px; }
.vm-absteps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }

.vm-abstep { background: #fff; border: 1px solid var(--vm-line); border-radius: 18px; padding: 26px; }
.vm-abstep .num { font-family: var(--vm-font-head); font-weight: 800; font-size: 40px; color: #f0dcc0; }
.vm-abstep .name { font-weight: 700; font-size: 16px; color: var(--vm-ink); margin: 6px 0 8px; }
.vm-abstep p { font-size: 13.5px; line-height: 1.65; color: var(--vm-ink-3); }

.vm-abcta-wrap { padding-bottom: 70px; }

.vm-abcta {
	background: radial-gradient(140% 180% at 78% 40%, #ac2d24, #8a1e1b 46%, #5c1210);
	border-radius: 24px;
	padding: 52px 40px;
	text-align: center;
	color: #fff;
	box-shadow: 0 16px 40px rgba(74, 16, 14, 0.18);
}

.vm-abcta h2 { font-family: var(--vm-font-head); font-weight: 800; font-size: 30px; margin-bottom: 10px; }
.vm-abcta p { font-size: 15px; color: #f6ddd3; margin: 0 auto 24px; max-width: 480px; }

.vm-abcta__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: #fff;
	color: var(--vm-red);
	border-radius: 12px;
	padding: 15px 32px;
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	transition: background 0.15s;
}

.vm-abcta__btn:hover { background: var(--vm-cream); }

/* ---------- Liên hệ ---------- */
.vm-contact__grid {
	padding-top: 44px;
	padding-bottom: 40px;
	display: grid;
	grid-template-columns: 420px 1fr;
	gap: 44px;
	align-items: start;
}

.vm-contact__cards { display: flex; flex-direction: column; gap: 16px; }

.vm-ccard {
	display: flex;
	gap: 16px;
	background: #fff;
	border: 1px solid var(--vm-line);
	border-radius: 16px;
	padding: 22px;
}

.vm-ccard .icon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: var(--vm-cream);
	color: var(--vm-red);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
}

.vm-ccard .t { font-weight: 700; font-size: 15px; color: var(--vm-ink); margin-bottom: 4px; }
.vm-ccard .s { font-size: 13.5px; color: var(--vm-ink-3); line-height: 1.6; }

.vm-contact__form {
	background: #fff;
	border: 1px solid var(--vm-line);
	border-radius: 18px;
	padding: 32px;
	box-shadow: 0 16px 40px rgba(74, 16, 14, 0.06);
}

.vm-contact__form h2 { font-family: var(--vm-font-head); font-weight: 700; font-size: 23px; color: var(--vm-ink); margin-bottom: 6px; }
.vm-contact__form .sub { font-size: 14px; color: var(--vm-ink-3); margin-bottom: 22px; }

.vm-contact__ok {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--vm-green-bg);
	border: 1px solid #cfe8cf;
	border-radius: 12px;
	padding: 16px 18px;
	margin-bottom: 20px;
	color: #2f6b2c;
	font-size: 14px;
	font-weight: 600;
}

.vm-contact__ok[hidden] { display: none; }

.vm-contact__form form { display: flex; flex-direction: column; gap: 16px; }
.vm-contact__2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.vm-contact__submit {
	height: 52px;
	border-radius: 12px;
	background: var(--vm-red);
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	box-shadow: 0 12px 26px rgba(138, 30, 27, 0.24);
	transition: background 0.2s;
}

.vm-contact__submit:hover { background: var(--vm-red-hover); }
.vm-contact__submit:disabled { opacity: 0.6; }

.vm-contact__map-wrap { padding-bottom: 66px; }

.vm-contact__map {
	border-radius: 20px;
	overflow: hidden;
	border: 1px solid var(--vm-line);
	height: 340px;
	position: relative;
	background: #ece3d2;
}

.vm-contact__map iframe { width: 100%; height: 100%; border: 0; display: block; }

.vm-contact__map-ph {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	color: var(--vm-ink-3);
	font-size: 13.5px;
	text-align: center;
	padding: 0 20px;
}

.vm-contact__map-card {
	position: absolute;
	left: 24px;
	bottom: 24px;
	background: #fff;
	border-radius: 14px;
	padding: 16px 20px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
	display: flex;
	align-items: center;
	gap: 12px;
}

.vm-contact__map-card .icon { color: var(--vm-red); display: flex; }
.vm-contact__map-card .t { font-weight: 700; font-size: 14px; }
.vm-contact__map-card .s { font-size: 12.5px; color: var(--vm-ink-3); }

/* ---------- FAQ ---------- */
.vm-faq__list { max-width: 820px; margin: 0 auto; padding: 40px 28px 30px; display: flex; flex-direction: column; gap: 12px; }

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

.vm-faq__q {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	text-align: left;
	padding: 20px 24px;
}

.vm-faq__q > span:first-child { font-weight: 700; font-size: 15.5px; color: var(--vm-ink); }
.vm-faq__q .chev { flex: none; color: var(--vm-red); transition: transform 0.2s; display: flex; }
.vm-faq__item.is-open .chev { transform: rotate(180deg); }

.vm-faq__a { display: none; padding: 0 24px 22px; font-size: 14.5px; line-height: 1.8; color: var(--vm-ink-2); }
.vm-faq__item.is-open .vm-faq__a { display: block; }

.vm-faq__cta-wrap { max-width: 820px; margin: 0 auto; padding: 10px 28px 66px; }

.vm-faq__cta {
	background: radial-gradient(140% 180% at 80% 40%, #ac2d24, #8a1e1b 46%, #5c1210);
	border-radius: 20px;
	padding: 40px;
	text-align: center;
	color: #fff;
	box-shadow: 0 16px 40px rgba(74, 16, 14, 0.16);
}

.vm-faq__cta h2 { font-family: var(--vm-font-head); font-weight: 800; font-size: 25px; margin-bottom: 8px; }
.vm-faq__cta p { font-size: 14.5px; color: #f6ddd3; margin: 0 auto 22px; max-width: 420px; }
.vm-faq__cta .btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.vm-faq__cta .btns a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border-radius: 11px;
	padding: 13px 26px;
	font-weight: 700;
	font-size: 14px;
	transition: background 0.15s;
}

.vm-faq__cta .is-white { background: #fff; color: var(--vm-red); }
.vm-faq__cta .is-white:hover { background: var(--vm-cream); }
.vm-faq__cta .is-ghost { background: rgba(255, 255, 255, 0.14); color: #fff; }
.vm-faq__cta .is-ghost:hover { background: rgba(255, 255, 255, 0.24); }

/* ---------- Chính sách ---------- */
.vm-pol {
	padding-top: 40px;
	padding-bottom: 66px;
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 36px;
	align-items: start;
}

.vm-pol__side {
	position: sticky;
	top: 108px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	background: #fff;
	border: 1px solid var(--vm-line);
	border-radius: 16px;
	padding: 12px;
}

.vm-pol__side button {
	text-align: left;
	white-space: nowrap;
	padding: 13px 16px;
	border-radius: 10px;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--vm-ink-2);
	transition: background 0.15s, color 0.15s;
}

.vm-pol__side button:hover { background: var(--vm-cream); }
.vm-pol__side button.is-active { background: var(--vm-red); color: #fff; font-weight: 700; }
.vm-pol__short { display: none; }

.vm-pol__body {
	background: #fff;
	border: 1px solid var(--vm-line);
	border-radius: 18px;
	padding: 36px 40px;
	min-height: 400px;
}

.vm-pol__pane { display: none; }
.vm-pol__pane.is-active { display: block; }

.vm-pol__pane h2 { font-family: var(--vm-font-head); font-weight: 800; font-size: 26px; color: var(--vm-ink); margin-bottom: 16px; }
.vm-pol__pane p { font-size: 15px; line-height: 1.85; color: var(--vm-ink-2); margin-bottom: 16px; }
.vm-pol__pane ul { list-style: disc; margin: 0 0 16px 22px; }
.vm-pol__pane li { font-size: 15px; line-height: 1.8; color: var(--vm-ink-2); margin-bottom: 6px; }
.vm-pol__pane li::marker { color: var(--vm-red); }

/* ---------- 404 ---------- */
.vm-404__wrap { max-width: 720px; margin: 0 auto; padding: 70px 28px 90px; text-align: center; }

.vm-404__num-wrap { position: relative; display: inline-block; }

.vm-404__num {
	font-family: var(--vm-font-head);
	font-weight: 900;
	font-size: 150px;
	line-height: 1;
	color: var(--vm-red);
	letter-spacing: -4px;
}

.vm-404__bowl { position: absolute; right: -18px; top: 6px; transform: rotate(12deg); }

.vm-404__script { font-family: var(--vm-font-script); font-size: 30px; color: var(--vm-orange); margin-top: 6px; }

.vm-404 h1 { font-family: var(--vm-font-head); font-weight: 800; font-size: 30px; color: var(--vm-ink); margin: 10px 0 12px; }
.vm-404 p { font-size: 15.5px; line-height: 1.7; color: var(--vm-ink-3); margin: 0 auto 30px; max-width: 440px; }

.vm-404__btns { display: flex; gap: 14px; justify-content: center; }
.vm-404__btns .vm-btn { height: 52px; text-transform: uppercase; letter-spacing: 0.4px; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.vm-abstats { grid-template-columns: repeat(2, 1fr); }
	.vm-absteps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
	.vm-abstory { grid-template-columns: 1fr; gap: 30px; }
	.vm-abstory__img { height: 300px; }
	.vm-abvals { grid-template-columns: 1fr; }
	.vm-contact__grid { grid-template-columns: 1fr; }
	.vm-pol { grid-template-columns: 1fr; }
	/* Mobile: 4 chip label ngắn wrap 2 hàng — không cần cuộn ngang */
	.vm-pol__side { position: static; flex-direction: row; flex-wrap: wrap; }
	.vm-pol__side button { padding: 10px 14px; font-size: 13.5px; }
	.vm-pol__full { display: none; }
	.vm-pol__short { display: inline; }
	.vm-abhero h1 { font-size: 34px; }
}

@media (max-width: 640px) {
	.vm-absteps { grid-template-columns: 1fr; }
	.vm-contact__2col { grid-template-columns: 1fr; }
	.vm-contact__form { padding: 22px 18px; }
	.vm-pol__body { padding: 24px 20px; }
	.vm-404__num { font-size: 110px; }
	.vm-404__btns { flex-direction: column; }
	.vm-abstats .num { font-size: 30px; }
	.vm-page__card { padding: 24px 20px; }
}