/**
 * Cart & checkout — Figma 16. Cart & Checkout V3
 */

body.nn-cart-page {
	background: var(--nn-page, #fff8e6);
}

body.nn-cart-page .nn-cart-main {
	background: transparent;
}

.nn-cart {
	margin: 0;
}

.nn-cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 745px) minmax(280px, 650px);
    gap: 48px 72px;
    align-items: start;
    max-width: 1520px;
    margin: 0 auto;
    justify-content: space-between;
    padding: 72px 24px 96px;
}

.nn-cart-heading {
	margin: 0 0 36px;
	color: var(--Color-Xanh-m, #1D5C4B);
    font-family: "Beautique Display";
    font-size: 45px;
    font-style: normal;
    font-weight: 700;
    line-height: 65px;
}

.nn-cart-heading--pay {
	margin: 56px 0 22px;
}

.nn-cart-fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas:
		"name phone"
		"state ward"
		"address address"
		"note note";
	column-gap: 10px;
	row-gap: 15px;
}

.nn-field {
	position: relative;
	margin: 0;
}

#billing_first_name_field { grid-area: name; }
#billing_phone_field { grid-area: phone; }
#billing_state_field { grid-area: state; }
#billing_address_2_field { grid-area: ward; }
#billing_address_1_field { grid-area: address; }
#order_comments_field { grid-area: note; }

.nn-field__label {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	margin: 0;
	color: #1f4d44;
	font-family: "Be Vietnam Pro", sans-serif;
	font-size: 22px;
	font-weight: 400;
	line-height: 32px;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.nn-field__label .required {
	margin-left: 1px;
	color: #b63726;
}

.nn-field--note .nn-field__label {
	top: 0;
}

body.nn-cart-page .nn-cart .nn-field input.input-text,
body.nn-cart-page .nn-cart .nn-field select,
body.nn-cart-page .nn-cart .nn-field textarea,
.woocommerce form .nn-field .input-text,
.woocommerce form .nn-field select,
.woocommerce form .nn-field textarea,
.nn-field input,
.nn-field select,
.nn-field textarea {
	position: relative;
	z-index: 0;
	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 0 8px !important;
	border: 0 !important;
	border-bottom: 1px solid #c9a15a !important;
	border-radius: 0 !important;
	background: transparent !important;
	background-color: transparent !important;
	color: #1f4d44 !important;
	font-family: "Be Vietnam Pro", sans-serif !important;
	font-size: 22px !important;
	font-weight: 400 !important;
	line-height: 32px !important;
	box-shadow: none !important;
	outline: none !important;
	appearance: none !important;
	-webkit-appearance: none !important;
}

body.nn-cart-page .nn-cart .nn-field input.input-text::placeholder,
body.nn-cart-page .nn-cart .nn-field textarea::placeholder,
.nn-field input::placeholder,
.nn-field textarea::placeholder {
	color: transparent !important;
	opacity: 0 !important;
}

body.nn-cart-page .nn-cart .nn-field select,
.woocommerce form .nn-field select,
.nn-field select {
	min-height: 40px !important;
	padding-right: 28px !important;
	background-color: transparent !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3E%3Cpath d='M1 1.5L7 6.5L13 1.5' stroke='%231f4d44' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 2px center !important;
	background-size: 14px 8px !important;
	cursor: pointer;
	color: #1f4d44 !important;
}

body.nn-cart-page .nn-cart .nn-field select:disabled,
.nn-field select:disabled {
	opacity: 1 !important;
	color: #1f4d44 !important;
	cursor: default;
}

.nn-field:has(input:not(:placeholder-shown)) .nn-field__label,
.nn-field:has(input:focus) .nn-field__label,
.nn-field:has(option:checked[value]:not([value=""])) .nn-field__label,
.nn-field:has(select:focus) .nn-field__label,
.nn-field:has(textarea:not(:placeholder-shown)) .nn-field__label,
.nn-field:has(textarea:focus) .nn-field__label {
	opacity: 0;
}

/* Hide closed empty select text so floating label shows; keep options readable when open. */
.nn-field:has(option:checked[value=""]):not(:has(select:focus)) select {
	color: transparent !important;
}

.nn-field:has(option:checked[value]:not([value=""])) select,
.nn-field:has(select:focus) select {
	color: #1f4d44 !important;
}

body.nn-cart-page .nn-cart .nn-field select option,
.woocommerce form .nn-field select option,
.nn-field select option {
	color: #1f4d44 !important;
	background-color: #fff !important;
}

body.nn-cart-page .nn-cart .nn-field input:-webkit-autofill,
body.nn-cart-page .nn-cart .nn-field input:-webkit-autofill:hover,
body.nn-cart-page .nn-cart .nn-field input:-webkit-autofill:focus,
body.nn-cart-page .nn-cart .nn-field select:-webkit-autofill,
body.nn-cart-page .nn-cart .nn-field select:-webkit-autofill:hover,
body.nn-cart-page .nn-cart .nn-field select:-webkit-autofill:focus,
body.nn-cart-page .nn-cart .nn-field textarea:-webkit-autofill,
body.nn-cart-page .nn-cart .nn-field textarea:-webkit-autofill:hover,
body.nn-cart-page .nn-cart .nn-field textarea:-webkit-autofill:focus {
	-webkit-text-fill-color: #1f4d44 !important;
	caret-color: #1f4d44;
	box-shadow: 0 0 0 1000px #fff8e6 inset !important;
	background-color: transparent !important;
	background-image: none !important;
	transition: background-color 99999s ease-out 0s;
}

body.nn-cart-page .nn-cart .nn-field input.input-text:focus,
body.nn-cart-page .nn-cart .nn-field select:focus,
body.nn-cart-page .nn-cart .nn-field textarea:focus,
.nn-field input:focus,
.nn-field select:focus,
.nn-field textarea:focus {
	outline: none !important;
	border-color: transparent !important;
	border-bottom-color: #1f4d44 !important;
	box-shadow: none !important;
}

.nn-field.is-invalid input,
.nn-field.is-invalid select,
.nn-field.is-invalid textarea {
	border-bottom-color: #b63726 !important;
}

body.nn-cart-page .nn-cart .nn-field textarea,
.woocommerce form .nn-field textarea,
.nn-field textarea {
	height: 141px !important;
	min-height: 141px !important;
	padding: 0 !important;
	resize: vertical;
	line-height: 35px !important;
	background-color: transparent !important;
	background-image: repeating-linear-gradient(
		to bottom,
		transparent 0,
		transparent 34px,
		#c9a15a 34px,
		#c9a15a 35px
	) !important;
	background-position: 0 0 !important;
	background-repeat: repeat-y !important;
	background-size: 100% 35px !important;
	background-attachment: local !important;
	border: 0 !important;
	border-bottom: 0 !important;
}

.nn-order-min {
	margin: 0 0 12px;
	color: #b63726;
	font-family: "Be Vietnam Pro", sans-serif;
	font-size: 14px;
	line-height: 1.4;
}

.nn-field-error {
	margin: 6px 0 0;
	color: #b63726;
	font-family: "Be Vietnam Pro", sans-serif;
	font-size: 14px;
	line-height: 1.4;
}

.nn-pay-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 549px;
}

.nn-pay {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 72px;
	margin: 0;
	padding: 14px 24px;
	border-radius: 16px;
	background: #ececec;
	color: #9a9a9a;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.nn-pay input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.nn-pay__label {
	font-family: "Bricolage Grotesque", "Be Vietnam Pro", sans-serif;
	font-size: clamp(18px, 1.6vw, 22px);
	font-weight: 500;
	line-height: 1.3;
}

.nn-pay__dot {
	display: grid;
	flex: none;
	place-items: center;
	width: 22px;
	height: 22px;
	border: 2px solid #c5c5c5;
	border-radius: 50%;
	background: #fff;
}

.nn-pay:has(input:checked) {
	background: #f4e0b8;
	color: #1f4d44;
}

.nn-pay:has(input:checked) .nn-pay__dot {
	border-color: #faae42;
}

.nn-pay:has(input:checked) .nn-pay__dot::after {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #faae42;
}

.nn-pay.is-disabled {
	cursor: default;
	opacity: 0.9;
}

.nn-cart-panel {
	position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: 649px;
	max-width: 100%;
	aspect-ratio: 651 / 855;
	height: auto;
	min-height: 0;
	justify-self: end;
	padding: clamp(40px, 5vw, 56px) clamp(28px, 4vw, 48px) clamp(48px, 5vw, 64px);
	border: 0;
	border-radius: 0;
	background: transparent;
	isolation: isolate;
}

.nn-cart-panel::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: transparent url("../images/cart.svg?v=3") center / 100% 100% no-repeat;
}

.nn-cart-panel > * {
	position: relative;
	z-index: 1;
}

.nn-cart-panel .nn-cart-heading,
.nn-cart-totals,
.nn-cart-submit {
	flex: none;
}

.nn-cart-panel .nn-cart-heading {
	margin-bottom: 8px;
	padding-bottom: 16px;
	border-bottom: 1px solid #B8975A;
}

.nn-cart-items {
	flex: 1 1 auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	overflow-y: auto;
	list-style: none;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: #b8975a transparent;
}

.nn-cart-items::-webkit-scrollbar {
	width: 3px;
}

.nn-cart-items::-webkit-scrollbar-track {
	background: transparent;
}

.nn-cart-items::-webkit-scrollbar-thumb {
	border-radius: 99px;
	background: #b8975a;
}

.nn-cart-item {
	display: grid;
	grid-template-columns: 140px minmax(0, 1fr);
	gap: 18px;
	padding: 18px 0;
	border-bottom: 1px solid #B8975A;
}

.nn-cart-item__media {
	width: 140px;
	height: 120px;
	overflow: hidden;
}

.nn-cart-item__img {
	width: 100%;
	height: 100% !important;
	object-fit: contain;
}

.nn-cart-item__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.nn-cart-item__name {
	color: #1d5c4b;
	font-family: "Bricolage Grotesque", "Be Vietnam Pro", sans-serif;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.25;
	text-decoration: none;
}

.nn-cart-item__name:hover {
	color: #b63726;
}

.nn-cart-item__unit {
	margin: 2px 0 0;
	color: #1d5c4b;
	font-family: "Be Vietnam Pro", sans-serif;
	font-size: 18px;
	line-height: 1.4;
}

.nn-cart-item__remove {
    flex: none;
    text-decoration: none;
    color: var(--Color-Xanh-m, #1D5C4B);
    font-family: "Be Vietnam Pro";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

.nn-cart-item__remove:hover {
	color: #b63726;
}

.nn-cart-item.is-removing {
	pointer-events: none;
}

.nn-cart-item.is-removing .nn-cart-item__remove {
	position: relative;
	color: transparent;
	text-decoration: none;
}

.nn-cart-item.is-removing .nn-cart-item__remove::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 14px;
	margin: -7px 0 0 -7px;
	border: 2px solid rgba(29, 92, 75, 0.25);
	border-top-color: #1d5c4b;
	border-radius: 50%;
	animation: nn-qty-spin 0.6s linear infinite;
}

.nn-cart-item.is-removing .nn-cart-item__price {
	opacity: 0.4;
}

.nn-cart-item__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 14px;
}

.nn-qty {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	width: 96px;
	height: 27px;
	padding: 0 8px;
	border: 1px solid #b63726;
	border-radius: 55px;
	background: #f8f1e1;
	color: #b63726;
}

.nn-qty__btn {
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #b63726;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

.nn-qty__btn:disabled {
	opacity: 0.35;
	cursor: default;
}

.nn-qty.is-loading .nn-qty__value {
	position: relative;
	min-width: 14px;
	color: transparent;
}

.nn-qty.is-loading .nn-qty__value::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 12px;
	margin: -6px 0 0 -6px;
	border: 2px solid rgba(182, 55, 38, 0.25);
	border-top-color: #b63726;
	border-radius: 50%;
	animation: nn-qty-spin 0.6s linear infinite;
}

.nn-cart-item.is-loading .nn-cart-item__price,
.nn-cart-totals.is-loading {
	opacity: 0.4;
}

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

@media (prefers-reduced-motion: reduce) {
	.nn-qty.is-loading .nn-qty__value::after {
		animation: none;
		border-color: #b63726;
	}
}

.nn-qty__value {
	font-family: "Bricolage Grotesque", "Be Vietnam Pro", sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1;
}

.nn-cart-item__price {
	margin: 0;
	color: #b63726;
	font-family: "Bricolage Grotesque", "Be Vietnam Pro", sans-serif;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
	text-align: right;
}

.nn-cart-totals {
	padding-top: 8px;
}

.nn-cart-line {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 8px 0;
	color: #1d5c4b;
	font-family: "Be Vietnam Pro", sans-serif;
	font-size: 18px;
	line-height: 1.4;
}

.nn-cart-line--total {
	margin-top: 8px;
	padding-top: 16px;
	border-top: 1px solid rgba(29, 92, 75, 0.18);
}

.nn-cart-line--total strong {
	color: #b63726;
	font-family: "Bricolage Grotesque", "Be Vietnam Pro", sans-serif;
	font-size: 25px;
	font-weight: 600;
}

.nn-ship-label {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.nn-ship-tip {
	display: grid;
	place-items: center;
	width: 16px;
	height: 16px;
	padding: 0;
	border: 1.5px solid #b63726;
	border-radius: 50%;
	background: transparent;
	color: #b63726;
	font-family: "Be Vietnam Pro", sans-serif;
	font-size: 11px;
	font-style: italic;
	line-height: 1;
	cursor: pointer;
}

.nn-ship-bubble {
	position: absolute;
	z-index: 2;
	left: 0;
	bottom: calc(100% + 10px);
	width: 251px;
	padding: 14px 16px;
	border-radius: 10px;
	background: linear-gradient(180deg, #fffdf8 0%, #f4ead4 100%);
	box-shadow: 0 8px 24px rgba(31, 77, 68, 0.08);
	color: #1d5c4b;
	font-size: 15px;
	line-height: 1.45;
	opacity: 0;
	pointer-events: none;
	transform: translateY(4px);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.nn-ship-label:hover .nn-ship-bubble,
.nn-ship-label:focus-within .nn-ship-bubble,
.nn-ship-tip.is-open + .nn-ship-bubble {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.nn-cart-submit {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 258px;
	height: 81px;
	margin: 28px auto 0;
	padding: 0 24px 0;
	border: 0;
	border-radius: 0;
	background: transparent url("../images/btn-cart-submit.svg") center / 100% 100% no-repeat;
	color: #fff;
	font-family: "Bricolage Grotesque", "Be Vietnam Pro", sans-serif;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
}

.nn-cart-submit:hover {
	color: #fff;
	filter: brightness(0.96);
}

.nn-cart.processing .nn-cart-submit {
	opacity: 0.7;
	pointer-events: none;
}

.nn-cart--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: calc(100dvh - 280px);
	padding: 48px 24px 72px;
	text-align: center;
}

.nn-cart-empty {
	width: 100%;
	max-width: 480px;
	margin: 0 auto;
	padding: 0;
	text-align: center;
}

.nn-cart-empty .nn-cart-heading {
	margin-bottom: 16px;
}

.nn-cart-empty .nn-btn-blob {
	margin-right: auto;
	margin-left: auto;
}

.nn-cart-empty__text {
	margin: 0 0 28px;
	color: #1d5c4b;
	font-family: "Be Vietnam Pro", sans-serif;
	font-size: 22px;
}

.nn-cart-page .woocommerce-notices-wrapper {
	margin-top: 24px;
}

.nn-cart > .woocommerce-error,
.nn-cart > .woocommerce-message,
.nn-cart > .woocommerce-info,
.nn-cart > .woocommerce-NoticeGroup {
	width: min(1520px, calc(100% - 48px));
	margin: 24px auto 0;
}

body.woocommerce-order-received {
	background: #fff8e6;
}

body.woocommerce-order-received .nn-cart-main {
	max-width: none;
	margin: 0;
	padding: 0;
	background-color: #fff8e6;
	background-image:
		url("../images/thanks-cloud.svg"),
		url("../images/thanks-cloud.svg"),
		url("../images/thanks-cloud.svg"),
		url("../images/thanks-cloud.svg");
	background-repeat: no-repeat;
	background-position:
		left -150px top 220px,
		right -110px top 180px,
		left 2% bottom 36px,
		right 4% bottom 72px;
	background-size: 560px 560px, 420px 420px, 250px 250px, 220px 220px;
}

.nn-thanks {
	position: relative;
	z-index: 1;
	max-width: 1260px;
	margin: 0 auto;
	padding: 18px 24px 72px;
	color: #1d5c4b;
	text-align: center;
}

.nn-thanks h1,
.nn-thanks h2 {
	margin: 0;
	color: #1d5c4b;
	font-family: "Beautique Display", "Bodoni Moda", "Playfair Display", Georgia, serif;
	font-weight: 700;
}

.nn-thanks h1 {
    color: var(--Color-Xanh-m, #1D5C4B);
    font-family: "Beautique Display";
    font-size: 45px;
    font-style: normal;
    font-weight: 700;
    line-height: 65px;
}
.nn-thanks-mark {
    display: grid;
    width: 143px;
    height: 143px;
    margin: 0 auto 18px;
    place-items: center;
    border: 1.5px solid #8fbfab;
    border-radius: 50%;
    background: #fff;
    color: #1d5c4b;
    /* box-shadow: 0 0 0 7px rgba(220, 238, 227, 0.55); */
    border-radius: 143.709px;
    border: 2px solid var(--color-2, #FAAE42);
    background: var(--color-3, #DCE9DC);
}

.nn-thanks-mark svg {
    display: block;
    width: 50px;
    height: 50px;
}

.nn-thanks-code {
	margin: 8px 0 0;
	color: var(--Color-body, #1F4D44);
    text-align: center;
    font-family: "Be Vietnam Pro";
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
}

.nn-thanks-card {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: 1259.019px;
	height: 594.158px;
	max-width: 100%;
	margin: 42px auto 0;
	padding: 72px 84px 58px;
	border-radius: 0;
	background: transparent url("../images/thanks-card-frame.svg?v=3") center / 100% 100% no-repeat;
	text-align: left;
}

.nn-thanks-card > h2,
.nn-thanks-card > .nn-thanks-total {
	flex: none;
}

.nn-thanks-info {
    max-width: 1100px;
    margin: 100px auto 0;
    padding: 0;
    background: none;
    border-radius: 25px;
    background: var(--Linear, linear-gradient(180deg, #FFF4DF 27.45%, #FEEBC8 98.99%));
    text-align: left;
}

.nn-thanks-card h2,
.nn-thanks-info h2 {
	margin-bottom: 6px;
	color: var(--Color-Xanh-m, #1D5C4B);
    font-family: "Beautique Display";
    font-size: 35px;
    font-style: normal;
    font-weight: 700;
    line-height: 65px;
}

.nn-thanks-items {
	flex: 1 1 auto;
	min-height: 0;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: #b8975a transparent;
}

.nn-thanks-items::-webkit-scrollbar {
	width: 3px;
}

.nn-thanks-items::-webkit-scrollbar-track {
	background: transparent;
}

.nn-thanks-items::-webkit-scrollbar-thumb {
	border-radius: 99px;
	background: #b8975a;
}

.nn-thanks-items li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 4px 24px;
	align-items: center;
	padding: 16px 0;
	border-bottom: 1px solid rgba(184, 151, 90, 0.45);
}

.nn-thanks-item__name,
.nn-thanks-item__price,
.nn-thanks-total strong,
.nn-thanks-total span {
	margin: 0;
	font-family: "Bricolage Grotesque", "Be Vietnam Pro", sans-serif;
	font-weight: 600;
}

.nn-thanks-item__name {
	font-size: 22px;
	line-height: 1.3;
}

.nn-thanks-item__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 2px 0 0;
	color: #1d5c4b;
	font-family: "Be Vietnam Pro", sans-serif;
	font-size: 15px;
	font-weight: 400;
}

.nn-thanks-item__meta span {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #1d5c4b;
}

.nn-thanks-item__price {
	font-size: 22px;
}

.nn-thanks-total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding-top: 16px;
}

.nn-thanks-total span {
	font-size: 20px;
}

.nn-thanks-total strong {
	color: #b63726;
	font-size: 28px;
}

.nn-thanks-info {
    display: grid;
    grid-template-columns: minmax(0, 425px) minmax(0, 425px);
    gap: 28px 40px;
    padding: 50px;
}

.nn-thanks-info dl {
	margin: 8px 0 0;
}

.nn-thanks-info dl > div {
	display: grid;
	grid-template-columns: minmax(108px, 1fr) minmax(0, 1fr);
	gap: 12px;
	align-items: start;
	padding: 12px 0;
	border-bottom: 1px solid rgba(184, 151, 90, 0.4);
}

.nn-thanks-info dt,
.nn-thanks-info dd {
	margin: 0;
}

.nn-thanks-info dt {
	color: var(--Color-Xanh-m, #1D5C4B);
    font-family: "Bricolage Grotesque";
    font-size: 27px;
    font-style: normal;
    font-weight: 600;
    line-height: 29px;
}

.nn-thanks-info dd,
.nn-thanks-info p,
.nn-thanks-note,
.nn-thanks-failed {
	color: #1f4d44;
	font-family: "Be Vietnam Pro", sans-serif;
	font-size: 16px;
	line-height: 1.5;
}

.nn-thanks-info dd {
	color: var(--Color-body, #1F4D44);
    text-align: right;
    font-family: "Be Vietnam Pro";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
}

.nn-thanks-info p {
	margin: 16px 0 0;
    color: var(--Color-body, #1F4D44);
    font-family: "Be Vietnam Pro";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
}

.nn-thanks-note, .nn-thanks-failed {
    display: flex;
    gap: 10px;
    max-width: 1000px;
    margin: 36px auto 0;
    text-align: left;
    font-size: 15px;
    line-height: 1.55;
    color: var(--Color-body, #1F4D44);
    font-family: "Be Vietnam Pro";
    font-size: 18px;
    font-style: italic;
    font-weight: 400;
    line-height: 27px;
}

.nn-thanks-note::before {
	content: "";
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	margin-top: 4px;
	background: transparent url("../images/thanks-note-dot.svg") center / 100% 100% no-repeat;
}

.nn-thanks-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	margin-top: 28px;
}

.nn-thanks-actions .nn-btn-blob {
	width: auto;
	min-width: 188px;
	height: 64px;
	min-height: 64px;
	padding: 0 22px 4px;
	font-size: 16px;
}

.nn-thanks-actions .nn-btn-fill,
.nn-thanks-actions .nn-btn-line {
	width: 188px;
	height: 64px;
	min-width: 188px;
	min-height: 64px;
	padding: 0 18px 4px;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	box-shadow: none;
	font-family: "Bricolage Grotesque", sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
}

.nn-thanks-actions .nn-btn-fill {
	background-image: url("../images/btn-hero-fill.svg");
	color: #fff;
}

.nn-thanks-actions .nn-btn-line {
	background-image: url("../images/btn-hero-line.svg");
	color: #1f4d44;
}

.nn-thanks-actions .nn-btn-blob:hover,
.nn-thanks-actions .nn-btn-fill:hover,
.nn-thanks-actions .nn-btn-line:hover {
	background-color: transparent;
	filter: brightness(0.97);
	transform: none;
	box-shadow: none;
}

.nn-thanks-actions .nn-btn-blob--line:hover,
.nn-thanks-actions .nn-btn-line:hover {
	color: #1f4d44;
}

.nn-thanks-extra:empty {
	display: none;
}

.nn-thanks-extra p {
	margin: 0;
	color: #1f4d44;
	font-size: 16px;
	text-align: center;
}

.nn-thanks-extra .woocommerce-order-details,
.nn-thanks-extra .woocommerce-customer-details {
	display: none;
}

.nn-thanks-extra {
	margin-top: 28px;
	text-align: left;
	font-family: "Be Vietnam Pro", sans-serif;
}

@media (max-width: 800px) {
	body.woocommerce-order-received .nn-cart-main {
		background-image: none;
	}

	.nn-thanks {
		padding: 12px 16px 48px;
	}

    .nn-thanks-mark {
        width: 60px;
        height: 60px;
        margin-bottom: 14px;
    }


	.nn-thanks-mark svg {
        width: 23px;
        height: 18px;
    }

	.nn-thanks h1 {
		font-size: 28px;
		line-height: 1.25;
	}

	.nn-thanks-code {
		margin-top: 6px;
		font-size: 15px;
		line-height: 1.4;
	}

	.nn-thanks-card-wrap {
		position: relative;
		margin-top: 28px;
	}

	.nn-thanks-card-wrap::after {
		content: "";
		position: absolute;
		z-index: 0;
		right: -14px;
		bottom: -34px;
		width: 210px;
		height: 210px;
		background: url("../images/thanks-card-bloom-mobile.svg") center / contain no-repeat;
		pointer-events: none;
	}

	.nn-thanks-card {
		position: relative;
		z-index: 1;
		width: 100%;
		height: auto;
		min-height: 0;
		margin-top: 0;
		padding: 36px 22px 32px;
		background-color: transparent;
		background-image: url("../images/thanks-card-frame-mobile.svg?v=3");
		background-repeat: no-repeat;
		background-position: center;
		background-origin: border-box;
		background-clip: border-box;
		background-size: 100% 100%;
	}

	.nn-thanks-card h2,
	.nn-thanks-info h2 {
		margin-bottom: 4px;
		font-size: 22px;
		line-height: 1.3;
	}

	.nn-thanks-items {
		flex: 0 1 auto;
		max-height: none;
		margin-top: 8px;
		overflow-y: auto;
		scrollbar-width: auto;
		scrollbar-color: auto;
	}

	.nn-thanks-items::-webkit-scrollbar {
		width: 2px;
	}

	.nn-thanks-items li {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 8px 12px;
		padding: 12px 0;
		align-items: start;
	}

	.nn-thanks-item__name,
	.nn-thanks-item__price {
		font-size: 16px;
		line-height: 1.35;
	}

	.nn-thanks-item__price {
		text-align: right;
		white-space: nowrap;
	}

	.nn-thanks-item__meta {
		font-size: 13px;
	}

	.nn-thanks-total {
		padding-top: 12px;
	}

	.nn-thanks-total span {
		font-size: 16px;
	}

	.nn-thanks-total strong {
		font-size: 18px;
	}

	.nn-thanks-info {
		position: relative;
		z-index: 1;
		grid-template-columns: 1fr;
		gap: 20px;
		max-width: none;
		margin-top: 48px;
		padding: 24px 18px 28px;
		border-radius: 20px;
	}

	.nn-thanks-info dl {
		margin-top: 4px;
	}

	.nn-thanks-info dl > div {
		grid-template-columns: minmax(108px, 0.95fr) minmax(0, 1.05fr);
		gap: 8px 12px;
		padding: 10px 0;
	}

	.nn-thanks-info dt {
		font-size: 16px;
		line-height: 1.35;
	}

	.nn-thanks-info dd {
		text-align: right;
		font-size: 14px;
		line-height: 1.45;
	}

	.nn-thanks-info p {
		margin-top: 12px;
		font-size: 14px;
		line-height: 1.45;
	}

	.nn-thanks-note,
	.nn-thanks-failed {
		gap: 8px;
		margin-top: 22px;
		font-size: 14px;
		line-height: 1.55;
	}

	.nn-thanks-note::before {
		flex-basis: 14px;
		width: 14px;
		height: 14px;
		margin-top: 3px;
	}

	.nn-thanks-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        margin-top: 22px;
        justify-content: space-evenly;
        max-width: 282px;
        margin-left: 20px;
    }

	.nn-thanks-actions .nn-btn-blob, .nn-thanks-actions .nn-btn-fill, .nn-thanks-actions .nn-btn-line {
        width: 100%;
        min-width: 0;
        height: 50px;
        min-height: 50px;
        padding: 0 10px 0px;
        font-size: 14px;
        max-width: 140px;
    }
}

@media (max-width: 980px) {
	.nn-cart-layout {
		grid-template-columns: 1fr;
		gap: 40px;
		padding: 40px 20px 72px;
	}

	/* Figma mobile: customer + payment first, cart panel below */
	.nn-cart-panel {
		order: 0;
		width: 100%;
		height: auto;
		min-height: 0;
		justify-self: stretch;
	}

	.nn-cart-items {
		flex: none;
		max-height: 420px;
	}

	.nn-cart-heading {
		margin-bottom: 28px;
		font-size: 34px;
		line-height: 1.25;
	}

	.nn-cart-heading--pay {
		margin-top: 44px;
		margin-bottom: 18px;
	}

	.nn-field__label {
		font-size: 18px;
		line-height: 26px;
	}

	.nn-field input,
	.nn-field select,
	.nn-field textarea,
	.nn-pay__label,
	.nn-cart-item__name {
		font-size: 18px;
	}

	.nn-cart-item {
		grid-template-columns: 96px minmax(0, 1fr);
		gap: 14px;
	}

	.nn-cart-item__media {
		width: 96px;
		height: 84px;
	}

	.nn-pay-list {
		max-width: none;
	}

	.nn-pay {
		min-height: 64px;
		padding: 14px 18px;
		border-radius: 14px;
	}

	.nn-cart-submit {
		width: min(100%, 280px);
		height: 76px;
		font-size: 18px;
	}
}

@media (max-width: 760px) {
	.nn-cart-layout {
		grid-template-columns: 1fr;
		gap: 28px;
		padding: 24px 16px 48px;
	}

	.nn-cart-panel {
		order: 2;
		box-sizing: border-box;
		max-width: 440px;
		max-width: 100%;
		height: 543.405px;
		min-height: 543.405px;
		max-height: 543.405px;
		aspect-ratio: auto;
		justify-self: center;
		margin: 0 auto;
		padding: 28px 35px 36px;
		overflow: hidden;
	}

	.nn-cart-items {
		flex: 1 1 auto;
		min-height: 0;
		max-height: none;
		margin-right: -18px;
		padding-right: 14px;
		overflow-x: hidden;
		overflow-y: auto;
		scrollbar-width: auto;
		scrollbar-color: auto;
	}

	.nn-cart-items::-webkit-scrollbar {
		width: 2px;
	}

	.nn-cart-heading {
		margin-bottom: 18px;
		font-size: 24px;
		line-height: 1.3;
	}

	.nn-cart-heading--pay {
		margin-top: 28px;
		margin-bottom: 14px;
		font-size: 24px;
	}

	.nn-cart-fields {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"name name"
			"phone phone"
			"state ward"
			"address address"
			"note note";
		column-gap: 10px;
		row-gap: 2px;
	}

	.nn-field__label,
	body.nn-cart-page .nn-cart .nn-field__label {
		font-size: 15px;
		line-height: 22px;
	}

	body.nn-cart-page .nn-cart .nn-field input.input-text,
	body.nn-cart-page .nn-cart .nn-field select,
	.woocommerce form .nn-field .input-text,
	.woocommerce form .nn-field select,
	.nn-field input,
	.nn-field select {
		font-size: 15px !important;
		line-height: 22px !important;
		padding: 10px 28px 8px 0 !important;
	}

	body.nn-cart-page .nn-cart .nn-field select,
	.woocommerce form .nn-field select,
	.nn-field select {
		box-sizing: border-box;
		height: 40px !important;
		min-height: 0 !important;
		padding: 0 28px 0 0 !important;
		line-height: 40px !important;
		background-position: right 2px center !important;
	}

	body.nn-cart-page .nn-cart .nn-field:has(select) .nn-field__label,
	.nn-field:has(select) .nn-field__label {
		top: 0;
		height: 40px;
		line-height: 40px;
	}

	body.nn-cart-page .nn-cart .nn-field textarea,
	.woocommerce form .nn-field textarea,
	.nn-field textarea {
		box-sizing: border-box;
		height: auto !important;
		min-height: 140px !important;
		max-height: none !important;
		padding: 0 !important;
		overflow: hidden !important;
		resize: none !important;
		font-size: 15px !important;
		line-height: 28px !important;
		background-color: transparent !important;
		background-image: repeating-linear-gradient(
			to bottom,
			transparent 0,
			transparent 27px,
			#c9a15a 27px,
			#c9a15a 28px
		) !important;
		background-repeat: repeat-y !important;
		background-position: 0 0 !important;
		background-size: 100% 28px !important;
		background-attachment: local !important;
		border: 0 !important;
		border-bottom: 0 !important;
	}

	.nn-pay-list {
		max-width: none;
		gap: 10px;
	}

	.nn-pay {
		min-height: 52px;
		gap: 12px;
		padding: 12px 16px;
		border-radius: 14px;
	}

	.nn-pay__label {
		font-size: 15px;
		line-height: 1.35;
	}

	.nn-pay__dot {
		width: 20px;
		height: 20px;
	}

	.nn-pay:has(input:checked) .nn-pay__dot::after {
		width: 8px;
		height: 8px;
	}

	.nn-cart-panel .nn-cart-heading {
		margin-bottom: 4px;
		padding-bottom: 10px;
		font-size: 22px;
	}

	.nn-cart-item {
		grid-template-columns: 75px minmax(0, 1fr);
		gap: 12px;
		padding: 12px 0;
		align-items: start;
	}

	.nn-cart-item__media {
		width: 75px;
		height: 80px;
		border-radius: 10px;
	}

	.nn-cart-item__name {
		display: block;
		font-size: 16px;
		line-height: 24px;
	}

	.nn-cart-item__unit {
		margin-top: 2px;
		font-size: 13px;
	}

	.nn-cart-item__remove {
		font-size: 14px;
		line-height: 20px;
	}

	.nn-cart-item__bottom {
		margin-top: 8px;
		gap: 10px;
	}

	.nn-qty {
		width: 88px;
		height: 26px;
		padding: 0 6px;
	}

	.nn-qty__value {
		font-size: 15px;
	}

	.nn-cart-item__price {
		font-size: 15px;
	}

	.nn-cart-line {
		font-size: 15px;
		padding: 6px 0;
	}

	.nn-cart-line--total {
		margin-top: 4px;
		padding-top: 10px;
	}

	.nn-cart-line--total strong {
		font-size: 18px;
	}

	.nn-ship-bubble {
		left: auto;
		right: 0;
		width: min(251px, calc(100vw - 64px));
		font-size: 13px;
	}

	.nn-cart-submit {
		width: min(100%, 220px);
        height: 56px;
        margin-top: 16px;
        padding-bottom: 0px;
        font-size: 16px;
        color: #FFF;
        font-family: "Bricolage Grotesque";
        font-size: 13.5px;
        font-style: normal;
        font-weight: 500;
        line-height: 20.924px;
	}

	.nn-cart--empty {
		min-height: calc(100dvh - 140px);
		padding: 32px 16px 48px;
	}

	.nn-cart-empty {
		padding: 0;
		text-align: center;
	}

	.nn-cart-empty .nn-cart-heading {
		margin-bottom: 12px;
	}

	.nn-cart-empty__text {
		margin: 0 0 28px;
		font-size: 16px;
	}

	.nn-cart-empty .nn-btn,
	.nn-cart-empty .nn-btn-blob {
		width: min(100%, 240px);
	}
}