.greeting-card, main, header, footer, section { visibility: visible !important; opacity: 1 !important; }
        body { color: #e6eef6 !important; background-color: #01040f !important; }
        main > section { margin-top: 1.5rem; margin-bottom: 1.5rem; padding-top: 0.25rem; padding-bottom: 0.25rem; }
        @media (min-width: 768px) {
            main > section { margin-top: 2.5rem; margin-bottom: 2.5rem; }
        }
    


        .greeting-emblem i{animation:none!important}

        .greeting-emblem {
            width:64px;
            height:64px;
            display:flex;
            align-items:center;
            justify-content:center;
            border-radius:14px;
            background: linear-gradient(135deg,#60a5fa 0%, #06b6d4 100%);
            border: 1px solid rgba(255,255,255,0.06);
            box-shadow: 0 12px 32px rgba(2,6,23,0.6), inset 0 -6px 18px rgba(255,255,255,0.04);
            position:relative;
            flex-shrink:0;
            overflow:visible;
        }
        .greeting-emblem::after {
            content: '';
            position: absolute;
            inset: -6px;
            border-radius: 18px;
            background: radial-gradient(closest-side, rgba(6,182,212,0.18), transparent 45%);
            filter: blur(8px);
            opacity: 0.9;
            animation: emblem-glow 2.4s ease-in-out infinite;
            pointer-events: none;
        }

        .greeting-pill { backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,0.04); }
        .greeting-pill i { width: 18px; text-align: center; }
        .pill-admin { color: #f59e0b; background: linear-gradient(180deg, rgba(255,223,121,0.06), rgba(255,196,77,0.02)); border-color: rgba(245,158,11,0.12); }
        .pill-supervip { color: #f472b6; background: linear-gradient(180deg, rgba(244,114,182,0.04), rgba(244,114,182,0.01)); border-color: rgba(244,114,182,0.1); }
        .pill-vip { color: #06b6d4; background: linear-gradient(180deg, rgba(6,182,212,0.03), rgba(6,182,212,0.01)); border-color: rgba(6,182,212,0.09); }
        .pill-support { color: #60a5fa; background: linear-gradient(180deg, rgba(96,165,250,0.03), rgba(96,165,250,0.01)); border-color: rgba(96,165,250,0.09); }
        .pill-guest { color: #cbd5e1; background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.03); }
        .greeting-pill { transition: transform .12s ease, box-shadow .12s ease; }
        .greeting-pill:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(2,6,23,0.55); }

        .udid-cta { position:relative; display:inline-flex; align-items:center; gap:14px; padding:0; border-radius:14px; font-weight:700; overflow:visible; }
        .udid-cta .udid-bg-normal { position:absolute; inset:-3px; border-radius:14px; z-index:0; background: linear-gradient(90deg,#0891b2 0%, #1e3a8a 100%); opacity:0.14; filter: blur(6px); border: 1px solid rgba(56,189,248,0.06); }
        .udid-cta .udid-bg-tet { display:none; }
        .udid-cta .cta-inner { position:relative; z-index:10; display:inline-flex; align-items:center; gap:16px; padding:18px 28px; border-radius:14px; background: rgba(2,6,23,0.72); border: 1px solid rgba(255,255,255,0.06); }
        .udid-cta .inline-dot { width:9px; height:9px; border-radius:999px; background: linear-gradient(90deg,#06b6d4,#3b82f6); box-shadow: 0 6px 18px rgba(6,182,212,0.06); }
        .udid-cta .cta-icon { width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; background: rgba(255,255,255,0.03); }
        .udid-cta .cta-text { display:flex; flex-direction:column; line-height:1; color: #e6f9ff; }
        .udid-cta .cta-title { font-size:18px; font-weight:800; color: #e6f9ff; letter-spacing:0.2px; }
        .udid-cta .cta-sub { font-size:13px; color: rgba(226,241,255,0.82); font-weight:600; }
        .udid-cta .badge-new { display:none; }
        .udid-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(2,6,23,0.5); }
        @media (max-width: 767px) {
            .udid-cta .cta-inner { padding:14px 18px; gap:12px; }
            .udid-cta .cta-icon { width:28px; height:28px; }
            .udid-cta .cta-title { font-size:16px; }
            .udid-cta .udid-bg-normal { inset: -6px; filter: blur(8px); }
        }

        .orders-btn i { width:18px; text-align:center; }
        @keyframes emblem-glow {
            0% { transform: scale(0.98); opacity: 0.8; }
            50% { transform: scale(1.03); opacity: 1; }
            100% { transform: scale(0.98); opacity: 0.8; }
        }

        .greeting-badge .greeting-hi {
            font-family: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto;
            font-weight:800;
            font-size:22px;
            color:#ffffff;
            line-height:1;
            display:inline-block;
            transform-origin:center center;
            -webkit-text-stroke: 0.6px rgba(0,0,0,0.12);
            text-shadow: 0 10px 30px rgba(6,182,212,0.14), 0 2px 6px rgba(2,6,23,0.6);
        }
        .greeting-hi { animation: greeting-pulse 1.6s cubic-bezier(.2,.9,.3,1) infinite, greeting-text-glow 2.2s ease-in-out infinite; }
        @keyframes greeting-pulse {
            0% { transform: translateY(0) scale(1); }
            50% { transform: translateY(-4px) scale(1.06); }
            100% { transform: translateY(0) scale(1); }
        }
        @keyframes greeting-text-glow {
            0% { text-shadow: 0 8px 22px rgba(6,182,212,0.08); }
            50% { text-shadow: 0 14px 36px rgba(6,182,212,0.24); }
            100% { text-shadow: 0 8px 22px rgba(6,182,212,0.08); }
        }
        


            #live-datetime { margin:0; display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-align:left; }
            #live-datetime .time { font-variant-numeric: tabular-nums; font-weight:800; font-size:1.15rem; color:rgba(255,255,255,0.95); }
            #live-datetime .date { font-size:0.9rem; color:rgba(203,213,225,0.9); }
            #live-datetime .tz { font-size:0.75rem; color:rgba(148,163,184,0.9); background:rgba(255,255,255,0.02); padding:2px 8px; border-radius:999px; margin-left:0.5rem; }
            #live-datetime { align-items:flex-start; text-align:left; }

            #live-datetime .time { width: 100%; }
            #live-datetime .date { display: inline-block; }

            .greeting-emblem.variant-morning { background: linear-gradient(135deg,#FFD89B 0%, #F9876B 100%); }
            .greeting-emblem.variant-day { background: linear-gradient(135deg,#60a5fa 0%, #06b6d4 100%); }
            .greeting-emblem.variant-evening { background: linear-gradient(135deg,#2b2d42 0%, #0f172a 100%); }

            .greeting-badge svg { width:34px; height:34px; display:block; }
            .greeting-badge .badge-text { font-weight:800; font-size:18px; display:inline-block; color:#fff }

            @media (max-width: 767px) {
                .greeting-card { padding-left: 1rem; padding-right: 1rem; }
                .greeting-emblem { width:56px; height:56px; border-radius:12px; }
                .greeting-badge .greeting-hi { font-size:18px; }
                .greeting-title { font-size:1.5rem; }
                #live-datetime { font-size:0.875rem; align-items:flex-start; text-align:left }
                .greeting-pill { margin-top: 0.5rem; }
            }

            .greeting-emblem { transition: box-shadow .25s ease, transform .18s ease; }
            .greeting-emblem.variant-morning { box-shadow: 0 8px 30px rgba(255,170,90,0.12); transform: translateY(-1px); }
            .greeting-emblem.variant-day { box-shadow: 0 8px 30px rgba(6,182,212,0.12); transform: translateY(-1px); }
            .greeting-emblem.variant-evening { box-shadow: 0 8px 30px rgba(40,50,80,0.12); transform: translateY(-1px); }
            


.hotline-wrapper {
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.zalo-circle {
  width: 45px;
  height: 45px;
  background-color: #008fe5;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
}

.fbcircle {
    width: 45px;
    height: 45px;
    background-color: #1877F2;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
}
.fbcircle:hover {
    background-color: #155db8;
    transform: scale(1.06);
}
.fbcircle img { width: 260px; height: 260px; object-fit: contain; }

.zalo-circle:hover {
  background-color: #0070c0;
  transform: scale(1.1);
}

.zalo-circle img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.hotline-container {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
}

.hotline-circle {
  width: 45px;
  height: 45px;
  background-color: #007bff;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: shake 5s infinite;
  cursor: pointer;
  text-decoration: none;
}

.hotline-circle:hover {
  background-color: #0056b3;
  transform: scale(1.1);
}

.hotline-circle img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.hotline-number {
  margin-right: 10px;
  background-color: #fff;
  color: #007bff;
  padding: 8px 12px;
  border-radius: 20px;
  font-weight: bold;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(20px);
  transition: all 0.3s ease;
  pointer-events: none;
  text-decoration: none;
}

.hotline-number.show {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

@keyframes shake {
  0%, 100% { transform: rotate(0); }
  10% { transform: rotate(-8deg); }
  12% { transform: rotate(8deg); }
  14% { transform: rotate(0); }
  50% { transform: rotate(-8deg); }
  52% { transform: rotate(8deg); }
  54% { transform: rotate(0); }
}

@media (max-width: 768px) {
  .hotline-wrapper {
    bottom: 15px;
    right: 30px;
  }

  .hotline-circle, .zalo-circle {
    width: 50px;
    height: 50px;
  }

  .hotline-circle img, .zalo-circle img {
    width: 26px;
    height: 26px;
  }

    
}