/* ============================================================
   trauma-theme.css — Lớp re-skin "Trauma-Informed / Cognitive-Load Reduction"
   Áp cho index.html (nạp SAU Tailwind CDN). Đổi da, KHÔNG đổi logic.
   Nguyên tắc: nền dịu (không trắng tinh), cấu trúc sage/slate bão hoà thấp,
   điểm nhấn terracotta/mustard (không đỏ/cam chói), số điện thoại xanh đậm,
   chữ charcoal (không đen tuyệt đối), viền MỎNG, bo góc nhẹ, line-height thoáng.
   ============================================================ */

:root {
  /* 60% — Nền */
  --bg:        #F8F9FA;   /* nền trang (off-white, không #FFF) */
  --bg-warm:   #F4F1EA;   /* nền kem dịu cho mảng phụ */
  --surface:   #FCFBFA;   /* mặt thẻ (off-white ấm, không trắng tinh) */

  /* 30% — Cấu trúc (bước sóng ngắn, bão hoà thấp) */
  --deep:      #3F5158;   /* mặt tối: nav, header thẻ (xanh khói đậm) */
  --sage:      #8A9A86;   /* xanh sage — mảng/viền cấu trúc nhạt */
  --slate:     #708090;   /* xanh khói */
  --structure: #51636B;   /* slate đậm — nút cần chữ trắng đọc rõ */

  /* 10% — Điểm nhấn (ấm, dịu) */
  --accent:        #C27D5F;  /* terracotta — CTA, active */
  --accent-deep:   #A9694D;  /* terracotta đậm — hover, link, chữ nhấn */
  --mustard:       #C99A1E;  /* vàng mù tạt trầm (đủ tương phản) */
  --phone:         #2C5F74;  /* XANH ĐẬM cho số điện thoại */

  /* Chữ */
  --ink:    #2D3748;   /* charcoal — chữ chính */
  --muted:  #5A6670;   /* chữ phụ */

  /* Viền & bo góc */
  --border:  #DCE0DC;  /* viền mỏng, dịu */
  --radius:  10px;
  --radius-sm: 8px;
  --shadow:  0 2px 10px rgba(63, 81, 88, .07);  /* bóng mềm, rất nhẹ */
}

/* ---------- 1) Typography & nền tổng ----------
   (Font Inter nạp bằng <link> trong index.html) */
html, body { background-color: var(--bg) !important; }

body, .font-lexend, .font-space, button, input, select, textarea {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
}
body {
  color: var(--ink);
  line-height: 1.6;            /* 1.5–1.65 */
  -webkit-font-smoothing: antialiased;
}
p, li, label, span, a { line-height: 1.6; }
h1, h2, h3, h4 { line-height: 1.3; color: var(--ink); letter-spacing: -0.01em; }

/* ---------- 2) Viền MỎNG hết mức + bóng mềm ---------- */
.border, .border-2, .border-4,
.border-\[2px\], .border-\[3px\], .border-\[4px\],
.border-\[5px\], .border-\[6px\], .border-\[8px\] { border-width: 1px !important; }

/* Viền theo hướng (border-b/t/l/r-[Npx]) cũng làm mỏng 1px */
.border-b-2, .border-b-\[2px\], .border-b-\[3px\], .border-b-\[4px\], .border-b-\[5px\], .border-b-\[6px\] { border-bottom-width: 1px !important; }
.border-t-2, .border-t-\[2px\], .border-t-\[3px\], .border-t-\[4px\], .border-t-\[5px\], .border-t-\[6px\] { border-top-width: 1px !important; }
.border-l-2, .border-l-\[2px\], .border-l-\[3px\], .border-l-\[4px\] { border-left-width: 1px !important; }
.border-r-2, .border-r-\[2px\], .border-r-\[3px\], .border-r-\[4px\] { border-right-width: 1px !important; }

/* Khung "Đánh giá tâm lý": BỎ HẲN viền trong dày 10px */
.border-\[10px\] { border-width: 0 !important; }

[class*="shadow-["] { box-shadow: var(--shadow) !important; }

/* ---------- 3) Remap bảng màu hardcode (nền) ---------- */
.bg-\[\#0f172a\], .bg-\[\#2b3a47\], .bg-\[\#1e293b\], .bg-\[\#0d1b2a\] { background-color: var(--deep) !important; }
.bg-\[\#0e8ba1\], .bg-\[\#138a9c\], .bg-\[\#2bb6c9\]               { background-color: var(--structure) !important; }
.bg-\[\#2563eb\]                                                   { background-color: var(--slate) !important; }
.bg-\[\#c79a4b\]                                                   { background-color: var(--accent) !important; }
.bg-\[\#e11d2a\]                                                   { background-color: var(--phone) !important; }
.bg-\[\#f4f2ec\]                                                   { background-color: var(--bg-warm) !important; }
.bg-\[\#fff7ed\]                                                   { background-color: var(--bg-warm) !important; }
.bg-white                                                          { background-color: var(--surface) !important; }

/* ---------- 4) Remap màu chữ ---------- */
.text-\[\#0f172a\], .text-\[\#2b3a47\]               { color: var(--ink) !important; }
.text-\[\#138a9c\], .text-\[\#0e8ba1\], .text-\[\#2bb6c9\] { color: var(--structure) !important; }
.text-\[\#2563eb\]                                   { color: var(--slate) !important; }
.text-\[\#c79a4b\]                                   { color: var(--accent-deep) !important; }
.text-\[\#e11d2a\]                                   { color: var(--phone) !important; }

/* ---------- 5) Remap màu viền ---------- */
.border-\[\#0f172a\], .border-\[\#2b3a47\], .border-\[\#2bb6c9\],
.border-\[\#138a9c\], .border-\[\#0e8ba1\], .border-\[\#c79a4b\] { border-color: var(--border) !important; }
.border-\[\#e11d2a\] { border-color: var(--phone) !important; }

/* ---------- 6) Khối/Thẻ (mondrian-box) → mềm, bo nhẹ, viền mỏng ---------- */
.mondrian-box {
  background-color: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
}

/* ---------- 7) Nút ---------- */
.btn-mondrian {
  background-color: var(--accent) !important;   /* CTA = terracotta */
  color: #fff !important;
  border: 1px solid var(--accent-deep) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
  transition: background-color .15s ease, transform .05s ease;
}
.btn-mondrian:hover  { background-color: var(--accent-deep) !important; }
.btn-mondrian:active { transform: translateY(1px); }

.btn-mondrian-white {
  background-color: var(--surface) !important;
  color: var(--ink) !important;
  border: 1px solid var(--sage) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
  transition: background-color .15s ease;
}
.btn-mondrian-white:hover { background-color: #EEF1EE !important; }

/* Nút có nền chỉ định riêng → đưa về palette dịu, vẫn đọc rõ chữ trắng */
.btn-mondrian.bg-\[\#0e8ba1\], .btn-mondrian.bg-\[\#2563eb\] { background-color: var(--structure) !important; border-color: var(--structure) !important; }
.btn-mondrian.bg-\[\#c79a4b\] { background-color: var(--accent) !important; border-color: var(--accent-deep) !important; }
.btn-mondrian.bg-\[\#e11d2a\] { background-color: var(--phone) !important; border-color: var(--phone) !important; }

/* ---------- 8) Số điện thoại → XANH ĐẬM (không đỏ) ---------- */
.phone-red {
  color: var(--phone) !important;
  border-color: var(--phone) !important;
  background-color: rgba(44, 95, 116, .06) !important;
  border-radius: var(--radius-sm) !important;
}
.phone-red:hover { background-color: rgba(44, 95, 116, .12) !important; }

/* ---------- 9) Chi tiết trang trí ---------- */
.stripes-teal {
  background: repeating-linear-gradient(45deg, var(--sage) 0 6px, transparent 6px 12px) !important;
}
.panel-icon-box { border-radius: var(--radius-sm) !important; }
.modal-card { border-radius: var(--radius) !important; }

/* Liên kết văn bản nhấn */
a.underline, .text-\[\#0e8ba1\].underline { color: var(--accent-deep) !important; }

/* ---------- 10) Input / form ---------- */
input, select, textarea {
  background-color: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--ink) !important;
}
input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(194, 125, 95, .15) !important;
}

/* ---------- 11) Làm dịu khối "Thở hộp" (bỏ vàng/cam chói) ---------- */
.bb-head { background: linear-gradient(120deg, var(--deep) 0%, var(--slate) 60%, var(--sage) 100%) !important; }
.bb-body { background: linear-gradient(180deg, var(--surface) 0%, var(--bg-warm) 100%) !important; }
.bb-track { border-color: var(--sage) !important; box-shadow: none !important; }
.bb-dot {
  background: radial-gradient(circle at 35% 30%, #F3E7DA, var(--accent)) !important;
  box-shadow: 0 0 10px 2px rgba(194,125,95,.45) !important;
}
.bb-corner1 { background: var(--mustard) !important; }
.bb-corner2 { background: var(--sage) !important; }
.bb-corner3 { background: var(--slate) !important; }
.bb-corner4 { background: var(--accent) !important; }
.bb-corner { border-color: var(--deep) !important; }
.bb-halo { background: radial-gradient(circle, rgba(138,154,134,.40) 0%, rgba(138,154,134,0) 70%) !important; }
.bb-p1 { background: #F3ECDB !important; color: #8A6D17 !important; }
.bb-p2 { background: #E7EDE7 !important; color: #4A5A4E !important; }
.bb-p3 { background: #E6ECEF !important; color: #46606B !important; }
.bb-p4 { background: #F2E6DF !important; color: var(--accent-deep) !important; }
.bb-buddyG path[fill^="url"] { } /* giữ nguyên nhân vật, chỉ làm dịu xung quanh */
.bb-btn {
  background: var(--accent) !important; color: #fff !important;
  border: 1px solid var(--accent-deep) !important; box-shadow: none !important;
  border-radius: 999px !important;
}
.bb-btn:hover { background: var(--accent-deep) !important; }

/* ---------- 12) Màu hardcode còn lại (giữ nguyên thương hiệu Zalo #0068ff / Google #ea4335) ---------- */
.bg-\[\#f1f5f9\], .bg-\[\#f8fafc\] { background-color: var(--bg-warm) !important; }
.bg-\[\#0ea5e9\], .bg-\[\#0e6e80\] { background-color: var(--structure) !important; }
.text-\[\#0ea5e9\], .text-\[\#0e6e80\] { color: var(--structure) !important; }
.border-\[\#0ea5e9\], .border-\[\#0e6e80\] { border-color: var(--border) !important; }
.bg-\[\#ff0000\], .text-\[\#ff0000\] { background-color: var(--phone) !important; color: var(--phone) !important; }
.border-\[\#ff0000\] { border-color: var(--phone) !important; }

/* Bảo hiểm: không để nền trắng tinh ở mảng lớn */
.bg-\[\#ffffff\], .bg-\[\#fff\] { background-color: var(--surface) !important; }

/* ---------- 13) ĐIỆN THOẠI: số tư vấn (XANH) vs khẩn cấp (ĐỎ) ---------- */
:root { --emergency: #B3261E; }   /* đỏ đậm cho 115 / tự hại */

/* (A) 0369/0354 — MẶC ĐỊNH XANH: chữ + icon + viền + span số bên trong (trên nền sáng) */
a[href="tel:0369936690"], a[href="tel:0354696390"],
a[href="tel:0369936690"] i, a[href="tel:0354696390"] i,
a[href="tel:0369936690"] .phone-red, a[href="tel:0354696390"] .phone-red { color: var(--phone) !important; }
a[href="tel:0369936690"], a[href="tel:0354696390"],
.phone-red[href="tel:0369936690"], .phone-red[href="tel:0354696390"] { border-color: var(--phone) !important; }

/* (B) 0369/0354 dạng NÚT ĐẶC (btn-mondrian / nền đỏ / nền inline) → nền XANH, chữ-icon-span TRẮNG */
a.btn-mondrian[href="tel:0369936690"], a.btn-mondrian[href="tel:0354696390"],
a[href="tel:0369936690"].bg-\[\#e11d2a\], a[href="tel:0354696390"].bg-\[\#e11d2a\],
a[href="tel:0369936690"].bg-\[\#dc2626\], a[href="tel:0354696390"].bg-\[\#dc2626\],
a[href="tel:0369936690"][style*="background"], a[href="tel:0354696390"][style*="background"] {
  background-color: var(--phone) !important; border-color: var(--phone) !important; color: #fff !important;
}
a.btn-mondrian[href="tel:0369936690"] *, a[href="tel:0369936690"].bg-\[\#e11d2a\] *, a[href="tel:0369936690"].bg-\[\#dc2626\] *, a[href="tel:0369936690"][style*="background"] *,
a.btn-mondrian[href="tel:0354696390"] *, a[href="tel:0354696390"].bg-\[\#e11d2a\] *, a[href="tel:0354696390"].bg-\[\#dc2626\] *, a[href="tel:0354696390"][style*="background"] * { color: #fff !important; }

/* (C) 115/113/114 — MẶC ĐỊNH ĐỎ: chữ + icon + span phone-red bên trong */
a[href="tel:115"], a[href="tel:113"], a[href="tel:114"],
a[href="tel:115"] i, a[href="tel:113"] i, a[href="tel:114"] i,
a[href="tel:115"] .phone-red, a[href="tel:113"] .phone-red, a[href="tel:114"] .phone-red {
  color: var(--emergency) !important; border-color: var(--emergency) !important;
}

/* (D) 115 dạng NÚT/NỔI BẬT → nền ĐỎ, chữ-icon-span TRẮNG */
a.btn-mondrian[href="tel:115"], a[href="tel:115"].bg-\[\#e11d2a\], a[href="tel:115"].bg-\[\#dc2626\],
a[href="tel:115"][style*="background"], a[href="tel:115"].bg-white {
  background-color: var(--emergency) !important; border-color: var(--emergency) !important; color: #fff !important;
}
a.btn-mondrian[href="tel:115"] *, a[href="tel:115"].bg-\[\#e11d2a\] *, a[href="tel:115"].bg-\[\#dc2626\] *,
a[href="tel:115"][style*="background"] *, a[href="tel:115"].bg-white * { color: #fff !important; }

/* (E) Đỏ #dc2626 (khung "Bạn không hề đơn độc" trong chat AI) → đồng bộ đỏ đậm */
.text-\[\#dc2626\] { color: var(--emergency) !important; }
.border-\[\#dc2626\] { border-color: var(--emergency) !important; }
.bg-\[\#dc2626\] { background-color: var(--emergency) !important; }

/* ---------- 14) Bỏ HOẠ TIẾT gạch chéo (giữ hiển thị để KHÔNG ẩn nhầm cột QR Zalo) ---------- */
.stripes-pattern { background-image: none !important; }
/* Chỉ ẩn riêng thanh gạch chéo mỏng (h-4) dưới khung danh sách bác sĩ */
.h-4.stripes-pattern { display: none !important; }

/* ---------- 15) "Trò chuyện hỗ trợ" → tông XANH DA TRỜI NHẠT (thay vì xám) ---------- */
:root { --sky-soft: #E6F3FB; --sky: #8FC4DE; --sky-deep: #3E89AE; --sky-text: #2C6A88; }

/* Nút chế độ đang chọn (Trợ lý / Lễ tân) + nút Gửi → nền xanh da trời, chữ trắng */
#chatModeAi.bg-\[\#138a9c\], #chatModeHuman.bg-\[\#138a9c\],
#aiChatSend, #chatSend {
  background-color: var(--sky-deep) !important;
  border-color: var(--sky-deep) !important;
  color: #fff !important;
}
#aiChatSend:hover, #chatSend:hover,
#chatModeAi.bg-\[\#138a9c\]:hover, #chatModeHuman.bg-\[\#138a9c\]:hover { background-color: var(--sky-text) !important; }

/* Dải tiêu đề phụ + vùng ô nhập của 2 view → nền xanh rất nhạt; chữ nhấn → xanh */
#aiChatView .bg-\[\#f8fafc\], #humanChatView .bg-\[\#f8fafc\] { background-color: var(--sky-soft) !important; }
#aiChatView .text-\[\#0e8ba1\], #humanChatView .text-\[\#0e8ba1\] { color: var(--sky-text) !important; }
#aiChatView .text-\[\#0e8ba1\] i, #humanChatView .text-\[\#0e8ba1\] i { color: var(--sky-text) !important; }

/* Bong bóng chat: tin người dùng (#2563eb) + nhãn "Tâm An" (#138a9c) → xanh da trời */
#aiChatLog .bg-\[\#2563eb\], #aiChatLog .bg-\[\#138a9c\], #chatLog .bg-\[\#2563eb\] {
  background-color: var(--sky-deep) !important;
  border-color: var(--sky-deep) !important;
}

/* Chấm báo "đang hoạt động" + icon đầu panel chat → xanh da trời */
.panel-icon-box .bg-\[\#2bb6c9\], #aiChatView .border-\[\#138a9c\] { background-color: var(--sky) !important; }