[class^="icon"], [class*=" icon"] {
    font-family: 'ega-iconfont' !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
}


.icon-arrow-left, .icon-arrow-login, .icon-arrow-right, .icon-arrow-swap, .icon-calendar, .icon-call, .icon-calling-phone, .icon-carret-down, .icon-carret-left, .icon-carret-right, .icon-carret-up, .icon-cart, .icon-close-circle, .icon-cross, .icon-danger, .icon-dollar-circle, .icon-edit, .icon-external, .icon-eye, .icon-gift, .icon-instagram, .icon-like, .icon-location, .icon-lock, .icon-minus, .icon-notification, .icon-play, .icon-plus, .icon-receipt, .icon-refresh, .icon-search-history, .icon-search, .icon-settings, .icon-sms, .icon-stickynote, .icon-store, .icon-tick, .icon-ticket-discount, .icon-ticket, .icon-time, .icon-trash, .icon-truck-fast, .icon-user {
    font-family: 'ega-iconfont';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
}

/* ================= ICON FONT BASE ================= */
[class^="icon"], [class*=" icon"] {
  font-family: 'ega-iconfont' !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  vertical-align: middle;
  position: relative;
  transition: all 0.35s ease-in-out;
}

/* ================= ICON SIZE UTILITIES ================= */
.icon-xs { font-size: 0.75rem; }
.icon-sm { font-size: 1rem; }
.icon-md { font-size: 1.25rem; }
.icon-lg { font-size: 1.75rem; }
.icon-xl { font-size: 2.25rem; }
.icon-2xl { font-size: 3rem; }

/* ================= ICON BASE COLOR ================= */
.icon {
  color: var(--icon-color, #444);
  cursor: pointer;
}
.icon:hover {
  color: var(--icon-hover-color, #ff6347);
  transform: scale(1.15);
  filter: drop-shadow(0 2px 8px rgba(255,99,71,0.4));
}

/* ================= GLOW EFFECT (TÙY CHỌN) ================= */
.icon-glow {
  color: #fff;
  text-shadow: 0 0 6px rgba(255,255,255,0.8),
               0 0 14px rgba(67,233,123,0.6),
               0 0 24px rgba(79,172,254,0.4);
  animation: glowPulse 2.5s infinite ease-in-out;
}
@keyframes glowPulse {
  0%, 100% { text-shadow: 0 0 10px rgba(255,255,255,0.6); transform: scale(1); }
  50% { text-shadow: 0 0 25px rgba(79,172,254,0.9), 0 0 40px rgba(67,233,123,0.8); transform: scale(1.2); }
}

/* ================= GRADIENT ICON STYLE ================= */
.icon-gradient {
  background: linear-gradient(135deg, #ff9966, #ff5e62, #4facfe, #00f2fe);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientFlow 6s ease infinite;
}
@keyframes gradientFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ================= ROTATION / BOUNCE EFFECTS ================= */
.icon-spin { animation: spin 1.2s linear infinite; }
.icon-pulse { animation: pulse 1.2s ease-in-out infinite; }
.icon-bounce { animation: bounce 1.4s ease-in-out infinite; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.9; }
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* ================= ICON WITH BACKGROUND SHAPES ================= */
.icon-circle, .icon-square {
  width: 2.5em;
  height: 2.5em;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.05);
  box-shadow: inset 0 0 10px rgba(255,255,255,0.1);
  transition: all 0.4s ease;
}
.icon-square { border-radius: 8px; }

.icon-circle:hover, .icon-square:hover {
  background: rgba(255,255,255,0.15);
  box-shadow: 0 5px 15px rgba(255,99,71,0.3);
  transform: translateY(-3px) scale(1.1);
}

/* ================= ICON ACTIVE STATE ================= */
.icon:active {
  transform: scale(0.95);
  opacity: 0.85;
}

/* ================= THEMATIC COLOR CLASSES ================= */
.icon-primary { color: #4facfe; }
.icon-success { color: #43e97b; }
.icon-warning { color: #f7b733; }
.icon-danger  { color: #ff5e62; }
.icon-muted   { color: #aaa; }
.icon-dark    { color: #222; }


.icon-arrow-left::before {
    content: "\ea01";
}

.icon-arrow-login::before {
    content: "\ea02";
}

.icon-arrow-right::before {
    content: "\ea03";
}

.icon-arrow-swap::before {
    content: "\ea04";
}

.icon-calendar::before {
    content: "\ea05";
}

.icon-call::before {
    content: "\ea06";
}

.icon-calling-phone::before {
    content: "\ea07";
}

.icon-carret-down::before {
    content: "\ea08";
}

.icon-carret-left::before {
    content: "\ea09";
}

.icon-carret-right::before {
    content: "\ea0a";
}

.icon-carret-up::before {
    content: "\ea0b";
}

.icon-cart::before {
    content: "\ea0c";
}

.icon-close-circle::before {
    content: "\ea0d";
}

.icon-cross::before {
    content: "\ea0e";
}

.icon-danger::before {
    content: "\ea0f";
}

.icon-dollar-circle::before {
    content: "\ea10";
}

.icon-edit::before {
    content: "\ea11";
}

.icon-external::before {
    content: "\ea12";
}

.icon-eye::before {
    content: "\ea13";
}

.icon-gift::before {
    content: "\ea14";
}

.icon-instagram::before {
    content: "\ea15";
}

.icon-like::before {
    content: "\ea16";
}

.icon-location::before {
    content: "\ea17";
}

.icon-lock::before {
    content: "\ea18";
}

.icon-minus::before {
    content: "\ea19";
}

.icon-notification::before {
    content: "\ea1a";
}

.icon-play::before {
    content: "\ea1b";
}

.icon-plus::before {
    content: "\ea1c";
}

.icon-receipt::before {
    content: "\ea1d";
}

.icon-refresh::before {
    content: "\ea1e";
}

.icon-search-history::before {
    content: "\ea1f";
}

.icon-search::before {
    content: "\ea20";
}

.icon-settings::before {
    content: "\ea21";
}

.icon-sms::before {
    content: "\ea22";
}

.icon-stickynote::before {
    content: "\ea23";
}

.icon-store::before {
    content: "\ea24";
}

.icon-tick::before {
    content: "\ea25";
}

.icon-ticket-discount::before {
    content: "\ea26";
}

.icon-ticket::before {
    content: "\ea27";
}

.icon-time::before {
    content: "\ea28";
}

.icon-trash::before {
    content: "\ea29";
}

.icon-truck-fast::before {
    content: "\ea2a";
}

.icon-user::before {
    content: "\ea2b";
}