:root {
  --red:#C8180E; --red-dark:#8B0D07; --red-deep:#5c0804; --red-light:#E8352A;
  --gold:#C9943A; --gold-lt:#E8C06A;
  --cream:#FDF6EC; --brown:#1E0B03; --brown-mid:#3A1508;
  --white:#FFFFFF;
  --ease:cubic-bezier(.19,1,.22,1);
}
/* CURSOR */
#cur{position:fixed;width:8px;height:8px;background:var(--red);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .2s,height .2s;}
#cur-r{position:fixed;width:36px;height:36px;border:1px solid rgba(200,24,14,.45);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:transform .5s var(--ease);}
body:has(a:hover) #cur,body:has(button:hover) #cur{width:22px;height:22px;}

/* ============================================================
   FLOATING BUTTONS - Nhật Minh Coffee
   Thứ tự từ dưới lên: Back to top → Zalo → Call
   ============================================================ */

/* Container các nút nổi bên phải */
.floating-btns {
  position: fixed;
  right: 24px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  z-index: 990;
}

/* Style chung cho các nút Zalo & Call */
.float-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  position: relative;
  transition: all 0.25s ease;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  border: none;
}

.float-btn:hover {
  transform: scale(1.08);
}

/* Label hiện khi hover */
.float-btn-label {
  position: absolute;
  right: 62px;
  background: var(--brown);
  color: var(--cream);
  font-size: 11px;
  font-family: 'SVN-Gotham', sans-serif;
  letter-spacing: 1.5px;
  padding: 6px 14px;
  white-space: nowrap;
  border-radius: 30px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  border: 1px solid var(--gold);
}

.float-btn:hover .float-btn-label {
  opacity: 1;
}

/* Nút Gọi */
.float-call {
  background: var(--red);
  color: var(--white);
}

.float-call:hover {
  background: var(--red-dark);
  color: var(--gold-pale);
}

/* Nút Zalo */
.float-zalo {
  background: #0068ff;
  color: white;
}

.float-zalo:hover {
  background: #0050cc;
  transform: scale(1.08);
}

/* ============================================================
   BACK TO TOP BUTTON (Progress Ring)
   ============================================================ */
.nhatminh-backtop {
  position: relative; /* Không dùng fixed riêng, nằm trong floating-btns */
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--red-deep);
  color: var(--white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s var(--ease);
  box-shadow: 0 4px 12px rgba(200, 24, 14, 0.3);
  border: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.8);
}

.nhatminh-backtop.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.nhatminh-backtop:hover {
  background: var(--red);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 6px 16px rgba(200, 24, 14, 0.4);
}

.nhatminh-backtop:active {
  transform: scale(0.94);
}

.nhatminh-backtop i {
  font-size: 20px;
  z-index: 1;
  transition: transform 0.2s ease;
}

.nhatminh-backtop:hover i {
  transform: translateY(-3px);
}

/* Progress ring SVG */
.nhatminh-progress-ring {
  position: absolute;
  top: -2px;
  left: -2px;
  width: 56px;
  height: 56px;
  transform: rotate(-90deg);
}

.nhatminh-progress-ring circle {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 163.36;
  stroke-dashoffset: 163.36;
  transition: stroke-dashoffset 0.05s linear;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .floating-btns {
    right: 16px;
    bottom: 16px;
    gap: 10px;
  }
  
  .float-btn,
  .nhatminh-backtop {
    font-size: 18px;
  }
  
  .nhatminh-backtop i {
    font-size: 16px;
  }
  
  .float-btn-label {
    right: 52px;
    font-size: 10px;
    padding: 4px 10px;
  }
}

@media (max-width: 480px) {
  .floating-btns {
    right: 12px;
    bottom: 12px;
    gap: 8px;
  }
  
  .float-btn,
  .nhatminh-backtop {
    font-size: 16px;
  }
  
}