﻿.chat-order{position:absolute;inset:0;background:#fff;z-index:30;overflow:auto;padding:16px;color:#333;font-size:13px;box-sizing:border-box;overscroll-behavior:contain}.chat-order[hidden]{display:none}.chat-order *{box-sizing:border-box}.chat-order__heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}.chat-order__heading h4{margin:0;font-size:20px}.chat-order label{display:block;margin:10px 0 4px}.chat-order .form-control{width:100%;margin:0;min-width:0;height:auto;min-height:38px}.chat-order p{margin:12px 0}.chat-order__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}.chat-order__card{border:1px solid #e4e4e4;border-radius:8px;padding:8px;min-width:0;display:flex;flex-direction:column;gap:5px}.chat-order__card>img{height:90px;width:100%;object-fit:contain;background:#fafafa}.chat-order__card strong{font-size:12px;line-height:1.5;overflow-wrap:anywhere}.chat-order__card small{color:#777}.chat-order__card label{margin:0;font-size:11px}.chat-order__card .btn{font-size:11px;white-space:normal;margin-top:4px}.chat-order__price{color:#6b3154;font-weight:700;font-size:13px}.chat-order__empty{grid-column:1/-1}.chat-order__suggestions{max-height:230px;overflow:auto;border-radius:6px}.chat-order__suggestion{display:flex;gap:8px;align-items:center;padding:10px 0;border-bottom:1px solid #eee}.chat-order__suggestion>img{width:40px;height:50px;object-fit:contain;flex-shrink:0}.chat-order__suggestion-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}.chat-order__suggestion-info strong{font-size:12px;overflow-wrap:anywhere}.chat-order__suggestion-info select{font-size:11px}.chat-order__suggestion>.btn{padding:6px 9px;flex-shrink:0;font-size:12px}.chat-order__open{border:0;background:#fff;color:#6b3154;padding:8px 12px;cursor:pointer;font-weight:600}#chat-order-result{margin:10px 0;white-space:pre-wrap}.chat-order textarea{resize:vertical}.chat-order #chat-order-submit{width:100%;margin-bottom:8px}#chat-order-current:empty{display:none}
/* Khung đặt hàng phủ đúng phần nội dung, header có chiều cao riêng. */
#chat-widget{max-height:calc(100dvh - 110px);display:flex;flex-direction:column}#chat-widget>div:first-child{position:relative;z-index:31}#chat-widget:has(#chat-order:not([hidden]))>div:first-child{display:none!important}#chat-widget:has(#chat-order:not([hidden])){height:min(680px,calc(100dvh - 110px))}.chat-order{scrollbar-gutter:stable}
@media(max-width:600px){#chat-widget:has(#chat-order:not([hidden])){height:100dvh!important;max-height:100dvh!important}.chat-order{padding:16px;padding-bottom:calc(16px + env(safe-area-inset-bottom))}}

/* Thẻ sản phẩm và địa chỉ gọn trong khung chat. */
.chat-order__heading{position:sticky;top:-16px;z-index:5;background:#fff;padding:12px 0;margin-top:-12px;border-bottom:1px solid #eee}.chat-order__heading .btn{border:0;background:transparent;color:#555}.chat-order__card{padding:9px;border-color:#e7e3e5;border-radius:10px;background:#fff}.chat-order__card>strong{min-height:36px;font-weight:600}.chat-order__card>.chat-order__price{margin-bottom:4px}.chat-order__quantity{display:grid;grid-template-columns:26px minmax(20px,1fr) 26px 26px;gap:3px;align-items:center;margin-top:auto}.chat-order__quantity button{width:26px;height:30px;border:1px solid #e2dce0;border-radius:5px;background:#fff;color:#333;padding:0;font-size:17px;line-height:1;cursor:pointer}.chat-order__quantity button:hover{background:#f7f3f5}.chat-order__quantity button:disabled{opacity:.4;cursor:default}.chat-order__quantity button.chat-order__remove{color:#ba3d4f;border-color:transparent;font-size:21px}.chat-order__quantity .form-control{height:30px;min-height:30px;padding:2px;text-align:center;border:0;border-radius:0;font-weight:600;font-size:13px;appearance:textfield;-moz-appearance:textfield}.chat-order__quantity input::-webkit-inner-spin-button,.chat-order__quantity input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.chat-order__location{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.chat-order__location-field{min-width:0}.chat-order__section-title{font-size:14px;font-weight:600;border-top:1px solid #eee;padding-top:16px;margin:16px 0 6px}#chat-order-total{background:#faf7f9;border-radius:8px;padding:10px 12px;font-weight:500;line-height:1.6}.chat-order .form-control{border:1px solid #ddd6db;border-radius:6px;box-shadow:none;font-size:13px}.chat-order .form-control:focus{border-color:#6b3154;box-shadow:0 0 0 2px rgba(107,49,84,.08)}.chat-order label{font-size:12px;color:#6d6470;font-weight:400}.chat-order #chat-order-submit{background:#6b3154;border-color:#6b3154;border-radius:8px;padding:12px;font-weight:600}.chat-order .select2-container{min-width:0!important;max-width:100%;font-size:12px}.chat-order .select2-selection--single{height:38px;border:1px solid #ddd6db;border-radius:6px}.chat-order .select2-selection--single .select2-selection__rendered{line-height:36px;padding-left:9px;padding-right:20px}.chat-order .select2-selection--single .select2-selection__arrow{height:36px;right:2px}.chat-order .select2-dropdown{border-color:#ddd6db;border-radius:6px;font-size:12px;box-shadow:0 4px 15px rgba(0,0,0,.12)}.chat-order .select2-results__options{max-height:180px}.chat-order .select2-search__field{font-size:13px;min-width:0}.chat-order .select2-search{padding:6px}.chat-order .select2-container--disabled .select2-selection--single{background:#f4f2f3}.chat-order .select2-results__option--highlighted[aria-selected]{background:#6b3154}.chat-order__quantity .form-control{border:0}.chat-order__suggestion-info .form-control{font-size:11px}

.chat-order__quantity{grid-template-columns:28px minmax(24px,1fr) 28px;gap:6px}.chat-order__quantity button{width:28px;height:30px}.chat-order__media{position:relative;height:94px;background:#fafafa;border-radius:6px}.chat-order__media>img{height:100%;width:100%;object-fit:contain}.chat-order__media>.chat-order__remove{position:absolute;top:3px;right:3px;z-index:2;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border:1px solid #e9dde1;border-radius:50%;padding:0;background:#fff;color:#9d465c;font-size:20px;line-height:1;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.06)}.chat-order__media>.chat-order__remove:hover{background:#a3304d;border-color:#a3304d;color:#fff}.chat-order__media>.chat-order__remove:disabled{opacity:.4;cursor:default}

/* Sắc kem hồng và đỏ mận của Charme. */
.chat-order{background:#fffafb;color:#38232e}.chat-order__heading{top:-16px;margin-left:-16px;margin-right:-16px;padding:14px 16px;background:linear-gradient(115deg,#f9e6ed,#fff4e5);border-bottom:1px solid #eed4de;box-shadow:0 3px 12px rgba(89,37,62,.04)}.chat-order__brand{display:block;color:#9b5b73;font-size:9px;font-weight:700;letter-spacing:1.8px;margin-bottom:5px}.chat-order__heading h4{font-size:19px;color:#55253d;letter-spacing:-.3px}.chat-order__heading .btn{background:rgba(255,255,255,.7);border:1px solid #eddae1;border-radius:20px;color:#75485d;font-size:12px;padding:6px 10px}.chat-order__card{border:1px solid #eedce4;background:#fff;box-shadow:0 3px 12px rgba(105,40,68,.04)}.chat-order__media{background:linear-gradient(140deg,#fff8fa,#f9eef2);border:1px solid #faf1f5}.chat-order__media>img{mix-blend-mode:multiply;padding:4px}.chat-order__card>.chat-order__price{color:#a93661;font-size:14px}.chat-order__quantity button{border-color:#ead6df;background:#fff9fb;color:#864662}.chat-order__quantity button:hover{background:#864662;border-color:#864662;color:#fff}.chat-order__quantity .form-control{background:#fff;color:#55253d}.chat-order__quantity .chat-order__minus,.chat-order__quantity .chat-order__plus{font-weight:600}.chat-order__suggestion{border-color:#efdee6}.chat-order__suggestion>.btn{background:#9a3d65;border-color:#9a3d65;border-radius:7px}.chat-order__suggestion-info .chat-order__price{color:#a93661}#chat-order-current:not(:empty){background:#fff3f7;border:1px solid #f0dbe5;border-radius:10px;padding:0 10px;margin-bottom:12px}#chat-order-current p{font-size:11px;line-height:1.6;color:#96526f;margin:10px 0 4px}#chat-order-current .chat-order__suggestion{border:0;padding-top:5px}.chat-order__section-title{border-color:#eddae2;color:#86445f;font-size:14px}.chat-order label{color:#86556b}.chat-order .form-control{background:#fff;border-color:#ead9e1}.chat-order .form-control:focus{border-color:#b66b8b;box-shadow:0 0 0 3px rgba(182,107,139,.1)}#chat-order-total{display:grid;grid-template-columns:1fr auto;gap:5px 8px;background:linear-gradient(120deg,#793450,#a14e71);color:#fff;border:1px solid #8f4262;padding:13px 12px;box-shadow:0 4px 12px rgba(116,44,76,.12)}#chat-order-total>span{font-size:11px;align-self:center;color:#ffe6ef}#chat-order-total>strong{font-size:17px;text-align:right;white-space:nowrap}#chat-order-total>small{grid-column:1/-1;font-size:10px;color:#f8d6e5}.chat-order #chat-order-submit{background:linear-gradient(115deg,#833451,#ad4c75);border:0;box-shadow:0 4px 12px rgba(121,49,80,.2);color:#fff}.chat-order #chat-order-submit:hover{background:linear-gradient(115deg,#722b45,#983e65)}.chat-order #chat-order-submit:disabled{opacity:.55}.chat-order .select2-selection--single{background:#fff;border-color:#ead9e1}.chat-order .select2-selection--single .select2-selection__placeholder{color:#997789}.chat-order .select2-selection--single .select2-selection__rendered{color:#5c394a}.chat-order .select2-container--disabled .select2-selection--single{background:#f6eef2}.chat-order #chat-order-result{color:#93415f;font-size:12px;line-height:1.6}

.chat-order__quantity{grid-template-columns:30px minmax(0,1fr) 30px;gap:0;border:1px solid #e7d3dd;border-radius:7px;overflow:hidden;background:#fff;height:32px}.chat-order__quantity button{width:30px;height:30px;border:0;border-radius:0;background:#fcf5f8}.chat-order__quantity .form-control{border:0;border-radius:0;height:30px;min-height:30px;box-shadow:none;padding:2px 0;background:#fff}.chat-order__quantity .chat-order__minus{border-right:1px solid #efe1e8}.chat-order__quantity .chat-order__plus{border-left:1px solid #efe1e8}

.chat-order .form-control.select2-hidden-accessible{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;min-width:0!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;border:0!important}#chat-order-current[hidden]{display:none!important}

.chat-order__location-field{position:relative}.chat-order__location-field>.select2-container--open{z-index:6}.chat-order__location-field .select2-dropdown{min-width:100%;max-width:100%}.chat-order__location-field .select2-search__field{width:100%!important;box-sizing:border-box}

.chat-order__suggestions .chat-order__suggestion{cursor:pointer;border-radius:8px;padding-left:5px;padding-right:5px}.chat-order__suggestions .chat-order__suggestion:hover,.chat-order__suggestions .chat-order__suggestion:focus{background:var(--cw-soft,#fff3f7);outline:1px solid var(--cw-border,#eedce4)}

.chat-order__shipping{display:grid;grid-template-columns:22px 1fr;gap:6px;background:var(--cw-soft,#fff4f8);border:1px solid var(--cw-border,#eed9e2);border-radius:8px;padding:10px 12px;font-size:11px;line-height:1.6;color:var(--cw-accent,#833451)}.chat-order__shipping>i{font-size:18px;align-self:center}.chat-order__shipping-track{grid-column:1/-1;height:4px;background:rgba(0,0,0,.07);border-radius:4px;overflow:hidden}.chat-order__shipping-track>span{display:block;height:100%;background:var(--cw-accent,#833451);border-radius:4px;transition:width .2s}.chat-order__shipping--free{background:#eff9f1;border-color:#cce6d1;color:#287243}.chat-order__shipping--free .chat-order__shipping-track>span{background:#38945c}

.chat-order .select2-search__field{height:34px;min-height:34px;padding:6px 8px!important;border:1px solid var(--cw-border,#e5d6de)!important;border-radius:6px;outline:none!important;background:#fff;color:var(--cw-text,#49303d);box-shadow:none;font-family:inherit;font-size:12px}.chat-order .select2-search__field:focus{outline:none!important;border-color:var(--cw-accent,#833451)!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--cw-accent,#833451) 10%,transparent)}.chat-order .select2-search__field::placeholder{color:var(--cw-muted,#886376)}.chat-order .select2-dropdown{border-color:var(--cw-border,#e5d6de)}

@media(max-width:600px){
 #chat-widget,#chat-widget:has(#chat-order:not([hidden])){top:var(--cw-viewport-top,0px)!important;bottom:auto!important;height:var(--cw-visual-height,100dvh)!important;max-height:var(--cw-visual-height,100dvh)!important}
 .chat-order{padding:12px;padding-bottom:calc(16px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch}
 .chat-order__heading{top:-12px;margin-left:-12px;margin-right:-12px;padding:12px;padding-top:max(12px,env(safe-area-inset-top))}
 .chat-order__heading .btn{min-height:40px;min-width:68px;display:flex;align-items:center;justify-content:center;font-size:14px}
 .chat-order__grid{gap:8px}.chat-order__card{padding:7px}.chat-order__card>strong{min-height:40px;font-size:12px;line-height:1.5}.chat-order__media{height:105px}
 .chat-order__quantity{grid-template-columns:44px minmax(24px,1fr) 44px;height:44px}.chat-order__quantity button{width:44px;height:42px;font-size:21px}.chat-order__quantity .form-control{height:42px;min-height:42px;font-size:16px}
 .chat-order__media>.chat-order__remove{width:36px;height:36px;top:2px;right:2px;font-size:23px}.chat-order__media>.chat-order__remove::after{content:"";position:absolute;inset:-4px;border-radius:50%}
 .chat-order .form-control,.chat-order .select2-search__field{font-size:16px}.chat-order .form-control{min-height:44px}.chat-order .select2-search__field{height:42px;min-height:42px}
 .chat-order .select2-selection--single{height:44px}.chat-order .select2-selection--single .select2-selection__rendered{line-height:42px;font-size:14px}.chat-order .select2-selection--single .select2-selection__arrow{height:42px}
 .chat-order .select2-results__option{min-height:40px;padding:10px;font-size:14px}.chat-order__location{gap:8px}.chat-order__suggestion>.btn{min-width:44px;min-height:44px}.chat-order__suggestion-info .form-control{font-size:16px}.chat-order__suggestion{min-height:64px}
 .chat-order #chat-order-submit{min-height:48px;font-size:16px}.chat-order__shipping{font-size:12px}.chat-order__quantity .form-control{min-height:42px}#chat-order-total>strong{font-size:17px}
}

/* Gợi ý đặt hàng khi khách thể hiện ý định mua trong hội thoại. */
#chat-widget .chat-order__open--intent {
    color: #fff !important;
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    animation: chat-order-intent-pulse 1.2s ease-in-out infinite, chat-order-intent-shake 2.4s ease-in-out infinite;
}
@keyframes chat-order-intent-pulse {
    0%, 100% { background-color: #dc2626; box-shadow: 0 0 0 0 rgba(220,38,38,.25); }
    50% { background-color: #ef4444; box-shadow: 0 0 0 5px rgba(220,38,38,.12); }
}
@keyframes chat-order-intent-shake {
    0%, 65%, 100% { transform: translateX(0); }
    70%, 80%, 90% { transform: translateX(-3px); }
    75%, 85%, 95% { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
    #chat-widget .chat-order__open--intent { animation: none; }
}

/* Chip nhỏ thêm vào giỏ dưới tin Bot AI (chat-product-actions.js) — gọn cho ô chat điện thoại */
.chat-product-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.chat-product-actions__add { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-height: 24px; padding: 2px 8px; border: 1px solid var(--cw-accent, #6b3154); border-radius: 999px; background: #fff; color: var(--cw-accent, #6b3154); font-size: 11px; font-weight: 600; line-height: 1.2; cursor: pointer; }
.chat-product-actions__add span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.chat-product-actions__add .fa { flex-shrink: 0; font-size: 11px; }
.chat-product-actions__add:hover:not(:disabled), .chat-product-actions__add:focus-visible { background: var(--cw-accent, #6b3154); color: var(--cw-on-accent, #fff); outline: none; }
.chat-product-actions__add--busy { opacity: .7; cursor: progress; }
.chat-product-actions__add--done { border-color: #16a34a; background: #16a34a; color: #fff; }
.chat-product-actions__add--error { border-color: #dc2626; color: #dc2626; }

/* Màn cảm ơn sau khi tạo đơn trong chat */
.chat-order__done { text-align: center; padding: 18px 4px 8px; }
.chat-order__done[hidden] { display: none; }
.chat-order__done-icon { width: 52px; height: 52px; margin: 0 auto 10px; border-radius: 50%; background: #16a34a; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 24px; }
.chat-order__done h5 { margin: 0 0 4px; font-size: 17px; font-weight: 700; color: #55253d; }
.chat-order__done-code { margin: 0 0 12px; font-size: 13px; color: #86445f; }
.chat-order__done-summary { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; margin: 0 0 12px; padding: 10px 12px; text-align: left; background: #fff; border: 1px solid #eedce4; border-radius: 8px; font-size: 12px; }
.chat-order__done-summary dt { font-weight: 400; color: #6d6470; }
.chat-order__done-summary dd { margin: 0; text-align: right; font-weight: 600; }
.chat-order__done-summary .chat-order__grand { color: #a93661; font-size: 14px; }
.chat-order__done-note { font-size: 12px; line-height: 1.6; color: #6d6470; margin: 0 0 14px; }
.chat-order__done-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.chat-order__done-actions .btn { border-radius: 8px; font-size: 13px; padding: 9px 6px; }
.chat-order__done-actions .btn-primary { background: #6b3154; border-color: #6b3154; }
.chat-order__terms { font-size: 11px; color: #86556b; }

/* Không hiển thị tạm tính và phí ship khi giỏ trống, kể cả CSS theme đặt display:grid/flex. */
#chat-order-total[hidden], #chat-order-shipping[hidden] { display: none !important; }
