/* CSS cài đặt màu sắc và định dạng cơ bản */
:root {
    --primary-red: #c0392b;
    /* Tone màu đỏ của logo THOLAND */
    --dark-gray: #333333;
    --light-bg: #f5f6fa;
}

html {
    scroll-behavior: smooth;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

body {
    color: var(--dark-gray);
    line-height: 1.6;
    scroll-behavior: smooth;

    /* CHỐNG BÔI ĐEN CHỮ TOÀN TRANG */
    -webkit-user-select: none;
    /* Dành cho Safari/Chrome */
    -ms-user-select: none;
    /* Dành cho trình duyệt cũ của Microsoft */
    user-select: none;
    /* Chuẩn chung */
}

/* =========================================
   BẢO MẬT: CHỐNG COPY VÀ TẢI ẢNH
   ========================================= */
img {
    -webkit-user-drag: none;
    /* Chặn kéo thả ảnh ra ngoài Desktop (Chrome, Safari) */
    -khtml-user-drag: none;
    -moz-user-drag: none;
    /* Chặn kéo thả trên Firefox */
    -o-user-drag: none;
    /* user-drag: none; */

    -webkit-touch-callout: none;
    /* Chặn menu "Lưu ảnh" khi nhấn giữ trên iPhone/iPad */
    user-select: none;
    /* Chặn bôi đen để copy */
    -webkit-user-select: none;
}

/* =========================================
   NGOẠI LỆ: VẪN CHO PHÉP BÔI ĐEN TRONG FORM
   ========================================= */
input,
textarea {
    -webkit-user-select: auto;
    -ms-user-select: auto;
    user-select: auto;
}

/* =========================================
   NÚT LIÊN HỆ MẠNG XÃ HỘI (ZALO, FACEBOOK)
   ========================================= */
.action-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
}

.btn-zalo,
.btn-fb {
    padding: 10px 18px;
    border-radius: 6px;
    color: white !important;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    /* Chống rớt dòng chữ */
}

.btn-zalo {
    background-color: #0068ff;
    /* Màu xanh chuẩn của Zalo */
}

.btn-zalo:hover {
    background-color: #0054cc;
}

.btn-fb {
    background-color: #1877f2;
    /* Màu xanh chuẩn của Facebook */
}

.btn-fb:hover {
    background-color: #145dbf;
}

/* Đảm bảo khung nút trong Popup không bị chật */
.modal-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    /* Tự động rớt xuống dòng nếu màn hình điện thoại quá hẹp */
    margin-top: 20px;
}

/* TỐI ƯU HIỂN THỊ CHO ĐIỆN THOẠI */
@media (max-width: 768px) {
    .action-buttons {
        gap: 5px;
    }

    /* Thu nhỏ chữ và lề để nhét vừa 3 nút trên màn hình nhỏ */
    .btn-zalo,
    .btn-fb,
    .btn-call {
        padding: 8px 10px;
        font-size: 13px;
    }
}