/* =========================================
   NÚT LIÊN HỆ NỔI BÊN GÓC PHẢI
========================================= */
.floating-btns { position: fixed; bottom: 30px; right: 30px; display: flex; flex-direction: column; gap: 15px; z-index: 100; }
.float-btn { 
    width: 55px; height: 55px; border-radius: 50%; display: flex; justify-content: center; align-items: center; 
    color: white; font-size: 24px; cursor: pointer; box-shadow: 0 4px 15px rgba(0,0,0,0.2); 
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); text-decoration: none;
}
.float-btn:hover { transform: scale(1.12) translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.3); }
.btn-chat { background: var(--primary-color); }
.btn-zalo { background: #0088FF; }
.zalo-inner { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; }
.zalo-txt { font-size: 13px; font-weight: bold; letter-spacing: 0.5px; font-family: 'Quicksand', sans-serif; }

/* =========================================
   GIAO DIỆN GIỎ HÀNG TRƯỢT (DRAWER)
========================================= */
.cart-overlay { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); 
    z-index: 999; display: none; opacity: 0; transition: opacity 0.3s; 
}
.cart-overlay.active { display: block; opacity: 1; }
.cart-drawer { 
    position: fixed; top: 0; right: -450px; width: 400px; max-width: 100%; height: 100%; 
    background: var(--white); z-index: 1000; transition: right 0.3s ease-in-out; 
    display: flex; flex-direction: column; box-shadow: -5px 0 15px rgba(0,0,0,0.1); 
}
.cart-drawer.active { right: 0; }
.cart-header { 
    padding: 20px; background: var(--bg-color); border-bottom: 1px solid var(--border-color); 
    display: flex; justify-content: space-between; align-items: center; 
}
.cart-header h2 { font-size: 18px; color: var(--primary-color); }
.close-cart { background: none; border: none; font-size: 28px; cursor: pointer; color: #888; }
.cart-items { padding: 20px; flex-grow: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 15px; }
.cart-item { display: flex; gap: 15px; border-bottom: 1px solid #eee; padding-bottom: 15px; }
.cart-item img { width: 70px; height: 70px; object-fit: cover; border-radius: 5px; }
.cart-item-info { flex-grow: 1; }
.cart-item-title { font-weight: 600; font-size: 14px; margin-bottom: 5px; color: var(--text-color); }
.cart-item-price { color: var(--primary-color); font-weight: bold; }
.cart-item-actions { display: flex; align-items: center; gap: 15px; margin-top: 10px; }
.qty-btn { 
    border: 1px solid var(--border-color); background: var(--bg-color); width: 28px; height: 28px; 
    border-radius: 4px; cursor: pointer; font-weight: bold;
}
.qty-btn:hover { background: #ddd; }
.cart-footer { padding: 20px; border-top: 1px solid var(--border-color); background: var(--bg-color); }
.cart-total { 
    display: flex; justify-content: space-between; font-size: 18px; font-weight: bold; 
    margin-bottom: 15px; color: var(--text-color);
}
.cart-total span:last-child { color: var(--primary-color); }
.btn-checkout { 
    width: 100%; padding: 15px; background: var(--primary-color); color: white; border: none; 
    font-size: 16px; font-weight: bold; border-radius: 5px; cursor: pointer; transition: 0.3s;
}
.btn-checkout:hover { background: #d94d20; }

/* RESPONSIVE COMPONENTS */
/* Khi màn hình điện thoại (< 768px): Thu nhỏ các nút liên hệ Zalo, Chat nổi ở góc phải dưới cùng để chúng không chiếm quá nhiều diện tích màn hình đọc của khách */
@media (max-width: 768px) {
  .floating-btns {
      bottom: 20px;
      right: 20px;
      gap: 10px;
  }
  .float-btn {
      width: 45px;
      height: 45px;
      font-size: 20px;
  }
  .zalo-txt {
      font-size: 11px;
  }
}