/**
 * Nút nổi — giao diện ngoài website.
 * Mọi kích thước, màu sắc đều đọc từ biến CSS do PHP ghi ra, nên đổi trong trang quản trị
 * là thấy ngay, không cần sửa file.
 */
.vtrfb {
    position: fixed;
    bottom: var(--fb-y, 18px);
    z-index: 9990;
    display: flex; flex-direction: column; align-items: flex-end; gap: var(--fb-gap, 10px);
    font-family: inherit;
}
.vtrfb--right { right: var(--fb-x, 18px); }
.vtrfb--left  { left: var(--fb-x, 18px); align-items: flex-start; }

.vtrfb__list { display: flex; flex-direction: column; gap: var(--fb-gap, 10px); align-items: inherit; }
/* PHẢI có dòng này: khai báo display ở trên đè mất quy tắc mặc định [hidden]{display:none}
   của trình duyệt. Thiếu nó, cụm nút lúc thu gọn vẫn chiếm một dải dọc 60×460px ở mép phải
   — mắt không thấy (độ mờ 0) nhưng ngón tay chạm vào là trúng nút gọi, khách bấm ảnh lại ra
   bảng "Gọi số…". */
.vtrfb__list[hidden] { display: none; }
/* Trong lúc đang thu lại (0,2 giây) nút vẫn còn đó nhưng đã mờ — chặn luôn cho chắc */
.vtrfb--collapse:not(.is-open) .vtrfb__list,
.vtrfb--collapse:not(.is-open) .vtrfb__list > * { pointer-events: none; }
.vtrfb--left .vtrfb__list { align-items: flex-start; }

.vtrfb__btn,
.vtrfb__fab {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--fb-size, 52px); height: var(--fb-size, 52px);
    padding: 0; border: 0;
    border-radius: var(--fb-radius, 50%);
    background: var(--b-bg, #fff);
    color: var(--b-fg, #2E3B26);
    box-shadow: 0 6px 20px rgba(20, 28, 18, .28), 0 1px 3px rgba(20, 28, 18, .2);
    cursor: pointer;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
    -webkit-tap-highlight-color: transparent;
}
.vtrfb__fab { background: var(--fb-fab-bg, #B8942A); color: var(--fb-fab-fg, #1E2718); }
.vtrfb__btn:hover, .vtrfb__fab:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(20, 28, 18, .34); }
.vtrfb__btn:focus-visible, .vtrfb__fab:focus-visible { outline: 3px solid #B8942A; outline-offset: 3px; }

.vtrfb__ico { display: flex; width: 54%; height: 54%; }
.vtrfb__ico svg { width: 100%; height: 100%; display: block; }
.vtrfb__ico img { width: 100%; height: 100%; object-fit: contain; background: transparent; display: block; }

/* Nhãn chữ: nằm ngoài nút, phía mép trong của màn hình */
.vtrfb__label {
    position: absolute; top: 50%; transform: translateY(-50%);
    white-space: nowrap;
    padding: 7px 12px;
    font-size: 13px; font-weight: 700; line-height: 1;
    color: #fff; background: rgba(24, 32, 20, .92);
    border-radius: 4px;
    pointer-events: none;
    opacity: 0; transition: opacity .2s ease, transform .2s ease;
}
.vtrfb--right .vtrfb__label { right: calc(100% + 10px); }
.vtrfb--left  .vtrfb__label { left: calc(100% + 10px); }
.vtrfb--labels-always .vtrfb__label { opacity: 1; }
.vtrfb--labels-hover .vtrfb__btn:hover .vtrfb__label,
.vtrfb--labels-hover .vtrfb__btn:focus-visible .vtrfb__label,
.vtrfb--labels-hover .vtrfb__fab:hover .vtrfb__label { opacity: 1; }
.vtrfb--labels-none .vtrfb__label { display: none; }

/* Xoè ra / thu lại */
.vtrfb__ico--close { display: none; }
.vtrfb.is-open .vtrfb__ico--open  { display: none; }
.vtrfb.is-open .vtrfb__ico--close { display: flex; }
.vtrfb.is-open .vtrfb__fab .vtrfb__label { display: none; }
.vtrfb--collapse .vtrfb__list > * {
    opacity: 0; transform: translateY(8px) scale(.9);
    transition: opacity .22s ease, transform .22s ease;
}
.vtrfb--collapse.is-open .vtrfb__list > * { opacity: 1; transform: none; }
/* Nút dưới cùng bung ra trước, tạo cảm giác cả cụm nở lên từ nút chính */
.vtrfb--collapse.is-open .vtrfb__list > *:nth-last-child(1) { transition-delay: .02s; }
.vtrfb--collapse.is-open .vtrfb__list > *:nth-last-child(2) { transition-delay: .06s; }
.vtrfb--collapse.is-open .vtrfb__list > *:nth-last-child(3) { transition-delay: .10s; }
.vtrfb--collapse.is-open .vtrfb__list > *:nth-last-child(4) { transition-delay: .14s; }
.vtrfb--collapse.is-open .vtrfb__list > *:nth-last-child(5) { transition-delay: .18s; }

/* Ẩn hiện theo thiết bị — cùng ngưỡng với phần còn lại của theme */
@media (min-width: 1025px) { .vtrfb--hide-desktop { display: none !important; } }
@media (min-width: 769px) and (max-width: 1024px) { .vtrfb--hide-tablet { display: none !important; } }
@media (max-width: 768px) { .vtrfb--hide-mobile { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
    .vtrfb__btn, .vtrfb__fab, .vtrfb--collapse .vtrfb__list > * { transition: none; }
}

/* ─── Hiệu ứng thu hút của nút chính ───
   Chuyển động đặt trên lớp biểu tượng bên trong, KHÔNG đặt trên chính nút: nút còn phải
   nhận transform khi rê chuột, hai transform đè nhau thì một trong hai chết.
   Vòng sóng vẽ bằng ::before/::after nên không thêm thẻ nào vào HTML. */
.vtrfb--anim-ring .vtrfb__fab::before,
.vtrfb--anim-ring .vtrfb__fab::after,
.vtrfb--anim-ring-wiggle .vtrfb__fab::before,
.vtrfb--anim-ring-wiggle .vtrfb__fab::after {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    border: 2.5px solid var(--fb-fab-bg, #B8942A);
    pointer-events: none;
    opacity: 0;
    animation: vtrfbRing var(--fb-beat, 3.2s) cubic-bezier(.22, .61, .36, 1) infinite;
}
/* Vòng thứ hai chạy trễ một phần ba nhịp → thành hai lớp sóng nối nhau */
.vtrfb--anim-ring .vtrfb__fab::after,
.vtrfb--anim-ring-wiggle .vtrfb__fab::after { animation-delay: calc(var(--fb-beat, 3.2s) * .34); }

@keyframes vtrfbRing {
    0%   { transform: scale(.92); opacity: .8; }
    45%  { opacity: .42; }
    75%  { opacity: 0; }
    100% { transform: scale(1.9); opacity: 0; }
}

/* Lắc: đứng yên gần hết nhịp rồi giật mấy cái ở cuối — mắt bắt được mà không rối */
.vtrfb--anim-wiggle .vtrfb__fab .vtrfb__ico--open,
.vtrfb--anim-ring-wiggle .vtrfb__fab .vtrfb__ico--open {
    animation: vtrfbWiggle var(--fb-beat, 3.2s) ease-in-out infinite;
    transform-origin: 50% 60%;
}
@keyframes vtrfbWiggle {
    0%, 70%, 100% { transform: rotate(0) scale(1); }
    74% { transform: rotate(-12deg) scale(1.08); }
    78% { transform: rotate(10deg) scale(1.08); }
    82% { transform: rotate(-8deg) scale(1.05); }
    86% { transform: rotate(6deg) scale(1.03); }
    90% { transform: rotate(-3deg) scale(1.01); }
}

/* Phình nhẹ: dịu nhất, hợp với trang nhiều chữ */
.vtrfb--anim-pulse .vtrfb__fab .vtrfb__ico--open {
    animation: vtrfbPulse var(--fb-beat, 3.2s) ease-in-out infinite;
}
@keyframes vtrfbPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.14); }
}

/* Dừng khi: menu đang mở · khách rê chuột vào · khách đã bấm một lần (tuỳ chọn) */
.vtrfb.is-open .vtrfb__fab::before,
.vtrfb.is-open .vtrfb__fab::after,
.vtrfb.is-used .vtrfb__fab::before,
.vtrfb.is-used .vtrfb__fab::after,
.vtrfb .vtrfb__fab:hover::before,
.vtrfb .vtrfb__fab:hover::after { animation: none; opacity: 0; }
.vtrfb.is-open .vtrfb__fab .vtrfb__ico--open,
.vtrfb.is-used .vtrfb__fab .vtrfb__ico--open,
.vtrfb .vtrfb__fab:hover .vtrfb__ico--open { animation: none; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .vtrfb__fab::before, .vtrfb__fab::after,
    .vtrfb__fab .vtrfb__ico--open { animation: none !important; opacity: 0; }
    .vtrfb__fab .vtrfb__ico--open { opacity: 1; }
}

/* ─── Popup danh mục tin tức ─── */
.vtrfb-pop { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; }
.vtrfb-pop[hidden] { display: none; }
.vtrfb-pop__mask { position: absolute; inset: 0; background: rgba(18, 26, 16, .62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: vtrfbFade .25s ease; }
.vtrfb-pop__box {
    position: relative;
    width: 100%; max-width: 460px;
    max-height: 82vh; overflow: auto;
    padding: 30px 26px 24px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 30px 80px rgba(18, 26, 16, .45);
    animation: vtrfbUp .28s cubic-bezier(.22, .61, .36, 1);
}
@keyframes vtrfbFade { from { opacity: 0; } }
@keyframes vtrfbUp { from { opacity: 0; transform: translateY(16px); } }
.vtrfb-pop__x {
    position: absolute; top: 12px; right: 12px;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%;
    background: rgba(46, 59, 38, .08); color: #2E3B26;
    cursor: pointer;
}
.vtrfb-pop__x:hover { background: rgba(46, 59, 38, .16); }
.vtrfb-pop__title { margin: 0 34px 6px 0; font-size: 1.32rem; line-height: 1.3; color: #2E3B26; }
.vtrfb-pop__desc { margin: 0 0 16px; font-size: .94rem; color: #6A705F; }
.vtrfb-pop__list { list-style: none; margin: 0; padding: 0; }
.vtrfb-pop__list li + li { margin-top: 2px; }
.vtrfb-pop__list a {
    display: flex; align-items: center; gap: 10px;
    padding: 13px 14px;
    text-decoration: none;
    color: #2E3B26;
    border-left: 2px solid rgba(184, 148, 42, .35);
    background: linear-gradient(90deg, rgba(245, 241, 232, .8) 0%, rgba(245, 241, 232, 0) 80%);
    transition: background .2s, border-color .2s, transform .2s;
}
.vtrfb-pop__list a:hover { background: rgba(245, 241, 232, 1); border-left-color: #B8942A; transform: translateX(3px); }
.vtrfb-pop__name { flex: 1; font-weight: 700; }
.vtrfb-pop__num { font-size: .84rem; color: #6A705F; }
.vtrfb-pop__arrow { flex-shrink: 0; color: #B8942A; }
body.vtrfb-lock { overflow: hidden; }

@media (max-width: 768px) {
    .vtrfb-pop__box { padding: 26px 18px 18px; max-height: 86vh; }
    .vtrfb-pop__title { font-size: 1.18rem; }
}