:root {
  --dnp-primary: #00509e;
  --dnp-dark: #00264d;
  --dnp-bg: #f7fbff;
  --dnp-white: #fff;
  --dnp-text: #1e293b;
  --dnp-muted: #64748b;
  --dnp-border: #d6eaf8;
  --dnp-shadow: 0 18px 50px rgba(0, 80, 158, .2);
}

#DNP-chatbot-widget, #DNP-chatbot-widget * { box-sizing: border-box; }
#DNP-chatbot-widget {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 2147483647;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--dnp-text);
}

/* Tự động ẩn huy hiệu Netlify chèn vào làm che nút Chat */
[class*="netlify"], [id*="netlify"], iframe[src*="netlify"], [data-netlify-badge] {
  display: none !important;
}


.dnp-launcher {
  width: 68px;
  height: 68px;
  margin-left: auto;
  border: 3px solid var(--dnp-dark);
  border-radius: 22px;
  background: var(--dnp-primary);
  box-shadow: var(--dnp-shadow);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dnp-container {
  position: absolute;
  right: 0;
  bottom: 84px;
  width: 430px;
  height: 690px;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--dnp-white);
  border: 1px solid var(--dnp-border);
  border-radius: 22px;
  box-shadow: 0 26px 70px rgba(15, 23, 42, .18);
  transform-origin: bottom right;
  transition: opacity .25s ease, transform .25s ease;
}
.dnp-hidden { opacity: 0; pointer-events: none; transform: translateY(24px) scale(.94); }
.dnp-visible { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }

.dnp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px;
  color: white;
  background: var(--dnp-primary);
}
.dnp-header-info { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dnp-title { margin: 0; font-size: 15px; font-weight: 750; }
.dnp-subtitle { margin-top: 2px; font-size: 11px; color: #eaf6ff; }
.dnp-icon-button {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  color: white;
  background: rgba(255,255,255,.12);
  cursor: pointer;
  font-size: 22px;
}

.dnp-mascot { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; }


.dnp-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  overflow-y: auto;
  background: var(--dnp-bg);
}
.dnp-message { display: flex; max-width: 86%; animation: dnpFadeIn .2s ease; }
.dnp-message.user { align-self: flex-end; max-width: 82%; }
.dnp-bubble { width: 100%; padding: 11px 14px; border-radius: 16px; font-size: 14px; line-height: 1.55; word-break: break-word; }
.dnp-message.bot .dnp-bubble { background: white; border: 1px solid #edf3f8; border-bottom-left-radius: 4px; }
.dnp-message.user .dnp-bubble { color: white; background: var(--dnp-dark); border-bottom-right-radius: 4px; }
.dnp-typing .dnp-bubble { color: var(--dnp-muted); font-style: italic; }

.dnp-actions, .dnp-quick-replies {
  display: flex;
  gap: 8px;
  padding: 10px;
  overflow-x: auto;
  background: white;
  border-top: 1px solid var(--dnp-border);
}

.dnp-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.dnp-chip, .dnp-action {
  border: 1.5px solid var(--dnp-primary);
  border-radius: 999px;
  padding: 7px 12px;
  color: var(--dnp-primary);
  background: white;
  cursor: pointer;
  white-space: nowrap;
  font-size: 12px;
  text-decoration: none;
}
.dnp-chip:hover, .dnp-action:hover { color: white; background: var(--dnp-primary); }

.dnp-footer { display: flex; gap: 10px; padding: 14px; background: white; border-top: 1px solid var(--dnp-border); }
.dnp-input { flex: 1; min-width: 0; border: 2px solid #e5e7eb; border-radius: 12px; padding: 12px; outline: 0; font-size: 14px; }
.dnp-input:focus { border-color: var(--dnp-primary); }
.dnp-send { border: 0; border-radius: 12px; padding: 0 16px; color: white; background: var(--dnp-primary); cursor: pointer; font-weight: 650; }

.dnp-card { padding: 10px; margin-top: 8px; border: 1px solid var(--dnp-border); border-radius: 12px; background: #f2faff; font-size: 13px; }
.dnp-product-img { display: block; width: 100%; max-width: 310px; margin-top: 8px; border: 2px solid var(--dnp-border); border-radius: 14px; }
.dnp-compare-table { width: 100%; margin-top: 8px; border-collapse: collapse; font-size: 12px; background: white; }
.dnp-compare-table th, .dnp-compare-table td { padding: 8px; border: 1px solid var(--dnp-border); text-align: left; vertical-align: top; }
.dnp-compare-table th { color: white; background: var(--dnp-primary); }

/* Thẻ Vinh danh Giải thưởng Thương hiệu Mạnh Quốc gia 2026 */
.dnp-award-card {
  margin: 4px 0 10px;
  background: linear-gradient(135deg, #fff9f0 0%, #ffffff 100%);
  border: 1.5px solid #f6ad55;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(221, 107, 32, 0.12);
}
.dnp-award-img {
  width: 100%;
  height: auto;
  display: block;
  border-bottom: 1.5px solid #fed7aa;
}
.dnp-award-content {
  padding: 10px 12px;
}
.dnp-award-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 700;
  color: #c05621;
  background: #feebc8;
  border-radius: 999px;
  margin-bottom: 4px;
}
.dnp-award-title {
  font-size: 13px;
  font-weight: 700;
  color: #7b341e;
  margin: 0 0 4px;
  line-height: 1.35;
}
.dnp-award-desc {
  font-size: 11.5px;
  color: #744210;
  line-height: 1.45;
  margin: 0;
}

@media (max-width: 520px) {
  #DNP-chatbot-widget { left: 12px; right: 12px; bottom: 12px; }
  .dnp-container { width: 100%; height: 78vh; bottom: 82px; }
}
@keyframes dnpFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.dnp-bot-face {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1e4a8b 50%, #2ba9e1 50%);
  position: relative;
  box-shadow: 0 4px 10px rgba(30, 74, 139, 0.3);
  animation: dnp-bounce 2s infinite ease-in-out;
  display: flex;
  justify-content: center;
}

.dnp-bot-face::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 10px;
  width: 5px;
  height: 8px;
  background: #fff;
  border-radius: 3px;
  animation: dnp-blink 3s infinite;
}

.dnp-bot-face::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 10px;
  width: 5px;
  height: 8px;
  background: #fff;
  border-radius: 3px;
  animation: dnp-blink 3s infinite;
}

.dnp-smile {
  position: absolute;
  top: 24px;
  width: 10px;
  height: 5px;
  border-bottom: 2px solid #fff;
  border-radius: 0 0 10px 10px;
}

@keyframes dnp-bounce {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-3px) rotate(-5deg); }
  75% { transform: translateY(-3px) rotate(5deg); }
}

@keyframes dnp-blink {
  0%, 95%, 100% { transform: scaleY(1); }
  97.5% { transform: scaleY(0.1); }
}