@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600&family=JetBrains+Mono:wght@400;600&family=Montserrat:wght@400..800&family=Wix+Madefor+Display:wght@400..700&display=swap');
:root {
	--teal-500: #1A9A9B;
	--teal-600: #0E817D;
	--teal-700: #006561;
	--teal-800: #004947;
	--teal-900: #002F2E;

	--olive-500: #85925D;
	--olive-700: #525C32;

	--terracotta-500: #D66437;
	--terracotta-100: #FFE6DC;
	--terracotta-700: #91350A;

	--sand-50: #F8F6F5;
	--sand-100: #EEECEA;
	--sand-200: #DEDAD5;
	--sand-500: #91897F;
	--sand-600: #766F65;
	--sand-700: #5C564D;
	--sand-950: #161310;

	/* Sub-tokens v1.1 */
	--oat-cream: #F4EFE6;
	--warm-cream: #F2EAD8;
	--sage-green: #7B9461;
	--earth-brown: #6B4423;

	/* Internal aliases */
	--ink-primary: var(--sand-950);
	--ink-secondary: var(--sand-700);
	--ink-tertiary: #9A938C;
	--canvas: var(--sand-50);
	--surface: #FFFFFF;

	/* Hebekery easings v1.1 */
	--ease-default: cubic-bezier(0.32, 0.72, 0, 1);
	--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
	--ease-warmth: cubic-bezier(0.25, 0.1, 0.25, 1);

	/* Type stack */
	--font-display: 'Wix Madefor Display', 'Wix Madefor Text', system-ui, sans-serif;
	--font-serif: 'Cormorant Garamond', Georgia, serif;
	--font-text: 'Montserrat', system-ui, sans-serif;
	--font-mono: 'JetBrains Mono', ui-monospace, monospace;
}
#sapo-loyalty-rewards-init .sapo-launcher-button > img{
		display: inline !important
	}

.gender-option, .activity-option{
	transition: border-color 300ms var(--ease-bounce),
		background 300ms var(--ease-bounce),
		color 200ms var(--ease-default),
		transform 300ms var(--ease-bounce);
}
.gender-option:has(input:checked), .activity-option:has(input:checked) {
	border-color: transparent !important;
	outline: 2px solid var(--teal-500);
	/*background-color: var(--oat-cream) !important;*/
	box-shadow: 0 4px 6px -1px rgba(0, 101, 97, 0.08), 0 2px 4px -1px rgba(0, 101, 97, 0.04) !important;
	transform: scale(1.03);
	animation: tPillTick 300ms var(--ease-bounce);
}
@keyframes tPillTick { 0%{transform:scale(1)} 55%{transform:scale(1.06)} 100%{transform:scale(1.03)} }
.gender-option:has(input:checked) span, .activity-option:has(input:checked) span{
	color: var(--teal-700) !important;

}
.gender-option:has(input:checked) svg {
	stroke: var(--teal-700) !important;
}
.activity-option:has(input:checked) svg{
	fill: var(--teal-700) !important;
}
.gender-option:hover, .activity-option:hover {
	border-color: var(--teal-500) !important;
}
.formula-btn:has(input:checked) {
	background-color: white !important;
	color: var(--teal-700) !important;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1) !important;
}
button:disabled {
	opacity: 0.5 !important;
	cursor: not-allowed !important;
	box-shadow: none !important;
}

quantity-input {
	display: flex;
	align-items: center;
	position: relative;
}
quantity-input button {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 100%;
	background: transparent;
	border: none;
	cursor: pointer;
	font-size: 1.5rem;
	font-weight: bold;
	color: #94a3b8; /* slate-400 */
	transition: color 0.2s;
	z-index: 10;
}
quantity-input button:hover { color: var(--teal-700); }
quantity-input button.minus { left: 0; }
quantity-input button.plus { right: 0; }
quantity-input input {
	padding-left: 3rem !important;
	padding-right: 3rem !important;
	/*text-align: center;*/
}
quantity-input.hide-buttons button {
	display: none;
}
quantity-input.hide-buttons input {
	padding-left: 1rem !important;
	padding-right: 1rem !important;
}
@keyframes tdee-autofill {
	from { opacity: 0.999; }
	to { opacity: 1; }
}

quantity-input input:-webkit-autofill {
	animation-name: tdee-autofill;
}
quantity-input input::-webkit-outer-spin-button,
quantity-input input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
quantity-input input[type='number'] {
	-moz-appearance:textfield;
}

.field-error { display: none; color: var(--terracotta-700); font-size: 0.75rem;  }
.field-group.invalid .field-error { display: flex; }
.field-group.invalid quantity-input input,
.field-group.invalid .gender-option { border-color: var(--terracotta-700) !important; }
@media (min-width: 800px) {
	.formula > div + div {
		border-left: 1px solid rgba(107, 68, 35, 0.18);
		padding-left: 40px;
	}
}


faq-block {
	counter-reset: section; /* Set a counter named 'section', and its initial value is 0. */
}
faq-block details {
	border: 1px solid #ddd;
	margin-bottom: 7px;
	border-radius: 5px;
	padding: 7px 20px;
}

faq-block summary {
	cursor: pointer;
	padding: 0;
	font-weight: bold;
	position: relative;
	list-style: none;
	line-height: 28px;
}
faq-block summary::-webkit-details-marker {
	display: none;            /* Ẩn mũi tên trên Chrome/Safari */
}
faq-block summary:before{

	faq-block summary::marker {
		display: none;
	}

	faq-block details summary svg {
		transition: transform 350ms var(--ease-warmth);
	}

	faq-block details[open] summary svg {
		transform: rotate(180deg);
	}

	faq-block .content-wrapper {
		overflow: hidden;
		height: 0;
		transition: height 0.4s ease;
	}

	.seed {
		animation: seedDrift 9s var(--ease-warmth) infinite;
		will-change: transform, opacity;
	}
	.seed svg path {
		fill: rgba(107,68,35,0.30);
	}

	/* placements (avoid the central disc) */
	.s1  { top: 14%; left: 8%;  animation-delay: 0s;    --r: -18deg; }
	.s2  { top: 64%; left: 12%; animation-delay: 1.4s;  --r: 24deg; }
	.s3  { top: 30%; left: 16%; animation-delay: 3.1s;  --r: -40deg; }
	.s4  { top: 78%; left: 24%; animation-delay: 0.7s;  --r: 12deg; }
	.s5  { top: 10%; right: 14%; animation-delay: 2.2s; --r: 30deg; }
	.s6  { top: 22%; left: 26%; animation-delay: 4s; }
	.s7  { top: 70%; right: 18%; animation-delay: 1s; }
	.s8  { top: 40%; right: 9%;  animation-delay: 2.8s; }
	.s9  { top: 58%; right: 11%; animation-delay: 3.6s; --r: -22deg; }
	.s10 { top: 84%; right: 28%; animation-delay: 1.9s; --r: 40deg; }
	.s11 { top: 48%; left: 6%;   animation-delay: 0.4s; }

	@keyframes seedDrift {
		0%   { opacity: 0; transform: translateY(8px) rotate(var(--r, 0deg)); }
		18%  { opacity: 0.85; }
		82%  { opacity: 0.85; }
		100% { opacity: 0; transform: translateY(-22px) rotate(calc(var(--r, 0deg) + 24deg)); }
	}
	copy-text{
		transition: transform 200ms var(--ease-default), background 200ms var(--ease-default);
	}
	copy-text:hover{
		background: #9A2F20;
		transform: translateY(-1px);
	}
	copy-text:before{
		content: attr(data-success);
		position: absolute;
		top: -30px;
		left: 50%;
		transform: translateX(-50%) translateY(-18px);
		background: var(--ink-primary);
		color: #FBF9F5;
		font-family: var(--font-text);
		font-size: 13px;
		font-weight: 600;
		padding: 11px 18px;
		border-radius: 999px;
		display: inline-flex;
		align-items: center;
		gap: 8px;
		box-shadow: 0 10px 28px -8px rgba(0,0,0,0.4);
		opacity: 0;
		pointer-events: none;
		z-index: 80;
		transition: transform 350ms var(--ease-warmth), opacity 350ms var(--ease-warmth);
	}
	copy-text.success::before {
		opacity:1;
		visibility:visible
	}
	.bmr-result.active{
		animation: tReveal 650ms var(--ease-warmth) both;
	}
	@keyframes tReveal { 0%{opacity:0;transform:translateY(26px)} 100%{opacity:1;transform:translateY(0)} }
	.blogcard{
		transition: transform 400ms var(--ease-warmth), box-shadow 400ms var(--ease-warmth);
	}