/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/


@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}


<?php
/**
 * The template for displaying the footer.
 *
 * @package          Flatsome\Templates
 * @flatsome-version 3.16.0
 */

global $flatsome_opt;
?>

</main>

<footer id="footer" class="footer-wrapper">

	<?php do_action('flatsome_footer'); ?>

</footer>

</div>

<?php wp_footer(); ?>

</body>
</html>



<style>
/* Ẩn phần tử .bottom-contact mặc định */
.bottom-contact {
    display: none;
}

/* Áp dụng các quy tắc CSS khi màn hình có chiều rộng tối đa là 767px */
@media (max-width: 767px) {
    .bottom-contact {
        display: flex; /* Chuyển sang sử dụng flexbox */
        justify-content: space-between; /* Căn các phần tử ra 2 biên */
        align-items: center; /* Căn các phần tử theo trục dọc */
        position: fixed;
        bottom: 0;
        background-color: rgba(255, 255, 255, 0.5); /* Màu trắng với độ trong suốt 50% */
        width: 100%;
        z-index: 99;
        box-shadow: 2px 1px 9px #dedede;
        border-top: 1px solid #eaeaea;
    }
    .bottom-contact ul { /* Thêm đoạn này để căn chỉnh ul theo chiều ngang */
        display: flex;
        justify-content: space-between;
        width: 100%;
        padding: 0;
        margin: 0;
    }
    .bottom-contact ul li {
        width: 48%; /* Thay đổi từ 25% sang 48% để phần tử co giãn theo nội dung bên trong và cách xa nhau */
        list-style: none;
        text-align: center;
        font-size: 16px;
    }
    .bottom-contact ul li span {
        color: black;
    }
    .bottom-contact ul li a { /* Thêm đoạn này để làm cho icon cao hơn background */
        display: inline-block;
        padding: 0px; /* Điều chỉnh padding tùy thích */
    }
    .bottom-contact ul li img { 
        width: 60px; /* Điều chỉnh kích thước icon */
        height: 60px; /* Điều chỉnh kích thước icon */
        margin-top: -40px;
        margin-bottom: 0px;
    }
}

/* Áp dụng các quy tắc CSS khi màn hình có chiều rộng lớn hơn 767px (desktop) */
@media (min-width: 768px) {
    .bottom-contact {
        display: flex; /* Chuyển sang sử dụng flexbox */
        flex-direction: column; /* Sắp xếp các phần tử theo trục dọc */
        align-items: flex-end; /* Căn các phần tử về phía bên phải */
        position: fixed;
        right: 0; /* Đặt phần tử ở phía phải màn hình */
        top: 50%; /* Đặt phần tử ở giữa theo chiều dọc */
        transform: translateY(-50%); /* Căn chỉnh chính xác phần tử giữa theo chiều dọc */
        background-color: rgba(255, 255, 255, 0.5); /* Màu trắng với độ trong suốt 50% */
        z-index: 99;
        box-shadow: 2px 1px 9px #dedede;
        border-left: 1px solid #eaeaea; /* Thêm đường viền trái */
        padding: 10px; /* Khoảng cách bên trong phần tử */
    }
    .bottom-contact ul {
        display: flex;
        flex-direction: column; /* Sắp xếp các phần tử ul theo trục dọc */
        align-items: flex-end; /* Căn các phần tử ul về phía bên phải */
        padding: 0;
        margin: 0;
    }
    .bottom-contact ul li {
        width: auto; /* Để chiều rộng tự động */
        list-style: none;
        text-align: right; /* Căn text về bên phải */
        font-size: 16px;
        margin-bottom: 10px; /* Khoảng cách giữa các phần tử */
    }
    .bottom-contact ul li span {
        color: black;
    }
    .bottom-contact ul li a {
        display: inline-block;
        padding: 0px; /* Điều chỉnh padding tùy thích */
    }
    .bottom-contact ul li img {
        width: 60px; /* Điều chỉnh kích thước icon */
        height: 60px; /* Điều chỉnh kích thước icon */
        margin-bottom: 0px;
    }
}

</style>
<div class="bottom-contact">
<ul>
<li>
<a id="goidien" href="tel:0909652109">
<img src="https://las-vn.com/wp-content/uploads/2024/05/phone-icon.gif"/>
<br>
<span>Gọi điện</span>
</a>
</li>
<li>
<a id="bando" href="https://maps.app.goo.gl/2MnwTWxuEBruahMAA">
<img src="https://las-vn.com/wp-content/uploads/2024/05/MAP.png"/>
<br>
<span>Bản đồ</span>
</a>
</li>
<li>
<a id="chatzalo" href="https://zalo.me/0909652109">
<img src="https://las-vn.com/wp-content/uploads/2024/05/zalo901.png"/>
<br>
<span>Chat zalo</span>
</a>
</li>
</ul>
</div>


<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-0VJV12KVDR"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-0VJV12KVDR');
</script>