/*
Template Name: Grofarweb - Online Grocery Supermarket HTML Template
Author: SenMS
Author URI: https://facebook.com/senms9x
Version: 1.0
*/
/*
- Extra
- Detail Page
- Cart Page
- List Page
- Landing Page
- Bootstrap custom
- Filter
- Dark Mode
*/

/* Body */
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ============================================
   ASMO MARKET DESIGN SYSTEM - CSS VARIABLES
   ============================================ */
:root {
	/* Primary Colors - Coral/Orange Gradient */
	--color-primary-start: #E53935;
	--color-primary-end: #FF6B35;
	--color-primary: #FC5332;
	--color-primary-dark: #C62828;
	--color-primary-light: #FF8A65;
	
	/* Background Colors */
	--bg-primary: #FFFFFF;
	--bg-secondary: #F8F9FA;
	--bg-tertiary: #F0F2F5;
	--bg-gradient-red: linear-gradient(135deg, #E53935 0%, #FF6B35 100%);
	--bg-gradient-orange: linear-gradient(135deg, #FF6B35 0%, #FF8A65 100%);
	--bg-pattern: repeating-linear-gradient(
		45deg,
		transparent,
		transparent 10px,
		rgba(229, 57, 53, 0.03) 10px,
		rgba(229, 57, 53, 0.03) 20px
	);
	
	/* Text Colors */
	--text-primary: #212529;
	--text-secondary: #6C757D;
	--text-muted: #ADB5BD;
	--text-white: #FFFFFF;
	--text-on-gradient: #FFFFFF;
	
	/* Border & Shadow */
	--border-radius-sm: 8px;
	--border-radius-md: 12px;
	--border-radius-lg: 16px;
	--border-radius-xl: 20px;
	--border-radius-full: 50px;
	
	--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
	--shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12);
	--shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);
	--shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.18);
	--shadow-card: 0 2px 8px rgba(0, 0, 0, 0.1);
	
	/* Spacing */
	--spacing-xs: 4px;
	--spacing-sm: 8px;
	--spacing-md: 16px;
	--spacing-lg: 24px;
	--spacing-xl: 32px;
	
	/* Typography */
	--font-family: 'Inter', 'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-size-xs: 11px;
	--font-size-sm: 12px;
	--font-size-base: 14px;
	--font-size-md: 16px;
	--font-size-lg: 18px;
	--font-size-xl: 20px;
	--font-size-2xl: 24px;
	--font-size-3xl: 32px;
	
	--font-weight-light: 300;
	--font-weight-normal: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	
	/* Transitions */
	--transition-fast: 0.15s ease;
	--transition-base: 0.3s ease;
	--transition-slow: 0.5s ease;
	
	/* Z-index layers */
	--z-base: 1;
	--z-dropdown: 100;
	--z-sticky: 200;
	--z-fixed: 300;
	--z-modal: 400;
	--z-tooltip: 500;
}

body {
	font-family: var(--font-family);
	font-size: var(--font-size-base);
	background-color: var(--bg-tertiary);
	color: #000000;
	line-height: 1.6;
}

::-webkit-scrollbar-button {
	width: 0;
	height: 0;
	display: none;
}

::-webkit-scrollbar-corner {
	background-color: transparent;
}

::-webkit-scrollbar-thumb {
	height: 6px;
	border: 4px solid transparent;
	background-clip: padding-box;
	-webkit-border-radius: 7px;
	border-radius: 7px;
	background-color: rgba(0, 0, 0, .15);
	-webkit-box-shadow: inset -1px -1px 0 rgba(0, 0, 0, .05), inset 1px 1px 0 rgba(0, 0, 0, .05);
	box-shadow: inset -1px -1px 0 rgba(0, 0, 0, .05), inset 1px 1px 0 rgba(0, 0, 0, .05);
}

::-webkit-scrollbar {
	width: 4px;
	background-color: #ffffff;
}

::-webkit-scrollbar-thumb {
	height: 50px;
	background: hsla(0, 0%, 53.3%, 0.4);
}

.schedule .nav-link {
	padding: 18px 8px;
	text-align: center;
	line-height: 16px;
	font-size: 10px;
	border: none;
	color: #abaeb1 !important;
	position: relative;
}

.schedule .nav-link p.mb-0.font-weight-bold {
	font-size: 13px;
}

.schedule .nav-link.active,
.schedule .nav-link:focus {
	color: #28a744 !important;
}

.schedule .nav-tabs {
	border-bottom: 1px solid #e2e4e6;
}

.schedule .nav-item {
	margin: 0px;
}

.schedule .nav-link.active:after,
.schedule .nav-link:focus:after,
.schedule .nav-link:hover:after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 2px;
	background: #28a743;
	bottom: -1px;
}

/* Header */
.osahan-location-drop .small {
	font-size: 11px;
}

.osahan-header .dropdown-toggle {
	height: 74px;
	display: flex;
	align-items: center;
}

.osahan-header .dropdown-menu {
	min-width: 260px;
}

.osahan-location-drop {
	line-height: 16px;
}

.osahan-location-drop:after,
.not-drop:after {
	display: none;
}

.top-profile-drop {
	min-width: auto !important;
}

.p-4.profile.text-center.border-bottom img {
	height: 80px;
}


/* Extra */
.categories-slider .c-it {
	margin: 0 .5rem;
}

.categories-slider,
.promo-slider,
.trending-slider {
	margin: 0 -4px;
}

.d-none {
	display: none;
}

.dropdown-menu {
	background: #ffffff;
	border-radius: .40rem !important;
	margin: 0;
	padding: 6px;
	border: 1px solid #ffffff;
	box-shadow: 0px 6px 10px rgba(0, 0, 0, .1) !important;
}

.modal-content {
	border-radius: .40rem !important;
	border: none;
	overflow: hidden;
}

.modal.fade.right-modal {
	display: block;
	opacity: unset;
	right: -400px;
	left: auto;
	width: 400px;
	-webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
	-moz-transition: opacity 0.3s linear, right 0.3s ease-out;
	-o-transition: opacity 0.3s linear, right 0.3s ease-out;
	transition: opacity 0.3s linear, right 0.3s ease-out;
}

.modal.right-modal.fade .modal-dialog {
	-webkit-transform: translate3d(0%, 0, 0);
	-ms-transform: translate3d(0%, 0, 0);
	-o-transform: translate3d(0%, 0, 0);
	transform: translate3d(0%, 0, 0);
}

.modal.fade.right-modal.show {
	right: 0px !important;
	opacity: unset;
}

.right-modal .modal-dialog {
	margin: 0 0 0 auto;
	left: auto;
	max-width: 400px;
	-webkit-transform: translate3d(0%, 0, 0);
	-ms-transform: translate3d(0%, 0, 0);
	-o-transform: translate3d(0%, 0, 0);
	transform: translate3d(0%, 0, 0);
}

.right-modal .modal-dialog .modal-content {
	border-radius: 0px !important;
	margin: 0px 0px 0px 0px;
}

.right-modal .modal-dialog .modal-content .modal-body {
	height: calc(100vh - 109px);
}

.dropdown:hover .dropdown-menu {
	display: block;
	visibility: visible;
	opacity: 1;
	transform: translateY(0px);
	transition: .5s ease all;
}

.dropdown-menu {
	display: block;
	visibility: hidden;
	opacity: 0;
	transform: translateY(50px);
	transition: .5s ease all;
}

.dropdown-menu.show {
	display: block;
	visibility: visible;
	opacity: 1;
	transform: translateY(0px);
	transition: .5s ease all;
}

.dropdown-item {
	padding: 6px 10px;
}

.dropdown .dropdown-menu,
.dropdown-item {
	font-size: 13px;
	border-radius: 6px;
	margin: 1px 0;
}

.col,
.col-1,
.col-10,
.col-11,
.col-12,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-auto,
.col-lg,
.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-auto,
.col-md,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-auto,
.col-sm,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-auto,
.col-xl,
.col-xl-1,
.col-xl-10,
.col-xl-11,
.col-xl-12,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-auto {
	position: relative;
	width: 100%;
	padding-right: 8px;
	padding-left: 8px;
}

.row {
	margin-right: -8px;
	margin-left: -8px;
}

.small,
small {
	font-size: 12px;
}

.account-setup video {
	width: 100%;
	position: absolute;
	z-index: -1;
	bottom: 0;
}

.btn-light {
	color: #212529 !important;
}

.back-page {
	font-size: 19px;
	vertical-align: bottom;
}

div,
a {
	outline: none !important;
	text-decoration: none !important;
}

a:hover {
	color: #28a744;
}

.osahan-icofont {
	padding: 6px;
	background: black;
	border-radius: 50px;
	font-size: 18px;
	color: #fff;
	margin-right: 8px;
}

/* Detail Page */
.list-card-osahan-2 .img {
	width: 100%;
	border-radius: 5px;
	background: #fff;
	margin-bottom: 15px;
}

.pd-f a {
	height: 59px;
}

.rating-stars .icofont-star {
	font-size: 10px;
	background: #000000;
	color: #fff;
	padding: 2px;
	text-shadow: 0px 0px 1px #d2b128;
	border-radius: 5px;
}

.osahan-radio .btn {
	border-radius: 23px !important;
	font-size: 12px;
	margin: 0 4px 0 0px;
	border: 1px solid #ff6000;
	color: #ff6000;
	background: transparent;
	padding: 5px 11px;
}

.osahan-radio .btn.active {
	background: #ff6000 !important;
	border-color: #ff6000 !important;
}

a.selected {
	color: #28a745 !important;
}

/* .fixed-bottom-padding {
  padding-bottom: 59px;
} */

.fixed-bottom-auto {
	height: auto !important;
}

.fixed-bottom {
	border-radius: 0px;
	box-shadow: 10px -1px 10px rgba(0, 0, 0, .075);
	height: 59px;
}

.fixed-bottom .btn,
.fixed-bottom.btn {
	height: 59px;
	border-radius: 0px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 500;
	padding: 12px 14px;
	border: none;
}

.fixed-bottom-bar {
	padding-bottom: 58px;
}

.h-auto {
	height: auto;
}

.modal-footer .btn {
	border-radius: 0px;
}

.slick-dots {
	bottom: 20px !important;
}

.slick-prev,
.slick-prev:hover,
.slick-prev:focus {
	background: url("data:image/png;base64,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") no-repeat 50% 50%;
}

.slick-next,
.slick-next:hover,
.slick-next:focus {
	background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAA8CAYAAABxVAqfAAAACXBIWXMAAAsTAAALEwEAmpwYAAAKT2lDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVNnVFPpFj333vRCS4iAlEtvUhUIIFJCi4AUkSYqIQkQSoghodkVUcERRUUEG8igiAOOjoCMFVEsDIoK2AfkIaKOg6OIisr74Xuja9a89+bN/rXXPues852zzwfACAyWSDNRNYAMqUIeEeCDx8TG4eQuQIEKJHAAEAizZCFz/SMBAPh+PDwrIsAHvgABeNMLCADATZvAMByH/w/qQplcAYCEAcB0kThLCIAUAEB6jkKmAEBGAYCdmCZTAKAEAGDLY2LjAFAtAGAnf+bTAICd+Jl7AQBblCEVAaCRACATZYhEAGg7AKzPVopFAFgwABRmS8Q5ANgtADBJV2ZIALC3AMDOEAuyAAgMADBRiIUpAAR7AGDIIyN4AISZABRG8lc88SuuEOcqAAB4mbI8uSQ5RYFbCC1xB1dXLh4ozkkXKxQ2YQJhmkAuwnmZGTKBNA/g88wAAKCRFRHgg/P9eM4Ors7ONo62Dl8t6r8G/yJiYuP+5c+rcEAAAOF0ftH+LC+zGoA7BoBt/qIl7gRoXgugdfeLZrIPQLUAoOnaV/Nw+H48PEWhkLnZ2eXk5NhKxEJbYcpXff5nwl/AV/1s+X48/Pf14L7iJIEyXYFHBPjgwsz0TKUcz5IJhGLc5o9H/LcL//wd0yLESWK5WCoU41EScY5EmozzMqUiiUKSKcUl0v9k4t8s+wM+3zUAsGo+AXuRLahdYwP2SycQWHTA4vcAAPK7b8HUKAgDgGiD4c93/+8//UegJQCAZkmScQAAXkQkLlTKsz/HCAAARKCBKrBBG/TBGCzABhzBBdzBC/xgNoRCJMTCQhBCCmSAHHJgKayCQiiGzbAdKmAv1EAdNMBRaIaTcA4uwlW4Dj1wD/phCJ7BKLyBCQRByAgTYSHaiAFiilgjjggXmYX4IcFIBBKLJCDJiBRRIkuRNUgxUopUIFVIHfI9cgI5h1xGupE7yAAygvyGvEcxlIGyUT3UDLVDuag3GoRGogvQZHQxmo8WoJvQcrQaPYw2oefQq2gP2o8+Q8cwwOgYBzPEbDAuxsNCsTgsCZNjy7EirAyrxhqwVqwDu4n1Y8+xdwQSgUXACTYEd0IgYR5BSFhMWE7YSKggHCQ0EdoJNwkDhFHCJyKTqEu0JroR+cQYYjIxh1hILCPWEo8TLxB7iEPENyQSiUMyJ7mQAkmxpFTSEtJG0m5SI+ksqZs0SBojk8naZGuyBzmULCAryIXkneTD5DPkG+Qh8lsKnWJAcaT4U+IoUspqShnlEOU05QZlmDJBVaOaUt2ooVQRNY9aQq2htlKvUYeoEzR1mjnNgxZJS6WtopXTGmgXaPdpr+h0uhHdlR5Ol9BX0svpR+iX6AP0dwwNhhWDx4hnKBmbGAcYZxl3GK+YTKYZ04sZx1QwNzHrmOeZD5lvVVgqtip8FZHKCpVKlSaVGyovVKmqpqreqgtV81XLVI+pXlN9rkZVM1PjqQnUlqtVqp1Q61MbU2epO6iHqmeob1Q/pH5Z/YkGWcNMw09DpFGgsV/jvMYgC2MZs3gsIWsNq4Z1gTXEJrHN2Xx2KruY/R27iz2qqaE5QzNKM1ezUvOUZj8H45hx+Jx0TgnnKKeX836K3hTvKeIpG6Y0TLkxZVxrqpaXllirSKtRq0frvTau7aedpr1Fu1n7gQ5Bx0onXCdHZ4/OBZ3nU9lT3acKpxZNPTr1ri6qa6UbobtEd79up+6Ynr5egJ5Mb6feeb3n+hx9L/1U/W36p/VHDFgGswwkBtsMzhg8xTVxbzwdL8fb8VFDXcNAQ6VhlWGX4YSRudE8o9VGjUYPjGnGXOMk423GbcajJgYmISZLTepN7ppSTbmmKaY7TDtMx83MzaLN1pk1mz0x1zLnm+eb15vft2BaeFostqi2uGVJsuRaplnutrxuhVo5WaVYVVpds0atna0l1rutu6cRp7lOk06rntZnw7Dxtsm2qbcZsOXYBtuutm22fWFnYhdnt8Wuw+6TvZN9un2N/T0HDYfZDqsdWh1+c7RyFDpWOt6azpzuP33F9JbpL2dYzxDP2DPjthPLKcRpnVOb00dnF2e5c4PziIuJS4LLLpc+Lpsbxt3IveRKdPVxXeF60vWdm7Obwu2o26/uNu5p7ofcn8w0nymeWTNz0MPIQ+BR5dE/C5+VMGvfrH5PQ0+BZ7XnIy9jL5FXrdewt6V3qvdh7xc+9j5yn+M+4zw33jLeWV/MN8C3yLfLT8Nvnl+F30N/I/9k/3r/0QCngCUBZwOJgUGBWwL7+Hp8Ib+OPzrbZfay2e1BjKC5QRVBj4KtguXBrSFoyOyQrSH355jOkc5pDoVQfujW0Adh5mGLw34MJ4WHhVeGP45wiFga0TGXNXfR3ENz30T6RJZE3ptnMU85ry1KNSo+qi5qPNo3ujS6P8YuZlnM1VidWElsSxw5LiquNm5svt/87fOH4p3iC+N7F5gvyF1weaHOwvSFpxapLhIsOpZATIhOOJTwQRAqqBaMJfITdyWOCnnCHcJnIi/RNtGI2ENcKh5O8kgqTXqS7JG8NXkkxTOlLOW5hCepkLxMDUzdmzqeFpp2IG0yPTq9MYOSkZBxQqohTZO2Z+pn5mZ2y6xlhbL+xW6Lty8elQfJa7OQrAVZLQq2QqboVFoo1yoHsmdlV2a/zYnKOZarnivN7cyzytuQN5zvn//tEsIS4ZK2pYZLVy0dWOa9rGo5sjxxedsK4xUFK4ZWBqw8uIq2Km3VT6vtV5eufr0mek1rgV7ByoLBtQFr6wtVCuWFfevc1+1dT1gvWd+1YfqGnRs+FYmKrhTbF5cVf9go3HjlG4dvyr+Z3JS0qavEuWTPZtJm6ebeLZ5bDpaql+aXDm4N2dq0Dd9WtO319kXbL5fNKNu7g7ZDuaO/PLi8ZafJzs07P1SkVPRU+lQ27tLdtWHX+G7R7ht7vPY07NXbW7z3/T7JvttVAVVN1WbVZftJ+7P3P66Jqun4lvttXa1ObXHtxwPSA/0HIw6217nU1R3SPVRSj9Yr60cOxx++/p3vdy0NNg1VjZzG4iNwRHnk6fcJ3/ceDTradox7rOEH0x92HWcdL2pCmvKaRptTmvtbYlu6T8w+0dbq3nr8R9sfD5w0PFl5SvNUyWna6YLTk2fyz4ydlZ19fi753GDborZ752PO32oPb++6EHTh0kX/i+c7vDvOXPK4dPKy2+UTV7hXmq86X23qdOo8/pPTT8e7nLuarrlca7nuer21e2b36RueN87d9L158Rb/1tWeOT3dvfN6b/fF9/XfFt1+cif9zsu72Xcn7q28T7xf9EDtQdlD3YfVP1v+3Njv3H9qwHeg89HcR/cGhYPP/pH1jw9DBY+Zj8uGDYbrnjg+OTniP3L96fynQ89kzyaeF/6i/suuFxYvfvjV69fO0ZjRoZfyl5O/bXyl/erA6xmv28bCxh6+yXgzMV70VvvtwXfcdx3vo98PT+R8IH8o/2j5sfVT0Kf7kxmTk/8EA5jz/GMzLdsAAAAgY0hSTQAAeiUAAICDAAD5/wAAgOkAAHUwAADqYAAAOpgAABdvkl/FRgAAAzBJREFUeNq82F2IVWUUxvHfnKALKYYGxELRixGCkjLICINGCcdJxbQhNaIPQ4u6mCQJIUow6EpBL4S+1RSyDzGtzDKJkqAmRJOIQIxAoojpIoMMB8bpwjVw2Lw7pNlrFhwO864Df/ae9a7nWauju7v7ZuzGFDyLHSYgrujq6jqM2bgKS/ELTmaDW7ip7e8OvIIVEwH+ofoWsAeLssGP4Xzl/Eq8hzszwYNYjuFKbhI+wK1ZYDiC+zFSyXfiY9yYBYb9WIPRym8m4xN0Z4FhF9YVfjct4FObvMfVs0FcxPzKeRcWYF+hGBsBwzFcjbmV8ynoiYq/0OSrbo9n8Frh/DYciKpPAY/iCbxTyM3Du3HfGweL6/UQDhVyi/FmdLrGwaKxrMAXhdwqvBQ9vnGwqOJl+LaQW4vNTVV1KS7gIPqiuttjblzBY00/8VgMhWqdKeRewEAWWBiFvviuxjY8nAWGnwI+VDnvwBu4NwssDMQinCsYib3ozQLDcdxTYyTexx1ZYPgS99UYiUNhJFPAwiw8WGMkjuD6LLDo3Y/XGImjmJEFFhW9vsZIHMW1/6dzXW58Ew/UUzASC0Pt/skAC0G5BrcXjMQ8vJ0Fhk8xHbcUXvt1mWD4CDfEpz1mtuRHSatHW8nA19FfyO3LBG/DI4XzQQxkgeu0+ftQtb8zwE/j+cL5mRgI/szoXGuwpcY83IXfM1rmSrxcqOKhgJ7N6NWLY4FT9djn4vWezlCnuqniPO7GqQw9nlMzRw2HD/86w4HMCofRWRh7VuGzDM81E4dD5KuD3qPhtxp3mWPbgWmF3EAUWeO+enI8aWkf8hy2Z0wSnfE/nVXIbcaLGdPipBjY5hRyr2JDxpg6tuXrKeT24smCsxw3+L/2mh+G7I00vRHoiN5b2uR+Hnd1OGMHsiXUpiTky8e766oDbwxdLQn5Evw13gZfAj+FTTVC3oc/mpCzKng1ttYIeS9+bUq828H9Lm3ySkLei5+btCpj4IV4q0bI+/Bj08asFfPN/hohX4ITGTa0FS2vJOT9+CrLdLcKc80IHgjpkwk+VRHytS4tw2WDV+M7/BbuYecEDHL+HQDxzaLgTsZg3gAAAABJRU5ErkJggg==") no-repeat 50% 50%;
}

.slick-arrow,
.slick-arrow:hover,
.slick-arrow:focus {
	background-size: 6px;
	width: 34px;
	border-radius: 50px;
	height: 34px;
	margin: 0 8px;
	background-color: #fff;
	box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;
	border: 1px solid #e4e7ea;
	z-index: 9;
}

.slick-next:before,
.slick-prev:before {
	display: none;
}

.landing-page .zindex {
	right: 0;
	z-index: 9;
}

/* Cart Page */
span.c-number {
	width: 32px;
	border: 1px solid #28a744;
	color: #28a744;
	height: 32px;
	border-radius: 50px;
	display: flex;
	align-items: center;
	font-size: 16px;
	justify-content: center;
	margin: 0 14px 0 0px;
}

.sc-osahan-logo {
	height: 30px;
}

.sticky_sidebar,
.c-t-order,
.osahan-account {
	position: sticky;
	top: 15px;
}

.osahan-cart-item-profile img {
	height: 38px;
}

.index-osahan-logo {
	height: 90px;
	box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;
	border-radius: 17px;
}

.as-osahan-logo {
	width: 40px;
}

.osahan-logo {
	height: 30px;
	box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;
	border-radius: 17px;
}

.pp-osahan-logo {
	height: 30px;
}

.p-osahan-logo {
	height: 34px;
}

.gs-logo {
	height: 100px;
	box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;
	border-radius: 17px;
}

.border-custom-radio ::after {
	display: none;
}

.cart-items .img-fluid {
	width: 92px;
	height: 92px;
	object-fit: scale-down;
	min-width: 92px;
	padding: 7px;
	border-radius: 6px;
}

.cart-items-number .form-control {
	max-width: 30px;
	text-align: center;
	padding: 0px;
	height: 30px;
	border: none !important;
	background: transparent;
	color: #5d6671;
}

.cart-items-number .btn {
	width: 28px;
	background: #fff;
	height: 28px;
	border-radius: 50px !important;
	color: #ff6000;
	font-size: 17px;
	box-shadow: 0px 0px 3px #dedede;
	line-height: 18px;
	text-align: center;
	padding: 0px;
	margin: 0px !important;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none !important;
}

.cart-items-number .btn:hover,
.cart-items-number .btn:focus {
	background: #ff6000;
	color: #ffffff;
}

.cart-items-number .input-group-prepend {
	height: 28px;
	width: 28px;
}

.cart-items-number .input-group-append {
	height: 28px;
	width: 28px;
}

.cart-items-number {
	border-radius: 50px;
	padding: 3px;
	background: #f7f7f8;
	width: 90px;
	height: 34px;
}

/* List Page */
.border-custom-radio .custom-control-label::before {
	width: 100%;
	height: 100%;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	border-radius: .25rem !important;
	background: transparent !important;
	box-shadow: none !important;
}

.border-custom-radio .custom-control-input:checked~.custom-control-label::before {
	border-color: #28a744;
	border: 2px solid #28a744;
}

.list-card-image .price {
	font-size: 14px;
}

.list-card-image a.btn {
	border: 3px solid #f1f2f5;
	width: 33px;
	background: #fff;
	height: 33px;
	border-radius: 50px !important;
	color: #ff6000;
	font-size: 17px;
	box-shadow: 0px 0px 3px #dedede;
	line-height: 0px;
	text-align: center;
	padding: 0px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.list-card-image a.btn:hover,
.list-card-image a.btn:focus {
	background: #ff6000;
	color: #ffffff;
}

/* Landing Page */
.landing-page .slick-dots {
	bottom: 80px !important;
}

.c-it p {
	font-size: 11px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.c-it img {
	height: 40px;
}

.opt {
	font-size: 23px !important;
}


.btn-success {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#28a745+0,5ad363+100 */
	background: #28a745;
	/* Old browsers */
	background: -moz-linear-gradient(-45deg, #28a745 0%, #5ad363 100%);
	/* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, #28a745 0%, #5ad363 100%);
	/* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, #28a745 0%, #5ad363 100%);
	/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#28a745', endColorstr='#5ad363', GradientType=1);
	/* IE6-9 fallback on horizontal gradient */
	;
}

.btn-lg {
	font-size: 14px !important;
	padding: 12px 14px;
	font-weight: 500;
}

.btn-icon {
	height: 33px;
	width: 33px;
	padding: 6px;
	color: #ced4d9;
	border: 1px solid #eff2f5;
	border-radius: 50px;
}

label {
	margin: 0 0 2px 0;
	font-size: 12px;
	color: #4a4949;
}

.custom-select {
	font-size: 13px;
}

.form-control {
	border: 1px solid #cacdd0;
	font-size: 13px;
	box-shadow: none !important;
}

.form-control:focus {
	border-color: #28a744;
}

.btn {
	font-size: 13px;
}

.btn.focus,
.btn:focus {
	box-shadow: none !important;
}

.badge {
	font-size: 11px;
	padding: 7px 9px;
	font-weight: 500;
}

.badge-success {
	color: #28a745;
	background-color: rgb(40 167 69 / 15%);
}

.badge-warning {
	color: #eab002;
	background-color: rgb(255 193 7 / 15%);
}

.badge-danger {
	color: #ff6000;
	background-color: rgb(255 96 0 / 15%);
}

.badge-danger-shoppe {
	color: #f7f5f4;
	background-color: rgba(250, 119, 38, 0.904);
}

.badge-info {
	color: #17a2b8;
	background-color: rgb(23 162 184 / 15%);
}

/* Xóa màu nền của bg-info, bg-success, bg-danger, bg-warning khi dùng với badge rounded-pill */
[class*="badge"][class*="rounded-pill"][class*="bg-info"],
[class*="badge"][class*="rounded-pill"][class*="bg-success"],
[class*="badge"][class*="rounded-pill"][class*="bg-danger"],
[class*="badge"][class*="rounded-pill"][class*="bg-warning"],
[class*="badge"][class*="rounded-pill"][class*="bg-primary"],
[class*="badge"][class*="rounded-pill"][class*="bg-dark"] {
	background-color: transparent !important;
	background-image: none !important;
}

.badge-primary {
	color: #007bff;
	background-color: rgb(0 123 255 / 15%);
}

.badge-dark {
	color: #343a40;
	background-color: rgb(52 58 64 / 15%);
}


.modal-body {
	overflow: auto;
}

.rounded {
	border-radius: .40rem !important;
}

/* Filter */
.filter .custom-control-label::before {
	right: 1rem;
	left: auto;
	margin: auto;
	top: 0;
	bottom: 0;
}

.filter .custom-control-label::after {
	left: auto;
	right: 1rem;
	margin: auto;
	top: 0;
	bottom: 0;
}

.custom-control-input:checked~.custom-control-label::before {
	color: #fff;
	border-color: #28a744;
	background-color: #28a744;
}

/* Dark Mode */
.theme-switch-wrapper {
	position: fixed;
	bottom: 12px;
	right: 12px;
	z-index: 99999;
	width: 40px;
	height: 40px;
	border-radius: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.fixed-bottom-padding .theme-switch-wrapper {
	bottom: 70px;
}

.theme-switch {
	box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
	width: 40px;
	height: 40px;
	background: #d1c9c9;
	color: #fff;
	border-radius: 50px;
	font-size: 20px;
	margin: 0px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}


.dark .theme-switch {
	background: #fff;
	color: #000;
}

.theme-switch-wrapper em {
	display: none;
}

.theme-switch-wrapper #checkbox {
	display: none;
}

.dark body {
	background-color: #000;
	color: #ffffff;
}

.dark .dropdown-divider {
	border-top: 1px solid #292929;
}

.dark .custom-select {
	background-color: #1c1c1c;
	border: 1px solid #323638;
}

.dark .breadcrumb {
	border-radius: 0px;
	background: #1c1c1c;
}

.dark .btn-icon {
	border: 1px solid #323638;
}

.dark .card {
	background-color: #1c1c1c;
}

.dark .c-t-order li a {
	background: #000000;
}

.dark .badge-light {
	color: #99a2ab;
	background-color: #000000;
}

.dark .btn-light {
	color: #ffffff !important;
	background: #000;
}

.dark .custom-control-label::before {
	border: #292929 solid 1px;
}

.dark .c-t-order li a.active,
.dark .c-t-order li a:hover {
	background: #28a744 !important;
}

.dark .bg-white {
	background-color: #1b1b1b !important;
}

.dark .dropdown-item:focus,
.dark .dropdown-item:hover {
	color: #ffffff;
	background-color: #000;
}

.dark .osahan-notifications:hover {
	background: #000000 !important;
}

.dark .modal-backdrop {
	background-color: #fff;
}

.dark .border-bottom,
.dark .border-top,
.dark .border-left,
.dark .border-right,
.dark .border {
	border-color: #292929 !important;
}

.dark a.bg-light:focus,
.dark a.bg-light:hover,
.dark button.bg-light:focus,
.dark button.bg-light:hover {
	background-color: #000000 !important;
}

.dark .dropdown-item {
	color: #fff;
	;
}

.dark .dropdown-menu {
	background: #1c1c1c;
	border: 1px solid #000000;
	color: #ffffff;
}

.dark .text-dark {
	color: #e4e4e4 !important;
}

.dark .modal-content {
	background-color: #000;
}

.dark .bg-light {
	background-color: #101010 !important;
}

.dark .modal-header {
	border-bottom: 1px solid #292929;
}

.dark .close {
	color: #fff !important;
}

.dark .btn {
	color: #ffffff;
}

.dark a.text-dark:focus,
.dark a.text-dark:hover {
	color: #ffffff !important;
}

.dark .list-card-image a.btn,
.dark .cart-items-number .btn {
	border: 3px solid #252525;
	background: #000;
	box-shadow: none;
}

.dark .cart-items-number {
	background: #000000;
}

.dark .hc-nav-trigger {
	color: #28a744;
}

.dark label {
	color: #ffffff;
}

.dark .hc-offcanvas-nav .nav-container,
.dark .hc-offcanvas-nav .nav-wrapper,
.dark .hc-offcanvas-nav ul {
	background: #25282e;
}

.dark .hc-offcanvas-nav li:not(.custom-content) a {
	color: #a3a6a9;
	background: rgba(0, 0, 0, 0);
	border-bottom: 1px solid #33353e;
}

.dark .hc-offcanvas-nav li:not(.custom-content) a:hover {
	color: #ffffff;
	background: #000000 !important;
	border-bottom: 1px solid #000000;
}

.dark .hc-offcanvas-nav li.nav-close a,
.dark .hc-offcanvas-nav li.nav-back a {
	border-top: 1px solid #33353e;
	border-bottom: 1px solid #33353e;
}

.dark .hc-offcanvas-nav .nav-item {
	background: rgba(0, 0, 0, 0);
	border-bottom: 1px solid #343a40;
}

.dark .hc-offcanvas-nav ul.bottom-nav {
	border-top: 1px solid #343a40;
}

.dark .form-control {
	border: 1px solid #333538;
	background-color: transparent !important;
	font-size: 13px;
	box-shadow: none !important;
	color: #fff;
}

.dark .text-muted {
	color: #99a2ab !important;
}

.dark .list-card-image img {
	margin: 0;
	background: #fff;
	padding: 17px;
	min-width: 100%;
	max-width: 100%;
	border-radius: 6px;
	box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;
}

.dark .slick-dots li.slick-active button:before {
	opacity: .75;
	color: #fff;
}

.dark .slick-dots li button:before {
	color: #fff;
}

.dark .list-card-osahan-2 .img {
	width: 100%;
	padding: 22px;
	margin-bottom: 15px;
}

.dark .schedule .nav-link.active,
.dark .schedule .nav-link:focus {
	color: #28a744 !important;
	background: #1b1b1b;
	border-color: #292929;
}

.dark .schedule .nav-link:hover {
	background: #1b1b1b;
	border-color: #292929;
}

.dark .nav-tabs {
	border-bottom: 1px solid #292929;
}

/* logo-size */
.logo-img {
	height: 38px !important;
}

.search-size {
	width: 400px !important;
}

/* footer list padding */
.list-padding li a {
	width: 100%;
	font-size: 12px;
	padding: 5px 0;
	display: inline-block;
	opacity: 0.8;
}

/* accordian card border */
.osahan-accor {
	border-bottom: 2px solid #28a745 !important;
}

/* custom-tabs */
.custom-tabs.nav-tabs .nav-item.show .nav-link,
.custom-tabs.nav-tabs .nav-link.active {
	color: #000000;
	background-color: #ffffff;
	border-bottom: 2px solid #4ca746;
}

.c-t-order li {
	border: none !important;
	margin: 5px 4px !important;
}

.c-t-order li a {
	background: #ffffff;
	border-radius: 6px !important;
	padding: 15px 14px !important;
}

.c-t-order li a i {
	background: #fff;
	border: 1px solid #eff2f5;
	padding: 5px 5px;
	border-radius: 50px;
	box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;
	font-size: 18px;
	vertical-align: bottom;
}

.c-t-order li a.active,
.c-t-order li a:hover {
	background: #eff2f5 !important;
}

.c-t-order li a.active i {
	background: #f17f39;
	color: #fff !important;
	border-color: transparent;
}

/* header css */
.header-user {
	height: 34px;
}

.osahan-select-loaction h6 {
	font-size: 12px;
	text-transform: uppercase;
	font-weight: 500;
}

.osahan-select-loaction p a {
	font-size: 12px;
	opacity: 0.8;
	width: 100%;
	display: block;
}

.osahan-notifications {
	line-height: 16px;
	padding: 14px 36px 14px 0px !important;
	border: none !important;
	background: #f8f9fa !important;
	margin: 4px 3px;
	border-radius: 8px;
}

.osahan-notifications:hover {
	background: #eff2f5 !important;
}

.osahan-notifications p.small.m-0 {
	font-size: 11px;
	opacity: 0.7;
}

.osahan-notifications p.small.m-0 i {
	font-size: 9px;
	margin: 0px 5px 0px 0;
}

.osahan-notifications .position-absolute {
	right: 23px;
}

/* .header icofont size */
.icofont-size {
	font-size: 16px;
}

.bg-color-head {
	background-color: #fc5332 !important;
	box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
}

.bg-offer {
	background-color: #fc5332;
}

/* quantity show */
.qty_show {
	position: absolute;
	right: 16px;
}

/* Mobile Media */
@media (max-width: 992px) {
	.osahan-main-nav {
		display: none;
	}

	.mobile-nav {
		display: block !important;
	}

	.container,
	.container-md,
	.container-sm {
		max-width: 100%;
	}

	footer.section-footer {
		display: none;
	}

	.landing-page.shadow-sm.bg-success.col-lg-6 {
		display: none;
	}
}

@media (max-width: 576px) {

	.container,
	.container-md,
	.container-sm {
		max-width: 100%;
	}

	.sticky_sidebar,
	.c-t-order,
	.osahan-account {
		margin-bottom: 15px;
	}

	.landing-page.shadow-sm.bg-success.col-lg-6 {
		display: none;
	}
}

.root {

	max-width: 480px;
	margin: 0 auto;

}

.cart-item-bottom {

	background: #4ca746;
	color: #FFF;
	padding: 15px;
	position: fixed;
	bottom: 15px;

	border-radius: 8px;
	left: 15px;
	right: 15px;
	max-width: 450px;
	margin: 0 auto;
}

.section-cart-item-bottom {}

.avatar-button {
	font-size: 1.5rem;
	text-align: center;
	overflow: visible;
	border: 0;
	background-color: transparent;
	cursor: pointer;
}

.avatar-text {
	align-items: center;
	color: #fff;
	display: block;
	background-color: #673ab7;
	font-size: 1.25rem;
	border-radius: 50%;
	vertical-align: middle;
	justify-content: center;
	padding: 0.7rem;
}

.avatar-button:focus {
	outline: .1em solid #141B38;
}

/* Custom */
.nav-mobile {
	background-color: #fc5332;
	padding: 10px;
	margin-right: -16px;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
	margin-left: -21px;
	margin-top: -16px;
}

/* custom */
.button-login {
	border-radius: 5px;
	color: black;
	font-weight: 600;
	padding: 5px;
	background-color: #fff;
}
.button-search {
	border-radius: 5px;
	color: rgb(250, 250, 250);
	font-weight: 600;
	padding: 10px;
	background-color: #fc5332;
}
#txtLinkMobile{
	color: #fc5332;
	font-size: 16px;
}
#txtLinkMobile:focus{
	border-color: #fc5332;
}

.button-search:focus{
	border-color: #fc5332;
	border: none;
}
.text-logo {
	color: #fc5332;
	font-size: 20px;
	font-weight: 600;
}

button {
	border: none;
}

/* ============================================
   ASMO MARKET - NEW COMPONENTS
   ============================================ */

/* ============================================
   MODERN CLEAN HEADER DESIGN
   Inspired by modern e-commerce style
   ============================================ */
.asmo-modern-header {
	background: var(--bg-primary);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	position: sticky;
	top: 0;
	z-index: var(--z-fixed);
	width: 100%;
	margin-bottom: var(--spacing-lg);
}

/* Add spacing after header */
section.osahan-main-body {
	padding-top: var(--spacing-xl);
	margin-top: 0;
}

.asmo-modern-header + nav.breadcrumb {
	margin-top: var(--spacing-md);
	padding-top: var(--spacing-md);
}

/* Hide old mobile nav */
.mobile-nav {
	display: none !important;
}

/* Ensure header is visible on mobile */
@media (max-width: 991px) {
	.asmo-modern-header {
		display: block !important;
	}
}

.asmo-header-container {
	background: var(--bg-primary);
	border-bottom: 1px solid var(--bg-tertiary);
}

.asmo-header-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--spacing-md) 0;
	gap: var(--spacing-lg);
	position: relative;
}

/* Logo Section */
.asmo-header-logo {
	flex-shrink: 0;
	flex: 1;
	display: flex;
	justify-content: center;
}

@media (min-width: 992px) {
	.asmo-header-logo {
		flex: 0;
		justify-content: flex-start;
	}
}

.asmo-logo-link {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
	text-decoration: none;
	transition: transform var(--transition-base);
}

.asmo-logo-link:hover {
	transform: scale(1.02);
}

.asmo-logo-wrapper {
	width: 64px;
	height: 64px;
	border-radius: 8px; /* vuông hơn, bo nhẹ */
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	transition: all var(--transition-base);
}

.asmo-logo-link:hover .asmo-logo-wrapper {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.asmo-logo-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 6px; /* khớp khung vuông nhẹ */
}

/* Logo lớn hơn trên mobile */
@media (max-width: 576px) {
	.asmo-logo-wrapper {
		width: 80px;
		height: 80px;
		padding: 10px;
	}
}

.asmo-logo-text {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
	color: var(--text-primary);
	letter-spacing: -0.5px;
	white-space: nowrap; /* giữ chữ trên một dòng */
	display: inline-block;
	line-height: 1.1;
}

/* Navigation Menu */
.asmo-header-nav {
	display: flex;
	align-items: center;
	gap: var(--spacing-lg);
	flex: 1;
	justify-content: center;
}

.asmo-nav-link {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: var(--spacing-sm) var(--spacing-md);
	text-decoration: none;
	color: var(--text-primary);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.5px;
	text-transform: uppercase;
	transition: all var(--transition-base);
	border-bottom: 2px solid transparent;
}

.asmo-nav-link:hover {
	color: var(--color-primary);
}

.asmo-nav-link.active {
	color: var(--color-primary);
	border-bottom-color: var(--color-primary);
}

.asmo-hot-tag {
	position: absolute;
	top: -8px;
	right: -8px;
	background: #DC3545;
	color: var(--text-white);
	font-size: 9px;
	font-weight: var(--font-weight-bold);
	padding: 2px 6px;
	border-radius: 10px;
	line-height: 1.2;
	box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3);
}

/* Right Actions */
.asmo-header-right {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
	flex-shrink: 0;
}

/* PWA Install Modal */
.pwa-install-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--spacing-md);
	animation: fadeIn 0.3s ease;
}

.pwa-install-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(4px);
}

.pwa-install-dialog {
	position: relative;
	background: #ffffff;
	border-radius: 20px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
	max-width: 400px;
	width: 100%;
	padding: var(--spacing-lg);
	animation: slideUp 0.3s ease;
	z-index: 1;
}

.pwa-install-close {
	position: absolute;
	top: var(--spacing-md);
	right: var(--spacing-md);
	width: 32px;
	height: 32px;
	border: none;
	background: transparent;
	color: var(--text-secondary);
	font-size: 20px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: all 0.2s ease;
}

.pwa-install-close:hover {
	background: var(--bg-secondary);
	color: var(--text-primary);
}

.pwa-install-content {
	display: flex;
	gap: var(--spacing-md);
	margin-bottom: var(--spacing-lg);
}

.pwa-install-icon {
	width: 64px;
	height: 64px;
	border-radius: 12px;
	background: linear-gradient(135deg, #fc5332 0%, #ff7043 100%);
	padding: var(--spacing-sm);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba(252, 83, 50, 0.3);
}

.pwa-install-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 8px;
}

.pwa-install-text {
	flex: 1;
}

.pwa-install-brand {
	font-size: 0.875rem;
	font-weight: 600;
	color: #fc5332;
	margin-bottom: 4px;
	letter-spacing: 0.5px;
}

.pwa-install-title {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--text-primary);
	margin: 0 0 var(--spacing-xs) 0;
	line-height: 1.4;
}

.pwa-install-description {
	font-size: 0.875rem;
	color: var(--text-secondary);
	margin: 0;
	line-height: 1.5;
}

.pwa-install-actions {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
}

.pwa-install-btn-primary {
	width: 100%;
	padding: var(--spacing-md);
	background: linear-gradient(135deg, #fc5332 0%, #ff7043 100%);
	color: #ffffff;
	border: none;
	border-radius: 12px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 4px 12px rgba(252, 83, 50, 0.3);
}

.pwa-install-btn-primary:hover {
	background: linear-gradient(135deg, #e6452a 0%, #fc5332 100%);
	box-shadow: 0 6px 16px rgba(252, 83, 50, 0.4);
	transform: translateY(-2px);
}

.pwa-install-btn-primary:active {
	transform: translateY(0);
	box-shadow: 0 2px 8px rgba(252, 83, 50, 0.3);
}

.pwa-install-btn-secondary {
	width: 100%;
	padding: var(--spacing-sm);
	background: transparent;
	color: var(--text-secondary);
	border: none;
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	transition: color 0.2s ease;
}

.pwa-install-btn-secondary:hover {
	color: var(--text-primary);
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes slideUp {
	from {
		transform: translateY(20px);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@media (max-width: 576px) {
	.pwa-install-dialog {
		max-width: 100%;
		margin: var(--spacing-md);
		padding: var(--spacing-md);
	}
	
	.pwa-install-icon {
		width: 56px;
		height: 56px;
	}
	
	.pwa-install-title {
		font-size: 1rem;
	}
	
	.pwa-install-description {
		font-size: 0.8125rem;
	}
}

/* User Menu */
.asmo-user-menu-wrapper {
	position: relative;
	z-index: var(--z-dropdown);
}

.asmo-user-btn {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	padding: var(--spacing-xs) var(--spacing-md);
	border-radius: var(--border-radius-full);
	background: var(--bg-secondary);
	border: 1px solid var(--bg-tertiary);
	text-decoration: none;
	color: var(--text-primary);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	transition: all var(--transition-base);
	cursor: pointer;
}

.asmo-user-btn:hover {
	background: var(--bg-tertiary);
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.asmo-user-avatar-small {
	width: 32px;
	height: 32px;
	border-radius: var(--border-radius-full);
	overflow: hidden;
	flex-shrink: 0;
	border: 2px solid var(--color-primary);
}

.asmo-user-avatar-small img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.asmo-avatar-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bg-gradient-red);
	color: var(--text-white);
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size-sm);
}

/* User Dropdown */
.asmo-user-dropdown-menu {
	position: absolute;
	top: calc(100% + var(--spacing-sm));
	right: 0;
	background: var(--bg-primary);
	border-radius: var(--border-radius-lg);
	box-shadow: var(--shadow-lg);
	min-width: 220px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: all var(--transition-base);
	z-index: calc(var(--z-dropdown) + 10);
	border: 1px solid var(--bg-tertiary);
	overflow: hidden;
	pointer-events: none;
}

.asmo-user-dropdown-menu.show {
	pointer-events: auto;
}

.asmo-user-dropdown-menu.show {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.asmo-dropdown-link {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
	padding: var(--spacing-md);
	text-decoration: none;
	color: var(--text-primary);
	font-size: var(--font-size-base);
	transition: all var(--transition-base);
	border-bottom: 1px solid var(--bg-tertiary);
}

.asmo-dropdown-link:last-child {
	border-bottom: none;
}

.asmo-dropdown-link:hover {
	background: var(--bg-secondary);
	color: var(--color-primary);
}

.asmo-dropdown-link i {
	font-size: var(--font-size-lg);
	color: var(--text-muted);
	width: 24px;
	text-align: center;
}

.asmo-dropdown-link:hover i {
	color: var(--color-primary);
}

.asmo-dropdown-link-danger {
	color: #DC3545;
}

.asmo-dropdown-link-danger:hover {
	background: #FFF5F5;
	color: #DC3545;
}

.asmo-dropdown-separator {
	height: 1px;
	background: var(--bg-tertiary);
	margin: var(--spacing-xs) 0;
}

/* Login Button */
.asmo-login-btn {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
	padding: var(--spacing-sm) var(--spacing-lg);
	background: #37474F;
	color: var(--text-white);
	border-radius: var(--border-radius-md);
	text-decoration: none;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	transition: all var(--transition-base);
	border: none;
	cursor: pointer;
}

.asmo-login-btn:hover {
	background: #263238;
	transform: translateY(-1px);
	box-shadow: var(--shadow-md);
}

.asmo-login-btn i {
	font-size: var(--font-size-base);
}

/* Mobile Menu Toggle */
.asmo-mobile-toggle {
	width: 40px;
	height: 40px;
	border-radius: var(--border-radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bg-secondary);
	border: 1px solid var(--bg-tertiary);
	color: var(--text-primary);
	font-size: var(--font-size-xl);
	cursor: pointer;
	transition: all var(--transition-base);
	flex-shrink: 0;
	margin-right: var(--spacing-sm);
}

@media (min-width: 992px) {
	.asmo-mobile-toggle {
		display: none !important;
	}
}

.asmo-mobile-toggle:hover {
	background: var(--bg-tertiary);
	border-color: var(--color-primary);
	color: var(--color-primary);
}

/* Mobile Navigation */
.asmo-mobile-nav-collapse {
	background: var(--bg-primary);
	border-top: 1px solid var(--bg-tertiary);
	width: 100%;
}

.asmo-mobile-nav-collapse.collapse {
	display: none;
}

.asmo-mobile-nav-collapse.collapse.show {
	display: block !important;
}

.asmo-mobile-nav {
	padding: var(--spacing-sm) 0;
	width: 100%;
}

.asmo-mobile-nav-link {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
	padding: var(--spacing-md) var(--spacing-lg);
	color: var(--text-primary);
	text-decoration: none;
	font-size: var(--font-size-base);
	transition: all var(--transition-base);
	border-bottom: 1px solid var(--bg-tertiary);
	width: 100%;
}

.asmo-mobile-nav-link i {
	flex-shrink: 0;
	width: 24px;
	text-align: center;
}

.asmo-mobile-nav-link span {
	flex: 1;
}

.asmo-mobile-nav-link:last-child {
	border-bottom: none;
}

.asmo-mobile-nav-link:hover {
	background: var(--bg-secondary);
	color: var(--color-primary);
}

.asmo-mobile-nav-link.active {
	background: var(--bg-secondary);
	color: var(--color-primary);
	border-left: 3px solid var(--color-primary);
}

.asmo-mobile-nav-link i {
	font-size: var(--font-size-lg);
	color: var(--text-muted);
}

.asmo-mobile-nav-link.active i,
.asmo-mobile-nav-link:hover i {
	color: var(--color-primary);
}

.asmo-mobile-nav-link-danger {
	color: #DC3545;
}

.asmo-mobile-nav-link-danger:hover {
	background: #FFF5F5;
	color: #DC3545;
}

.asmo-mobile-nav-separator {
	height: 1px;
	background: var(--bg-tertiary);
	margin: var(--spacing-sm) 0;
}

/* Responsive */
@media (max-width: 1199px) {
	.asmo-header-nav {
		gap: var(--spacing-md);
	}

	.asmo-nav-link {
		padding: var(--spacing-xs) var(--spacing-sm);
		font-size: var(--font-size-xs);
	}
}

@media (max-width: 991px) {
	.asmo-modern-header {
		margin-bottom: var(--spacing-md);
	}

	.asmo-header-container {
		padding: 0;
	}

	.asmo-header-content {
		padding: var(--spacing-sm) var(--spacing-md);
		gap: var(--spacing-sm);
		flex-wrap: nowrap;
	}

	.asmo-logo-wrapper {
		width: 40px;
		height: 40px;
		padding: var(--spacing-xs);
	}

	.asmo-logo-text {
		display: none !important;
	}

	.asmo-logo-link {
		gap: 0;
	}

	.asmo-header-right {
		gap: var(--spacing-sm);
	}

	.asmo-user-btn {
		padding: var(--spacing-xs);
		gap: var(--spacing-xs);
	}

	.asmo-user-btn span {
		display: none !important;
	}

	.asmo-login-btn {
		padding: var(--spacing-xs) var(--spacing-md);
	}

	.asmo-login-btn span {
		display: none !important;
	}

	.asmo-mobile-toggle {
		width: 40px;
		height: 40px;
		font-size: var(--font-size-lg);
	}

	/* Mobile nav improvements */
	.asmo-mobile-nav {
		max-height: calc(100vh - 80px);
		overflow-y: auto;
	}

	.asmo-mobile-nav-link {
		padding: var(--spacing-md);
		font-size: var(--font-size-base);
	}
}

@media (max-width: 576px) {
	.asmo-modern-header {
		margin-bottom: var(--spacing-sm);
	}

	.asmo-header-content {
		padding: var(--spacing-xs) var(--spacing-sm);
		gap: var(--spacing-xs);
	}

	.asmo-logo-wrapper {
		width: 36px;
		height: 36px;
	}

	.asmo-user-avatar-small {
		width: 28px;
		height: 28px;
	}

	.asmo-user-btn {
		padding: 4px;
	}

	.asmo-login-btn {
		padding: var(--spacing-xs) var(--spacing-sm);
		font-size: var(--font-size-xs);
	}

	.asmo-mobile-toggle {
		width: 36px;
		height: 36px;
		font-size: var(--font-size-base);
	}

	.asmo-mobile-nav-link {
		padding: var(--spacing-sm) var(--spacing-md);
		font-size: var(--font-size-sm);
	}

	/* Adjust spacing for mobile */
	section.osahan-main-body {
		padding-top: var(--spacing-md);
	}
}

/* Bottom Navigation - New Design Style */
.asmo-bottom-nav {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--bg-primary);
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
	padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
	z-index: var(--z-fixed);
	display: flex;
	justify-content: space-around;
	align-items: flex-end;
	max-width: 480px;
	margin: 0 auto;
	gap: var(--spacing-xs);
}

.asmo-bottom-nav-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: var(--spacing-xs) var(--spacing-sm);
	border-radius: var(--border-radius-md);
	text-decoration: none;
	color: var(--text-secondary);
	transition: all var(--transition-base);
	position: relative;
	min-width: 0;
}

.asmo-nav-icon-wrapper {
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all var(--transition-base);
}

.asmo-bottom-nav-item i {
	font-size: 22px;
	transition: all var(--transition-base);
	color: var(--text-secondary);
}

.asmo-bottom-nav-item span {
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.asmo-bottom-nav-item.active {
	color: #4CAF50;
}

.asmo-bottom-nav-item.active .asmo-nav-icon-wrapper i {
	color: #4CAF50;
	transform: scale(1.1);
}

.asmo-bottom-nav-item.active span {
	color: #4CAF50;
	font-weight: var(--font-weight-semibold);
}

.asmo-bottom-nav-item:hover {
	background: var(--bg-secondary);
}

.asmo-bottom-nav-item:hover i {
	color: var(--color-primary);
}

/* Central Deal Button - Prominent Green Circle */
.asmo-bottom-nav-deal {
	position: relative;
	width: 64px;
	height: 64px;
	border-radius: var(--border-radius-full);
	background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%);
	color: var(--text-white);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
	transform: translateY(-12px);
	transition: all var(--transition-base);
	cursor: pointer;
	text-decoration: none;
	z-index: calc(var(--z-fixed) + 1);
	margin: 0 var(--spacing-xs);
}

.asmo-bottom-nav-deal:hover {
	transform: translateY(-14px) scale(1.05);
	box-shadow: 0 6px 16px rgba(76, 175, 80, 0.4);
}

.asmo-bottom-nav-deal:active {
	transform: translateY(-10px) scale(0.98);
}

.asmo-deal-icon {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 2px;
}

.asmo-bottom-nav-deal i {
	font-size: 24px;
	color: var(--text-white);
	font-weight: var(--font-weight-bold);
}

.asmo-bottom-nav-deal span {
	font-size: 10px;
	font-weight: var(--font-weight-semibold);
	color: var(--text-white);
	line-height: 1;
	margin-top: -2px;
}

/* Decorative elements for Deal button */
.asmo-bottom-nav-deal::before {
	content: '';
	position: absolute;
	top: -2px;
	left: -2px;
	right: -2px;
	bottom: -2px;
	border-radius: var(--border-radius-full);
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, transparent 100%);
	opacity: 0.5;
	pointer-events: none;
}

/* What's New Section - Circular Cards */
.asmo-whats-new {
	padding: var(--spacing-lg) var(--spacing-md);
}

.asmo-whats-new-title {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	color: var(--text-primary);
	margin-bottom: var(--spacing-md);
}

.asmo-circular-card {
	width: 100%;
	max-width: 100px;
	aspect-ratio: 1;
	border-radius: var(--border-radius-xl);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--spacing-md);
	background: var(--bg-primary);
	border: 3px solid;
	box-shadow: var(--shadow-card);
	transition: all var(--transition-base);
	cursor: pointer;
	text-decoration: none;
	overflow: hidden;
	position: relative;
}

.asmo-circular-card::before {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
	transform: rotate(45deg);
	transition: all var(--transition-slow);
	opacity: 0;
}

.asmo-circular-card:hover::before {
	opacity: 1;
	animation: shine 0.6s ease;
}

@keyframes shine {
	0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
	100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

.asmo-circular-card:hover {
	transform: translateY(-8px) scale(1.05);
	box-shadow: var(--shadow-lg);
}

.asmo-circular-card img {
	width: 60%;
	height: 60%;
	object-fit: contain;
	margin-bottom: var(--spacing-xs);
}

.asmo-circular-card-text {
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	text-align: center;
	color: var(--text-primary);
	line-height: 1.3;
}

/* Gradient Borders for Circular Cards */
.asmo-circular-card.red {
	border-color: #E53935;
}

.asmo-circular-card.green {
	border-color: #4CAF50;
}

.asmo-circular-card.blue {
	border-color: #2196F3;
}

.asmo-circular-card.yellow {
	border-color: #FFC107;
}

/* Active Promotions Section */
.asmo-promotions {
	padding: var(--spacing-lg) var(--spacing-md);
}

.asmo-promotions-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--spacing-md);
}

.asmo-promotions-title {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	color: var(--text-primary);
}

.asmo-promotions-link {
	font-size: var(--font-size-sm);
	color: var(--color-primary);
	text-decoration: none;
	font-weight: var(--font-weight-medium);
	transition: color var(--transition-base);
}

.asmo-promotions-link:hover {
	color: var(--color-primary-dark);
}

/* Banner Carousel Container */
.asmo-promo-carousel {
	position: relative;
	margin-bottom: var(--spacing-md);
}

.asmo-promo-carousel .slick-list {
	margin: 0 -8px;
}

.asmo-promo-carousel .slick-slide {
	padding: 0 8px;
}

/* Single Banner Slide */
.asmo-promo-banner-slide {
	outline: none;
}

.asmo-promo-banner {
	border-radius: var(--border-radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-md);
	transition: transform var(--transition-base);
	cursor: pointer;
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9; /* Tỷ lệ cân đối cho banner */
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bg-secondary);
}

.asmo-promo-banner:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
}

.asmo-promo-banner-link {
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.asmo-promo-banner-image {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain; /* Giữ tỷ lệ và fit vào container */
	border-radius: var(--border-radius-lg);
}

/* Responsive banner - điều chỉnh aspect ratio cho mobile */
@media (max-width: 576px) {
	.asmo-promo-banner {
		aspect-ratio: 16 / 10; /* Tỷ lệ hơi cao hơn cho mobile */
	}
}

/* Responsive banner height cho desktop */
@media (min-width: 992px) {
	.asmo-promo-banner {
		aspect-ratio: 16 / 7; /* Tỷ lệ rộng hơn cho desktop */
	}
}

/* Slick Carousel Dots */
.asmo-promo-carousel .slick-dots {
	bottom: -35px;
	text-align: center;
}

.asmo-promo-carousel .slick-dots li {
	display: inline-block;
	margin: 0 4px;
}

.asmo-promo-carousel .slick-dots li button {
	width: 8px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: #D0D0D0;
	text-indent: -9999px;
	overflow: hidden;
	cursor: pointer;
	transition: all 0.3s ease;
}

.asmo-promo-carousel .slick-dots li.slick-active button {
	background: var(--color-primary);
	width: 24px;
	border-radius: 4px;
}

/* Slick Carousel Arrows - Optional */
.asmo-promo-carousel .slick-prev,
.asmo-promo-carousel .slick-next {
	z-index: 1;
	width: 36px;
	height: 36px;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	transition: all 0.3s ease;
}

.asmo-promo-carousel .slick-prev {
	left: 10px;
}

.asmo-promo-carousel .slick-next {
	right: 10px;
}

.asmo-promo-carousel .slick-prev:before,
.asmo-promo-carousel .slick-next:before {
	color: var(--color-primary);
	font-size: 20px;
	opacity: 1;
}

.asmo-promo-carousel .slick-prev:hover,
.asmo-promo-carousel .slick-next:hover {
	background: var(--color-primary);
	box-shadow: 0 4px 12px rgba(229, 57, 53, 0.3);
}

.asmo-promo-carousel .slick-prev:hover:before,
.asmo-promo-carousel .slick-next:hover:before {
	color: #FFFFFF;
}

/* Loyalty Card */
.asmo-loyalty-card {
	background: var(--bg-gradient-red);
	border-radius: var(--border-radius-lg);
	padding: var(--spacing-lg);
	box-shadow: var(--shadow-lg);
	color: var(--text-white);
	position: relative;
	overflow: hidden;
	margin: var(--spacing-md);
}

.asmo-loyalty-card::before {
	content: '';
	position: absolute;
	top: -50%;
	right: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
	pointer-events: none;
}

.asmo-loyalty-card-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: var(--spacing-md);
}

.asmo-loyalty-card-label {
	font-size: var(--font-size-sm);
	opacity: 0.9;
	font-weight: var(--font-weight-medium);
}

.asmo-loyalty-card-name {
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-semibold);
	margin-top: 4px;
}

.asmo-loyalty-card-amount {
	font-size: var(--font-size-3xl);
	font-weight: var(--font-weight-bold);
	margin: var(--spacing-md) 0;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.asmo-loyalty-card-number {
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-medium);
	letter-spacing: 2px;
	margin-top: var(--spacing-md);
	opacity: 0.95;
}

.asmo-loyalty-card-footer {
	margin-top: var(--spacing-md);
	padding-top: var(--spacing-md);
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	font-size: var(--font-size-sm);
	opacity: 0.9;
}

/* Statistics Cards */
.asmo-stat-card {
	background: var(--bg-primary);
	border-radius: var(--border-radius-md);
	padding: var(--spacing-md);
	box-shadow: var(--shadow-card);
	flex: 1;
}

.asmo-stat-label {
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
	margin-bottom: var(--spacing-xs);
}

.asmo-stat-value {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
}

.asmo-stat-value.green {
	color: #4CAF50;
}

.asmo-stat-value.red {
	color: #E53935;
}

/* Bar Chart */
.asmo-bar-chart {
	display: flex;
	align-items: flex-end;
	gap: var(--spacing-sm);
	height: 120px;
	margin-top: var(--spacing-md);
}

.asmo-bar {
	flex: 1;
	background: var(--bg-secondary);
	border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0;
	transition: all var(--transition-base);
	position: relative;
	min-height: 20px;
}

.asmo-bar.active {
	background: var(--bg-gradient-red);
}

.asmo-bar-label {
	position: absolute;
	bottom: -20px;
	left: 50%;
	transform: translateX(-50%);
	font-size: var(--font-size-xs);
	color: var(--text-secondary);
	white-space: nowrap;
}


.button-search {
	background: var(--bg-gradient-red) !important;
	border-radius: var(--border-radius-md);
	color: var(--text-white);
	font-weight: var(--font-weight-semibold);
	padding: 12px 24px;
	transition: all var(--transition-base);
	border: none;
}

.button-search:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

.button-search:focus {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 0.2rem rgba(229, 57, 53, 0.25);
}

#txtLinkMobile {
	border-radius: var(--border-radius-md);
	border: 1px solid rgba(229, 57, 53, 0.2);
	transition: all var(--transition-base);
}

#txtLinkMobile:focus {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 0.2rem rgba(229, 57, 53, 0.15);
}

/* Update cards */
.card {
	border-radius: var(--border-radius-md);
	border: none;
	box-shadow: var(--shadow-card);
	transition: all var(--transition-base);
}

.card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

/* Update navigation active states */
.bg-color-head {
	background: var(--bg-gradient-red) !important;
}

.nav-mobile {
	background: var(--bg-gradient-red) !important;
}

/* Responsive Adjustments */
@media (max-width: 576px) {
	.asmo-bottom-nav {
		padding: var(--spacing-sm);
	}
	
	.asmo-bottom-nav-item span {
		font-size: 10px;
	}
	
	.asmo-circular-card {
		max-width: 80px;
	}
	
	.asmo-loyalty-card {
		margin: var(--spacing-sm);
		padding: var(--spacing-md);
	}
	
	.asmo-loyalty-card-amount {
		font-size: var(--font-size-2xl);
	}
	
	.asmo-promo-banner-image {
		max-height: 200px;
	}
	
	.asmo-promo-carousel .slick-dots {
		bottom: -30px;
	}
}

/* Profile Statistics Page */
.asmo-profile-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--spacing-lg);
	padding-bottom: var(--spacing-md);
	border-bottom: 1px solid rgba(229, 57, 53, 0.1);
}

.asmo-profile-header h5 {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	color: var(--text-primary);
	margin: 0;
}

.asmo-profile-tabs {
	display: flex;
	gap: var(--spacing-sm);
	margin-bottom: var(--spacing-lg);
	border-bottom: 2px solid var(--bg-secondary);
}

.asmo-profile-tab {
	padding: var(--spacing-sm) var(--spacing-md);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-medium);
	color: var(--text-secondary);
	background: transparent;
	border: none;
	border-bottom: 3px solid transparent;
	cursor: pointer;
	transition: all var(--transition-base);
	position: relative;
	text-decoration: none;
	display: inline-block;
}

.asmo-profile-tab:hover {
	color: var(--color-primary);
}

.asmo-profile-tab.active {
	color: var(--color-primary);
	border-bottom-color: var(--color-primary);
	font-weight: var(--font-weight-semibold);
}

.asmo-stats-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--spacing-md);
	margin-bottom: var(--spacing-lg);
}

.asmo-stat-card {
	background: var(--bg-primary);
	border-radius: var(--border-radius-md);
	padding: var(--spacing-md);
	box-shadow: var(--shadow-card);
	transition: all var(--transition-base);
}

.asmo-stat-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
}

.asmo-stat-label {
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
	margin-bottom: var(--spacing-xs);
	font-weight: var(--font-weight-medium);
}

.asmo-stat-value {
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-bold);
	line-height: 1.2;
}

.asmo-stat-value.green {
	color: #4CAF50;
}

.asmo-stat-value.red {
	color: #E53935;
}

/* Bar Chart Section */
.asmo-chart-section {
	margin-top: var(--spacing-lg);
}

.asmo-chart-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--spacing-md);
}

.asmo-chart-title {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	color: var(--text-primary);
	margin: 0;
}

.asmo-chart-amount {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
	color: var(--color-primary);
}

.asmo-bar-chart-container {
	background: var(--bg-primary);
	border-radius: var(--border-radius-md);
	padding: var(--spacing-lg);
	box-shadow: var(--shadow-card);
	margin-top: var(--spacing-md);
}

.asmo-bar-chart {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--spacing-sm);
	height: 150px;
	margin-top: var(--spacing-md);
	padding: 0 var(--spacing-sm);
}

.asmo-bar-wrapper {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	justify-content: flex-end;
}

.asmo-bar {
	width: 100%;
	background: var(--bg-secondary);
	border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0;
	transition: all var(--transition-base);
	position: relative;
	min-height: 20px;
	cursor: pointer;
}

.asmo-bar:hover {
	opacity: 0.8;
	transform: scaleY(1.05);
}

.asmo-bar.active {
	background: var(--bg-gradient-red);
	box-shadow: 0 -2px 8px rgba(229, 57, 53, 0.3);
}

.asmo-bar-label {
	margin-top: var(--spacing-xs);
	font-size: var(--font-size-xs);
	color: var(--text-secondary);
	text-align: center;
	font-weight: var(--font-weight-medium);
}

.asmo-bar-value {
	position: absolute;
	top: -20px;
	left: 50%;
	transform: translateX(-50%);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
	color: var(--text-primary);
	white-space: nowrap;
	opacity: 0;
	transition: opacity var(--transition-base);
}

.asmo-bar:hover .asmo-bar-value {
	opacity: 1;
}

/* Profile Account Card */
.asmo-profile-card {
	background: var(--bg-primary);
	border-radius: var(--border-radius-lg);
	box-shadow: var(--shadow-card);
	overflow: hidden;
}

.asmo-profile-avatar {
	width: 100px;
	height: 100px;
	border-radius: var(--border-radius-full);
	border: 3px solid var(--color-primary);
	padding: 3px;
	object-fit: cover;
}

.asmo-profile-info {
	text-align: center;
	padding: var(--spacing-lg);
	border-bottom: 1px solid var(--bg-secondary);
}

.asmo-profile-name {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	color: var(--text-primary);
	margin: var(--spacing-sm) 0 var(--spacing-xs);
}

.asmo-profile-email {
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
}

.asmo-profile-menu {
	list-style: none;
	padding: 0;
	margin: 0;
}

.asmo-profile-menu-item {
	border-bottom: 1px solid var(--bg-secondary);
	transition: all var(--transition-base);
}

.asmo-profile-menu-item:hover {
	background: var(--bg-secondary);
}

.asmo-profile-menu-link {
	display: flex;
	align-items: center;
	padding: var(--spacing-md);
	color: var(--text-primary);
	text-decoration: none;
	gap: var(--spacing-md);
}

.asmo-profile-menu-icon {
	width: 40px;
	height: 40px;
	border-radius: var(--border-radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bg-secondary);
	color: var(--color-primary);
	font-size: var(--font-size-lg);
	flex-shrink: 0;
}

.asmo-profile-menu-text {
	flex: 1;
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-medium);
}

.asmo-profile-menu-badge {
	padding: 4px 12px;
	border-radius: var(--border-radius-full);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
}

.asmo-profile-menu-badge.info {
	background: rgba(23, 162, 184, 0.15);
	color: #17a2b8;
}

.asmo-profile-menu-arrow {
	color: var(--text-muted);
	font-size: var(--font-size-lg);
}

/* Add padding bottom for bottom nav */
body.fixed-bottom-padding {
	padding-bottom: 80px;
}

@media (min-width: 768px) {
	.asmo-bottom-nav {
		display: none;
	}
	
	body.fixed-bottom-padding {
		padding-bottom: 0;
	}
	
	.asmo-stats-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 576px) {
	.asmo-stats-grid {
		grid-template-columns: 1fr;
	}
	
	.asmo-bar-chart {
		height: 120px;
		gap: 4px;
	}
	
	.asmo-bar-label {
		font-size: 10px;
	}
}

/* ============================================
   MODERN PROFILE DESIGN - MOBILE APP STYLE
   ============================================ */

.profile-modern-container {
	max-width: 100%;
	margin: 0;
	padding: 0;
	background: transparent;
	min-height: auto;
}

/* Profile Header */
.profile-header-modern {
	background: var(--bg-primary);
	border-radius: var(--border-radius-xl);
	padding: var(--spacing-lg);
	margin-bottom: var(--spacing-md);
	box-shadow: var(--shadow-card);
}

.profile-header-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.profile-avatar-section {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
	flex: 1;
}

.profile-avatar-modern {
	width: 60px;
	height: 60px;
	border-radius: var(--border-radius-full);
	object-fit: cover;
	border: 3px solid var(--bg-secondary);
	background: var(--bg-tertiary);
}

.profile-info-modern {
	flex: 1;
}

.profile-username-modern {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	color: var(--text-primary);
	margin-bottom: var(--spacing-xs);
	line-height: 1.3;
}

.profile-email-modern {
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
	line-height: 1.3;
}

.profile-header-icon {
	width: 40px;
	height: 40px;
	border-radius: var(--border-radius-md);
	background: var(--bg-secondary);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-secondary);
	font-size: var(--font-size-lg);
}

/* Points Cards */
.points-cards-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-md);
	margin-bottom: var(--spacing-md);
}

.points-card-modern {
	background: var(--bg-primary);
	border-radius: var(--border-radius-xl);
	padding: var(--spacing-md);
	box-shadow: var(--shadow-card);
	transition: all var(--transition-base);
}

.points-card-modern:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

.points-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--spacing-sm);
}

.points-card-label {
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
	font-weight: var(--font-weight-medium);
}

.points-info-icon {
	font-size: var(--font-size-sm);
	color: #4CAF50;
	cursor: pointer;
}

.points-card-value {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
}

.points-number {
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-bold);
	color: var(--text-primary);
	line-height: 1;
}

.points-star-icon {
	font-size: var(--font-size-xl);
	color: #FFC107;
}

.points-card-accumulated .points-number {
	color: #4CAF50;
}

.points-card-pending .points-number {
	color: var(--text-primary);
}

/* Balance Card */
.balance-card-modern {
	background: var(--bg-primary);
	border-radius: var(--border-radius-xl);
	padding: var(--spacing-lg);
	margin-bottom: var(--spacing-md);
	box-shadow: var(--shadow-card);
}

.balance-card-header {
	margin-bottom: var(--spacing-sm);
}

.balance-card-label {
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
	font-weight: var(--font-weight-medium);
}

.balance-card-value {
	display: flex;
	align-items: baseline;
	gap: var(--spacing-xs);
}

.balance-amount {
	font-size: var(--font-size-3xl);
	font-weight: var(--font-weight-bold);
	color: var(--color-primary);
	line-height: 1;
}

.balance-currency {
	font-size: var(--font-size-lg);
	color: var(--text-secondary);
	font-weight: var(--font-weight-medium);
}

/* Features Grid */
.features-grid-modern {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--spacing-md);
	margin-bottom: var(--spacing-lg);
	background: var(--bg-primary);
	border-radius: var(--border-radius-xl);
	padding: var(--spacing-md);
	box-shadow: var(--shadow-card);
}

.feature-item-modern {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-sm);
	text-decoration: none;
	transition: all var(--transition-base);
	padding: var(--spacing-sm);
	border-radius: var(--border-radius-md);
}

.feature-item-modern:hover {
	background: var(--bg-secondary);
	transform: translateY(-2px);
}

.feature-icon-modern {
	width: 56px;
	height: 56px;
	border-radius: var(--border-radius-lg);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--font-size-2xl);
	color: var(--text-white);
	box-shadow: var(--shadow-sm);
	transition: all var(--transition-base);
}

.feature-item-modern:hover .feature-icon-modern {
	transform: scale(1.1);
	box-shadow: var(--shadow-md);
}

.feature-icon-blue {
	background: linear-gradient(135deg, #2196F3 0%, #42A5F5 100%);
}

.feature-icon-orange {
	background: linear-gradient(135deg, #FF9800 0%, #FFB74D 100%);
}

.feature-icon-purple {
	background: linear-gradient(135deg, #9C27B0 0%, #BA68C8 100%);
}

.feature-icon-green {
	background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%);
}

.feature-icon-red {
	background: linear-gradient(135deg, #E53935 0%, #EF5350 100%);
}

.feature-icon-yellow {
	background: linear-gradient(135deg, #FFC107 0%, #FFD54F 100%);
}

.feature-label-modern {
	font-size: var(--font-size-xs);
	color: var(--text-primary);
	font-weight: var(--font-weight-medium);
	text-align: center;
	line-height: 1.3;
}

/* Section Modern */
.section-modern {
	margin-bottom: var(--spacing-lg);
}

.section-header-modern {
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
	font-weight: var(--font-weight-medium);
	margin-bottom: var(--spacing-sm);
	padding: 0 var(--spacing-sm);
}

.section-list-modern {
	background: var(--bg-primary);
	border-radius: var(--border-radius-xl);
	box-shadow: var(--shadow-card);
	overflow: hidden;
}

.section-item-modern {
	display: flex;
	align-items: center;
	padding: var(--spacing-md);
	gap: var(--spacing-md);
	text-decoration: none;
	color: var(--text-primary);
	border-bottom: 1px solid var(--bg-secondary);
	transition: all var(--transition-base);
}

.section-item-modern:last-child {
	border-bottom: none;
}

.section-item-modern:hover {
	background: var(--bg-secondary);
}

.section-item-modern.section-item-danger {
	color: #E53935;
}

.section-item-modern.section-item-danger:hover {
	background: rgba(229, 57, 53, 0.05);
}

.section-item-icon-modern {
	width: 40px;
	height: 40px;
	border-radius: var(--border-radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--font-size-lg);
	color: var(--text-white);
	flex-shrink: 0;
}

.section-icon-blue {
	background: linear-gradient(135deg, #2196F3 0%, #42A5F5 100%);
}

.section-icon-purple {
	background: linear-gradient(135deg, #9C27B0 0%, #BA68C8 100%);
}

.section-icon-gray {
	background: linear-gradient(135deg, #757575 0%, #9E9E9E 100%);
}

.section-icon-orange {
	background: linear-gradient(135deg, #FF9800 0%, #FFB74D 100%);
}

.section-icon-green {
	background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%);
}

.section-icon-red {
	background: linear-gradient(135deg, #E53935 0%, #EF5350 100%);
}

.section-item-text-modern {
	flex: 1;
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-medium);
}

.section-item-arrow {
	color: var(--text-muted);
	font-size: var(--font-size-lg);
}

/* Profile Content Area */
.profile-content-modern {
	background: var(--bg-primary);
	border-radius: var(--border-radius-xl);
	padding: var(--spacing-lg);
	margin-bottom: var(--spacing-lg);
	box-shadow: var(--shadow-card);
}

/* Responsive */
@media (max-width: 576px) {
	
	.profile-header-modern {
		padding: var(--spacing-md);
	}
	
	.profile-avatar-modern {
		width: 50px;
		height: 50px;
	}
	
	.profile-username-modern {
		font-size: var(--font-size-md);
	}
	
	.profile-email-modern {
		font-size: var(--font-size-xs);
	}
	
	.points-cards-container {
		gap: var(--spacing-sm);
	}
	
	.points-card-modern {
		padding: var(--spacing-sm);
	}
	
	.points-number {
		font-size: var(--font-size-xl);
	}
	
	.balance-amount {
		font-size: var(--font-size-2xl);
	}
	
	.features-grid-modern {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--spacing-sm);
		padding: var(--spacing-sm);
	}
	
	.feature-icon-modern {
		width: 48px;
		height: 48px;
		font-size: var(--font-size-xl);
	}
	
	.feature-label-modern {
		font-size: 10px;
	}
	
	.section-item-modern {
		padding: var(--spacing-sm) var(--spacing-md);
	}
	
	.section-item-icon-modern {
		width: 36px;
		height: 36px;
		font-size: var(--font-size-base);
	}
}

@media (min-width: 768px) {
	.profile-modern-container {
		max-width: 700px;
		padding: var(--spacing-lg);
	}
	
	.features-grid-modern {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--spacing-lg);
		padding: var(--spacing-lg);
	}
	
	.feature-icon-modern {
		width: 64px;
		height: 64px;
		font-size: var(--font-size-3xl);
	}
	
	.feature-label-modern {
		font-size: var(--font-size-sm);
	}
}

/* ============================================
   ORDERS PAGE - MODERN DESIGN
   ============================================ */

/* Orders Header */
.orders-header-modern {
	background: var(--bg-primary);
	border-radius: var(--border-radius-xl);
	padding: var(--spacing-lg);
	margin-bottom: var(--spacing-md);
	box-shadow: var(--shadow-card);
}

.orders-header-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.orders-title-section {
	flex: 1;
}

.orders-title-modern {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
	color: var(--text-primary);
	margin: 0 0 var(--spacing-xs) 0;
}

.orders-subtitle-modern {
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
	margin: 0;
}

.orders-header-icon {
	width: 48px;
	height: 48px;
	border-radius: var(--border-radius-md);
	background: var(--bg-gradient-red);
	color: var(--text-white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--font-size-xl);
	box-shadow: var(--shadow-sm);
}

/* Orders Notice */
.orders-notice-modern {
	background: rgba(255, 193, 7, 0.1);
	border-left: 4px solid #FFC107;
	border-radius: var(--border-radius-md);
	padding: var(--spacing-sm) var(--spacing-md);
	margin-bottom: var(--spacing-md);
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	font-size: var(--font-size-sm);
	color: #856404;
}

.orders-notice-modern i {
	font-size: var(--font-size-lg);
	color: #FFC107;
}

/* Claim Order Header */
.claim-order-header-modern {
	background: var(--bg-primary);
	border-radius: var(--border-radius-xl);
	padding: var(--spacing-lg);
	margin-bottom: var(--spacing-md);
	box-shadow: var(--shadow-card);
}

.claim-order-header-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.claim-order-title-section {
	flex: 1;
}

.claim-order-title-modern {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
	color: var(--text-primary);
	margin: 0 0 var(--spacing-xs) 0;
}

.claim-order-subtitle-modern {
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
	margin: 0;
}

.claim-order-header-icon {
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bg-gradient-red);
	border-radius: var(--border-radius-md);
	color: white;
	font-size: var(--font-size-xl);
}

@media (max-width: 768px) {
	.claim-order-header-modern {
		padding: var(--spacing-md);
	}
	
	.claim-order-header-content {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--spacing-md);
	}
	
	.claim-order-header-icon {
		width: 40px;
		height: 40px;
		font-size: var(--font-size-lg);
	}
}

/* Claim Order Card */
.claim-order-card-modern {
	background: var(--bg-primary);
	border-radius: var(--border-radius-xl);
	padding: var(--spacing-lg);
	margin-bottom: var(--spacing-md);
	box-shadow: var(--shadow-card);
	border: 2px solid #E3F2FD;
}

.claim-order-header {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	margin-bottom: var(--spacing-sm);
}

.claim-order-header i {
	font-size: var(--font-size-xl);
	color: var(--color-primary);
}

.claim-order-title {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	color: var(--text-primary);
	margin: 0;
}

.claim-order-description {
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
	margin-bottom: var(--spacing-md);
	line-height: 1.6;
}

.claim-order-form {
	display: grid;
	grid-template-columns: 2fr 1fr auto;
	gap: var(--spacing-md);
	align-items: end;
}

.claim-order-input-group {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
}

.claim-order-label {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	color: var(--text-primary);
}

.claim-order-input,
.claim-order-select {
	padding: var(--spacing-sm) var(--spacing-md);
	border: 1px solid #DEE2E6;
	border-radius: var(--border-radius-md);
	font-size: var(--font-size-base);
	color: var(--text-primary);
	background: var(--bg-primary);
	transition: border-color 0.3s, box-shadow 0.3s;
}

.claim-order-input:focus,
.claim-order-select:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(252, 83, 50, 0.1);
}

.claim-order-search-btn {
	padding: var(--spacing-sm) var(--spacing-lg);
	background: var(--bg-gradient-red);
	color: white;
	border: none;
	border-radius: var(--border-radius-md);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-medium);
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
	transition: transform 0.2s, box-shadow 0.2s;
	white-space: nowrap;
}

.claim-order-search-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(252, 83, 50, 0.3);
}

.claim-order-search-btn:active {
	transform: translateY(0);
}

.claim-order-result {
	margin-top: var(--spacing-md);
	padding-top: var(--spacing-md);
	border-top: 1px solid #E9ECEF;
}

.claim-order-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-sm);
	padding: var(--spacing-md);
	color: var(--text-secondary);
}

.claim-order-loading i {
	font-size: var(--font-size-lg);
	animation: spin 1s linear infinite;
}

@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

.claim-order-error {
	background: #FFF3CD;
	border: 1px solid #FFC107;
	border-radius: var(--border-radius-md);
	padding: var(--spacing-md);
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	color: #856404;
}

.claim-order-error i {
	font-size: var(--font-size-lg);
	color: #FFC107;
}

.claim-order-info {
	background: #D1ECF1;
	border: 1px solid #BEE5EB;
	border-radius: var(--border-radius-md);
	padding: var(--spacing-md);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
	color: #0C5460;
}

.claim-order-info i {
	font-size: var(--font-size-lg);
	color: #17A2B8;
}

.claim-order-link {
	color: #17A2B8;
	text-decoration: none;
	font-weight: var(--font-weight-medium);
	margin-top: var(--spacing-xs);
}

.claim-order-link:hover {
	text-decoration: underline;
}

.claim-order-success {
	background: #D4EDDA;
	border: 1px solid #C3E6CB;
	border-radius: var(--border-radius-md);
	padding: var(--spacing-md);
}

.claim-order-content-wrapper {
	display: flex;
	gap: var(--spacing-md);
	align-items: flex-start;
}

.claim-order-image-section {
	flex-shrink: 0;
	width: 120px;
	height: 120px;
	border-radius: var(--border-radius-md);
	overflow: hidden;
	background: var(--bg-secondary);
	border: 2px solid #C3E6CB;
}

.claim-order-product-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.claim-order-info-section h6 {
	margin: 0 0 var(--spacing-md) 0;
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-bold);
	color: #155724;
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
}

.claim-order-info-section h6 i {
	color: #28A745;
}

.claim-order-details {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
	margin-bottom: var(--spacing-md);
}

.claim-order-detail-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--spacing-xs) 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.claim-order-detail-item:last-child {
	border-bottom: none;
}

.detail-label {
	font-size: var(--font-size-sm);
	color: #6C757D;
	font-weight: var(--font-weight-medium);
}

.detail-value {
	font-size: var(--font-size-sm);
	color: var(--text-primary);
	font-weight: var(--font-weight-medium);
	text-align: right;
	max-width: 60%;
	word-break: break-word;
}

.claim-order-commission {
	background: white;
	border-radius: var(--border-radius-md);
	padding: var(--spacing-md);
	margin-top: var(--spacing-md);
	border: 2px solid #28A745;
}

.commission-preview {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.commission-label {
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
	font-weight: var(--font-weight-medium);
}

.commission-value {
	font-size: var(--font-size-lg);
	color: #28A745;
	font-weight: var(--font-weight-bold);
}

.claim-order-btn {
	width: 100%;
	padding: var(--spacing-md);
	background: var(--bg-gradient-red);
	color: white;
	border: none;
	border-radius: var(--border-radius-md);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-bold);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-sm);
	transition: transform 0.2s, box-shadow 0.2s;
	margin-top: var(--spacing-md);
}

.claim-order-btn:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(252, 83, 50, 0.3);
}

.claim-order-btn:active:not(:disabled) {
	transform: translateY(0);
}

.claim-order-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Claim Order Products Section */
.claim-order-products-section {
	margin-top: var(--spacing-md);
	padding-top: var(--spacing-md);
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.claim-order-products-title {
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-bold);
	color: #155724;
	margin: 0 0 var(--spacing-md) 0;
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
}

.claim-order-products-title i {
	color: #28A745;
	font-size: var(--font-size-lg);
}

.claim-order-products-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--spacing-md);
}

/* Product Card - Design thương mại */
.claim-order-product-card {
	background: white;
	border-radius: var(--border-radius-lg);
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	border: 1px solid rgba(0, 0, 0, 0.08);
	transition: all 0.3s ease;
	display: flex;
	flex-direction: column;
}

.claim-order-product-card:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	transform: translateY(-2px);
}

.claim-order-product-image-container {
	width: 100%;
	height: 200px;
	background: var(--bg-secondary);
	overflow: hidden;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.claim-order-product-image-main {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.claim-order-product-card:hover .claim-order-product-image-main {
	transform: scale(1.05);
}

.claim-order-product-placeholder-main {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: var(--bg-secondary);
	color: var(--text-muted);
	gap: var(--spacing-xs);
}

.claim-order-product-placeholder-main i {
	font-size: var(--font-size-3xl);
	color: var(--text-muted);
}

.claim-order-product-placeholder-main span {
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
}

.claim-order-product-content {
	padding: var(--spacing-md);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
	flex: 1;
}

.claim-order-product-title {
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-semibold);
	color: var(--text-primary);
	margin: 0;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	min-height: 3em;
}

.claim-order-product-stats {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
	padding: var(--spacing-sm) 0;
	border-top: 1px solid rgba(0, 0, 0, 0.05);
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.claim-order-product-stat-item {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
}

.claim-order-product-stat-item i {
	font-size: var(--font-size-base);
	color: var(--color-primary);
	width: 18px;
	text-align: center;
}

.claim-order-product-stat-item .stat-label {
	font-weight: var(--font-weight-medium);
}

.claim-order-product-stat-item .stat-value {
	font-weight: var(--font-weight-semibold);
	color: var(--text-primary);
	margin-left: auto;
}

.claim-order-product-commission-badge {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
	padding: var(--spacing-sm) var(--spacing-md);
	background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%);
	border-radius: var(--border-radius-md);
	color: white;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	margin-top: auto;
}

.claim-order-product-commission-badge i {
	font-size: var(--font-size-base);
	color: #FFD700;
}

.claim-order-product-commission-badge .commission-text {
	flex: 1;
}

.claim-order-product-commission-badge .commission-amount {
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-bold);
	color: white;
}

/* Responsive cho Claim Order */
@media (max-width: 768px) {
	.claim-order-form {
		grid-template-columns: 1fr;
		gap: var(--spacing-sm);
	}
	
	.claim-order-search-btn {
		width: 100%;
		justify-content: center;
	}
	
	.claim-order-content-wrapper {
		flex-direction: column;
		align-items: center;
	}
	
	.claim-order-image-section {
		width: 100%;
		max-width: 200px;
		height: 200px;
	}
	
	.detail-value {
		max-width: 50%;
		font-size: var(--font-size-xs);
	}
	
	.claim-order-commission {
		padding: var(--spacing-sm);
	}
	
	.commission-preview {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--spacing-xs);
	}
	
	.claim-order-products-list {
		grid-template-columns: 1fr;
		gap: var(--spacing-sm);
	}
	
	.claim-order-product-image-container {
		height: 180px;
	}
	
	.claim-order-product-content {
		padding: var(--spacing-sm);
	}
	
	.claim-order-product-title {
		font-size: var(--font-size-sm);
		min-height: 2.5em;
	}
	
	.claim-order-product-stat-item {
		font-size: var(--font-size-xs);
	}
	
	.claim-order-product-commission-badge {
		padding: var(--spacing-xs) var(--spacing-sm);
		font-size: var(--font-size-xs);
	}
}

/* Filter Card */
.orders-filter-modern {
	background: var(--bg-primary);
	border-radius: var(--border-radius-xl);
	padding: var(--spacing-lg);
	margin-bottom: var(--spacing-md);
	box-shadow: var(--shadow-card);
}

.filter-row-modern {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-md);
	margin-bottom: var(--spacing-md);
}

.filter-group-modern {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
}

.filter-label-modern {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	color: var(--text-primary);
}

.filter-input-modern,
.filter-select-modern {
	width: 100%;
	padding: var(--spacing-sm) var(--spacing-md);
	border: 1px solid var(--bg-secondary);
	border-radius: var(--border-radius-md);
	font-size: var(--font-size-base);
	color: var(--text-primary);
	background: var(--bg-primary);
	transition: all var(--transition-base);
}

.filter-input-modern:focus,
.filter-select-modern:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.1);
}

.filter-button-modern {
	width: 100%;
	padding: var(--spacing-md);
	background: var(--bg-gradient-red);
	color: var(--text-white);
	border: none;
	border-radius: var(--border-radius-md);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-semibold);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-sm);
	cursor: pointer;
	transition: all var(--transition-base);
	box-shadow: var(--shadow-sm);
}

.filter-button-modern:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
	opacity: 0.95;
}

.filter-button-modern:active {
	transform: translateY(0);
}

.filter-button-secondary {
	background: rgba(33, 150, 243, 0.1) !important;
	color: #2196F3 !important;
	border: 2px solid rgba(33, 150, 243, 0.3) !important;
}

.filter-button-secondary:hover {
	background: rgba(33, 150, 243, 0.2) !important;
	border-color: #2196F3 !important;
	color: #1976D2 !important;
}

/* Orders Table Card */
.orders-table-card-modern {
	background: var(--bg-primary);
	border-radius: var(--border-radius-xl);
	padding: var(--spacing-lg);
	margin-bottom: var(--spacing-lg);
	box-shadow: var(--shadow-card);
}

.table-responsive-modern {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-bottom: var(--spacing-lg);
}

.table-modern {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--font-size-sm);
}

.table-modern thead {
	background: var(--bg-secondary);
}

.table-modern thead th {
	padding: var(--spacing-md);
	text-align: left;
	font-weight: var(--font-weight-semibold);
	color: var(--text-primary);
	font-size: var(--font-size-sm);
	border-bottom: 2px solid var(--bg-tertiary);
	white-space: nowrap;
}

.table-modern tbody tr {
	border-bottom: 1px solid var(--bg-secondary);
	transition: all var(--transition-base);
}

.table-modern tbody tr:hover {
	background: var(--bg-secondary);
}

.table-modern tbody td {
	padding: var(--spacing-md);
	color: var(--text-primary);
	vertical-align: middle;
}

.table-row-modern td {
	font-size: var(--font-size-sm);
}

/* Table States */
.table-loading,
.table-empty,
.table-error {
	text-align: center;
	padding: var(--spacing-xl) !important;
}

.loading-spinner,
.empty-state,
.error-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-md);
	color: var(--text-secondary);
}

.loading-spinner i {
	font-size: var(--font-size-3xl);
	color: var(--color-primary);
	animation: spin 1s linear infinite;
}

@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

.empty-state i,
.error-state i {
	font-size: var(--font-size-3xl);
	color: var(--text-muted);
}

.empty-state p,
.error-state p {
	margin: 0;
	font-size: var(--font-size-base);
}

/* Order Badges */
.order-type-badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: var(--border-radius-full);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	white-space: nowrap;
}

.order-type-shopee {
	background: rgba(238, 77, 45, 0.1);
	color: #EE4D2D;
}

.order-type-lazada {
	background: rgba(0, 123, 255, 0.1);
	color: #007BFF;
}

.order-type-default {
	background: var(--bg-secondary);
	color: var(--text-secondary);
}

.order-code,
.order-product {
	display: block;
	max-width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.order-amount {
	font-weight: var(--font-weight-semibold);
	color: var(--color-primary);
}

.order-date {
	color: var(--text-secondary);
	font-size: var(--font-size-xs);
}

/* Transaction specific styles */
.transaction-code-modern {
	font-family: 'SF Mono', 'Monaco', 'Courier New', monospace;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	color: var(--text-primary);
	letter-spacing: -0.2px;
}

.transaction-amount-modern {
	font-weight: var(--font-weight-bold);
	color: var(--color-primary);
	font-size: var(--font-size-base);
}

.transaction-date-modern {
	color: var(--text-secondary);
	font-size: var(--font-size-sm);
}

.table-cell-stt {
	text-align: center;
	font-weight: var(--font-weight-medium);
	color: var(--text-secondary);
}

.table-cell-code {
	font-weight: var(--font-weight-medium);
}

.table-cell-amount {
	font-weight: var(--font-weight-semibold);
}

.table-cell-date {
	color: var(--text-secondary);
}

.table-cell-status {
	text-align: center;
}


/* Pagination Modern */
.pagination-modern {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
	padding-top: var(--spacing-md);
	border-top: 1px solid var(--bg-secondary);
}

.pagination-info-modern {
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
	text-align: center;
}

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

.pagination-list-modern {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
	list-style: none;
	padding: 0;
	margin: 0;
}

.pagination-item-modern {
	display: flex;
	align-items: center;
}

.pagination-link-modern {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
	padding: var(--spacing-sm) var(--spacing-md);
	border-radius: var(--border-radius-md);
	background: var(--bg-secondary);
	color: var(--text-primary);
	text-decoration: none;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	transition: all var(--transition-base);
	border: none;
	cursor: pointer;
}

.pagination-item-modern:not(.pagination-disabled) .pagination-link-modern:hover {
	background: var(--color-primary);
	color: var(--text-white);
	transform: translateY(-2px);
	box-shadow: var(--shadow-sm);
}

.pagination-item-modern.pagination-active .pagination-link-modern {
	background: var(--bg-gradient-red);
	color: var(--text-white);
	box-shadow: var(--shadow-sm);
}

.pagination-item-modern.pagination-disabled .pagination-link-modern {
	opacity: 0.5;
	cursor: not-allowed;
	background: var(--bg-tertiary);
}

.pagination-item-modern.pagination-disabled .pagination-link-modern:hover {
	transform: none;
	box-shadow: none;
}

/* Orders Responsive */
@media (max-width: 768px) {
	.filter-row-modern {
		grid-template-columns: 1fr;
		gap: var(--spacing-sm);
	}
	
	.table-modern {
		font-size: var(--font-size-xs);
	}
	
	.table-modern thead th,
	.table-modern tbody td {
		padding: var(--spacing-sm);
	}
	
	.table-modern thead th {
		font-size: var(--font-size-xs);
	}
	
	.order-code,
	.order-product {
		max-width: 120px;
	}
	
	.pagination-modern {
		gap: var(--spacing-sm);
	}
	
	.pagination-list-modern {
		flex-wrap: wrap;
		justify-content: center;
	}
	
	.pagination-link-modern {
		padding: var(--spacing-xs) var(--spacing-sm);
		font-size: var(--font-size-xs);
	}
	
	.pagination-link-modern span {
		display: none;
	}
	
	.pagination-link-modern i {
		font-size: var(--font-size-base);
	}
}

@media (max-width: 576px) {
	.orders-header-modern {
		padding: var(--spacing-md);
	}
	
	.orders-title-modern {
		font-size: var(--font-size-lg);
	}
	
	.orders-subtitle-modern {
		font-size: var(--font-size-xs);
	}
	
	.orders-header-icon {
		width: 40px;
		height: 40px;
		font-size: var(--font-size-lg);
	}
	
	.orders-filter-modern {
		padding: var(--spacing-md);
	}
	
	.orders-table-card-modern {
		padding: var(--spacing-md);
	}
	
	.table-modern thead th {
		font-size: 10px;
		padding: var(--spacing-xs);
	}
	
	.table-modern tbody td {
		font-size: 10px;
		padding: var(--spacing-xs);
	}
	
	.order-code,
	.order-product {
		max-width: 80px;
	}
}

/* ============================================
   ORDERS CARDS LAYOUT - MODERN DESIGN
   ============================================ */

.orders-cards-container-modern {
	margin-bottom: 24px;
}

.orders-cards-grid-modern {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
	gap: 20px;
	margin-bottom: 24px;
}

/* ============================================
   ORDER CARD - THIẾT KẾ MỚI TỪ ĐẦU
   ============================================ */

.order-card-modern {
	background: #FFFFFF;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	border: 1px solid #F3F4F6;
	display: flex;
	flex-direction: column;
	height: 100%;
	position: relative;
}

.order-card-modern:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.06);
	border-color: #E5E7EB;
}

/* Image Section */
.order-card-image-section {
	position: relative;
	width: 100%;
	height: 200px;
	background: #F9FAFB;
	overflow: hidden;
}

.order-product-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	display: block;
}

.order-card-modern:hover .order-product-image {
	transform: scale(1.05);
}

.order-product-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #D1D5DB;
	font-size: 56px;
	background: #F9FAFB;
}

/* Platform Badge */
.order-platform-badge {
	position: absolute;
	top: 12px;
	right: 12px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 12px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 600;
	color: #FFFFFF;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	z-index: 2;
}

.order-platform-badge.type-shopee {
	background-color: #EE4D2D;
}

.order-platform-badge.type-lazada {
	background-color: #0F146D;
}

.order-platform-badge.type-tiktok {
	background-color: #000000;
}

.order-platform-badge.type-default {
	background-color: #6B7280;
}

.order-platform-badge i {
	font-size: 12px;
}

/* Content Section */
.order-card-content-section {
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	flex: 1;
}

/* Order Card Header */
.order-card-header-modern {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 2px;
}

.order-code-section {
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex: 1;
	min-width: 0;
}

.order-code-label {
	font-size: 10px;
	color: #9CA3AF;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	font-weight: 600;
}

.order-card-type-modern {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
	flex: 1;
}

.order-type-icon-modern {
	width: 48px;
	height: 48px;
	border-radius: var(--border-radius-lg);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--font-size-xl);
	color: var(--text-white);
	flex-shrink: 0;
	box-shadow: var(--shadow-sm);
}

.order-type-icon-modern.type-shopee {
	background: linear-gradient(135deg, #EE4D2D 0%, #FF6B4A 100%);
}

.order-type-icon-modern.type-lazada {
	background: linear-gradient(135deg, #0F146D 0%, #1A237E 100%);
}

.order-type-icon-modern.type-tiktok {
	background: linear-gradient(135deg, #000000 0%, #333333 100%);
}

.order-type-icon-modern.type-default {
	background: linear-gradient(135deg, #757575 0%, #9E9E9E 100%);
}

.order-type-info-modern {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
}

.order-type-name-modern {
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-semibold);
	color: var(--text-primary);
}

.order-code-modern {
	font-size: 13px;
	color: #1F2937;
	font-family: 'SF Mono', 'Monaco', 'Courier New', monospace;
	word-break: break-all;
	font-weight: 600;
	letter-spacing: -0.2px;
}

/* ============================================
   ORDER STATUS BADGE - THIẾT KẾ MỚI
   ============================================ */

.order-status-badge-modern {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 6px 16px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	flex-shrink: 0;
	border: none;
	line-height: 1.3;
	transition: all 0.2s ease;
}

/* Icon cho status badge */
.order-status-badge-modern::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	display: inline-block;
	background-color: white;
	margin-right: 4px;
}

/* Màu sắc theo trạng thái cho order-status-badge-modern */
.order-status-badge-modern {
	color: white;
	background-image: none !important;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Hoàn thành / Success */
.order-status-badge-modern.status-success {
	background-color: #28a745 !important;
	color: white !important;
}

/* Đang chờ / Pending */
.order-status-badge-modern.status-pending {
	background-color: #ffc107 !important;
	color: #333 !important;
}
.order-status-badge-modern.status-pending::before {
	background-color: #333 !important;
}

/* Đã hủy / Cancelled */
.order-status-badge-modern.status-cancelled {
	background-color: #dc3545 !important;
	color: white !important;
}

/* Chưa thanh toán / Not Paid */
.order-status-badge-modern.status-notpaid {
	background-color: #6c757d !important;
	color: white !important;
}



/* Order Card Body */
.order-card-body-modern {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
}

.order-product-info-modern {
	display: flex;
	align-items: flex-start;
	gap: var(--spacing-md);
	min-width: 0; /* cho phép co lại, tránh tràn khi tên dài */
}

.order-product-icon-modern {
	width: 40px;
	height: 40px;
	border-radius: var(--border-radius-md);
	background: var(--bg-secondary);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-primary);
	font-size: var(--font-size-lg);
	flex-shrink: 0;
}

.order-product-details-modern {
	flex: 1;
	min-width: 0;
}

.order-product-name-section {
	margin: 0;
	flex: 1;
}

.order-product-name-modern {
	font-size: 15px;
	font-weight: 600;
	color: #111827;
	margin: 0;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	min-height: 45px;
}

/* Order Card Footer */
.order-card-footer-modern {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 14px;
	border-top: 1px solid #F3F4F6;
	gap: 16px;
	margin-top: auto;
}

.order-amount-section-modern {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.order-amount-label-modern {
	font-size: 11px;
	color: #9CA3AF;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.order-amount-value-modern {
	font-size: 18px;
	font-weight: 700;
	color: #E53935;
	line-height: 1.2;
}

.order-date-section-modern {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: #6B7280;
	flex-shrink: 0;
}

.order-date-section-modern i {
	font-size: 13px;
	color: #9CA3AF;
}

.order-date-modern {
	font-size: 12px;
	font-weight: 500;
}

/* Order Card Actions */
.order-card-actions-modern {
	margin-top: 4px;
	padding-top: 0;
}

.btn-view-detail {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 20px;
	border-radius: 10px;
	background-color: #E53935;
	color: #FFFFFF;
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	width: 100%;
	border: none;
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(229, 57, 53, 0.2);
}

.btn-view-detail:hover {
	background-color: #C62828;
	color: #FFFFFF;
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(229, 57, 53, 0.3);
}

.btn-view-detail:active {
	transform: translateY(0);
	box-shadow: 0 1px 3px rgba(229, 57, 53, 0.2);
}

.btn-view-detail i {
	font-size: 16px;
}

/* Card States */
.order-card-loading,
.order-card-empty,
.order-card-error {
	grid-column: 1 / -1;
	background: var(--bg-primary);
	border-radius: var(--border-radius-xl);
	padding: var(--spacing-xl);
	box-shadow: var(--shadow-card);
	text-align: center;
}

.loading-spinner,
.empty-state,
.error-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-md);
	color: var(--text-secondary);
}

.loading-spinner i {
	font-size: var(--font-size-3xl);
	color: var(--color-primary);
	animation: spin 1s linear infinite;
}

@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

.empty-state i,
.error-state i {
	font-size: var(--font-size-3xl);
	color: var(--text-muted);
}

.empty-state p,
.error-state p {
	margin: 0;
	font-size: var(--font-size-base);
	color: var(--text-secondary);
}

/* Orders Cards Responsive */
@media (min-width: 768px) {
	.orders-cards-grid-modern {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--spacing-lg);
	}
}

@media (min-width: 992px) {
	.orders-cards-grid-modern {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Responsive Design */
@media (max-width: 576px) {
	.orders-cards-grid-modern {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	
	.order-card-modern {
		border-radius: 12px;
	}
	
	.order-card-image-section {
		height: 180px;
	}
	
	.order-card-content-section {
		padding: 16px;
		gap: 12px;
	}
	
	.order-card-header-modern {
		flex-direction: column;
		gap: 10px;
		align-items: flex-start;
	}
	
	.order-code-modern {
		font-size: 12px;
	}
	
	.order-status-badge-modern {
		padding: 5px 14px;
		font-size: 11px;
	}
	
	.order-status-badge-modern::before {
		width: 5px;
		height: 5px;
	}
	
	.order-product-name-modern {
		font-size: 14px;
		-webkit-line-clamp: 3;
		min-height: auto;
	}
	
	.order-card-footer-modern {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		padding-top: 12px;
	}
	
	.order-amount-value-modern {
		font-size: 17px;
	}
	
	.btn-view-detail {
		padding: 10px 18px;
		font-size: 13px;
	}
	
	.order-date-modern {
		font-size: 11px;
	}
}

/* ============================================
   CHANGE PASSWORD PAGE - MODERN DESIGN
   ============================================ */

/* Change Password Header */
.change-password-header-modern {
	background: var(--bg-primary);
	border-radius: var(--border-radius-xl);
	padding: var(--spacing-lg);
	margin-bottom: var(--spacing-md);
	box-shadow: var(--shadow-card);
}

.change-password-header-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.change-password-title-section {
	flex: 1;
}

.change-password-title-modern {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
	color: var(--text-primary);
	margin: 0 0 var(--spacing-xs) 0;
}

.change-password-subtitle-modern {
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
	margin: 0;
}

.change-password-header-icon {
	width: 48px;
	height: 48px;
	border-radius: var(--border-radius-md);
	background: var(--bg-gradient-red);
	color: var(--text-white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--font-size-xl);
	box-shadow: var(--shadow-sm);
}

/* Change Password Form */
.change-password-form-modern {
	background: var(--bg-primary);
	border-radius: var(--border-radius-xl);
	padding: var(--spacing-lg);
	margin-bottom: var(--spacing-md);
	box-shadow: var(--shadow-card);
}

.form-group-modern {
	margin-bottom: var(--spacing-lg);
}

.form-label-modern {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-semibold);
	color: var(--text-primary);
	margin-bottom: var(--spacing-sm);
}

.form-label-modern i {
	font-size: var(--font-size-lg);
	color: var(--color-primary);
}

.form-input-wrapper-modern {
	position: relative;
	display: flex;
	align-items: center;
}

.form-input-modern {
	width: 100%;
	padding: var(--spacing-md);
	padding-right: 48px;
	border: 2px solid var(--bg-secondary);
	border-radius: var(--border-radius-md);
	font-size: var(--font-size-base);
	color: var(--text-primary);
	background: var(--bg-primary);
	transition: all var(--transition-base);
}

.form-input-modern:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.1);
}

.form-input-modern::placeholder {
	color: var(--text-muted);
}

.form-toggle-password {
	position: absolute;
	right: var(--spacing-sm);
	width: 36px;
	height: 36px;
	border: none;
	background: transparent;
	color: var(--text-secondary);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--border-radius-sm);
	transition: all var(--transition-base);
}

.form-toggle-password:hover {
	background: var(--bg-secondary);
	color: var(--color-primary);
}

.form-toggle-password i {
	font-size: var(--font-size-lg);
}

.form-hint-modern {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
	margin-top: var(--spacing-xs);
	font-size: var(--font-size-xs);
	color: var(--text-secondary);
}

.form-hint-modern i {
	font-size: var(--font-size-sm);
	color: var(--color-primary);
}

.form-actions-modern {
	margin-top: var(--spacing-xl);
}

.form-submit-button-modern {
	width: 100%;
	padding: var(--spacing-md) var(--spacing-lg);
	background: var(--bg-gradient-red);
	color: var(--text-white);
	border: none;
	border-radius: var(--border-radius-md);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-semibold);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-sm);
	cursor: pointer;
	transition: all var(--transition-base);
	box-shadow: var(--shadow-sm);
}

.form-submit-button-modern:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
	opacity: 0.95;
}

.form-submit-button-modern:active {
	transform: translateY(0);
}

.form-submit-button-modern i {
	font-size: var(--font-size-lg);
}

/* Change Password Actions */
.change-password-actions-modern {
	background: var(--bg-primary);
	border-radius: var(--border-radius-xl);
	box-shadow: var(--shadow-card);
	overflow: hidden;
	margin-bottom: var(--spacing-lg);
}

.action-item-modern {
	display: flex;
	align-items: center;
	padding: var(--spacing-md);
	gap: var(--spacing-md);
	text-decoration: none;
	color: var(--text-primary);
	border-bottom: 1px solid var(--bg-secondary);
	transition: all var(--transition-base);
}

.action-item-modern:last-child {
	border-bottom: none;
}

.action-item-modern:hover {
	background: var(--bg-secondary);
}

.action-item-modern.action-item-danger {
	color: #E53935;
}

.action-item-modern.action-item-danger:hover {
	background: rgba(229, 57, 53, 0.05);
}

.action-icon-modern {
	width: 40px;
	height: 40px;
	border-radius: var(--border-radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--font-size-lg);
	color: var(--text-white);
	flex-shrink: 0;
}

.action-icon-blue {
	background: linear-gradient(135deg, #2196F3 0%, #42A5F5 100%);
}

.action-icon-red {
	background: linear-gradient(135deg, #E53935 0%, #EF5350 100%);
}

.action-text-modern {
	flex: 1;
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-medium);
}

.action-arrow-modern {
	color: var(--text-muted);
	font-size: var(--font-size-lg);
}

/* Change Password Responsive */
@media (max-width: 576px) {
	.change-password-header-modern {
		padding: var(--spacing-md);
	}
	
	.change-password-title-modern {
		font-size: var(--font-size-lg);
	}
	
	.change-password-subtitle-modern {
		font-size: var(--font-size-xs);
	}
	
	.change-password-header-icon {
		width: 40px;
		height: 40px;
		font-size: var(--font-size-lg);
	}
	
	.change-password-form-modern {
		padding: var(--spacing-md);
	}
	
	.form-group-modern {
		margin-bottom: var(--spacing-md);
	}
	
	.form-input-modern {
		padding: var(--spacing-sm) var(--spacing-md);
		padding-right: 44px;
		font-size: var(--font-size-sm);
	}
	
	.form-toggle-password {
		width: 32px;
		height: 32px;
	}
	
	.form-submit-button-modern {
		padding: var(--spacing-sm) var(--spacing-md);
		font-size: var(--font-size-sm);
	}
	
	.action-item-modern {
		padding: var(--spacing-sm) var(--spacing-md);
	}
	
	.action-icon-modern {
		width: 36px;
		height: 36px;
		font-size: var(--font-size-base);
	}
}

/* ============================================
   CHANGE INFO PAGE - MODERN DESIGN
   ============================================ */

/* Change Info Header */
.change-info-header-modern {
	background: var(--bg-primary);
	border-radius: var(--border-radius-xl);
	padding: var(--spacing-lg);
	margin-bottom: var(--spacing-md);
	box-shadow: var(--shadow-card);
}

.change-info-header-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.change-info-title-section {
	flex: 1;
}

.change-info-title-modern {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
	color: var(--text-primary);
	margin: 0 0 var(--spacing-xs) 0;
}

.change-info-subtitle-modern {
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
	margin: 0;
}

.change-info-header-icon {
	width: 48px;
	height: 48px;
	border-radius: var(--border-radius-md);
	background: var(--bg-gradient-red);
	color: var(--text-white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--font-size-xl);
	box-shadow: var(--shadow-sm);
}

/* Change Info Notice */
.change-info-notice-modern {
	background: rgba(255, 193, 7, 0.1);
	border-left: 4px solid #FFC107;
	border-radius: var(--border-radius-md);
	padding: var(--spacing-md);
	margin-bottom: var(--spacing-md);
}

.notice-content-modern {
	display: flex;
	gap: var(--spacing-md);
	margin-bottom: var(--spacing-sm);
}

.notice-content-modern i {
	font-size: var(--font-size-xl);
	color: #FFC107;
	flex-shrink: 0;
	margin-top: 2px;
}

.notice-text-modern {
	flex: 1;
}

.notice-text-modern strong {
	font-size: var(--font-size-base);
	color: #856404;
	display: block;
	margin-bottom: var(--spacing-xs);
}

.notice-text-modern p {
	font-size: var(--font-size-sm);
	color: #856404;
	margin: var(--spacing-xs) 0;
	line-height: 1.5;
}

.notice-warning-modern {
	font-weight: var(--font-weight-semibold);
	color: #E53935 !important;
}

.notice-payment-date-modern {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	padding-top: var(--spacing-sm);
	border-top: 1px solid rgba(255, 193, 7, 0.3);
	font-size: var(--font-size-sm);
	color: #856404;
}

.notice-payment-date-modern i {
	font-size: var(--font-size-base);
	color: #FFC107;
}

/* Change Info Form */
.change-info-form-modern {
	background: var(--bg-primary);
	border-radius: var(--border-radius-xl);
	padding: var(--spacing-lg);
	margin-bottom: var(--spacing-md);
	box-shadow: var(--shadow-card);
}

.form-select-modern {
	width: 100%;
	padding: var(--spacing-md);
	border: 2px solid var(--bg-secondary);
	border-radius: var(--border-radius-md);
	font-size: var(--font-size-base);
	color: var(--text-primary);
	background: var(--bg-primary);
	transition: all var(--transition-base);
}

.form-select-modern:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.1);
}

.form-input-disabled {
	background: var(--bg-secondary);
	color: var(--text-secondary);
	cursor: not-allowed;
}

/* Bank Select Wrapper */
.bank-select-wrapper-modern {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
}

.bank-logo-preview-modern {
	flex-shrink: 0;
	width: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bg-secondary);
	border-radius: var(--border-radius-md);
	border: 2px solid var(--bg-secondary);
	transition: all var(--transition-base);
}

.bank-logo-preview-modern.has-logo {
	border-color: var(--color-primary);
	background: var(--bg-primary);
	box-shadow: var(--shadow-sm);
}

/* Fallback for browsers that support :has() */
.bank-logo-preview-modern:has(img[src]:not([src=""])) {
	border-color: var(--color-primary);
	background: var(--bg-primary);
	box-shadow: var(--shadow-sm);
}

.bank-logo-modern {
	max-width: 50px;
	max-height: 50px;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: var(--border-radius-sm);
	display: none;
}

.bank-logo-preview-modern img[src]:not([src=""]) {
	display: block !important;
}

/* Select2 takes remaining space */
.bank-select-wrapper-modern .select2-container {
	flex: 1;
	min-width: 0;
}

/* Change Info Responsive */
@media (max-width: 576px) {
	.change-info-header-modern {
		padding: var(--spacing-md);
	}
	
	.change-info-title-modern {
		font-size: var(--font-size-lg);
	}
	
	.change-info-subtitle-modern {
		font-size: var(--font-size-xs);
	}
	
	.change-info-header-icon {
		width: 40px;
		height: 40px;
		font-size: var(--font-size-lg);
	}
	
	.change-info-notice-modern {
		padding: var(--spacing-sm) var(--spacing-md);
	}
	
	.notice-content-modern {
		flex-direction: column;
		gap: var(--spacing-sm);
	}
	
	.change-info-form-modern {
		padding: var(--spacing-md);
	}
	
	.form-group-modern {
		margin-bottom: var(--spacing-md);
	}
	
	.form-input-modern,
	.form-select-modern {
		padding: var(--spacing-sm) var(--spacing-md);
		font-size: var(--font-size-sm);
	}
	
	.bank-select-wrapper-modern {
		flex-direction: column;
		align-items: stretch;
		gap: var(--spacing-sm);
	}
	
	.bank-logo-preview-modern {
		width: 100%;
		height: 60px;
	}
	
	.bank-select-wrapper-modern .select2-container {
		width: 100% !important;
	}
	
	.form-submit-button-modern {
		padding: var(--spacing-sm) var(--spacing-md);
		font-size: var(--font-size-sm);
	}
}

/* ============================================
   POINTS & ACTIONS SECTION
   ============================================ */
.asmo-points-section {
	background: var(--bg-primary);
	border-radius: var(--border-radius-xl);
	box-shadow: var(--shadow-card);
	padding: var(--spacing-lg);
	margin-bottom: var(--spacing-lg);
}

/* Actions Row - 3 cards */
.asmo-points-actions {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--spacing-sm);
	margin-bottom: var(--spacing-lg);
}

.asmo-action-card {
	background: var(--bg-primary);
	border: 1px solid var(--bg-secondary);
	border-radius: var(--border-radius-lg);
	padding: var(--spacing-md);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-xs);
	cursor: pointer;
	transition: all var(--transition-base);
	text-align: center;
}

.asmo-action-card:hover {
	background: var(--bg-secondary);
	border-color: var(--color-primary);
	transform: translateY(-2px);
	box-shadow: var(--shadow-sm);
}

.asmo-action-icon {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bg-secondary);
	border-radius: var(--border-radius-md);
	transition: all var(--transition-base);
}

.asmo-action-card:hover .asmo-action-icon {
	background: var(--color-primary);
	color: var(--text-white);
}

.asmo-action-icon i {
	font-size: 24px;
	color: var(--text-primary);
	transition: color var(--transition-base);
}

.asmo-action-card:hover .asmo-action-icon i {
	color: var(--text-white);
}

.asmo-action-text {
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	color: var(--text-primary);
	line-height: 1.3;
}

/* Points Display Row - 2 cards */
.asmo-points-display {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--spacing-md);
}

.asmo-points-card {
	background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%);
	border-radius: var(--border-radius-lg);
	padding: var(--spacing-md);
	box-shadow: var(--shadow-sm);
}

.asmo-points-pending {
	background: linear-gradient(135deg, #FFF9C4 0%, #FFF59D 100%);
}

.asmo-points-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--spacing-sm);
}

.asmo-points-label {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	color: var(--text-primary);
}

.asmo-points-info {
	font-size: var(--font-size-sm);
	color: #4CAF50;
	cursor: help;
}

.asmo-points-pending .asmo-points-info {
	color: #F57F17;
}

.asmo-points-value {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
}

.asmo-points-number {
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-bold);
	color: #2E7D32;
	line-height: 1;
}

.asmo-points-pending .asmo-points-number {
	color: #424242;
}

.asmo-points-star {
	font-size: var(--font-size-xl);
	color: #FFC107;
}

/* Responsive */
@media (max-width: 768px) {
	.asmo-points-section {
		padding: var(--spacing-md);
	}
	
	.asmo-points-actions {
		gap: var(--spacing-xs);
		margin-bottom: var(--spacing-md);
	}
	
	.asmo-action-card {
		padding: var(--spacing-sm);
	}
	
	.asmo-action-icon {
		width: 36px;
		height: 36px;
	}
	
	.asmo-action-icon i {
		font-size: 20px;
	}
	
	.asmo-action-text {
		font-size: 10px;
	}
	
	.asmo-points-display {
		gap: var(--spacing-sm);
	}
	
	.asmo-points-card {
		padding: var(--spacing-sm);
	}
	
	.asmo-points-number {
		font-size: var(--font-size-xl);
	}
	
	.asmo-points-star {
		font-size: var(--font-size-lg);
	}
}

@media (max-width: 576px) {
	.asmo-points-actions {
		grid-template-columns: repeat(3, 1fr);
		gap: 6px;
	}
	
	.asmo-action-text {
		font-size: 9px;
	}
	
	.asmo-points-label {
		font-size: var(--font-size-xs);
	}
	
	.asmo-points-number {
		font-size: var(--font-size-lg);
	}
}

/* ============================================
   POINTS & REWARDS PAGE - TÍCH ĐIỂM ĐỔI QUÀ
   ============================================ */
.asmo-points-header-banner {
	background: linear-gradient(135deg, #2E7D32 0%, #4CAF50 100%);
	padding: var(--spacing-xl) var(--spacing-lg);
	position: relative;
	overflow: hidden;
}

.asmo-points-header-banner::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: 
		radial-gradient(circle at 20% 30%, rgba(255,255,255,0.1) 2px, transparent 2px),
		radial-gradient(circle at 80% 70%, rgba(255,255,255,0.1) 2px, transparent 2px);
	background-size: 50px 50px, 60px 60px;
	opacity: 0.3;
}

.asmo-points-header-content {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.asmo-points-title {
	color: var(--text-white);
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-bold);
	margin: 0;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.asmo-points-gift-icon {
	font-size: 48px;
	color: var(--text-white);
	opacity: 0.9;
}

/* Tab Navigation */
.asmo-points-tabs {
	background: var(--bg-primary);
	border-bottom: 1px solid var(--bg-secondary);
}

.asmo-tab-nav {
	display: flex;
	gap: var(--spacing-sm);
	padding: var(--spacing-sm) 0;
}

.asmo-tab-item {
	flex: 1;
	padding: var(--spacing-md) var(--spacing-lg);
	text-align: center;
	background: var(--bg-secondary);
	color: var(--text-primary);
	text-decoration: none;
	border-radius: var(--border-radius-lg);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-semibold);
	transition: all var(--transition-base);
	border: 2px solid transparent;
}

.asmo-tab-item:hover {
	background: rgba(229, 57, 53, 0.1);
	color: var(--color-primary);
}

.asmo-tab-item.active {
	background: var(--bg-gradient-red);
	color: var(--text-white);
	border-color: var(--color-primary);
	box-shadow: var(--shadow-sm);
}

/* Tab Content */
.asmo-points-content {
	padding: var(--spacing-lg) 0;
	min-height: 400px;
}

/* Input Section */
.asmo-points-input-section {
	margin-bottom: var(--spacing-lg);
}

.asmo-link-input-wrapper {
	display: flex;
	align-items: center;
	background: var(--bg-primary);
	border: 2px solid var(--bg-secondary);
	border-radius: var(--border-radius-full);
	padding: var(--spacing-sm) var(--spacing-md);
	gap: var(--spacing-sm);
	transition: all var(--transition-base);
}

.asmo-link-input-wrapper:focus-within {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.1);
}

.asmo-input-icon {
	font-size: var(--font-size-lg);
	color: var(--color-primary);
	flex-shrink: 0;
}

.asmo-link-input {
	flex: 1;
	border: none;
	background: transparent;
	outline: none;
	font-size: var(--font-size-base);
	color: var(--text-primary);
	padding: var(--spacing-xs) 0;
}

.asmo-link-input::placeholder {
	color: var(--text-muted);
}

.asmo-search-btn {
	width: 40px;
	height: 40px;
	border-radius: var(--border-radius-full);
	background: var(--bg-gradient-red);
	color: var(--text-white);
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all var(--transition-base);
	flex-shrink: 0;
}

.asmo-search-btn:hover {
	opacity: 0.9;
	transform: scale(1.05);
}

/* Platform Section */
.asmo-platform-section {
	margin-bottom: var(--spacing-lg);
}

.asmo-section-title {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
	margin-bottom: var(--spacing-md);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-bold);
	color: var(--text-primary);
}

.asmo-question-icon {
	font-size: var(--font-size-sm);
	color: var(--color-primary);
	cursor: help;
}

.asmo-platform-buttons {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--spacing-md);
}

.asmo-platform-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-xs);
	padding: var(--spacing-md);
	background: var(--bg-primary);
	border: 2px solid var(--bg-secondary);
	border-radius: var(--border-radius-lg);
	cursor: pointer;
	transition: all var(--transition-base);
}

.asmo-platform-btn:hover {
	border-color: var(--color-primary);
	transform: translateY(-2px);
	box-shadow: var(--shadow-sm);
}

.asmo-platform-btn.active {
	border-color: var(--color-primary);
	background: rgba(229, 57, 53, 0.05);
	box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.1);
}

.platform-logo {
	width: 40px;
	height: 40px;
	object-fit: contain;
}

.asmo-platform-btn span {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	color: var(--text-primary);
}

/* Points Flow Diagram - Luôn nằm trên 1 dòng */
.asmo-points-flow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--bg-secondary);
	border-radius: var(--border-radius-lg);
	padding: var(--spacing-md);
	margin-bottom: var(--spacing-lg);
	flex-wrap: nowrap;
	gap: var(--spacing-xs);
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.asmo-points-flow::-webkit-scrollbar {
	display: none;
}

.asmo-flow-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-xs);
	flex: 1 1 auto;
	min-width: 80px;
	flex-shrink: 0;
}

.asmo-flow-icon {
	width: 48px;
	height: 48px;
	border-radius: var(--border-radius-full);
	background: var(--bg-gradient-red);
	color: var(--text-white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--font-size-lg);
}

.asmo-flow-arrow {
	color: var(--color-primary);
	font-size: var(--font-size-lg);
	flex-shrink: 0;
	min-width: 24px;
}

.asmo-flow-text {
	font-size: var(--font-size-xs);
	color: var(--text-primary);
	text-align: center;
	line-height: 1.3;
}

/* Points Display Section - Luôn nằm trên cùng 1 dòng */
.asmo-points-display-section {
	display: flex;
	gap: var(--spacing-md);
	margin-bottom: var(--spacing-lg);
	flex-wrap: nowrap;
}

.asmo-points-card-display {
	flex: 1;
	min-width: 0;
	background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%);
	border-radius: var(--border-radius-lg);
	padding: var(--spacing-md);
	box-shadow: var(--shadow-sm);
}

.asmo-points-pending {
	background: linear-gradient(135deg, #FFF9C4 0%, #FFF59D 100%);
}

.asmo-points-header-display {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--spacing-sm);
}

.asmo-points-label-display {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	color: var(--text-primary);
}

.asmo-points-info-display {
	font-size: var(--font-size-sm);
	color: #4CAF50;
	cursor: help;
}

.asmo-points-pending .asmo-points-info-display {
	color: #F57F17;
}

.asmo-points-value-display {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
}

.asmo-points-number-display {
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-bold);
	color: #2E7D32;
	line-height: 1;
}

.asmo-points-pending .asmo-points-number-display {
	color: #424242;
}

.asmo-points-star-display {
	font-size: var(--font-size-xl);
	color: #FFC107;
}

/* Get More Points Button */
.asmo-get-points-section {
	margin-bottom: var(--spacing-lg);
}

.asmo-get-points-btn {
	width: 100%;
	padding: var(--spacing-md) var(--spacing-lg);
	background: var(--bg-gradient-red);
	color: var(--text-white);
	border: none;
	border-radius: var(--border-radius-lg);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-semibold);
	cursor: pointer;
	transition: all var(--transition-base);
	box-shadow: var(--shadow-sm);
}

.asmo-get-points-btn:hover {
	opacity: 0.9;
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

/* Redeem Section */
.asmo-redeem-section {
	padding: var(--spacing-xl) 0;
}

.asmo-redeem-empty {
	text-align: center;
	padding: var(--spacing-xl);
}

.asmo-redeem-icon {
	font-size: 80px;
	color: var(--text-muted);
	margin-bottom: var(--spacing-md);
	opacity: 0.5;
}

.asmo-redeem-empty h3 {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
	color: var(--text-primary);
	margin-bottom: var(--spacing-sm);
}

.asmo-redeem-empty p {
	font-size: var(--font-size-base);
	color: var(--text-secondary);
	margin-bottom: var(--spacing-lg);
}

.asmo-redeem-btn {
	padding: var(--spacing-md) var(--spacing-xl);
	background: var(--bg-gradient-red);
	color: var(--text-white);
	border: none;
	border-radius: var(--border-radius-lg);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-semibold);
	cursor: pointer;
	transition: all var(--transition-base);
}

.asmo-redeem-btn:hover {
	opacity: 0.9;
	transform: translateY(-2px);
	box-shadow: var(--shadow-sm);
}

/* Responsive */
@media (max-width: 768px) {
	.asmo-points-title {
		font-size: var(--font-size-xl);
	}
	
	.asmo-points-gift-icon {
		font-size: 36px;
	}
	
	.asmo-platform-buttons {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--spacing-sm);
	}
	
	.asmo-platform-btn {
		padding: var(--spacing-sm);
	}
	
	.platform-logo {
		width: 32px;
		height: 32px;
	}
	
	/* Flow diagram vừa màn hình trên mobile, không cần scroll */
	.asmo-points-flow {
		flex-wrap: nowrap;
		overflow-x: visible;
		padding: var(--spacing-sm);
		gap: 4px;
	}
	
	.asmo-flow-step {
		min-width: 0;
		flex: 1 1 0;
		flex-shrink: 1;
	}
	
	.asmo-flow-icon {
		width: 36px;
		height: 36px;
		font-size: var(--font-size-base);
	}
	
	.asmo-flow-text {
		font-size: 9px;
		line-height: 1.2;
	}
	
	.asmo-flow-arrow {
		font-size: var(--font-size-sm);
		min-width: 16px;
		flex-shrink: 0;
	}
	
	/* Points display vẫn nằm trên 1 dòng trên mobile */
	.asmo-points-display-section {
		gap: var(--spacing-sm);
	}
	
	.asmo-points-card-display {
		padding: var(--spacing-sm);
	}
}

@media (max-width: 576px) {
	.asmo-points-header-banner {
		padding: var(--spacing-lg) var(--spacing-md);
	}
	
	.asmo-tab-item {
		padding: var(--spacing-sm) var(--spacing-md);
		font-size: var(--font-size-sm);
	}
	
	.asmo-platform-buttons {
		gap: var(--spacing-xs);
	}
	
	.asmo-platform-btn span {
		font-size: var(--font-size-xs);
	}
	
	/* Flow diagram tối ưu cho màn hình nhỏ */
	.asmo-points-flow {
		padding: var(--spacing-xs);
		gap: 2px;
	}
	
	.asmo-flow-icon {
		width: 32px;
		height: 32px;
		font-size: var(--font-size-sm);
	}
	
	.asmo-flow-text {
		font-size: 8px;
	}
	
	.asmo-flow-arrow {
		font-size: 12px;
		min-width: 12px;
	}
}

/* ============================================
   PRODUCT RESULT SECTION - INLINE DISPLAY
   ============================================ */
.asmo-product-result {
	margin-top: var(--spacing-lg);
	margin-bottom: var(--spacing-lg);
}

.asmo-product-card {
	background: var(--bg-primary);
	border-radius: var(--border-radius-lg);
	box-shadow: var(--shadow-md);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
	padding: var(--spacing-md);
	border: 1px solid var(--bg-secondary);
}

.asmo-product-image-wrapper {
	width: 100%;
	aspect-ratio: 1;
	background: var(--bg-secondary);
	border-radius: var(--border-radius-md);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.asmo-product-image {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.asmo-product-info {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
}

.asmo-product-name {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	color: var(--text-primary);
	margin: 0;
	line-height: 1.4;
}

.asmo-product-price-section {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
	flex-wrap: wrap;
}

.asmo-product-price-label {
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
}

.asmo-product-price {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	color: var(--color-primary);
}

.asmo-product-discount {
	background: var(--bg-gradient-red);
	color: var(--text-white);
	padding: 2px 8px;
	border-radius: var(--border-radius-sm);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
}

.asmo-product-cashback {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
	padding: var(--spacing-sm);
	background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%);
	border-radius: var(--border-radius-md);
}

.asmo-product-cashback i {
	color: #FFC107;
	font-size: var(--font-size-lg);
}

/* ============================================
   ALERT NOTIFICATIONS - FIXED POSITION
   ============================================ */
.asmo-alert-container {
	position: fixed;
	top: 80px;
	right: var(--spacing-md);
	z-index: calc(var(--z-fixed) + 100);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
	max-width: 400px;
	width: 100%;
	pointer-events: none;
}

.asmo-alert {
	position: relative;
	padding: var(--spacing-md) var(--spacing-lg);
	border-radius: var(--border-radius-lg);
	box-shadow: var(--shadow-lg);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-md);
	animation: slideInRight 0.3s ease-out;
	pointer-events: auto;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	line-height: 1.5;
}

@keyframes slideInRight {
	from {
		transform: translateX(100%);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

.asmo-alert-success {
	background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%);
	color: var(--text-white);
	border-left: 4px solid #2E7D32;
}

.asmo-alert-danger {
	background: linear-gradient(135deg, #E53935 0%, #EF5350 100%);
	color: var(--text-white);
	border-left: 4px solid #C62828;
}

.asmo-alert-warning {
	background: linear-gradient(135deg, #FF9800 0%, #FFB74D 100%);
	color: var(--text-white);
	border-left: 4px solid #F57C00;
}

.asmo-alert-info {
	background: linear-gradient(135deg, #2196F3 0%, #42A5F5 100%);
	color: var(--text-white);
	border-left: 4px solid #1976D2;
}

.asmo-alert-close {
	background: transparent;
	border: none;
	color: var(--text-white);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
	cursor: pointer;
	padding: 0;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--border-radius-full);
	transition: all var(--transition-base);
	flex-shrink: 0;
	opacity: 0.8;
}

.asmo-alert-close:hover {
	opacity: 1;
	background: rgba(255, 255, 255, 0.2);
	transform: scale(1.1);
}

/* Responsive */
@media (max-width: 576px) {
	.asmo-alert-container {
		top: 70px;
		right: var(--spacing-sm);
		left: var(--spacing-sm);
		max-width: 100%;
	}

	.asmo-alert {
		padding: var(--spacing-sm) var(--spacing-md);
		font-size: var(--font-size-xs);
	}
}

.asmo-cashback-label {
	font-size: var(--font-size-sm);
	color: var(--text-primary);
	font-weight: var(--font-weight-medium);
}

.asmo-cashback-amount {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	color: #2E7D32;
}

.asmo-product-rating {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	padding: var(--spacing-xs) 0;
}

.asmo-rating-stars {
	display: flex;
	align-items: center;
	gap: 2px;
}

.asmo-rating-stars i {
	font-size: var(--font-size-base);
	color: #E0E0E0;
	transition: color var(--transition-base);
}

.asmo-rating-stars i.filled {
	color: #FFC107;
}

.asmo-rating-stars i.half-filled {
	color: #FFC107;
	position: relative;
}

.asmo-rating-stars i.half-filled::after {
	content: '\e9d9';
	font-family: 'IcoFont';
	position: absolute;
	left: 0;
	width: 50%;
	overflow: hidden;
	color: #E0E0E0;
}

.asmo-rating-value {
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-semibold);
	color: var(--text-primary);
	margin-left: 2px;
}

.asmo-product-actions {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--spacing-sm);
	margin-top: var(--spacing-sm);
}

.asmo-product-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-xs);
	padding: var(--spacing-sm) var(--spacing-md);
	border: none;
	border-radius: var(--border-radius-md);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	cursor: pointer;
	transition: all var(--transition-base);
}

.asmo-btn-share {
	background: var(--bg-secondary);
	color: var(--text-primary);
}

.asmo-btn-share:hover {
	background: var(--bg-tertiary);
	transform: translateY(-2px);
}

.asmo-btn-buy {
	background: var(--bg-gradient-red);
	color: var(--text-white);
}

.asmo-btn-buy:hover {
	opacity: 0.9;
	transform: translateY(-2px);
	box-shadow: var(--shadow-sm);
}

/* Responsive */
@media (min-width: 768px) {
	.asmo-product-card {
		flex-direction: row;
	}
	
	.asmo-product-image-wrapper {
		width: 300px;
		flex-shrink: 0;
	}
	
	.asmo-product-info {
		flex: 1;
	}
}

@media (max-width: 576px) {
	.asmo-product-card {
		padding: var(--spacing-sm);
	}
	
	.asmo-product-name {
		font-size: var(--font-size-base);
	}
	
	.asmo-product-price {
		font-size: var(--font-size-base);
	}
	
	.asmo-cashback-amount {
		font-size: var(--font-size-base);
	}
	
	.asmo-product-actions {
		grid-template-columns: 1fr;
	}
}

/* ============================================
   Order Card - New Design với ảnh sản phẩm
   ============================================ */

/* Image Section */
.order-card-image-section {
	position: relative;
	width: 100%;
	height: 200px;
	background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
	overflow: hidden;
}

.order-product-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 0.3s ease;
	display: block;
}

.order-card-modern:hover .order-product-image {
	transform: scale(1.05);
}

.order-product-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-secondary);
	font-size: 48px;
	background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
}

.order-platform-badge {
	position: absolute;
	top: 12px;
	right: 12px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: var(--border-radius-full);
	font-size: 11px;
	font-weight: var(--font-weight-semibold);
	color: var(--text-white);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	backdrop-filter: blur(8px);
	background: rgba(0, 0, 0, 0.4);
}

.order-platform-badge.type-shopee {
	background: linear-gradient(135deg, rgba(238, 77, 45, 0.95) 0%, rgba(255, 107, 74, 0.95) 100%);
}

.order-platform-badge.type-lazada {
	background: linear-gradient(135deg, rgba(15, 20, 109, 0.95) 0%, rgba(26, 35, 126, 0.95) 100%);
}

.order-platform-badge.type-tiktok {
	background: linear-gradient(135deg, rgba(0, 0, 0, 0.95) 0%, rgba(51, 51, 51, 0.95) 100%);
}

.order-platform-badge.type-default {
	background: linear-gradient(135deg, rgba(117, 117, 117, 0.95) 0%, rgba(158, 158, 158, 0.95) 100%);
}

/* Content Section */
.order-card-content-section {
	padding: var(--spacing-md);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
	flex: 1;
}

.order-code-section {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1;
}

.order-code-label {
	font-size: 10px;
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-weight: var(--font-weight-medium);
}

.order-product-name-section {
	margin: var(--spacing-xs) 0;
}



/* ============================================
   Orders Page - Mobile Tweaks
   ============================================ */
@media (max-width: 575.98px) {
	.orders-header-modern {
		padding: 12px;
	}
	.orders-title-modern {
		font-size: 18px;
	}
	.orders-subtitle-modern {
		font-size: 13px;
	}
	.orders-notice-modern {
		padding: 10px 12px;
		font-size: 13px;
	}
	.orders-filter-modern {
		padding: 12px;
		gap: 12px;
	}
	.filter-row-modern {
		flex-direction: column;
		gap: 12px;
	}
	.filter-group-modern {
		width: 100%;
	}
	.filter-button-modern {
		width: 100%;
	}
	.orders-cards-grid-modern {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.order-card-modern {
		border-radius: 12px;
	}
	.order-card-image-section {
		height: 180px;
	}
	.order-card-content-section {
		padding: 12px;
		gap: 10px;
	}
	.order-card-header-modern {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
	.order-code-modern {
		font-size: 12px;
	}
	.order-status-badge-modern {
		padding: 5px 12px;
		font-size: 11px;
	}
	.order-product-name-modern {
		font-size: 14px;
		-webkit-line-clamp: 2;
	}
	.order-card-footer-modern {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
	.order-amount-value-modern {
		font-size: 16px;
	}
	.btn-view-detail {
		width: 100%;
		padding: 10px 14px;
		font-size: 13px;
	}
	.pagination-modern {
		padding: 12px 0;
	}
}

/* ============================================
   CONTACT TOOLBAR - REDESIGNED
   ============================================ */
.asmo-contact-toolbar {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 1000;
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-end;
}

.asmo-contact-btn {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background-color: #ffffff;
	border: 3px solid #fc5332;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.2s ease;
	box-shadow: 0 4px 16px rgba(252, 83, 50, 0.35);
	position: relative;
	color: #fc5332;
}

.asmo-contact-btn::before {
	content: attr(data-tooltip);
	position: absolute;
	right: calc(100% + 12px);
	top: 50%;
	transform: translateY(-50%);
	background-color: #333;
	color: #fff;
	padding: 8px 12px;
	border-radius: 6px;
	font-size: 12px;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transition: all 0.2s ease;
	pointer-events: none;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.asmo-contact-btn::after {
	content: '';
	position: absolute;
	right: calc(100% + 6px);
	top: 50%;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 6px 0 6px 6px;
	border-color: transparent transparent transparent #333;
	opacity: 0;
	visibility: hidden;
	transition: all 0.2s ease;
	pointer-events: none;
}

.asmo-contact-btn:hover::before,
.asmo-contact-btn:hover::after {
	opacity: 1;
	visibility: visible;
}

.asmo-contact-btn:hover {
	background-color: #fc5332;
	border-color: #fc5332;
	box-shadow: 0 6px 24px rgba(252, 83, 50, 0.5);
	transform: scale(1.05);
}

.asmo-contact-btn img {
	width: 24px;
	height: 24px;
	object-fit: contain;
	display: block;
	transition: filter 0.2s ease;
}

.asmo-contact-btn:hover img {
	/* Không áp dụng filter để giữ màu gốc của icon ảnh */
	filter: brightness(1.1) contrast(1.1);
}

.asmo-contact-btn i {
	font-size: 24px;
	color: #fc5332;
	display: block;
	line-height: 1;
	transition: color 0.2s ease;
}

.asmo-contact-btn:hover i {
	color: #ffffff;
}

.asmo-contact-btn span {
	font-size: 20px;
	font-weight: 800;
	color: #fc5332;
	display: block;
	line-height: 1;
	transition: color 0.2s ease;
}

.asmo-contact-btn:hover span {
	color: #ffffff;
}

/* Responsive */
@media (max-width: 768px) {
	.asmo-contact-toolbar {
		right: 15px;
		bottom: 90px;
		gap: 10px;
	}
	
	.asmo-contact-btn {
		width: 50px;
		height: 50px;
		border-width: 2px;
	}
	
	.asmo-contact-btn img {
		width: 22px;
		height: 22px;
	}
	
	.asmo-contact-btn i {
		font-size: 22px;
	}
	
	.asmo-contact-btn span {
		font-size: 18px;
	}
}

@media (max-width: 576px) {
	.asmo-contact-toolbar {
		right: 12px;
		bottom: 90px;
		gap: 8px;
	}
	
	.asmo-contact-btn {
		width: 46px;
		height: 46px;
		border-width: 2px;
	}
	
	.asmo-contact-btn img {
		width: 20px;
		height: 20px;
	}
	
	.asmo-contact-btn i {
		font-size: 20px;
	}
	
	.asmo-contact-btn span {
		font-size: 16px;
	}
}

/* ============================================
   MODAL ALERT - DESKTOP SIZE
   ============================================ */
@media (min-width: 992px) {
	.modal-alert-content.col-lg-8 {
		max-width: 90% !important;
		flex: 0 0 90% !important;
        margin: 20% auto;
	}
}

@media (min-width: 1200px) {
	.modal-alert-content.col-lg-8 {
		max-width: 85% !important;
		flex: 0 0 85% !important;
        margin: 20% auto;
	}
}

@media (min-width: 1400px) {
	.modal-alert-content.col-lg-8 {
		max-width: 100% !important;
		flex: 0 0 100% !important;
        margin: 20% auto;
	}
}