/* ══ Bánh Trung Thu Xuân Đỉnh — Khung chat Thanh Hằng (dùng chung cho mọi trang) ══ */

/* -- Modal dùng cho popup báo giá sỉ mở từ trong khung chat -- */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(10,5,30,0.88);z-index:4500;align-items:center;justify-content:center;padding:1rem;}
#policy-baogiasi,#policy-baogiasi-hopqua{z-index:5200;}
.modal-box{background:var(--cream);border-radius:6px;width:100%;max-width:480px;overflow:hidden;box-shadow:0 32px 80px rgba(0,0,0,0.4);}
.modal-head{background:linear-gradient(135deg,#0A0A2E,#1E1A6E);padding:1.4rem 1.8rem;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:2;}
.modal-head-sub{font-size:0.65rem;letter-spacing:0.15em;text-transform:uppercase;color:#F0C040;margin-bottom:3px;}
.modal-head-title{font-family:"Playfair Display",serif;font-size:1.1rem;color:#FFF8DC;font-weight:700;}
.modal-close{background:rgba(255,255,255,0.1);border:none;color:#FFD0A0;font-size:1rem;cursor:pointer;width:32px;height:32px;border-radius:50%;}
.modal-body-policy{max-height:70vh;overflow-y:auto;padding:1.6rem 1.8rem;font-size:0.9rem;line-height:1.7;color:var(--text);}
.modal-body-policy h3{font-family:"Playfair Display",serif;font-size:1.05rem;color:var(--red);margin:1.4rem 0 0.5rem;}
.modal-body-policy h3:first-child{margin-top:0;}
.modal-body-policy p, .modal-body-policy li{margin-bottom:0.6rem;}
.modal-body-policy ul{padding-left:1.2rem;margin-bottom:0.6rem;}
.modal-body-policy .updated{font-size:0.75rem;color:#8A6A50;margin-bottom:1rem;}
@media(max-width:500px){
  .modal-box{position:fixed;inset:0;width:100%;height:100%;max-height:100%;border-radius:0;overflow-y:auto;}
  .modal-overlay{align-items:stretch;justify-content:stretch;padding:0;}
  .modal-body-policy{max-height:none;overflow-y:visible;}
}
@media print{
  body *{visibility:hidden;}
  .modal-overlay[style*="flex"]{position:absolute;left:0;top:0;width:100%;background:#fff;padding:0;}
  .modal-overlay[style*="flex"] .modal-box,
  .modal-overlay[style*="flex"] .modal-box *{visibility:visible;}
  .modal-overlay[style*="flex"] .modal-box{position:static;max-width:100%;box-shadow:none;}
  .modal-overlay[style*="flex"] .modal-body-policy{max-height:none;overflow:visible;}
  .modal-overlay[style*="flex"] .modal-close{display:none;}
}

/* -- Khung chat Thanh Hằng -- */
#hang-bubble{position:fixed;bottom:2rem;right:2rem;z-index:4000;display:flex;flex-direction:column;align-items:flex-end;gap:10px;}
#hang-teaser{background:#fff;border:1px solid #F0C040;border-radius:20px 20px 4px 20px;padding:10px 16px 10px 16px;font-size:0.82rem;color:#2C1810;box-shadow:0 4px 16px rgba(0,0,0,0.12);cursor:pointer;width:220px;max-width:calc(100vw - 4rem);box-sizing:border-box;flex-shrink:0;line-height:1.5;animation:hangIOSPop 0.45s cubic-bezier(0.34,1.56,0.64,1);position:relative;transform-origin:bottom right;}
#hang-teaser strong{color:#E8231A;}
#hang-teaser-close{position:absolute;top:-10px;right:-10px;width:26px;height:26px;border-radius:50%;background:#E8231A;color:#fff;border:none;cursor:pointer;font-size:0.85rem;line-height:26px;text-align:center;box-shadow:0 2px 6px rgba(0,0,0,0.3);z-index:9999;display:block;}
#hang-teaser.nudge{animation:hangIOSPop 0.45s cubic-bezier(0.34,1.56,0.64,1), hangNudge 0.6s ease 0.5s;border-color:#E8231A;}
@keyframes hangIOSPop{0%{opacity:0;transform:scale(0.3) translateY(8px);}55%{opacity:1;transform:scale(1.06) translateY(0);}80%{transform:scale(0.97);}100%{opacity:1;transform:scale(1);}}
@keyframes hangNudge{0%,100%{transform:translateX(0);}20%{transform:translateX(-4px);}40%{transform:translateX(4px);}60%{transform:translateX(-3px);}80%{transform:translateX(3px);}}
#hang-btn{width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,#E8231A,#C01010);border:none;cursor:pointer;box-shadow:0 4px 16px rgba(232,35,26,0.4);display:flex;align-items:center;justify-content:center;font-size:1.5rem;transition:transform 0.2s;animation:hangPulse 2.4s infinite;touch-action:none;}
#hang-btn:active{cursor:grabbing;}
#hang-bubble.hang-dragging #hang-btn{transform:scale(1.16);box-shadow:0 10px 28px rgba(232,35,26,0.55);animation:none;transition:transform 0.15s ease;}
#hang-bubble.hang-snapping{transition:left 0.5s cubic-bezier(0.34,1.56,0.64,1),top 0.5s cubic-bezier(0.34,1.56,0.64,1);}
@keyframes hangPulse{0%{box-shadow:0 4px 16px rgba(232,35,26,0.4),0 0 0 0 rgba(232,35,26,0.4);}70%{box-shadow:0 4px 16px rgba(232,35,26,0.4),0 0 0 14px rgba(232,35,26,0);}100%{box-shadow:0 4px 16px rgba(232,35,26,0.4),0 0 0 0 rgba(232,35,26,0);}}
#hang-btn:hover{transform:scale(1.08);}
#hang-window{position:fixed;bottom:6rem;right:2rem;width:400px;max-width:calc(100vw - 2rem);height:560px;max-height:calc(100vh - 8rem);background:#fff;border-radius:16px;box-shadow:0 8px 40px rgba(0,0,0,0.18);z-index:4000;display:none;flex-direction:column;overflow:hidden;border:1px solid #F0C040;}
#hang-window.open{display:flex;}
#hang-head{background:linear-gradient(135deg,#0A0A2E,#1E1A6E);padding:14px 16px;display:flex;align-items:center;gap:10px;}
#hang-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#F0C040,#E8231A);display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0;}
#hang-head-info{flex:1;}
#hang-head-name{font-size:0.92rem;font-weight:700;color:#FFE080;font-family:"Playfair Display",serif;}
#hang-head-status{font-size:0.68rem;color:#9090CC;margin-top:1px;}
#hang-head-close{background:rgba(255,255,255,0.1);border:none;color:#FFD0A0;cursor:pointer;width:28px;height:28px;border-radius:50%;font-size:0.9rem;}
#hang-messages{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;background:#FFFBF5;}
.hang-msg{max-width:90%;font-size:0.83rem;line-height:1.6;padding:9px 13px;border-radius:14px;animation:hangMsgPop 0.32s cubic-bezier(0.34,1.56,0.64,1);}
.hang-msg.bot{background:#fff;border:1px solid #F0E8D0;color:#2C1810;align-self:flex-start;border-radius:4px 14px 14px 14px;transform-origin:bottom left;}
.hang-msg.user{background:linear-gradient(135deg,#E8231A,#C01010);color:#fff;align-self:flex-end;border-radius:14px 14px 4px 14px;transform-origin:bottom right;}
.hang-msg.typing{background:#fff;border:1px solid #F0E8D0;align-self:flex-start;border-radius:4px 14px 14px 14px;padding:12px 16px;transform-origin:bottom left;}
@keyframes hangMsgPop{0%{opacity:0;transform:scale(0.6);}70%{opacity:1;transform:scale(1.03);}100%{transform:scale(1);}}
.hang-chat-imgs{display:flex;flex-direction:column;gap:6px;margin-top:8px;}
.hang-chat-imgs img{width:100%;max-width:240px;border-radius:8px;cursor:pointer;object-fit:cover;border:1px solid #F0E8D0;}
.hang-typing-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#C8922A;margin:0 2px;animation:hangDot 1.2s infinite;}
.hang-typing-dot:nth-child(2){animation-delay:0.2s;}
.hang-typing-dot:nth-child(3){animation-delay:0.4s;}
#hang-quick-wrap{position:relative;background:#FFF8EC;border-top:1px solid #F0E8D0;}
#hang-quick{padding:8px 10px;display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-behavior:smooth;cursor:grab;}
#hang-quick.hang-quick-dragging{cursor:grabbing;scroll-behavior:auto;user-select:none;}
#hang-quick::-webkit-scrollbar{display:none;}
.hang-quick-arrow{position:absolute;top:0;bottom:0;width:28px;border:none;display:flex;align-items:center;font-size:0.85rem;color:#B08050;cursor:pointer;z-index:2;transition:opacity 0.15s;}
.hang-quick-arrow:disabled{opacity:0;pointer-events:none;}
.hang-quick-arrow.hang-quick-left{left:0;justify-content:flex-start;padding-left:4px;background:linear-gradient(to right, #FFF8EC 60%, rgba(255,248,236,0));}
.hang-quick-arrow.hang-quick-right{right:0;justify-content:flex-end;padding-right:4px;background:linear-gradient(to left, #FFF8EC 60%, rgba(255,248,236,0));}
@media(max-width:768px){
  #hang-quick{padding:8px 10px;}
}
.hang-quick-btn{flex-shrink:0;background:#fff;border:1px solid #E8231A;color:#E8231A;border-radius:20px;padding:5px 12px;font-size:0.72rem;cursor:pointer;white-space:nowrap;font-family:"Be Vietnam Pro",sans-serif;transition:all 0.2s;}
.hang-quick-btn:hover{background:#E8231A;color:#fff;}
#hang-input-row{display:flex;gap:8px;padding:10px 12px;border-top:1px solid #F0E8D0;background:#fff;}
#hang-input{flex:1;border:1px solid #E0D0B0;border-radius:20px;padding:8px 14px;font-size:0.82rem;font-family:"Be Vietnam Pro",sans-serif;outline:none;color:#2C1810;}
#hang-input:focus{border-color:#E8231A;}
#hang-send{background:#E8231A;border:none;color:#fff;width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:1rem;flex-shrink:0;transition:background 0.2s;}
#hang-send:hover{background:#C01010;}
#hang-send:disabled{background:#ccc;cursor:not-allowed;}
@keyframes hangFadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
@keyframes hangDot{0%,80%,100%{transform:scale(0.7);opacity:0.5;}40%{transform:scale(1);opacity:1;}}
@media(max-width:768px){
  #hang-window{
    position:fixed;
    inset:0;
    width:100%;
    max-width:100%;
    height:100dvh;
    max-height:100dvh;
    bottom:0;
    right:0;
    border-radius:0;
    border:none;
    z-index:5000;
  }
  #hang-messages{
    flex:1;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  #hang-input-row{
    padding-bottom:calc(10px + env(safe-area-inset-bottom));
  }
  #hang-head{
    padding-top:calc(14px + env(safe-area-inset-top));
  }
  #hang-bubble{
    z-index:4999;
  }
  #hang-input{
    font-size:16px;
  }
}