/* Nha Khoa Ky Hoa - khung chat "Tro ly Nha khoa" (30/10/2026). Chep tu khung chat web Tre hoa da
 * (assets/css/site.css cua web do), doi sang mau Nha khoa. Mo bang nut "Hoi dap" tren thanh lien he (.kh-rail).
 *
 * ⚠️ MAU HARDCODE nhu css/ui.css: trang chu KHONG nap css/style.css nen khong co bien --brand-*.
 * ⚠️ z-index 160: thanh cookie (js/analytics.js, .kh-cookie) nam o 150 va bam day man hinh, khung chat
 *    phai nam TREN no, khong thi o nhap cau hoi bi che. Header 100, thanh lien he 99.
 */
.tro-ly{position:fixed;z-index:160;right:18px;bottom:18px;font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;}
html.tro-ly-dang-mo .kh-rail{opacity:0;visibility:hidden;}   /* khung chat che cho thanh, an thanh di cho gon */

/* Nut "Hoi dap" tren thanh lien he: nen kem de tach khoi 4 nut xanh / vang */
.kh-rail a.kh-rail__chat{background:#f7f3ea;color:#14463b;}
.kh-rail a.kh-rail__chat:hover{background:#ecdcb0;}

.tro-ly-khung{position:absolute;right:0;bottom:0;width:min(380px, calc(100vw - 28px));height:min(580px, calc(100vh - 110px));display:flex;flex-direction:column;
  background:#fff;border:1px solid #dcd3c3;border-radius:24px;overflow:hidden;box-shadow:0 24px 60px rgba(14,47,39,.28);transform-origin:100% 100%;
  animation:tro-ly-vao .35s cubic-bezier(.22,1,.36,1);}
.tro-ly-khung[hidden]{display:none;}
@keyframes tro-ly-vao{from{opacity:0;transform:translateY(12px) scale(.96);}}
.tro-ly-dau{display:flex;align-items:center;gap:12px;padding:12px 12px 12px 18px;color:#fff;background:linear-gradient(135deg, #1a5a4b, #14463b);}
.tro-ly-dau > div{flex:1;}
.tro-ly-dau strong{display:block;font-size:16px;line-height:1.25;}
.tro-ly-dau small{display:block;font-size:12px;opacity:.85;}
.tro-ly-cham{width:10px;height:10px;border-radius:50%;background:#7CE0A5;box-shadow:0 0 0 4px rgba(124,224,165,.25);}
.tro-ly-dong{width:44px;height:44px;flex:none;border:0;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.14);cursor:pointer;}
.tro-ly-dong svg{width:18px;height:18px;}
.tro-ly-tin{flex:1;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:10px;padding:16px;background:#f7f3ea;}
.tro-ly-tn{max-width:86%;padding:10px 14px;border-radius:18px;font-size:15px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;}
.tro-ly-tn.bot{align-self:flex-start;background:#fff;border:1px solid #dcd3c3;color:#1c2b26;border-bottom-left-radius:6px;}
.tro-ly-tn.khach{align-self:flex-end;background:#14463b;color:#fff;border-bottom-right-radius:6px;}
.tro-ly-tn.loi{align-self:flex-start;background:#FFF4F2;border:1px solid #F3D2CB;color:#8A2A16;}
.tro-ly-go{display:inline-flex;gap:4px;padding:4px 0;}
.tro-ly-go i{width:6px;height:6px;border-radius:50%;background:#c2a15a;animation:tro-ly-nhay 1.2s infinite ease-in-out;}
.tro-ly-go i:nth-child(2){animation-delay:.2s;} .tro-ly-go i:nth-child(3){animation-delay:.4s;}
@keyframes tro-ly-nhay{0%, 60%, 100%{opacity:.3;}30%{opacity:1;}}
.tro-ly-nut{display:flex;flex-wrap:wrap;gap:8px;}
.tro-ly-nut a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;font-size:14px;font-weight:600;color:#fff;background:#14463b;text-decoration:none;}
.tro-ly-nut a.zalo{background:#0068ff;}
.tro-ly-nut a.fb{background:#1877F2;}
.tro-ly-nut a.web{background:#fff;color:#14463b;border:1px solid #c2a15a;}

.tro-ly-so{align-self:stretch;display:grid;gap:10px;padding:14px;border:1px solid #dcd3c3;border-radius:18px;background:#fff;}
.tro-ly-so-dau{margin:0;font-size:14px;line-height:1.5;font-weight:600;color:#1c2b26;}
.tro-ly-so input[type="text"], .tro-ly-so input[type="tel"]{min-height:44px;padding:0 14px;border:1px solid #dcd3c3;border-radius:12px;font:inherit;font-size:16px;color:#1c2b26;outline:none;}
.tro-ly-so input[type="text"]:focus, .tro-ly-so input[type="tel"]:focus{border-color:#c2a15a;}
.tro-ly-so label{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.5;color:#6d7c76;cursor:pointer;}
.tro-ly-so label input{flex:none;width:20px;height:20px;margin-top:1px;accent-color:#14463b;}
.tro-ly-so-loi{margin:0;font-size:13px;line-height:1.45;color:#A12B12;}
.tro-ly-so-loi:empty{display:none;}
.tro-ly-so button{min-height:44px;border:0;border-radius:999px;font:inherit;font-size:15px;font-weight:600;color:#fff;background:#14463b;cursor:pointer;}
.tro-ly-so button:disabled{opacity:.6;cursor:default;}
.tro-ly-so input.tro-ly-so-bay{position:absolute;width:1px;height:1px;min-height:0;padding:0;border:0;overflow:hidden;clip-path:inset(50%);}

.tro-ly-goi-y{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px;background:#f7f3ea;}   /* đệm đáy 12px như web Da liễu: nút cuối không dính đường kẻ ô nhập */
.tro-ly-goi-y[hidden]{display:none;}
.tro-ly-goi-y button{min-height:44px;padding:0 14px;border-radius:999px;border:1px solid #dcd3c3;background:#fff;font:inherit;font-size:13px;color:#1c2b26;cursor:pointer;transition:border-color .25s, color .25s;}
.tro-ly-goi-y button:hover{border-color:#c2a15a;color:#14463b;}
.tro-ly-form{display:flex;align-items:flex-end;gap:8px;margin:0;padding:12px 14px 4px;border-top:1px solid #dcd3c3;}
.tro-ly-form textarea{flex:1;resize:none;min-height:44px;max-height:120px;padding:11px 16px;border:1px solid #dcd3c3;border-radius:22px;font:inherit;font-size:15px;color:#1c2b26;outline:none;}
.tro-ly-form textarea:focus{border-color:#c2a15a;}
.tro-ly-form button{width:44px;height:44px;flex:none;border:0;border-radius:50%;display:grid;place-items:center;color:#fff;background:#14463b;cursor:pointer;}
.tro-ly-form button:disabled{opacity:.45;cursor:default;}
.tro-ly-form button svg{width:20px;height:20px;}
.tro-ly-phu{margin:0;padding:0 18px;font-size:12px;color:#6d7c76;text-align:right;}
.tro-ly-phu [data-het]{color:#A12B12;font-weight:600;}
.tro-ly-chan{margin:0;padding:2px 18px 14px;font-size:13px;color:#6d7c76;}
.tro-ly-chan a{color:#14463b;font-weight:600;}

/* Dien thoai: khung gan day man hinh, cach mep 10px */
@media (max-width: 640px){
  .tro-ly{right:14px;bottom:14px;}
  .tro-ly-khung{position:fixed;left:10px;right:10px;bottom:10px;width:auto;height:min(78vh, 620px);}
}
@media (prefers-reduced-motion:reduce){ .tro-ly-khung{animation:none;} .tro-ly-go i{animation:none;opacity:.7;} }