.kcs-chatbot { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 100; font-family: inherit; color: #163c2b; }
.kcs-chatbot button, .kcs-chatbot textarea { font: inherit; }
.kcs-chatbot button { cursor: pointer; }
.kcs-chatbot [hidden] { display: none !important; }
.kcs-chatbot-launcher { display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 11px 16px 11px 12px; border: 1px solid #9ce4b16b; border-radius: 18px; background: linear-gradient(125deg, #0c533a, #073c2d); color: #fff; box-shadow: 0 8px 35px #073b2630, 0 2px 8px #073b2620; transition: transform .18s, box-shadow .18s; }
.kcs-chatbot-launcher:hover { transform: translateY(-2px); box-shadow: 0 11px 36px #073b2640; }
.kcs-chatbot-launcher > span:nth-child(2) { display: grid; gap: 4px; text-align: left; }
.kcs-chatbot-launcher strong { font-size: .82rem; }
.kcs-chatbot-launcher small { color: #c0e6cf; font-size: .68rem; }
.kcs-chatbot-launcher-icon { display: grid; place-items: center; width: 39px; height: 39px; border: 1px solid #a5edbe4a; border-radius: 12px; background: #ffffff0a; color: #a9edbd; }
.kcs-chatbot-launcher-arrow { margin-left: 4px; color: #a9edbd; font-size: 1.3rem; }
.kcs-chatbot-panel { position: absolute; right: 0; bottom: 77px; display: flex; flex-direction: column; width: 390px; height: min(590px, calc(100dvh - 118px)); max-height: calc(100dvh - 118px); overflow: hidden; border: 1px solid #c1d9ca; border-radius: 20px; background: #fff; box-shadow: 0 18px 65px #073b2633, 0 3px 15px #073b261a; }
.kcs-chatbot-heading { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; min-height: 82px; padding: 17px; background: radial-gradient(ellipse at 90% 10%, #1a714f, transparent 65%), #073c2d; color: #fff; }
.kcs-chatbot-heading-icon { display: grid; flex: 0 0 42px; place-items: center; height: 42px; border: 1px solid #a9edbd45; border-radius: 13px; color: #a9edbd; background: #ffffff08; }
.kcs-chatbot-heading > div { display: grid; min-width: 0; gap: 5px; }
.kcs-chatbot-heading strong { font-size: .91rem; }
.kcs-chatbot-heading > div > span { color: #bcdfca; font-size: .68rem; line-height: 1.5; }
.kcs-chatbot-close { display: grid; flex: 0 0 32px; place-items: center; height: 32px; margin-left: auto; padding: 0; border: 1px solid #b1e7c43d; border-radius: 10px; background: #ffffff0a; color: #d7eee1; font-size: 1.35rem !important; }
.kcs-chatbot-messages { flex: 1 1 auto; min-height: 70px; overflow: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 13px; padding: 18px 16px; scroll-behavior: smooth; overscroll-behavior: contain; background: linear-gradient(160deg, #f5faf7, #fff); }
.kcs-chatbot-message { max-width: 94%; padding: 12px 14px; border: 1px solid #d8e8df; border-radius: 13px 13px 13px 3px; background: #fff; color: #315841; font-size: .8rem; line-height: 1.75; overflow-wrap: anywhere; }
.kcs-chatbot-message p { margin: 0 0 8px; }
.kcs-chatbot-message p:last-child { margin-bottom: 0; }
.kcs-chatbot-message :is(ul, ol) { margin: 8px 0; padding-left: 20px; }
.kcs-chatbot-message a { color: #1c7450; text-underline-offset: 3px; }
.kcs-chatbot-message h2, .kcs-chatbot-message h3, .kcs-chatbot-message h4 { font-size: .9rem; margin: 8px 0; line-height: 1.5; }
.kcs-chatbot-message table { font-size: .74rem; }
.kcs-chatbot-message.is-user { align-self: flex-end; border-color: #c2dfce; border-radius: 13px 13px 3px 13px; background: #e8f5ed; color: #164b32; white-space: pre-wrap; }
.kcs-chatbot-message.is-typing { padding-block: 10px; color: #739780; font-size: .73rem; }
.kcs-chatbot-message.is-error { border-color: #e7d5c6; color: #805132; background: #fffaf5; }
.kcs-chatbot-prompts { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 6px; padding: 8px 16px 12px; }
.kcs-chatbot-prompts button { display: inline-flex; align-items: center; gap: 7px; min-height: 31px; padding: 6px 9px; border: 1px solid #cce1d3; border-radius: 7px; background: #f5faf7; color: #467459; font-size: .65rem; }
.kcs-chatbot-prompts button:hover { border-color: #82b395; background: #eaf6ee; }
.kcs-chatbot-form { display: flex; flex: 0 0 auto; align-items: flex-end; flex-wrap: wrap; gap: 8px; padding: 12px 13px; border-top: 1px solid #e0ebe4; }
.kcs-chatbot-form textarea { display: block; flex: 1; min-width: 0; max-height: 108px; padding: 11px 10px; border: 1px solid #c9ddd1; border-radius: 9px; outline: none; background: #fbfdfc; color: #244d34; resize: none; font-size: .8rem; line-height: 1.6; }
.kcs-chatbot-form textarea::placeholder { color: #839d8b; }
.kcs-chatbot-form > button { display: grid; place-items: center; flex: 0 0 42px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: #0b5138; color: #c2f3cf; }
.kcs-chatbot-form > button:hover { background: #073c2d; }
.kcs-chatbot button:disabled { cursor: wait; opacity: .58; }
.kcs-chatbot-status { flex: 0 0 100%; margin: 0; color: #8c5c37; font-size: .69rem; line-height: 1.5; }
.kcs-chatbot-status:empty { display: none; }
.kcs-chatbot-contact { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 5px 10px; padding: 10px 15px; border-top: 1px solid #e0ebe4; background: #f0f8f3; color: #3c7252; text-decoration: none; font-size: .66rem; line-height: 1.5; }
.kcs-chatbot-contact strong { color: #1c6740; font-size: .75rem; }
.kcs-chatbot-contact-links { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.kcs-chatbot-zalo { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-height: 40px; padding: 6px 9px; border: 1px solid #b8d6fa; border-radius: 8px; background: #fff; text-decoration: none; transition: background-color .18s, border-color .18s; }
.kcs-chatbot-zalo img { display: block; width: 49px; height: auto; }
.kcs-chatbot-zalo:hover { border-color: #0068ff; background: #edf5ff; }
.kcs-chatbot-contact-phone { display: inline-flex; align-items: center; min-height: 40px; color: #1c6740; text-decoration: none; white-space: nowrap; }
.kcs-chatbot-contact-phone:hover { color: var(--green-deep); }
.kcs-chatbot :is(button, a, textarea):focus-visible { outline: 3px solid #e7a84b; outline-offset: 3px; }
.kcs-chatbot-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
@media (max-width: 600px) {
    .kcs-chatbot { right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); }
    .kcs-chatbot-launcher { min-height: 53px; gap: 9px; padding: 8px 12px 8px 9px; border-radius: 15px; }
    .kcs-chatbot-launcher strong { font-size: .73rem; }
    .kcs-chatbot-launcher small { font-size: .6rem; }
    .kcs-chatbot-launcher-icon { width: 34px; height: 34px; }
    .kcs-chatbot-launcher-arrow { font-size: 1.1rem; }
    .kcs-chatbot-panel { bottom: 65px; width: min(390px, calc(100vw - 24px)); height: min(540px, calc(100dvh - 96px)); max-height: calc(100dvh - 96px); border-radius: 16px; }
    .kcs-chatbot-heading { min-height: 72px; padding: 13px; gap: 9px; }
    .kcs-chatbot-heading-icon { flex-basis: 36px; height: 36px; border-radius: 10px; }
    .kcs-chatbot-heading strong { font-size: .83rem; }
    .kcs-chatbot-heading > div > span { font-size: .62rem; }
    .kcs-chatbot-messages { padding: 14px 12px; gap: 11px; }
    .kcs-chatbot-message { padding: 10px 12px; font-size: .76rem; }
    .kcs-chatbot-prompts { padding-inline: 12px; }
    .kcs-chatbot-prompts button { font-size: .61rem; }
    .kcs-chatbot-form textarea { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .kcs-chatbot-launcher, .kcs-chatbot-zalo { transition: none; }
    .kcs-chatbot-messages { scroll-behavior: auto; }
}
@media (max-height: 480px) {
    .kcs-chatbot-panel { height: calc(100dvh - 118px); max-height: calc(100dvh - 118px); }
    .kcs-chatbot-heading { min-height: 56px; padding-block: 9px; }
    .kcs-chatbot-messages { min-height: 0; padding-block: 9px; }
    .kcs-chatbot-prompts { display: none; }
    .kcs-chatbot-contact { padding-block: 4px; }
    .kcs-chatbot-contact > span { display: none; }
    .kcs-chatbot-zalo, .kcs-chatbot-contact-phone { min-height: 32px; }
    .kcs-chatbot-form { padding-block: 8px; }
}
