/* =========================================================
   LIÊN HỆ CHO TRANG KHÁCH (login / register / quên mật khẩu)
   Các trang này không nạp home.css nên chép lại style
   icon mạng xã hội + nút Zalo/Phone nổi.
   ========================================================= */

/* ICON MẠNG XÃ HỘI */
.guest-social {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
}

.guest-social a {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    transition: transform 0.2s;
}

.guest-social a:hover {
    transform: translateY(-2px) scale(1.06);
    color: #fff;
}

.social-fb { background: #1877f2; }
.social-yt { background: #ff0000; }
.social-tt { background: #111; }
.social-zalo {
    background: #0068ff;
    overflow: hidden;
}

.social-zalo svg {
    width: 100%;
    height: 100%;
}

/* FLOATING ZALO + PHONE */
.floating-actions {
    position: fixed;
    right: 18px;
    bottom: 20px;
    display: grid;
    gap: 12px;
    z-index: 999;
    animation: float-slide-up 0.6s ease-out;
}

@keyframes float-slide-up {
    from { transform: translateY(100px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.float-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 800;
    font-size: 20px;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
    transition: transform 0.2s;
}

.float-btn:hover {
    transform: scale(1.1);
    color: #fff;
}

.zalo-btn {
    background: #1e88ff;
    animation: pulse-blue 2s infinite;
}

.phone-btn {
    background: #4caf50;
    animation: pulse-green 2s infinite;
}

.phone-btn i {
    animation: phone-shake 1.5s infinite;
}

@keyframes pulse-blue {
    0% { box-shadow: 0 0 0 0 rgba(30, 136, 255, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(30, 136, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(30, 136, 255, 0); }
}

@keyframes pulse-green {
    0% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(76, 175, 80, 0); }
    100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); }
}

@keyframes phone-shake {
    0% { transform: rotate(0); }
    10% { transform: rotate(-25deg); }
    20% { transform: rotate(25deg); }
    30% { transform: rotate(-25deg); }
    40% { transform: rotate(25deg); }
    50% { transform: rotate(0); }
    100% { transform: rotate(0); }
}

@media (max-width: 991.98px) {
    .float-btn {
        width: 44px;
        height: 44px;
    }
}

/* ── Bố cục desktop trang login / quên mật khẩu ───────────────
   - Cột trái: bớt khoảng trắng để bù hàng icon mạng xã hội, và ẩn
     thanh cuộn (màn hình quá thấp vẫn cuộn được bằng chuột).
   - Cột phải: chừa lề phải cho lưới thẻ để nút Zalo/Phone (rộng 50px,
     cách mép 18px) không đè lên thẻ. */
@media (min-width: 992px) {
    .left-inner {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .left-panel {
        scrollbar-width: none;
    }

    .left-panel::-webkit-scrollbar {
        display: none;
    }

    .feature-grid {
        margin-right: 50px;
    }
}