/* =========================================================================
   Hoang Minh — shop.css
   Header thuong mai dien tu: menu giua, nhom icon phai, thanh tim kiem,
   dai thong bao, panel gio hang truot va popup dang nhap / dang ky.
   Nap sau theme.css nen duoc phep ghi de.
   ====================================================================== */

/* -------------------------------------------------------------------------
   1. Thanh dieu huong — bo cuc logo / menu giua / nhom nut
   ---------------------------------------------------------------------- */
.hm-navbar__inner {
	position: relative;
}

.hm-nav {
	display: flex;
	justify-content: center;
}

.hm-nav .hm-menu {
	justify-content: center;
	flex-wrap: nowrap;
}

.hm-menu__link {
	font-weight: var(--hm-nav-weight, 600);
	letter-spacing: .04em;
	text-transform: var(--hm-nav-transform, uppercase);
}

.hm-menu__link:hover {
	color: #555;
}

@media (min-width: 1025px) {
	.hm-navbar__inner {
		gap: clamp(32px, 4vw, 72px);
		padding-block: 18px;
	}

	.hm-navbar__brand {
		flex: 0 0 auto;
		margin-right: 0;
	}

	.hm-nav {
		align-self: stretch;
		align-items: center;
		justify-content: center;
	}

	.hm-nav .hm-menu {
		width: 100%;
		align-content: center;
		justify-content: center;
		flex-wrap: wrap;
		column-gap: var(--hm-nav-gap, 30px);
		row-gap: 2px;
	}

	.hm-menu__link {
		height: auto;
		min-height: 38px;
		padding-block: 7px;
	}

	.hm-navbar__actions {
		gap: 4px;
	}
}

/* Dropdown van la the mau sang du navbar mau toi. */
.hm-submenu .hm-menu__link {
	color: #101322;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
}

.hm-burger {
	color: var(--hm-nav-color, #fff);
}

/* -------------------------------------------------------------------------
   2. Nhom nut: tim kiem / tai khoan / gio hang
   ---------------------------------------------------------------------- */
.hm-actions {
	display: flex;
	align-items: center;
	gap: 6px;
}

.hm-action {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--hm-nav-color, #fff);
	cursor: pointer;
	transition: color .2s ease, background-color .2s ease;
}

.hm-action:hover,
.hm-action:focus-visible {
	color: var(--hm-nav-hover, #ffd23f);
	background: rgba(255, 255, 255, .08);
}

/* Co icon lay tu Customizer nen doi duoc ngay trong khung xem truoc. */
.hm-action > .hm-icon {
	width: var(--hm-icon-size, 22px);
	height: var(--hm-icon-size, 22px);
}

.hm-action--cart {
	overflow: visible;
}

/* Huy hieu so mon hang */
.hm-cart-count {
	position: absolute;
	top: 4px;
	right: 2px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--hm-badge-bg, #2563eb);
	color: var(--hm-badge-color, #fff);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}

/* -------------------------------------------------------------------------
   3. Menu tai khoan (khi da dang nhap)
   ---------------------------------------------------------------------- */
.hm-account {
	position: relative;
}

.hm-account__menu {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 80;
	min-width: 232px;
	padding: 14px 0 6px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 16px 40px rgba(16, 19, 34, .18);
}

.hm-account__menu[hidden] {
	display: none;
}

.hm-account__hello {
	margin: 0 18px 10px;
	color: #4a5068;
	font-size: 13px;
}

.hm-account__hello strong {
	color: #101322;
}

.hm-account__links {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid #f0f0f4;
}

.hm-account__links a {
	display: block;
	padding: 10px 18px;
	color: #101322;
	font-size: 14px;
}

.hm-account__links a:hover {
	background: #f5f6fa;
	color: #101322;
}

/* -------------------------------------------------------------------------
   4. Panel tim kiem truot tu ben phai
   ---------------------------------------------------------------------- */
.hm-navsearch {
	position: fixed;
	inset: 0;
	z-index: 9998;
	display: flex;
	justify-content: flex-end;
	padding: 24px 14px 8px 28px;
	visibility: hidden;
	pointer-events: none;
}

.hm-search-drawer__backdrop {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: rgba(17, 17, 17, .42);
	opacity: 0;
	cursor: default;
	transition: opacity .28s ease;
}

.hm-search-drawer__panel {
	position: relative;
	width: min(648px, 100%);
	height: 100%;
	overflow-y: auto;
	padding: 28px 40px 40px;
	background: #fff;
	border-radius: 10px;
	box-shadow: -18px 0 42px rgba(0, 0, 0, .1);
	transform: translateX(calc(100% + 32px));
	transition: transform .34s cubic-bezier(.22, 1, .36, 1);
}

.hm-navsearch.is-open {
	visibility: visible;
	pointer-events: auto;
}

.hm-navsearch.is-open .hm-search-drawer__backdrop {
	opacity: 1;
}

.hm-navsearch.is-open .hm-search-drawer__panel {
	transform: translateX(0);
}

.hm-search-drawer__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 34px;
	align-items: start;
	gap: 14px;
}

.hm-search-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 58px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #252525;
	cursor: pointer;
	transition: color .2s ease, transform .2s ease;
}

.hm-search-drawer__close:hover,
.hm-search-drawer__close:focus-visible {
	color: var(--hm-nav-hover, #b4232d);
	transform: rotate(90deg);
}

.hm-search--drawer {
	position: relative;
	display: grid;
	width: 100%;
	height: auto;
	padding: 0;
	background: transparent;
	border-radius: 0;
}

.hm-search--drawer .hm-search__input {
	width: 100%;
	height: 58px;
	padding: 0;
	border-bottom: 2px solid #2f2f2f;
	color: #252525;
	font-size: clamp(22px, 3vw, 28px);
	font-weight: 700;
	line-height: 1.2;
}

.hm-search--drawer .hm-search__input::placeholder {
	color: #9b9b9b;
	opacity: 1;
}

.hm-search--drawer .hm-search__submit {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Goi y san pham */
.hm-suggest {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	z-index: 90;
	max-height: min(64vh, 460px);
	overflow-y: auto;
	padding: 6px 0;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 18px 44px rgba(16, 19, 34, .22);
	color: #101322;
	text-align: left;
}

.hm-suggest[hidden] {
	display: none;
}

.hm-suggest__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hm-suggest__link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 16px;
	color: #101322;
}

.hm-suggest__link:hover,
.hm-suggest__link:focus-visible {
	background: #f5f6fa;
	color: #101322;
}

.hm-suggest__thumb {
	flex: 0 0 auto;
	display: block;
	width: 46px;
	height: 46px;
	overflow: hidden;
	border-radius: 6px;
	background: #f2f3f7;
}

.hm-suggest__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hm-suggest__text {
	min-width: 0;
}

.hm-suggest__name {
	display: block;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
}

.hm-suggest__price {
	display: block;
	margin-top: 2px;
	color: #6b7189;
	font-size: 13px;
}

.hm-suggest__price del {
	opacity: .6;
}

.hm-suggest__all {
	display: block;
	margin-top: 4px;
	padding: 11px 16px;
	border-top: 1px solid #f0f0f4;
	color: var(--hm-cart-btn-bg, #2438d9);
	font-size: 13px;
	font-weight: 600;
	text-align: center;
}

.hm-suggest__none {
	margin: 0;
	padding: 18px 16px;
	color: #6b7189;
	font-size: 14px;
	text-align: center;
}

.hm-search--drawer .hm-suggest {
	position: static;
	max-height: none;
	margin-top: 18px;
	padding: 0;
	border-radius: 0;
	box-shadow: none;
}

.hm-search--drawer .hm-suggest__link {
	gap: 14px;
	padding: 12px 0;
	border-bottom: 1px solid #ececec;
}

.hm-search--drawer .hm-suggest__link:hover,
.hm-search--drawer .hm-suggest__link:focus-visible {
	background: transparent;
	color: var(--hm-nav-hover, #b4232d);
}

.hm-search--drawer .hm-suggest__thumb {
	width: 68px;
	height: 68px;
	border-radius: 4px;
}

.hm-search--drawer .hm-suggest__name {
	font-size: 15px;
	font-weight: 600;
}

.hm-search--drawer .hm-suggest__all {
	padding: 16px 0 4px;
	color: #252525;
}

/* -------------------------------------------------------------------------
   5. Dai thong bao duoi thanh dieu huong
   ---------------------------------------------------------------------- */
.hm-announce {
	overflow: hidden;
	max-height: var(--hm-announce-h, 34px);
	background: var(--hm-announce-bg, #565656);
	color: var(--hm-announce-color, #fff);
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transform-origin: top;
	transition:
		max-height .3s ease,
		opacity .24s ease,
		visibility .3s ease,
		transform .3s ease;
}

body.hm-has-sticky-header .hm-header.is-announce-hidden .hm-announce {
	max-height: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	pointer-events: none;
}

.hm-announce__inner {
	position: relative;
	min-height: var(--hm-announce-h, 34px);
	overflow: hidden;
}

.hm-announce__track {
	position: relative;
	height: var(--hm-announce-h, 34px);
}

.hm-announce__item {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	margin: 0;
	padding: 4px 0;
	font-size: var(--hm-announce-font, 13px);
	line-height: 1.4;
	text-align: center;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-12px);
	transition:
		opacity .36s ease,
		visibility .36s ease,
		transform .36s cubic-bezier(.22, 1, .36, 1);
	pointer-events: none;
}

.hm-announce__item.is-active {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

.hm-announce__item.is-leaving {
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	pointer-events: none;
}

.hm-announce__link,
.hm-announce__content-link {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.hm-announce__link:hover,
.hm-announce__content-link:hover {
	color: inherit;
	opacity: .82;
}

.hm-announce__arrow {
	margin-left: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.hm-announce,
	.hm-announce__item {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
   6. Panel gio hang
   ---------------------------------------------------------------------- */
.hm-cart {
	position: fixed;
	inset: 0;
	z-index: 1010;
	visibility: hidden;
}

.hm-cart.is-open {
	visibility: visible;
}

.hm-cart__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(16, 19, 34, .42);
	opacity: 0;
	transition: opacity .3s ease;
}

.hm-cart.is-open .hm-cart__backdrop {
	opacity: 1;
}

.hm-cart__panel {
	position: absolute;
	top: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	width: min(var(--hm-cart-w, 487px), 92vw);
	background: #fff;
	box-shadow: 0 0 46px rgba(16, 19, 34, .24);
	transition: transform .34s cubic-bezier(.4, 0, .2, 1);
}

.hm-cart--left .hm-cart__panel {
	left: 0;
	transform: translateX(-100%);
}

.hm-cart--right .hm-cart__panel {
	right: 0;
	transform: translateX(100%);
}

.hm-cart.is-open .hm-cart__panel {
	transform: translateX(0);
}

.hm-cart__head {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 20px;
	border-bottom: 1px solid #e9e9ef;
}

.hm-cart__title {
	margin: 0;
	color: #101322;
	font-size: 17px;
	font-weight: 700;
}

.hm-cart__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin-right: -6px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #101322;
	cursor: pointer;
}

.hm-cart__close:hover {
	background: #f2f3f7;
}

.hm-cart__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.hm-cart__scroll {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* ----- Danh sach mon hang ----- */
.hm-cart__items {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hm-cart__item {
	position: relative;
	display: grid;
	grid-template-columns: 62px minmax(0, 1fr) auto;
	align-items: start;
	gap: 14px;
	padding: 16px 20px 16px 34px;
	border-bottom: 1px solid #f1f1f5;
}

.hm-cart__remove {
	position: absolute;
	top: 14px;
	left: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 17px;
	height: 17px;
	padding: 0;
	border: 1px solid #d3d4dc;
	border-radius: 50%;
	background: #fff;
	color: #6b7189;
	cursor: pointer;
	transition: border-color .2s ease, color .2s ease;
}

.hm-cart__remove:hover {
	border-color: #101322;
	color: #101322;
}

.hm-cart__thumb {
	display: block;
	width: 62px;
	height: 62px;
	overflow: hidden;
	border-radius: 6px;
	background: #f2f3f7;
}

.hm-cart__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.hm-cart__info {
	min-width: 0;
}

.hm-cart__name {
	display: block;
	color: #101322;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
}

.hm-cart__name:hover {
	color: var(--hm-cart-btn-bg, #2438d9);
}

.hm-cart__meta {
	margin-top: 4px;
	color: #4a5068;
	font-size: 12px;
	line-height: 1.5;
}

.hm-cart__meta dl,
.hm-cart__meta p {
	margin: 0;
}

.hm-cart__meta dt {
	float: left;
	clear: left;
	margin-right: 4px;
	font-weight: 700;
}

.hm-cart__meta dd {
	margin: 0;
}

.hm-cart__edit {
	display: inline-block;
	margin-top: 3px;
	color: #2f6fed;
	font-size: 12px;
}

.hm-cart__edit:hover {
	text-decoration: underline;
}

.hm-cart__qty {
	display: inline-flex;
	align-items: center;
	margin-top: 10px;
	border: 1px solid #d9dae2;
	border-radius: 4px;
	overflow: hidden;
}

.hm-cart__qty-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	background: #fff;
	color: #101322;
	cursor: pointer;
	transition: background-color .2s ease;
}

.hm-cart__qty-btn:hover {
	background: #f2f3f7;
}

.hm-cart__qty-input {
	width: 36px;
	height: 28px;
	border: 0;
	border-inline: 1px solid #e6e7ee;
	background: #fff;
	color: #101322;
	font-size: 13px;
	font-weight: 600;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

.hm-cart__qty-input::-webkit-outer-spin-button,
.hm-cart__qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.hm-cart__qty-input:focus {
	outline: none;
}

.hm-cart__price {
	color: #101322;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
}

.hm-cart__price del {
	margin-right: 4px;
	color: #9aa0b4;
	font-weight: 400;
}

/* ----- Gio trong ----- */
.hm-cart__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 320px;
	padding: 40px 28px;
	text-align: center;
}

.hm-cart__empty-icon {
	color: #c9ccd8;
}

.hm-cart__empty-text {
	margin: 8px 0 0;
	color: #101322;
	font-size: 15px;
	font-weight: 600;
}

.hm-cart__empty-note {
	margin: 0;
	color: #6b7189;
	font-size: 13px;
}

.hm-cart__empty .hm-cart__checkout {
	max-width: 260px;
	margin-top: 14px;
}

/* ----- Chan panel ----- */
.hm-cart__foot {
	flex: 0 0 auto;
	padding: 4px 20px 18px;
	border-top: 1px solid #e9e9ef;
	background: #fff;
}

.hm-cart__coupon {
	border-bottom: 1px solid #eeeef3;
}

.hm-cart__coupon-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 14px 0;
	border: 0;
	background: transparent;
	color: #101322;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}

.hm-cart__coupon-caret {
	transition: transform .22s ease;
}

.hm-cart__coupon-toggle[aria-expanded="true"] .hm-cart__coupon-caret {
	transform: rotate(180deg);
}

.hm-cart__coupon-body {
	padding-bottom: 14px;
}

.hm-cart__coupon-body[hidden] {
	display: none;
}

.hm-cart__coupon-row {
	display: flex;
	gap: 8px;
}

.hm-cart__coupon-input {
	flex: 1 1 auto;
	min-width: 0;
	height: 40px;
	padding: 0 12px;
	border: 1px solid #d9dae2;
	border-radius: 4px;
	background: #fff;
	color: #101322;
	font-size: 14px;
}

.hm-cart__coupon-input:focus {
	border-color: var(--hm-cart-btn-bg, #2438d9);
	outline: none;
}

.hm-cart__coupon-apply {
	flex: 0 0 auto;
	height: 40px;
	padding: 0 18px;
	border: 1px solid #101322;
	border-radius: 4px;
	background: #fff;
	color: #101322;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}

.hm-cart__coupon-apply:hover {
	background: #101322;
	color: #fff;
}

.hm-cart__coupon-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

.hm-cart__coupon-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 8px;
	border-radius: 999px;
	background: #eef1ff;
	color: #2438d9;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
}

.hm-cart__coupon-remove {
	display: inline-flex;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.hm-cart__coupon-msg {
	margin: 10px 0 0;
	font-size: 13px;
	color: #d0342c;
}

.hm-cart__coupon-msg.is-ok {
	color: #1a8f4c;
}

.hm-cart__coupon-msg[hidden] {
	display: none;
}

.hm-cart__totals {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 0 14px;
	color: #101322;
	font-size: 15px;
	font-weight: 700;
}

.hm-cart__checkout {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 52px;
	border-radius: 4px;
	background: var(--hm-cart-btn-bg, #2438d9);
	color: var(--hm-cart-btn-color, #fff);
	font-size: 16px;
	font-weight: 700;
	text-align: center;
	transition: background-color .2s ease;
}

.hm-cart__checkout:hover {
	background: var(--hm-cart-btn-hover, #1a2bb0);
	color: var(--hm-cart-btn-color, #fff);
}

.hm-cart__continue {
	display: block;
	width: 100%;
	margin-top: 12px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #101322;
	font-size: 13px;
	text-align: center;
	cursor: pointer;
}

.hm-cart__continue:hover {
	text-decoration: underline;
}

/* ----- Lop dang tai ----- */
.hm-cart__loading {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, .62);
}

.hm-cart__loading[hidden] {
	display: none;
}

.hm-cart__spinner {
	width: 30px;
	height: 30px;
	border: 3px solid #d9dae2;
	border-top-color: var(--hm-cart-btn-bg, #2438d9);
	border-radius: 50%;
	animation: hm-spin .8s linear infinite;
}

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

/* -------------------------------------------------------------------------
   7. Popup dang nhap / dang ky
   ---------------------------------------------------------------------- */
.hm-auth {
	position: fixed;
	inset: 0;
	z-index: 1100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	visibility: hidden;
}

.hm-auth.is-open {
	visibility: visible;
}

.hm-auth__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(16, 19, 34, .5);
	opacity: 0;
	transition: opacity .25s ease;
}

.hm-auth.is-open .hm-auth__backdrop {
	opacity: 1;
}

.hm-auth__dialog {
	position: relative;
	width: 100%;
	max-width: 430px;
	max-height: 92vh;
	overflow-y: auto;
	padding: 28px 30px 30px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 26px 70px rgba(16, 19, 34, .3);
	opacity: 0;
	transform: translateY(14px) scale(.98);
	transition: opacity .25s ease, transform .25s ease;
}

.hm-auth.is-open .hm-auth__dialog {
	opacity: 1;
	transform: none;
}

.hm-auth__close {
	position: absolute;
	top: 12px;
	right: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #6b7189;
	cursor: pointer;
}

.hm-auth__close:hover {
	background: #f2f3f7;
	color: #101322;
}

.hm-auth__tabs {
	display: flex;
	gap: 24px;
	margin-bottom: 20px;
	border-bottom: 1px solid #e9e9ef;
}

.hm-auth__tab {
	position: relative;
	padding: 0 0 12px;
	border: 0;
	background: transparent;
	color: #8a90a6;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
}

.hm-auth__tab.is-active {
	color: #101322;
}

.hm-auth__tab.is-active::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: #101322;
}

.hm-auth__form[hidden] {
	display: none;
}

.hm-auth__field {
	display: block;
	margin-bottom: 14px;
}

.hm-auth__label {
	display: block;
	margin-bottom: 6px;
	color: #4a5068;
	font-size: 13px;
	font-weight: 600;
}

.hm-auth__field input {
	width: 100%;
	height: 44px;
	padding: 0 13px;
	border: 1px solid #d9dae2;
	border-radius: 5px;
	background: #fff;
	color: #101322;
	font-size: 15px;
}

.hm-auth__field input:focus {
	border-color: var(--hm-cart-btn-bg, #2438d9);
	outline: none;
}

.hm-auth__hint {
	display: block;
	margin-top: 5px;
	color: #8a90a6;
	font-size: 12px;
}

.hm-auth__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 4px 0 18px;
	font-size: 13px;
}

.hm-auth__check {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: #4a5068;
	cursor: pointer;
}

.hm-auth__lost {
	color: var(--hm-cart-btn-bg, #2438d9);
}

.hm-auth__lost:hover {
	text-decoration: underline;
}

.hm-auth__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 48px;
	border: 0;
	border-radius: 5px;
	background: var(--hm-cart-btn-bg, #2438d9);
	color: var(--hm-cart-btn-color, #fff);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color .2s ease, opacity .2s ease;
}

.hm-auth__submit:hover {
	background: var(--hm-cart-btn-hover, #1a2bb0);
}

.hm-auth__submit[disabled] {
	opacity: .65;
	cursor: default;
}

.hm-auth__switch {
	margin: 16px 0 0;
	color: #4a5068;
	font-size: 13px;
	text-align: center;
}

.hm-auth__switch button {
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--hm-cart-btn-bg, #2438d9);
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}

.hm-auth__switch button:hover {
	text-decoration: underline;
}

.hm-auth__msg {
	margin: 0 0 16px;
	padding: 10px 13px;
	border-radius: 5px;
	background: #fdeceb;
	color: #b3251d;
	font-size: 13px;
}

.hm-auth__msg.is-ok {
	background: #e8f6ee;
	color: #1a7f45;
}

.hm-auth__msg[hidden] {
	display: none;
}

/* -------------------------------------------------------------------------
   8. Responsive
   ---------------------------------------------------------------------- */
@media (max-width: 1200px) {
	.hm-menu__link {
		letter-spacing: .02em;
	}
}

@media (max-width: 1024px) {
	/*
	 * shop.css nap sau theme.css nen quy tac .hm-nav{display:flex} o tren
	 * se de len quy tac an menu cua theme.css — phai an lai o day.
	 */
	.hm-navbar .hm-nav {
		display: none;
	}

	/*
	 * Bo cuc mobile: menu — tim kiem — logo (giua) — tai khoan — gio hang.
	 * display:contents go bo hai lop boc de tung nut tro thanh flex item
	 * cua .hm-navbar__inner, nho vay sap xep duoc bang order.
	 */
	.hm-navbar .hm-navbar__actions,
	.hm-navbar .hm-actions {
		display: contents;
	}

	.hm-burger            { order: 1; }
	.hm-action--search    { order: 2; }
	.hm-navbar__brand     { order: 3; }
	.hm-account,
	.hm-action--user      { order: 4; }
	.hm-action--cart      { order: 5; }

	.hm-navbar__brand {
		flex: 1 1 auto;
		justify-content: center;
		margin-inline: 4px;
	}

	.hm-action {
		flex: 0 0 auto;
		width: 38px;
		height: 38px;
	}

	.hm-navsearch {
		padding: 16px 12px 8px 24px;
	}

	.hm-search-drawer__panel {
		width: min(648px, 100%);
		padding: 24px 28px 36px;
	}
}

@media (max-width: 600px) {
	.hm-cart__panel {
		/*
		 * 100vw tinh ca be rong thanh cuon nen panel rong hon vung nhin thay,
		 * lam le trai bi cat. .hm-cart la fixed theo viewport nen 100% dung
		 * bang chieu rong that cua khung nhin.
		 */
		width: 100%;
	}

	.hm-cart__item {
		grid-template-columns: 56px minmax(0, 1fr) auto;
		gap: 10px;
		padding-left: 30px;
		padding-right: 14px;
	}

	.hm-cart__thumb {
		width: 56px;
		height: 56px;
	}

	.hm-cart__foot {
		padding-inline: 14px;
	}

	.hm-auth__dialog {
		padding: 24px 20px 26px;
	}

	.hm-navsearch {
		padding-left: 14px;
	}

	.hm-search-drawer__panel {
		padding-inline: 26px;
	}
}

/* Nguoi dung chon giam chuyen dong: bo hieu ung truot. */
@media (prefers-reduced-motion: reduce) {
	.hm-cart__panel,
	.hm-cart__backdrop,
	.hm-auth__dialog,
	.hm-auth__backdrop,
	.hm-search-drawer__panel,
	.hm-search-drawer__backdrop {
		transition: none;
	}
}