.select2-selection__arrow {
	display: none;
}

.h-sortRating .h-rating-mark {
	width: 64px;
}

.h-sortRating .h-rating-mark2 {
	width: calc(100% - 64px);
}

.h-btn-reset-design {
	height: 32px;
	background-color: var(--color-sidebar);
	border-radius: var(--radius-sm);
	color: #fff;
	border: 0;
	padding: 0 10px;
	margin-left: 10px;
}

.h-sub-text {
	margin-bottom: 8px;
	font-weight: bold;
}

#screen-shot .h-sub-text {
	margin-top: 15px;
}

.h-input-app {
	margin-bottom: 5px;
}

.h-icon-trash img {
	height: 23px;
}

.nh-list-address {
	top: 48px;
	display: none;
	position: absolute;
	border: 1px solid #8A8A8A;
	border-radius: 4px;
	background: #fff;
	width: 100%;
	max-height: 245px;
	overflow-y: auto;
	z-index: 1;
}

#showShopPopup {
	max-height: 610px;
	overflow: auto;
}

.nh-list-address .nh-list-item {
	padding: 0 15px;
	font-size: 14px;
	height: 49px;
	cursor: pointer;
}

.ui-sortable-handle:hover {
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.ui-sortable-handle {
	transition: box-shadow 0.3s ease;
}

.h-highlight {
	border: 2px dashed #4a4a4a;
	/* Đổi màu viền thành đỏ để nổi bật */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	/* Bóng viền để làm nổi bật */
	z-index: 1000;
	/* Đảm bảo phần tử đang kéo ở trên cùng */
}

.h-highlight2 {
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* ── Drag mode: visual indicators for draggable items ── */
.nl-drag-item {
	outline: 2px dashed rgba(67, 143, 254, 0.5);
	outline-offset: -2px;
	border-radius: 4px;
	cursor: grab;
	position: relative;
}

/* Drag handle badge: shows ⇅ icon so user knows this item is draggable */
.nl-drag-item::after {
	content: '⇅';
	position: absolute;
	top: -6px;
	right: -6px;
	width: 20px;
	height: 20px;
	background: #E53E3E;
	/* Red color to attract attention */
	color: #fff;
	font-size: 12px;
	line-height: 20px;
	text-align: center;
	border-radius: 50%;
	z-index: 20;
	pointer-events: none;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	animation: badgePulse 2s infinite;
}

@keyframes badgePulse {
	0% {
		box-shadow: 0 0 0 0 rgba(229, 62, 62, 0.7);
	}

	70% {
		box-shadow: 0 0 0 6px rgba(229, 62, 62, 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(229, 62, 62, 0);
	}
}

/* For horizontal-only sort containers, show ⇆ instead */
.sort-price-single>.nl-drag-item::after,
.h-sortprice1>.nl-drag-item::after,
.tab-nav>.nl-drag-item::after,
.item_title_icon_order>.nl-drag-item::after,
#find-pw-container>.nl-drag-item::after {
	content: '⇆';
}

.nl-drag-item:hover {
	outline-color: #438FFE;
	background-color: rgba(67, 143, 254, 0.03);
}

.nl-drag-item:active {
	cursor: grabbing;
}

/* ── Active Drag Zone Boundaries ── */
/* When an item is picked up, dim all other draggable items to show they aren't the target */
body.is-dragging-item .has-sortable:not(.is-active-dropzone) .nl-drag-item {
	opacity: 0.3;
	outline-color: rgba(67, 143, 254, 0.2);
}

body.is-dragging-item .has-sortable:not(.is-active-dropzone) .nl-drag-item::after {
	display: none;
}

/* Highlight the specific container (sandbox) where the current item can be dropped */
.has-sortable.is-active-dropzone {
	outline: 2px dashed #438FFE !important;
	outline-offset: 4px;
	background: rgba(67, 143, 254, 0.04);
	border-radius: 6px;
	transition: all 0.2s ease;
}

/* ── Intuitive UX Animations ── */
/* ── Intuitive UX Animations ── */
.is-draggable-hover {
	transition: background-color 0.1s ease-out;
	overflow: hidden;
	/* Fixes native HTML5 giant drag image bug by clipping overflow */
}

/* Show grab cursor to indicate interactability */
.is-draggable-hover:hover {
	z-index: 10;
	cursor: grab !important;
	outline-color: #438FFE;
	background-color: rgba(67, 143, 254, 0.05);
}

.is-draggable-hover:active {
	cursor: grabbing !important;
}

/* Fix SortableJS fallback clone size */
.sortable-fallback {
	overflow: hidden;
	opacity: 0.9 !important;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3) !important;
	pointer-events: none !important;
}



.h-placeholder {
	border: 2px solid #6c5659;
	/* Đổi màu viền thành xanh để đánh dấu khu vực có thể di chuyển tới */
	min-height: 20px;
	/* Đảm bảo kích thước placeholder giống như phần tử */
	position: relative;
	/* Đặt vị trí để border dashed được hiển thị chính xác */
}

.h-choose-language {
	position: absolute;
	top: 30px;
	right: 40px;
	display: flex;
	align-items: center;
	cursor: pointer;
}

.h-choose-language span {
	margin-left: 10px;
	margin-right: 6px;
	font-size: 14px;
}

.h-choose-language .h-icon-arrow {
	position: absolute;
	right: -15px;
	top: 5px;
	bottom: 0;
	margin: auto;
	width: 0;
	height: 0;
	border-bottom: 5px solid transparent;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid black;
}

.nh-list-address .nh-list-item:hover {
	background-color: #0078EF;
	color: #fff;
}

.custom-select .select2-selection__rendered {
	font-size: 0.875rem;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 10px !important;

}

.selection .select2-selection--single {
	height: 32px !important;
	border: 1px solid #E4E6EB !important;
	border-radius: var(--radius-sm) !important;
}

.select2-container {
	width: 100% !important;
}

.select2-results li {
	min-height: 1.2em;
	color: black;
	font-size: 0.875rem;
}

.select2-results li:hover {
	background-color: #0078d7 !important;
}

.select2-results li[aria-selected=true] {
	background-color: #0078d7 !important;
}

.nl-card-auth .h-board-find-pw {
	padding: 0 32px;
}

.h-board-find-pw .h-find-pw-1 {
	text-align: center;
	font-size: 24px;
	margin-top: 95px;
	margin-bottom: 21px;
}

.h-board-find-pw .h-find-pw-2 {
	margin-bottom: 15px;
	font-size: 16px;
	line-height: 1.5;
}

.h-board-find-pw .h-find-pw-3 {
	margin-bottom: 10px;
	font-size: 14px;
}

.h-board-find-pw .h-countdown {
	position: absolute;
	right: 10px;
	top: 14px;
	font-size: 14px;
	color: #E94848;
}

.h-board-find-pw .h-second-text {
	font-size: 14px;
	margin-bottom: 10px;
}

.h-circle-back {
	background: #fff;
	padding: 7px;
	border-radius: 100%;
	border: 2px solid #667084;
	cursor: pointer;

}

.h-circle-back .h-arrow {
	display: block;
	width: 8px;
	height: 8px;
	border-top: 2px solid #667084;
	border-left: 2px solid #667084;
	transform: rotate(-45deg);
}

.h-circle-back .h-arrow::after {
	content: "";
	display: block;
	width: 2px;
	height: 10px;
	background-color: #667084;
	transform: rotate(-45deg) translate(3px, 1px);
}

.h-board-find-pw .h-note {
	font-size: 14px;
	color: #6F6F6F;
	margin-top: 14px;
}

.h-board-find-pw .h-btn-find-pw {
	margin-top: 32px !important;
}

.h-board-find-pw .h-btn-find-pw2 {
	position: absolute;
	width: 400px;
	bottom: 10px;
}

.h-board-find-pw .h-btn-find-pw3 {
	margin-top: 73px;
}

.h-board-find-pw .h-resend {
	font-size: 16px;
	margin-bottom: 46px;
}

.h-board-find-pw .h-resend .h-link {
	color: #4259D2;
	cursor: pointer;
}

.h-relative {
	position: relative;
	gap: 10px;
}

.h-hidden {
	display: none;
}

.nl-header-bar .h-header-right .h-icon {
	margin-left: 20px;
	cursor: pointer;
	position: relative;
}

.nl-header-bar .h-header-right .h-icon .h-icon-arrow {
	position: absolute;
	right: -15px;
	top: 5px;
	bottom: 0;
	margin: auto;
	width: 0;
	height: 0;
	border-bottom: 5px solid transparent;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid black;
}

.nl-header-bar .h-page-name span {
	color: #35363D;
	font-size: 15px;

}

.nl-header-bar .h-header-right .h-icon.h-notification.has-notice::after {
	content: '';
	width: 7px;
	height: 7px;
	background-color: red;
	border-radius: 50%;
	position: absolute;
	top: 0;
	right: -1px;
	pointer-events: none;
}

.nl-header-bar .h-header-right .h-icon span {
	font-size: 14px;
}

.nl-tbl-grp__bottom .h-pagination {
	font-size: 15px;
}

.nl-tbl-grp__bottom .h-custom {
	position: relative;
	margin-right: 10px;
	margin-left: 5px;
}

.nl-tbl-grp__bottom .h-custom::after {
	/* content: "";
  position: absolute;
  border-style: solid;
  right: 8px;
  border-width: 7px 5px 0 5px;
  border-color: #4E4F58 transparent transparent transparent;
  top: 13px; */

}

.h-bold {
	font-weight: bold;
}

.nl-tbl-grp__bottom .h-pagination .h-select-page {
	width: 63px;
	height: 34px;
	border-radius: var(--radius-md);
	border: 1px solid #999BAD;
	font-size: 15px;
	padding: 0 10px;
}

.nl-tbl-grp__bottom .h-pagination .h-button {
	width: 34px;
	height: 34px;
	border-radius: var(--radius-md);
	background-color: #EEF0F6;
	position: relative;
}

.nl-tbl-grp__bottom .h-pagination .h-button.h-previous-page::after {
	content: "";
	position: absolute;
	border-style: solid;
	left: 13px;
	border-width: 5.5px 7.5px 5.5px 0;
	border-color: transparent #4E4F58 transparent transparent;
	top: 12px;
}

.nl-tbl-grp__bottom .h-pagination .h-button.h-next-page::after {
	content: "";
	position: absolute;
	border-style: solid;
	right: 13px;
	border-width: 5.5px 0 5.5px 7.5px;
	border-color: transparent transparent transparent #4E4F58;
	top: 12px;
}

.nl-tbl-grp__bottom .h-pagination2 .h-icon-arrow {
	width: 36px;
	height: 36px;
	border: 1px solid #EFEFEF;
	border-right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #FFFFFF;

}

.nl-tbl-grp__bottom .h-pagination2 .h-icon-arrow:first-child {
	border-radius: var(--radius-sm) 0 0 var(--radius-sm);

}

.nl-tbl-grp__bottom .h-pagination2 .h-icon-arrow:last-child {
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	border-right: 1px solid #EFEFEF;
}

.nl-tbl-grp__bottom .h-pagination2 .h-num-pagination {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #EFEFEF;
	border-right: 0;
	font-weight: 400;
	font-size: 14px;
	border-radius: 0;
	background-color: #FFFFFF;
	color: #323334;
	text-decoration: none;
}

.nl-tbl-grp__bottom .h-pagination2 .h-num-pagination:first-child {
	border-left: 0;
}

.nl-tbl-grp__bottom .h-pagination2 .h-num-pagination:last-child {
	border-left: 0;
}

.nl-tbl-grp__bottom .h-pagination2 .h-num-pagination.active {
	color: #fff;
	background-color: #438FFE;
	border-color: #438FFE;
	border-left-color: #EFEFEF;
}

.nl-tbl-grp__bottom .h-pagination2 span {
	font-size: 18px;
	margin-right: 30px;
	margin-top: 2px;
}

/* Pagination wrapper — 3 columns: total | page numbers | go-to */
.h-pagination-wrapper {
	padding: 12px 10px;
	gap: 20px;
	box-sizing: border-box;
}

.h-pagination-wrapper .h-pagination2 {
	margin-top: 0 !important;
}

.h-pagination-wrapper .nice-select .nice-select-dropdown {
	left: auto;
	right: 0;
}

.h-pagination-total {
	font-size: 13px;
	color: #888;
	white-space: nowrap;
	min-width: fit-content;
	line-height: 36px;
}

.h-pagination-total strong {
	color: #323334;
	font-size: 14px;
}

/* Go to page section */
.h-pagination-goto {
	white-space: nowrap;
	min-width: fit-content;
}

.h-goto-label {
	font-size: 13px;
	color: #888;
	margin-right: 4px;
}

.h-goto-input {
	width: 50px;
	height: 32px;
	border: 1px solid #E4E6EB;
	border-radius: var(--radius-sm);
	text-align: center;
	font-size: 13px;
	color: #323334;
	outline: none;
	-moz-appearance: textfield;
	transition: border-color 0.2s;
}

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

.h-goto-input:focus {
	border-color: #438FFE;
	box-shadow: 0 0 0 2px rgba(67, 143, 254, 0.15);
}

.h-goto-btn {
	height: 32px;
	padding: 0 14px;
	background-color: #474B6E;
	color: #fff;
	border: 0;
	border-radius: var(--radius-sm);
	font-size: 13px;
	cursor: pointer;
	transition: background-color 0.2s;
}

.h-goto-btn:hover {
	background-color: var(--color-secondary-hover);
}

.nl-card .h-btn-delete {
	width: 38px;
	height: 40px;
	border: 0;
	border-radius: var(--radius-sm);
	background-color: #474B6E;
}

.h-note {
	font-size: 14px;
	font-style: italic;
	font-weight: 300;
}

.nl-card .h-btn-delete img {
	height: 22px;
}

.h-btn-add {
	height: 32px;
	border: 0;
	border-radius: var(--radius-sm);
	background-color: #438FFE;
	color: #fff;
	font-size: 14px;
	padding: 0 10px;
	width: fit-content;
	min-width: fit-content;
	white-space: nowrap;
	margin-left: 10px;
}

.h-btn-add img {
	width: 9px;
}

.h-btn-search {
	background-color: #474B6E;
	padding: 0 10px;
	color: #fff;
	border: 0;
	min-width: fit-content;
}

.h-btn-search img {
	width: 18px;
	height: auto;
	object-fit: contain;
}

.h-btn-create {
	min-width: fit-content;
	max-width: 135px;
	height: 42px;
	background-color: #438FFE;
}

.h-btn-owner {
	background-color: #385EB5;
	color: #fff;
	border: 0;
	padding: 0 10px;
}

.h-group-filter {
	margin-right: 30px;
	position: relative;
}

.h-group-filter::after {
	content: "";
	position: absolute;
	height: 20px;
	background-color: #D2D4E2;
	width: 1px;
	right: -16px;
	top: 0;
	bottom: 0;
	margin: auto;
}

.h-select-image {
	width: 100px;
	height: 100px;
	border-radius: var(--radius-md);
	background-color: #EEF0F6;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #696B75;
	font-size: 45px;
	font-weight: 100;
	cursor: pointer;
	position: relative;
}

.h-delete-img {
	position: absolute;
	right: 2px;
	top: 2px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	font-size: 0;
	background-color: rgba(34, 34, 34, 0.42);
	outline: 0;
	cursor: pointer;
	z-index: 10;

	&:before {
		font-size: 0;
		width: 13px;
		height: 2px;
		background-color: #fff;
		position: absolute;
		content: '';
		transform: rotate(45deg);
		top: 10px;
		left: 5px;
	}

	&:after {
		font-size: 0;
		width: 13px;
		height: 2px;
		background-color: #fff;
		position: absolute;
		content: '';
		transform: rotate(-45deg);
		top: 10px;
		left: 5px;
	}

	/* 				&:hover {
            opacity: 0.8;
            transition: opacity 0.2s;
        } */
}

.h-img-detail img {
	object-fit: cover;
	width: 100px;
	height: 100px;
	border-radius: var(--radius-md);
}


.h-row-input .col-4 {
	padding-left: 5px;
	padding-right: 5px;
}

.h-row-input .col-4:nth-child(3n+1) {
	padding-right: 5px;
	padding-left: 0;
}

.h-row-input .col-4:nth-child(3n+2) {
	padding-left: 5px;
	padding-right: 5px;
}

.h-row-input .col-4:nth-child(3n) {
	padding-left: 5px;
	padding-right: 0;
}

.h-textarea {
	min-height: 80px;
	padding: 6px 10px !important;
	resize: none;
}

.h-img-table {
	width: 52px;
	height: 52px;
	object-fit: contain;
	border: 1px solid #999BAD;
	border-radius: 2px;
}

/* switch toggle */
.h-switch {
	position: relative;
	display: inline-block;
	flex: 0 0 51px;
	width: 51px;
	height: 22px;
	vertical-align: middle;
}

.h-switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.h-switch .h-slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border: 1px solid #999BAD;
	background-color: #F2F2F2;
	-webkit-transition: .4s;
	transition: .4s;
}

.h-switch .h-slider:before {
	position: absolute;
	content: "";
	height: 18px;
	width: 18px;
	left: 1px;
	bottom: 1px;
	background-color: #999BAD;
	-webkit-transition: .4s;
	transition: .4s;

}

.h-swtich-has-text {
	/* font-size: 14px; */
	display: inline-flex;
	align-items: center;
	margin-left: 8px;
	min-height: 22px;
	line-height: 22px;
}

#upload-icon {
	margin-top: 5px;
}

.h-swtich-has-text.active {
	color: #4DBD3B;
}

.h-swtich-has-text.inactive {
	color: #EE3C3C;

}

.nl-toggle-row {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 32px;
	white-space: nowrap;
}

.nl-toggle-row .h-switch {
	margin: 0;
}

.nl-toggle-row .h-swtich-has-text {
	margin-left: 0;
	line-height: 22px;
}

.nl-time-row {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 10px;
}

.nl-time-row .nl-form-control[type="time"] {
	flex: 0 0 auto;
}

/* Force 24h format: hide AM/PM indicator in Chrome/Edge */
input[type="time"]::-webkit-datetime-edit-ampm-field {
	display: none !important;
}


.nl-time-row .nl-time-separator {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 10px;
	line-height: 32px;
}

.nl-check-inline {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 32px;
	white-space: nowrap;
	vertical-align: middle;
}

.nl-check-inline .nl-cb {
	flex: 0 0 auto;
}

.nl-check-inline .nl-text {
	display: inline-flex;
	align-items: center;
	line-height: 1;
}

input:checked+.h-slider {
	background-color: #fff;
	border: 1.5px solid #438FFE;
}

/* input:focus + .h-slider {
  box-shadow: 0 0 1px #2196F3;
} */

input:checked+.h-slider:before {
	-webkit-transform: translateX(29px);
	-ms-transform: translateX(29px);
	transform: translateX(29px);
	background-color: #438FFE;
}

.h-slider.h-round {
	border-radius: 34px;
}

.h-icon-trash {
	cursor: pointer;
}

.h-slider.h-round:before {
	border-radius: 50%;
}

/* end switch toggle */
.h-footer-edit {
	padding-top: 12px;
	display: flex;
	justify-content: space-between;
	gap: 10px;
}

/* .h-footer-edit div:first-child {
	left: 22px;
	position: absolute;
	bottom: 62px;
}

.h-footer-edit div:last-child {
	right: 22px;
	position: absolute;
	bottom: 62px;
} */

.h-footer-edit .h-btn {
	height: 30px;
	border-radius: var(--radius-sm);
	font-size: 14px;
	color: #fff;
	border: 0;
	padding-right: 20px;
	padding-left: 20px;
	white-space: nowrap;
	width: fit-content;
	min-width: fit-content;
}

.h-footer-edit .h-btn.h-btn-delete {
	background-color: #45496F;
}

.h-footer-edit .h-btn.h-btn-back {
	background-color: #fff;
	border: 1px solid #438FFE;
	color: #438FFE;

}

.h-footer-edit .h-btn.h-btn-submit {
	color: #fff;
	background-color: #438FFE;

}

.h-item-transform {
	position: relative;
	border: 1px solid #E4E6EB;
	height: 28px;
	border-radius: var(--radius-sm);
	display: flex;
	align-items: center;
	padding: 0 35px 0 10px;
	font-size: 0.875rem;
}

.h-item-transform .h-close {
	position: absolute;
	right: 5px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	font-size: 0;
	background-color: #F0F0F0;
	outline: 0;
	cursor: pointer;
}

.h-item-transform .h-close:before {
	font-size: 0;
	width: 10px;
	height: 2px;
	background-color: #3D3D3D;
	position: absolute;
	content: '';
	transform: rotate(45deg);
	top: 9px;
	left: 5px;
}

.h-item-transform .h-close:after {
	font-size: 0;
	width: 10px;
	height: 2px;
	background-color: #3D3D3D;
	position: absolute;
	content: '';
	transform: rotate(-45deg);
	top: 9px;
	left: 5px;
}

.h-calendar {
	position: relative;
}

.h-form-calendar {
	border: 1px solid #E4E6EB;
	border-radius: var(--radius-sm);
	height: 32px;
	padding: 0 10px 0 32px;
	font-size: 0.875rem;
	width: 130px;
	cursor: pointer;
	font-size: 13px;
}

.h-calendar img {
	position: absolute;
	left: 10px;
	top: 0;
	bottom: 0;
	margin: auto;
	height: 16px;
}

.h-calculate {
	/* background-color: #fff;
	padding: 22px; */
	margin-bottom: 14px;
}

.h-calculate .h-item {
	background-color: #fff;
	border-radius: var(--radius-sm);
	padding: 20px 18px;
	height: 136px;
	box-shadow: 0px 1px 2px 0px #00000008;
	border: 1px solid #E4E6EB
}

.h-calculate .h-item img {
	height: 56px;
	width: auto;
}

.h-calculate .h-item {
	margin-left: 5px;
	margin-right: 5px;
}

.h-calculate .h-item:nth-child(4n+1) {
	margin-right: 5px;
	margin-left: 0;
}

.h-calculate .h-item:nth-child(4n+2) {
	margin-left: 5px;
	margin-right: 5px;
}

.h-calculate .h-item:nth-child(4n+3) {
	margin-left: 5px;
	margin-right: 5px;
}

.h-calculate .h-item:nth-child(4n) {
	margin-left: 5px;
	margin-right: 0;
}

.h-calculate .h-item .h-result {
	font-size: 30px;
	color: #323334;
	font-weight: 700;
	margin-top: 7px;
}

.h-calculate .h-item .h-title span {
	font-size: 16px;
	color: #323334;
}

.h-box-edit {
	width: 100%;
	background-color: #fff;
	border-radius: 10px;
	padding: 20px;
	border: 1px solid #999BAD;
	margin-bottom: 13px;
}

.btn-change-pw {
	background-color: #4e6487;
	color: #fff;
	width: fit-content;
	min-width: fit-content;
	border: 0;
	padding: 0 10px;
}

.nl-ctn-popup .nl-bottom .h-btn {
	height: 32px;
	border-radius: var(--radius-sm);
	font-size: 14px;
	color: #fff;
	border: 0;
	width: calc(100% - 10px);
}

.h-table-status {
	width: 68px;
	height: 26px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background-color: #36B24D;
}

.nl-ctn-popup .nl-bottom .h-btn.btn-cancel {
	color: #fff;
	background-color: #45496F;
}

.nl-ctn-popup .nl-bottom .h-btn.btn-submit {
	background-color: #438FFE;
}

/* ====== Shared Popup Button Styles ====== */
.popup-bottom {
	display: flex;
	justify-content: space-between;
	padding: 14px 24px;
	gap: 12px;
}

.popup-btn-cancel {
	flex: 1;
	padding: 10px;
	border: 1px solid #d1d5db;
	background: #fff;
	color: #374151;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s;
}

.popup-btn-cancel:hover {
	background: #f3f4f6;
}

.popup-btn-confirm {
	flex: 1;
	padding: 10px;
	border: none;
	background: #002c5f;
	color: #fff;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: opacity 0.15s;
}

.popup-btn-confirm:hover {
	opacity: 0.9;
}

.popup-btn-confirm:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.popup-btn-confirm.blue {
	background: #3182CE;
}

.popup-btn-confirm.danger {
	background: #E53E3E;
}

.h-grey-line {
	border: 0;
	border-bottom: 1px solid #E2E2E2;
	margin-bottom: 13px;
	margin-top: 3px;
}

.h-title-big {
	font-size: 16px;
	font-weight: 700;
}

.h-status-tbl {
	min-width: 90px;
	height: 24px;
	border-radius: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	color: #fff;
	text-align: center;
	padding: 4px 5px;
}

.h-status-tbl.yellow {
	background-color: #FAB006;
}

.h-status-tbl.blue {
	background-color: #54B7D3;
}

.h-status-tbl.sky {
	background-color: #1E91CF;
}

.h-status-tbl.green {
	background-color: #36B24D;
}

.h-status-tbl.gray {
	background-color: #6A6A6A;
}

.h-status-tbl.orange {
	background-color: #F07A29;
}

.h-status-tbl.sky-dark {
	background-color: #385EB5;
}

.h-status-tbl.dispatched {
	background-color: #2178E9;
}

.h-status-tbl.textblue {
	color: #54B7D3 !important;
}

.h-status-tbl.textorange {
	color: #F07A29 !important;
}

.h-status-tbl.textgreen {
	color: #36B24D !important;
}

.h-status-tbl.textgrey {
	color: #999BAD !important;
}

.h-order-status {
	border-bottom: 1px solid #E2E2E2;
	padding-bottom: 7px;
}

.h-order-status .h-order-id {
	font-weight: 700;
	font-size: 16px;
	position: relative;
}

.h-order-status .h-name {
	font-size: 14px;
	margin-left: 30px;
	color: #438FFE;
}

.h-order-status .h-order-id::after {
	content: "";
	position: absolute;
	height: 13px;
	background-color: #D2D4E2;
	width: 2px;
	right: -25px;
	top: 0;
	bottom: 0;
	margin: auto;
}

.h-order-status .h-second .h-status {
	padding: 6px 10px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #2A3652;
	border: 1px solid #2A3652;
	border-radius: 16px;
	background-color: #fff;
	font-size: 14px;

}

.h-order-status .h-second .h-status.active {
	padding: 6px 10px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background-color: #2A3652;
	border: 1px solid #2A3652;
	border-radius: 16px;
	font-size: 14px;
	gap: 5px;
}

.h-order-status .h-second .h-time {
	font-size: 14px;
	color: #696B75;
	margin-left: 8px;
}

/*
.h-order-status .h-second img {
	margin: 0 8px;
} /*

/* custom table*/
.h-table {
	border-top: 1px solid #E4E6EB;
	border-left: 1px solid #E4E6EB;
	/* overflow: hidden; */
}

.h-table .h-table-row {
	/* border-bottom: 1px solid #E4E6EB; */
	flex-direction: row;
	min-height: 44px;
	display: flex;
	position: relative;
	width: 100%;
}

.h-table .h-table-row .h-table-group {
	flex-direction: row;
	display: flex;
	/* border-right: 1px solid #E4E6EB; */
	position: relative;
}

/* .h-table .h-table-row .h-table-group .h-table-item::nth-child(odd) {
	background-color: #FAFAFA;
	border-right: 1px solid #E4E6EB;
	font-size: 14px;
	min-height: 44px;
	color: #222222;
}

.h-table .h-table-row .h-table-group .h-table-item::nth-child(odd) {
	border-right: 0;
	font-size: 14px;
	color: #35363D;
	font-weight: 400;
}
 */
.h-table .h-table-row .h-table-group .h-table-item {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 8px 10px;
	letter-spacing: -1px;
	/* word-break: break-all; */
	font-size: 13px;
	border-right: 1px solid #E4E6EB;
	border-bottom: 1px solid #E4E6EB;
	min-height: 44px;
	color: #35363D;
	font-family: 'Inter';
	gap: 10px;
}

.h-table-item.col-8.gap-form-control {
	gap: 0px !important;
}

.h-table-item.col-8 {
	gap: 0px !important;
}

.h-table-group .h-table-item:nth-child(odd) {
	background-color: #FAFAFA;
	color: #222222;
	/* width: 270px; */
	width: 180px;
	font-weight: 500;
}

.h-table-group .h-table-item:nth-child(even) {
	flex: 1;
}

.h-table .h-table-row.--2 {
	width: 50%;
}

/* .h-table .h-table-row:last-child {
	border-bottom: 0;
}

.h-table .h-table-row .h-table-group:last-child {
	border-right: 0;
} */

.h-form-control {
	border: 1px solid #E0E0E1;
	border-radius: var(--radius-sm);
	height: 28px;
	padding: 0 10px;
	font-size: 14px;
}

.h-search-owner-list {
	width: 320px;
	top: 42px;
}

.hao-popup-all {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	background-color: rgba(0, 0, 0, 0.7);
	z-index: 102;
}

.hao-popup-main {
	border-radius: 5px 5px 4px 4px !important;
	background-color: #fff;
	position: relative;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	/* max-height: calc(100vh - 200px); */
	overflow-x: hidden;

	z-index: 212;
}

.h-slider {
	position: relative;
}

.nh-layer {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-color: rgba(34, 34, 34, 0.42);
	z-index: 211;
	cursor: pointer;
	height: 100vh;
}

.h-close-img-preview {
	z-index: 100;
	position: absolute;
	top: -3px;
	right: 8px;
	color: black;
	font-size: 40px;
	font-weight: 400;
	cursor: pointer;
}

#img-task-path {
	width: 100%;
	object-fit: contain;
	background-color: #f3f3f3;
}

.h-close-img-preview:hover {
	color: #bbb;
	text-decoration: none;
}

.h-select-main {
	position: relative;
	text-align: left;
}

.h-select-main .h-custom-select {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 1px;
	z-index: 109;
}

.h-select-main .h-custom-select .h-select-item {
	border-radius: var(--radius-sm);
	position: relative;
	border: 1px solid #E2E2E2;
	box-shadow: 2px 1px 10px 0px #0000001A;
	background-color: #fff;
	padding: 8px 10px;
	width: 142px;
}

.h-select-main .h-custom-select .h-select-item .h-option {
	cursor: pointer;
	padding: 5px 0px 5px 6px;
	border-radius: 6px;
	margin-bottom: 1px;
	position: relative;
	font-size: 14px;
}

.h-select-main .h-custom-select .h-select-item .h-option.selected,
.h-select-main .h-custom-select .h-select-item .h-option:hover {
	background-color: #45496F;
	color: #fff;
}

.h-select-main .h-custom-select .h-select-item .h-option.selected::after {
	content: '';
	width: 10px;
	height: 5px;
	position: absolute;
	top: 7px;
	right: 10px;
	margin: auto;
	border: 2px solid #fff;
	border-top: none;
	border-right: none;
	transform: rotate(-45deg);
}

.h-new-order-main .h-left .h-list-item {
	border-radius: var(--radius-sm);
	background-color: #fff;
	border: 1px solid #E4E6EB;
	padding: 12px 14px;
	height: calc(100vh - 94px - 80px);
	overflow: auto;
}

.h-new-order-main .h-left .h-list-item .h-menu {
	width: 100%;
}

.h-new-order-main .h-left .h-list-item .h-menu .h-item {
	margin: 0;
	border-radius: var(--radius-sm);
	box-sizing: border-box;
	cursor: pointer;


}

/* .h-new-order-main .h-left .h-list-item .h-menu .h-item:nth-child(4n) {
	margin-right: 0;
  } */
.h-new-order-main .h-left .h-list-item .h-menu .h-header {
	font-size: 20px;
	font-weight: bold;
	border-bottom: 1px solid #E4E6EB;
	padding-bottom: 10px;
	margin-bottom: 14px;
}

.h-new-order-main .h-left .h-list-item .h-menu .h-body {
	display: grid;
	grid-template-columns: repeat(4, calc(100% / 4 - 5px));
	gap: 10px;
	padding-bottom: 20px;
}

.h-new-order-main .h-left .h-list-item .h-menu .h-item .h-img {
	position: relative;
	padding-bottom: calc(100% / 1.117);
}

.h-new-order-main .h-left .h-list-item .h-menu .h-item .h-img .h-mark {
	position: absolute;
	min-width: 54px;
	height: 28px;
	color: #fff;
	font-weight: 900;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-style: italic;
	top: 15px;
	left: 12px;
	padding: 0 12px;
	z-index: 2;
}

.h-new-order-main .h-left .h-list-item .h-menu .h-item .h-img .h-sold-out {
	position: absolute;
	background: #28292EDB;
	color: #fff;
	width: 100%;
	height: 100%;
	border-radius: var(--radius-sm) var(--radius-sm) 0 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}

.h-new-order-main .h-left .h-list-item .h-menu .h-item .h-img .h-sold-out .text {
	font-size: 16px;
	font-weight: bold;

}

.h-new-order-main .h-left .h-list-item .h-menu .h-item .h-img .h-mark.new {
	background-color: #3C4AE0;
}

.h-new-order-main .h-left .h-list-item .h-menu .h-item .h-img .h-mark.sale {
	background-color: #EA2C4D;
}

.h-new-order-main .h-left .h-list-item .h-menu .h-item .h-img .h-mark.best {
	background-color: #3EB3D0;
}

.h-new-order-main .h-left .h-list-item .h-menu .h-item .h-img img {
	object-fit: cover;
	width: 100%;
	height: 100%;
	border-radius: var(--radius-sm) var(--radius-sm) 0 0;
	border: 1px solid #E4E6EB;
	border-bottom: 0;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;

}

.h-new-order-main .h-left .h-list-item .h-menu .h-item .h-info {
	padding: 13px 0;
	border: 1px solid #E4E6EB;
	margin-top: -3px;
	border-top: 0;
	border-radius: 0 0 3px 3px;
}

.h-new-order-main .h-left .h-list-item .h-menu .h-item .h-info .h-name {
	font-size: 16px;
	margin-bottom: 8px;
	padding: 0 10px;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
}

.h-new-order-main .h-left .h-list-item .h-menu .h-item .h-info .h-price {
	font-size: 16px;
	font-weight: 600;
}

.mlr-16 {
	margin: 0 16px;
}

.h-new-order-main .h-left .h-list-item .h-menu .h-item .h-info .h-price.sale {
	font-size: 12px;
	font-weight: 400;
	text-decoration: line-through
}

.h-pointer {
	cursor: pointer;
}

#tab4 .sort-item-list,
#sortable-cart,
#sortable-multi-shop,
.h-column-grid {
	display: flex;
	flex-direction: column;
}

.h-new-order-main .h-left .h-list-item .h-menu .h-item .h-info .has-sale {
	width: 100%;
	justify-content: space-between;
	padding: 0 10px;
	align-items: center;
}

.h-new-order-main .h-right {
	background-color: #fff;
	border-radius: var(--radius-sm);
	border: 1px solid #E4E6EB;
	padding: 12px 14px;
	margin: 20px 0 0 20px;
	height: calc(100vh - 94px);
	overflow: auto;
	position: relative;
	display: flex;
	flex-direction: column;
	max-width: 528px;
}

.h-new-order-main .h-right .h-text-name {
	font-size: 20px;
}

.h-new-order-main .h-right .h-circle-back {
	position: unset;
}

.h-tab-cate {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	margin-top: 20px;
	margin-bottom: 14px;
}

.h-tab-cate .h-cate-item {
	height: 32px;
	background-color: #F2F3F7;
	color: #1C1E23;
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.h-tab-cate .h-cate-item.active {
	background-color: var(--color-sidebar);
	color: #fff;
}

.h-tab-cate .h-cate-item:first-child {
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;

}

.h-tab-cate .h-cate-item:not(:first-child) {
	border-left: none;
}

.h-tab-cate .h-cate-item:not(:last-child) {
	border-right: 1px solid #D9D9D9;
}

.h-tab-cate .h-cate-item:last-child {
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;

}

.h-new-order-main .h-right .h-box {
	min-height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #E4E6EB;
	font-size: 14px;
	border-radius: var(--radius-sm);
	cursor: pointer;
	flex-direction: column;
	padding: 0 10px;
}

.h-new-order-main .h-right .h-selected-item {
	height: calc(100vh - 450px);
	min-height: 450px;
	border-radius: var(--radius-sm);
	border: 1px solid #E4E6EB;
	padding: 12px;
	position: relative;
	overflow-y: auto;
}

.h-new-order-main .h-right .h-selected-item::-webkit-scrollbar {
	width: 6px;
}

.h-new-order-main .h-right .h-selected-item::-webkit-scrollbar-thumb {
	background: #c1c1c1;
	border-radius: 4px;
}

.h-new-order-main .h-right .h-selected-item::-webkit-scrollbar-track {
	background: #f1f1f1;
}

.h-option-row {
	font-size: 13px;
	color: #666;
	padding-left: 10px;
	border-left: 2px solid #ddd;
	margin-top: 4px;
	display: flex;
	justify-content: space-between;
}

.h-option-price {
	color: #999;
	font-size: 12px;
}


.h-new-order-main .h-right .h-selected-item .h-item-info {
	border-bottom: 1px solid #E4E6EB;
	padding: 12px 0;
}

.h-new-order-main .h-right .h-text-id {
	font-weight: bold;
	font-size: 16px;
}

.h-new-order-main .h-right .h-clear {
	height: 28px;
	border: 0;
	background-color: #45496F;
	color: #fff;
	font-size: 14px;
	border-radius: var(--radius-sm);
	padding: 0 10px;
}

.h-new-order-main .h-right .h-selected-item .h-name {
	font-size: 16px;


}

.h-new-order-main .h-right .h-selected-item .h-serving {
	font-size: 14px;
	color: #7A7B80;
	margin-top: 6px;
}

.h-new-order-main .h-right .h-selected-item .h-min-max {
	min-width: 92px;
	width: 92px;
	border: 1px solid #A4A4A5;
	height: 32px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 8px;
	border-radius: 6px;
}

.h-new-order-main .h-right .h-selected-item .h-min-max .h-number {
	font-size: 20px;

}

.h-new-order-main .h-right .h-selected-item .h-price {
	font-size: 16px;
	word-break: break-all;
}

.h-new-order-main .h-right .h-selected-item .h-empty {
	position: absolute;
	font-size: 14px;
	color: #9FA0A2;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.h-new-order-main .h-right .h-price2 {
	font-size: 14px;
	margin-bottom: 6px;
}

.h-new-order-main .h-right .h-amount {
	font-size: 14px;
	font-weight: 700;
}

.h-new-order-main .h-right .h-selected-item .h-item-info .h-delete {
	padding-top: 3px;
}

.h-new-order-main .h-right button {
	height: 28px;
	border: 0;
	border-radius: var(--radius-sm);
	color: #fff;
	padding: 0 10px !important;
	min-width: fit-content;
}

.h-new-order-main .h-right .h-btn-print {
	width: 42px;
	background-color: #45496F;
}

.h-new-order-main .h-right .h-btn-submit {
	background-color: #438FFE
}

.h-new-order-main .h-right .h-btn-get {
	background-color: #45496F
}

.h-new-order-main .h-right .h-btn-back {
	background-color: #fff;
	border: 1px solid #438FFE;
	color: #438FFE;
}

.h-new-order-main .h-active-search {
	width: 500px;
}

.h-new-order-main .h-active-search input {
	border-radius: var(--radius-sm) 0 0 var(--radius-sm);
	border-right: 0;
}

.h-new-order-main .h-active-search .h-btn-search {
	border-radius: 0 3px 3px 0 !important;
}

.h-select-store {
	width: 100%;
	border: 1px solid #E4E6EB;
	border-radius: 6px;
	padding: 14px 18px 14px 14px;
	position: relative;
	background-color: #fff;
	margin-bottom: 10px;
	cursor: pointer;
	flex-wrap: nowrap;
}

.h-select-store:after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 14px;
	margin: auto;
	height: 7px;
	width: 7px;
	border-left: 1px solid #333333;
	border-bottom: 1px solid #333333;
	transform: rotate(225deg);
}

.h-select-store img {
	margin-right: 12px;
}

.h-select-store .h-name {
	font-size: 14px;
	color: #282828;
}

.h-select-store .h-address {
	font-size: 13px;
	color: #7A7B80;
}

.h-select-store .h-circle-color {
	border-radius: 50%;
	width: 43px;
	height: 43px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 14px;
}

.h-select-store.active {
	border-color: #438FFE;
}


.h-select-store .h-circle-color.cash {
	background-color: #E9EBFA;
}

.h-select-store .h-circle-color.credit {
	background-color: #E8FFE9;
}

.h-select-store .h-circle-color.phone {
	background-color: #FFF2EE;
}

.h-font-16 {
	font-size: 16px;
}

.h-popup-item-detail .h-info {}

.h-popup-item-detail .h-info div:first-child {
	font-size: 14px;
	margin-bottom: 5px;
}

.h-popup-item-detail .h-info div:last-child {
	font-size: 14px;
	color: #7A7B80;
}

.h-popup-item-detail .h-price {
	font-size: 14px;
}

.h-popup-item-detail .h-line {
	border-bottom: 1px solid #E2E2E2;
	margin: 10px 0;
}

.h-popup-item-detail .nl-custom-radio .nl-rad {
	top: 4px;
}

.h-popup-item-detail .nl-custom-radio .nl-text,
.h-popup-item-detail .nl-custom-check .h-text {
	font-size: 14px;
}

.h-popup-item-detail .h-title {
	font-weight: bold;
	font-size: 14px;
	margin-bottom: 6px;
	display: block;
}

.h-popup-item-detail .h-min-max {
	width: 100%;
	height: 40px;
	border-radius: var(--radius-sm);
	border: 1px solid #7A7B80;
	padding: 0px 10px;
}

.h-popup-item-detail .h-min-max .h-number {
	font-size: 14px;
}

.h-popup-item-detail .nl-custom-check {
	margin-bottom: 10px;
}

.h-select-main .h-notifi {
	width: 400px;
	height: 440px;
	overflow: auto;
	border-radius: var(--radius-sm);
	box-shadow: 0px 0px 8px 5px #0000000D;
	background-color: #fff;
	z-index: 109;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 1px;
	padding: 16px;
}

.h-notifi .h-header {
	padding-bottom: 10px;
	border-bottom: 1px solid #F6F6F6;
}

.h-notifi .h-header .h-left {
	font-size: 15px;
	color: #222222;
	font-weight: 700;
}

.h-notifi .h-header .h-right {
	font-size: 14px;
	color: #438FFE;
	font-weight: 400;
	cursor: pointer;
}

.h-notifi .h-body {
	padding-top: 16px;
}

.h-notifi .h-body .h-noti {
	border: 1px solid #E4E6EB;
	border-radius: 6px;
	width: 100%;
	padding: 10px 12px;

}

.h-notifi .h-body .h-noti:not(:last-child) {
	margin-bottom: 10px;
}

.h-notifi .h-body .h-noti.not-read {
	background-color: #F6F8FF;
}

.h-notifi .h-body .h-noti .h-header-noti {
	padding-bottom: 8px;
	border-bottom: 1px solid #F4F4F4;
}

.h-notifi .h-body .h-noti .h-header-noti .h-title {
	font-size: 14px;
	color: #222222;
	font-weight: 700;
}

.h-notifi .h-body .h-noti .h-header-noti .h-time {
	font-size: 12px;
	color: #9FA0A2;
	font-weight: 400;
}

.h-notifi .h-body .h-noti .h-body-noti {
	padding-top: 8px;
}

.h-notifi .h-body .h-noti .h-body-noti .h-content-noti {
	font-size: 14px;
}

.h-notifi .h-translation-action-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid #438FFE;
	border-radius: 6px;
	background-color: #F6F8FF;
	color: #185ABC;
	font-weight: 600;
	line-height: 1.5;
	text-decoration: none;
	white-space: normal;
	overflow-wrap: anywhere;
	cursor: pointer;
}

.h-notifi .h-translation-action-link:hover {
	background-color: #E8F0FE;
	text-decoration: underline;
}

.h-notifi .h-translation-action-link:focus-visible {
	outline: 2px solid #185ABC;
	outline-offset: 2px;
}

.h-app-decoration .h-left .h-header {
	padding: 0 0 6px 0;
	font-size: 16px;
	font-weight: 700;
	border-bottom: 1px solid #E4E6EB;
}

.h-app-decoration .h-left .h-list-item .h-body .h-left-part {
	padding: 14px 10px 0 0;
	border-right: 1px solid #E4E6EB;
	min-height: 750px;
}

.h-app-decoration .h-left .h-list-item .h-body .h-left-part .h-item,
.h-item-console {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 156px;
	height: 35px;
	border: 1px solid var(--color-sidebar);
	border-radius: 6px;
	font-size: 16px;
	cursor: pointer;
	margin-bottom: 10px;
	color: var(--color-sidebar);

}

.h-app-decoration .h-left .h-list-item .h-body .h-left-part .h-item.active,
.h-item-console.active {
	background-color: var(--color-sidebar);
	color: #fff;
}

.h-app-decoration .h-left .h-list-item .h-body .h-right-part {
	width: calc(100% - 207px);
	padding-top: 12px;
}

.h-app-decoration .h-left .h-list-item .h-body .h-right-part .h-text-top {
	font-size: 16px;
}

.h-app-decoration .h-right .h-head-text {
	padding-bottom: 6px;
	border-bottom: 1px solid #E4E6EB;
	margin-bottom: 12px;
}

.h-app-decoration .h-right .h-head-text:nth-child(2n) {
	padding-top: 10px;
}

.h-app-decoration .h-right .h-head-text .h-title {
	font-size: 16px;
	font-weight: bold;
	margin-right: 10px;
}

.h-app-decoration .h-right .h-head-text .h-sub-text {
	font-style: italic;
	font-size: 14px;
	font-weight: normal;
	margin-bottom: 0;
}

.h-app-decoration .h-right .h-color-picker-container {
	position: relative;
	width: 50px;
	height: 50px;
}

.h-app-decoration .h-right .h-color-picker-container .h-color-display {
	width: 100%;
	height: 100%;
	border-radius: 6px;
	background-color: transparent;
	border: 1px solid #ccc;
	cursor: pointer;
}

.h-app-decoration .h-right .h-color-picker-container .h-color-picker {
	position: absolute;
	top: 40%;
	left: 0;
	z-index: 10;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease-in-out;
}

.nl-top-title img {
	/* 	width: 20px;
	height: 20px; */
	object-fit: cover;
}

.h-app-decoration .h-right .h-color-picker-container.active .h-color-picker {
	opacity: 1;
	pointer-events: auto;
}

.h-app-decoration .h-right .h-upload-image {
	width: 113px;
	height: 113px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #EEF0F6;
	border-radius: var(--radius-md);
	position: relative;
}

.nl-top-title .h-app-decoration .h-right .h-sub-text {
	margin-bottom: 6px;
}

.h-app-decoration .h-right .h-pick-icon-img .h-icon-img {
	width: 50px;
	height: 50px;
	border-radius: 6px;
	background-color: transparent;
	border: 1px solid #ccc;
	cursor: pointer;
}

.h-app-decoration .h-right .h-pick-icon-img .h-icon-img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.h-tab-decoration .h-tab-item {
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #E7E7E7;
	font-size: 20px;
	cursor: pointer;
	color: #707070;
}

.h-tab-decoration .h-tab-item.active {
	background-color: var(--color-sidebar);
	color: #fff;
}

.h-tab-decoration .h-tab-item:first-child {
	border-radius: 6px 0 0 6px;
}

.h-tab-decoration .h-tab-item:last-child {
	border-radius: 0 6px 6px 0;
}

.h-icon-list {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 5px;
}

.h-icon-list .h-icon-list-item {
	width: 110px;
	height: 110px;
	border: 1px solid #E4E6EB;
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	overflow: hidden;
}

.h-icon-list .h-icon-list-item.active {
	border: 2px solid blue;
}

.h-upload-area.drag-over {
	border-color: #007bff;
	background-color: #f0f8ff;
}

.h-icon-list .h-icon-list-item img {
	width: 100%;
	height: 100%;
}

#tab11 {
	position: absolute;
}

.h-tab13 {
	position: relative;
	margin: 0 50px;
	height: 740px;
}

#h-phone-image-home,
#h-phone-screenshot,
.h-phone-app-console {
	display: grid;
	grid-template-columns: 1fr 1fr;
	position: relative;
}

.h-img-upload {
	width: 100%;
	height: 100%;
	/* object-fit:contain; */
	border-radius: var(--radius-md);
}

#h-phone-image-home .phone-2,
.h-phone-app-console .phone-2 {
	width: 360px;
	height: 98%;
}

.h-height-spalsh {
	min-height: 690px;
}

#h-phone-image-home .h-app-icon-upload,
.h-phone-app-console .h-app-icon-upload {
	position: absolute;
	top: 368px;
	left: 45px;
}

#h-phone-image-home .h-app-icon-upload .h-app-logo,
.h-phone-app-console .h-app-icon-upload .h-app-logo {
	width: 52px;
	height: 52px;
	border-radius: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.h-form-input {
	border: 1px solid #E4E6EB !important;
	border-radius: var(--radius-sm) !important;
	height: 32px !important;
	padding: 0 10px !important;
	font-size: 0.875rem !important;
	line-height: 32px;
}

.h-form-input[readonly] {
	/* background-color: #EBEBEB; */
	background-color: light-dark(rgba(239, 239, 239, 0.3), rgba(59, 59, 59, 0.3));
}

#h-phone-image-home .h-app-icon-upload .h-app-logo img,
.h-phone-app-console .h-app-icon-upload .h-app-logo img {
	width: 100%;
	height: 100%;
	border-radius: 20px;
	object-fit: cover;
}

#h-phone-image-home .h-app-icon-upload .h-icon,
.h-phone-app-console .h-app-icon-upload .h-icon {
	color: #fff;
	font-size: 12px;
	margin: 5px 0 0 0;
	text-align: center;
}

#h-phone-image-home .h-splash-screen-upload,
.h-phone-app-console .h-splash-screen-upload {
	position: absolute;
	right: -707px;
	width: 318px;
	top: 15px;
}

#h-phone-image-home .h-splash-screen-upload img,
.h-phone-app-console .h-splash-screen-upload img {
	border-radius: 42px;
	width: 100%;
	height: 100%;
}

.h-sub-text-app {
	font-style: italic;
	margin-top: 5px;
}

.h-custom-check {
	display: flex;
}

.h-custom-check .h-cb {
	position: relative;
	top: 0;
	height: 20px;
	width: 20px;
	border-radius: var(--radius-sm);
	display: inline-block;
	border: 1px solid #E4E6EB;
	margin-right: 9px;
	background-color: #fff;
	cursor: pointer;
}

.h-custom-check .h-cb::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	height: 8px;
	width: 13px;
	border-left: 2px solid transparent;
	border-bottom: 2px solid transparent;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.h-custom-check input:checked~.h-cb {
	border-color: #438FFE;
	background-color: #438FFE;
}

.h-custom-check input:checked~.h-cb::after {
	border-left-color: #fff;
	border-bottom-color: #fff;
}

.h-pointer {
	cursor: pointer;
}

.nl-popup .h-upload-image {
	width: 100px;
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #EEF0F6;
	border-radius: var(--radius-md);
	position: relative;
	margin-top: 10px;
}

.nl-popup .h-img-upload {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: var(--radius-md);
}

.nh-table-view .h-footer-table {
	border-top: 1px solid #E4E6EB;
	padding-top: 7px;
}

.nh-table-view .h-footer-table .text-right {
	font-size: 16px;
	font-weight: bold;
}

.h-text-review {
	font-size: 14px;
}

.h-empty-table-list {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 650px;
	background: #fff;
	font-size: 16px;
}

.h-upload-area {
	width: 100%;
	height: 140px;
	border: 1px dashed #a19f9f;
	background: #f9f9f9 url(../mobile_img/upload_img_new.png) no-repeat center !important;
	position: relative;
	z-index: 8;
	margin-bottom: 10px;
}

.h-app-decoration .h-upload-area {
	background: #f9f9f9 url(../mobile_img/upload_img_new.png) no-repeat center top 36px;
}

.h-upload-text {
	text-align: center;
	top: 90px;
	position: absolute;
	left: 0;
	right: 0;
	color: #484848;
}

.h-upload-area.fix-width-44pc {
	width: 44% !important;
}

.h-main-upload {
	position: relative;
}

.h-main-upload .h-upload-text {
	position: absolute;
	/*left: 50%;
	transform: translateX(-50%);*/
	bottom: 25px;
	z-index: 9;
	text-align: center;
}

.h-item-option {
	margin: 0 0 20px 0;
}

.h-item-option .h-option-child {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-bottom: 1px solid gray;
	padding: 15px 0;
}

.h-item-option .h-option-child .h-option-process {
	display: flex;
	justify-content: end;
	gap: 5px;
}

.h-item-option:has(.h-option-child:nth-child(1):nth-last-child(1)) .h-option-child {
	border-bottom: none;
}

/* Bỏ viền của div con cuối cùng khi có nhiều hơn 1 div con */
.h-item-option .h-option-child:last-child {
	border-bottom: none;
}

.nl-row-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

.nl-row-start {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.nl-row-end {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.f-size-14 {
	font-size: 14px;
}

.h-choose-icon {
	position: absolute;
	z-index: 10;
	display: none;
}

.h-choose-icon .h-main-choose-icon {
	position: static;
	height: 200px;
	overflow: auto;
}

.h-choose-icon .h-main-choose-icon .h-icon-item {
	position: relative;
	box-shadow: 2px 1px 10px 0px #0000001A;
	background-color: #fff;
	padding: 8px 10px;
	width: 50px;
	height: 50px;
	overflow: hidden;
	cursor: pointer;
}

.h-choose-icon .h-main-choose-icon .h-icon-item.h-icon-default {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #142747;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.1;
	text-align: center;
}

.nl-top-title .best-shop,
.nl-top-title .new-shop {
	margin: 0 6px;
	mix-blend-mode: multiply;
	width: 26px;
	height: 26px;
	object-fit: cover;
}

.h-choose-icon .h-main-choose-icon .h-icon-item:hover {
	background-color: #e9e9e9;
}

.h-choose-icon .h-main-choose-icon .h-icon-item img {
	width: 100%;
	height: 100%;
	/*     object-fit: cover; */
}

.nl-btn-show-drag {
	border: 0;
	background-color: #438FFE;
	color: #fff;
	font-size: 14px;
	padding: 0 20px;
	border-radius: var(--radius-sm);
}

.h-shop-regist .h-title-main {
	font-weight: bold;
	font-size: 18px !important;
	color: #222222 !important;
	margin: 0 6px;
	mix-blend-mode: multiply;
	width: 26px;
	height: 26px;
	object-fit: cover;
}

.h-choose-icon .h-main-choose-icon .h-icon-item:hover {
	background-color: #e9e9e9;
}

.h-choose-icon .h-main-choose-icon .h-icon-item img {
	width: 100%;
	height: 100%;
	/*     object-fit: cover; */
}

.nl-btn-show-drag {
	border: 0;
	background-color: #438FFE;
	color: #fff;
	font-size: 14px;
	padding: 0 20px;
	border-radius: var(--radius-sm);
}

.h-shop-regist .h-title-main {
	font-weight: bold;
	font-size: 18px !important;
	color: #222222 !important;
}

.h-btn-export {
	background-color: #4e6487 !important;
	border-color: #4e6487 !important;
	color: #fff !important;
	transition: all 0.2s ease;
}

.h-btn-export:hover {
	background-color: #3b4b66 !important;
	border-color: #3b4b66 !important;
}

.h-app-decoration .h-right .h-pick-icon-img .h-icon-img {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.h-app-decoration .h-right .h-pick-icon-img .h-icon-img .h-default-text {
	font-size: 11px;
	color: #999;
	position: absolute;
	z-index: 0;
}

.h-app-decoration .h-right .h-pick-icon-img .h-icon-img img {
	position: relative;
	z-index: 1;
	background-color: #fff;
}

.h-app-decoration .h-right .h-pick-icon-img .h-icon-img:has(img.h-img:not(.h-hidden)) .h-default-text {
	display: none;
}

/* Area Tabs Wrapper */
.h-area-wrapper {
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
}

.h-area-wrapper-inner {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between !important;
	gap: 8px;
}

.h-area-tabs-container {
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	min-width: 0;
	gap: 16px;
}

.h-area-tabs-scroll {
	overflow-x: auto;
	flex-wrap: nowrap !important;
	flex: 1 1 auto;
	max-width: none;
	padding-bottom: 0;
	scrollbar-width: thin;
	scrollbar-color: #cbd5e1 transparent;
}

.h-area-action-btn {
	flex-shrink: 0;
	margin-left: 0 !important;
	white-space: nowrap;
}

.h-area-bulk-actions {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: 8px;
}

.h-area-tabs-scroll::-webkit-scrollbar {
	height: 6px;
}

.h-area-tabs-scroll::-webkit-scrollbar-track {
	background: transparent;
}

.h-area-tabs-scroll::-webkit-scrollbar-thumb {
	background-color: #cbd5e1;
	border-radius: 10px;
}

/* ====== Custom SweetAlert2 Admin Confirm Modal ====== */
/* Pixel-matched to .nh-popup-board / .nl-ctn-popup / popup_ask_pw design */

.admin-swal-popup {
	width: 444px !important;
	max-width: 90vw !important;
	background-color: #fff !important;
	box-shadow: 0px 4px 10px #0000002E !important;
	border-radius: 7px !important;
	border: 1px solid #CDCDCD !important;
	padding: 0 !important;
	color: #222222 !important;
	font-family: 'Wanted Sans Variable', 'Wanted Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
}

/* Hide default SweetAlert2 icon */
.admin-swal-popup .swal2-icon {
	display: none !important;
}

/* ---- Header ---- */
/* Mirrors: .nh-border-title { padding-top:25px; padding-left/right:14px } */
.admin-swal-popup .swal2-header,
.admin-swal-header {
	padding: 0 !important;
	margin: 0 !important;
	display: block !important;
	position: relative !important;
	background-color: #fff !important;
	border-radius: 7px 7px 0 0 !important;
}

/* ---- Title ---- */
/* Mirrors: .nl-head .h-title { font-size:16px; font-weight:600; margin-bottom:17px; margin-top:10px } */
.admin-swal-title {
	font-size: 18px !important;
	font-weight: 600 !important;
	color: #222 !important;
	text-align: center !important;
	margin: 0 !important;
	padding: 35px 14px 35px 14px !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

/* ---- Close button ---- */
/* Mirrors: .nh-border-title .nl-btn-close { position:absolute; right:16px; top:11px; font-weight:600; font-size:15px } */
.admin-swal-close {
	position: absolute !important;
	right: 16px !important;
	top: 6px !important;
	font-size: 23px !important;
	font-weight: 600 !important;
	color: #222 !important;
	border: 0 !important;
	background-color: transparent !important;
	box-shadow: none !important;
	outline: none !important;
	padding: 0 !important;
	margin: 0 !important;
	cursor: pointer !important;
	opacity: 0.6 !important;
	z-index: 1 !important;
	line-height: 1 !important;
	width: auto !important;
	height: auto !important;
}

.admin-swal-close:hover {
	opacity: 1 !important;
	color: #222 !important;
}

.admin-swal-close:focus {
	box-shadow: none !important;
	outline: none !important;
}

/* ---- Grey divider line under header ---- */
/* Mirrors: .h-grey-line { border-bottom:1px solid #E2E2E2; margin-bottom:13px; margin-top:3px } */
.admin-swal-popup .swal2-header::after,
.admin-swal-header::after {
	content: '' !important;
	display: block !important;
	border: 0 !important;
	border-bottom: 1px solid #E2E2E2 !important;
	margin: 17px 14px 0 14px !important;
}

/* ---- Content area ---- */
/* Mirrors: .nl-body-ask-pw { padding: 14px 14px 0 14px } */
.admin-swal-content {
	padding: 18px 14px 34px 14px !important;
	text-align: left !important;
	font-size: 14px !important;
	color: #222 !important;
	margin: 0 !important;
	line-height: 1.5 !important;
}

/* When no body text, just add spacing */
.admin-swal-content:empty {
	padding: 10px 0 0 0 !important;
}

/* ---- Bottom buttons ---- */
/* Mirrors: .nl-ctn-popup .nl-bottom { padding: 0 12px 20px 12px } */
.admin-swal-actions {
	padding: 0 20px 20px 20px !important;
	margin: 0 !important;
	display: flex !important;
	flex-wrap: nowrap !important;
	justify-content: space-between !important;
	gap: 10px !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

/* Mirrors: .nl-ctn-popup .nl-bottom .h-btn { height:32px; border-radius:var(--radius-sm); font-size:14px; color:#fff; border:0; width:calc(100%-10px) } */
.admin-swal-actions .h-btn {
	flex: 1 !important;
	height: 36px !important;
	border-radius: var(--radius-sm, 4px) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	border: 0 !important;
	cursor: pointer !important;
	color: #fff !important;
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	margin: 0 !important;
	padding: 0 20px !important;
	transition: opacity 0.15s !important;
	min-width: 0 !important;
}

/* Mirrors: .nl-ctn-popup .nl-bottom .h-btn.btn-cancel { color:#fff; background-color:#45496F } */
.admin-swal-actions .btn-cancel {
	background-color: #45496F !important;
}

.admin-swal-actions .btn-cancel:hover {
	opacity: 0.85 !important;
}

/* Mirrors: .nl-ctn-popup .nl-bottom .h-btn.btn-submit { background-color:#438FFE } */
.admin-swal-actions .btn-submit {
	background-color: #438FFE !important;
}

.admin-swal-actions .btn-submit:hover {
	opacity: 0.85 !important;
}

/* Admin header language selector: SVGs must not render at intrinsic size. */
.admin-language-trigger .admin-language-flag,
.admin-language-menu .admin-language-flag {
	width: 22px;
	height: 22px;
	min-width: 22px;
	object-fit: cover;
	border-radius: 50%;
}

.admin-language-menu .h-custom-select .h-select-item {
	width: 190px;
	max-height: min(70vh, 520px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.admin-language-menu .h-custom-select .h-select-item .h-option {
	display: flex;
	align-items: center;
	min-height: 34px;
	padding: 6px 28px 6px 8px;
	white-space: nowrap;
}