/* Fixed Contact Buttons Pro Styles */
.fcb-container {
    position: fixed;
    bottom: 100px; /* Căn giữa theo chiều dọc */
    transform: translateY(-50%);
    z-index: 9999;
    padding: 15px 8px; /* Padding cho thanh dọc */
    border-radius: 10px 0 0 10px; /* Bo góc bên trái */
    box-shadow: -2px 2px 10px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.fcb-container.fcb-right {
    right: 0; /* Hoặc right: 10px; nếu muốn có khoảng cách nhỏ */
}
.fcb-container.fcb-left {
    left: 0;
    border-radius: 0 10px 10px 0; /* Bo góc bên phải nếu ở bên trái */
}
.fcb-container.fcb-left .fcb-list { /* Điều chỉnh vị trí pop-out cho thanh bên trái */
    left: 100%;
    right: auto;
    margin-left: 12px; /* Thêm khoảng cách */
    margin-right: 0;
}
.fcb-container.fcb-left .fcb-list::after { /* Mũi tên cho thanh bên trái */
    left: -14px; /* Dịch mũi tên sang trái */
    right: auto;
    border-color: transparent #D32F2F transparent transparent; /* Đổi hướng mũi tên */
}
.fcb-container.fcb-left .fcb-list::before { /* Mũi tên cho thanh bên trái - fill */
    left: -12px;
    right: auto;
    border-color: transparent white transparent transparent;
}


.fcb-button-wrapper {
    position: relative; /* Quan trọng cho việc định vị pop-out */
    margin-bottom: 20px;
    text-align: center;
}
.fcb-button-wrapper:last-child {
    margin-bottom: 0;
}

.fcb-item-link { /* Bọc icon và label */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: white; /* Màu chữ cho label */
}

.fcb-icon-display {
    width: 40px; /* Kích thước khung chứa icon */
    height: 40px;
    border: 1px solid rgba(255,255,255,0.7); /* Viền mờ cho icon */
    border-radius: 8px; /* Bo góc khung icon */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px; /* Khoảng cách giữa icon và label */
    transition: background-color 0.3s ease;
}
.fcb-item-link:hover .fcb-icon-display {
    background-color: rgba(255,255,255,0.2);
}

.fcb-icon-svg {
    width: 22px; /* Kích thước SVG icon bên trong */
    height: 22px;
    fill: white; /* Màu của SVG */
}

.fcb-label {
    font-size: 11px;
    color: white;
    font-weight: 500;
}

/* Contact List (Pop-out / Tooltip) */
.fcb-list {
    position: absolute;
    right: calc(100% + 12px); /* Vị trí bên trái của item, cách 12px */
    top: 50%;
    transform: translateY(-50%);
    background-color: white;
    border: 2px solid #D32F2F; /* Viền đỏ như trong ảnh (màu đỏ sẫm hơn) */
    border-radius: 8px;
    padding: 10px 15px;
    min-width: 180px; /* Độ rộng tối thiểu cho pop-out */
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 10000; /* Đảm bảo pop-out ở trên */
    white-space: nowrap; /* Ngăn text xuống dòng nếu không cần thiết */
}

/* Mũi tên cho pop-out (trỏ sang phải, gắn vào item) */
.fcb-list::after { /* Viền mũi tên */
    content: "";
    position: absolute;
    top: 50%;
    left: 100%; /* Gắn vào cạnh phải của pop-out */
    margin-top: -8px; /* Căn giữa mũi tên (1/2 chiều cao mũi tên) */
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent transparent #D32F2F; /* Mũi tên trỏ sang phải, màu viền */
}
.fcb-list::before { /* Phần fill trắng của mũi tên */
    content: "";
    position: absolute;
    top: 50%;
    left: calc(100% - 2px); /* Dịch vào trong 2px để che viền của pop-out */
    margin-top: -6px; /* Căn giữa, nhỏ hơn viền 1px mỗi bên */
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent transparent white; /* Mũi tên trỏ sang phải, màu nền */
}


.fcb-button-wrapper:hover .fcb-list {
    visibility: visible;
    opacity: 1;
}

.fcb-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fcb-list ul li a,
.fcb-collab-list a { /* Style chung cho link trong pop-out */
    display: block;
    padding: 8px 0; /* Chỉ padding top/bottom nếu muốn sát lề pop-out */
    color: #333;
    text-decoration: none;
    font-size: 15px;
    font-weight: bold;
    text-align: center; /* Căn giữa text trong pop-out */
}
.fcb-list ul li:not(:last-child) a {
    border-bottom: 1px solid #eee; /* Đường kẻ giữa các SĐT/Zalo */
}

.fcb-list ul li a:hover,
.fcb-collab-list a:hover {
    color: #D32F2F; /* Màu đỏ khi hover */
}

/* Nếu chỉ có 1 SĐT/Zalo, có thể muốn nó hiển thị như "Hợp tác" */
.fcb-phone-list ul li:only-child a,
.fcb-zalo-list ul li:only-child a {
    /* Không cần style đặc biệt nếu vẫn muốn giữ padding */
}

/* Responsive: Ẩn trên màn hình nhỏ nếu cần */
@media (max-width: 768px) {
     .fcb-container { display: none; } 
}