/* =====================================================================
   Nút "Liên hệ" nổi (v6.8.0) — views/client/widget-contact.php
   Mọi selector đều có tiền tố .cw: dark.css ép màu cho span/label/a với độ ưu tiên (0,1,2),
   selector một lớp sẽ thua. Điện thoại (≤991px) có thanh menu cố định ở đáy ⇒ nâng nút lên.
   ===================================================================== */
.cw { position: fixed; right: 20px; bottom: 20px; z-index: 1040; display: flex; flex-direction: column; align-items: flex-end; }
@media (max-width: 991px) {
    .cw { bottom: 58px; } /* thanh .mobile-menu cao 48px */
}

/* Góc phải dưới vốn có nút Lên đầu trang (.backtop, 48px) và nút Bảng xếp hạng (.leaderboard-btn) ở
   cùng cột. Script của widget gắn .has-cw lên <body> ⇒ đẩy hai nút đó lên trên nút Liên hệ. */
.has-cw .backtop { bottom: 88px; }
.has-cw .leaderboard-btn { bottom: 148px; }
@media (max-width: 991px) {
    .has-cw .backtop { bottom: 124px; }
    .has-cw .leaderboard-btn { bottom: 182px; }
}

.cw .cw-fab {
    width: 56px; height: 56px; border: 0; border-radius: 50%; padding: 0; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: var(--primary, #1d4ed8); color: #ffffff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
    transition: transform .15s ease;
}
.cw .cw-fab:hover { transform: scale(1.05); }
.cw .cw-fab:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }
.cw .cw-fab svg { width: 26px; height: 26px; }
.cw .cw-fab-open, .cw .cw-fab-close { display: flex; color: #ffffff; }
.cw .cw-fab-close { display: none; }
.cw.cw-open .cw-fab-open { display: none; }
.cw.cw-open .cw-fab-close { display: flex; }

.cw .cw-panel {
    position: absolute; right: 0; bottom: 68px; width: 292px; max-width: calc(100vw - 28px);
    background: #ffffff; color: #1f2329; border-radius: 14px; overflow: hidden;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .2);
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.cw.cw-open .cw-panel { opacity: 1; visibility: visible; transform: none; }
.cw .cw-head { padding: 13px 16px; font-size: 15px; font-weight: 700; color: #1f2329; border-bottom: 1px solid #edf0f4; }
.cw .cw-list { list-style: none; margin: 0; padding: 6px; }
.cw .cw-list li { margin: 0; }
.cw .cw-item {
    display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 10px;
    border-radius: 10px; text-decoration: none; color: #1f2329;
}
.cw .cw-item:hover, .cw .cw-item:focus-visible { background: #f2f4f7; color: #1f2329; text-decoration: none; }
.cw .cw-ic { width: 38px; height: 38px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #ffffff; margin: 0; }
.cw .cw-ic svg { width: 21px; height: 21px; }
.cw .cw-tg_support .cw-ic, .cw .cw-tg_channel .cw-ic, .cw .cw-tg_bot .cw-ic { background: #229ed9; }
.cw .cw-zalo .cw-ic { background: #0068ff; }
.cw .cw-phone .cw-ic { background: #15803d; }
.cw .cw-facebook .cw-ic { background: #1877f2; }
.cw .cw-txt { display: flex; flex-direction: column; min-width: 0; margin: 0; color: inherit; }
.cw .cw-txt b { font-size: 14px; font-weight: 600; line-height: 1.3; color: inherit; }
.cw .cw-txt small { font-size: 12px; line-height: 1.4; color: #5b6472; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Bong bóng gợi ý tự hiện (v6.9.0): 1 câu chào + 2 nút nhanh, đuôi chỉ xuống nút tròn ---- */
.cw .cw-teaser {
    position: absolute; right: 0; bottom: 70px; width: 268px; max-width: calc(100vw - 28px);
    background: #ffffff; color: #1f2329; border-radius: 14px; padding: 14px 14px 12px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .2);
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.cw .cw-teaser::after {
    content: ""; position: absolute; right: 22px; bottom: -7px; width: 14px; height: 14px;
    background: inherit; transform: rotate(45deg); box-shadow: 3px 3px 6px rgba(0, 0, 0, .06);
}
.cw.cw-teasing .cw-teaser { opacity: 1; visibility: visible; transform: none; }
.cw.cw-open .cw-teaser { display: none; }
.cw .cw-teaser-text { font-size: 15px; font-weight: 700; margin: 0 26px 10px 0; color: #1f2329; }
.cw .cw-teaser-close {
    position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border: 0; border-radius: 50%;
    background: transparent; color: #6b7480; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.cw .cw-teaser-close:hover { background: #f2f4f7; color: #1f2329; }
.cw .cw-teaser-close svg { width: 16px; height: 16px; }
.cw .cw-teaser-actions { display: flex; flex-direction: column; gap: 8px; }
.cw .cw-tbtn {
    display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 12px 6px 6px;
    border: 1px solid #e3e7ee; border-radius: 22px; font-size: 14px; font-weight: 600;
    color: #1f2329; text-decoration: none; background: #ffffff;
}
.cw .cw-tbtn:hover, .cw .cw-tbtn:focus-visible { background: #f2f4f7; color: #1f2329; text-decoration: none; }
.cw .cw-tbtn .cw-ic { width: 32px; height: 32px; }
.cw .cw-tbtn .cw-ic svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) {
    .cw .cw-teaser, .cw .cw-panel { transition: none; }
}

/* ---- Giao diện tối ---- */
html[data-theme="dark"] .cw .cw-teaser { background: #1b2130; color: #e2e8f0; box-shadow: 0 10px 28px rgba(0, 0, 0, .55); }
html[data-theme="dark"] .cw .cw-teaser-text { color: #f3f5f8; }
html[data-theme="dark"] .cw .cw-teaser-close { color: #aeb4bf; }
html[data-theme="dark"] .cw .cw-teaser-close:hover { background: #252b38; color: #f3f5f8; }
html[data-theme="dark"] .cw .cw-tbtn,
html[data-theme="dark"] .cw .cw-tbtn:hover,
html[data-theme="dark"] .cw .cw-tbtn:focus-visible { color: #e2e8f0; border-color: #2f3644; background: #1b2130; }
html[data-theme="dark"] .cw .cw-tbtn:hover,
html[data-theme="dark"] .cw .cw-tbtn:focus-visible { background: #252b38; }
html[data-theme="dark"] .cw .cw-panel { background: #1b2130; color: #e2e8f0; box-shadow: 0 12px 32px rgba(0, 0, 0, .55); }
html[data-theme="dark"] .cw .cw-head { color: #f3f5f8; border-bottom-color: #2a2f39; }
html[data-theme="dark"] .cw .cw-item,
html[data-theme="dark"] .cw .cw-item:hover,
html[data-theme="dark"] .cw .cw-item:focus-visible { color: #e2e8f0; }
html[data-theme="dark"] .cw .cw-item:hover,
html[data-theme="dark"] .cw .cw-item:focus-visible { background: #252b38; }
html[data-theme="dark"] .cw .cw-ic { color: #ffffff; }
html[data-theme="dark"] .cw .cw-txt { color: #e2e8f0; }
html[data-theme="dark"] .cw .cw-txt small { color: #aeb4bf; }

/* ---- Xem trước trong admin: đứng yên, mở sẵn ---- */
.cw.cw-preview { position: static; display: inline-flex; }
.cw.cw-preview .cw-panel { position: static; margin-bottom: 12px; opacity: 1; visibility: visible; transform: none; }
.cw.cw-preview .cw-teaser { position: relative; right: auto; bottom: auto; margin-bottom: 14px; width: 100%; opacity: 1; visibility: visible; transform: none; }
.cw.cw-preview .cw-teaser-close { cursor: default; }
.cw.cw-preview.cw-teasing .cw-panel { display: none; }
.cw.cw-preview .cw-fab { cursor: default; }
.cw.cw-preview .cw-fab:hover { transform: none; }
.cw-empty { padding: 12px 14px; border: 1px dashed #cfd4dc; border-radius: 8px; color: #6b7480; font-size: 13px; }
.cw.cw-preview { width: 100%; max-width: 320px; }
.cw.cw-preview .cw-panel { width: 100%; }