<!-- THÔI ĐỪNG CHECK CODE EM NỮA CÁC KỸ SƯ ƠI, UP MỖI CÁI VIDEO LÊN THUIIII -->


<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>
    <title>SDS Women's day</title>

</head>
<style>
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    body,
    html {
        margin: 0;
        padding: 0;
        height: 100%;
    }

    .bg-video {
        position: fixed;
        right: 0;
        bottom: 0;
        max-width: 100%;
        min-height: 100%;
    }

    #myBtn {
        display: none;
        /* Ẩn nút cho đến khi video kết thúc */
/*         display: block; */
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 10px 20px;
        background: #f00;
        color: #fff;
        cursor: pointer;
        border: none;
    }

    #sdsc_video {
        padding: 5rem 0;
        position: relative;
    }

    .company-video img:hover {
        opacity: 0.9;
        cursor: pointer;
    }

    /* Video */
    #fade {
        display: none;
        position: fixed;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: black;
        z-index: 1001;
        -moz-opacity: 0.8;
        opacity: 0.8;
        filter: alpha(opacity=80);
    }

    #light {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 1920px;
        max-height: 1080px;
        border: 2px solid #fff;
        background: #fff;
        z-index: 1002;
        overflow: visible;
    }

    #boxclose {
        float: right;
        cursor: pointer;
        color: #fff;
        border: 1px solid #aeaeae;
        border-radius: 3px;
        background: #222222;
        font-size: 31px;
        font-weight: bold;
        display: inline-block;
        line-height: 0px;
        padding: 11px 3px;
        position: absolute;
        right: 2px;
        top: 2px;
        z-index: 1002;
        opacity: 0.9;
    }

    .boxclose:before {
        content: "×";
    }

    #fade:hover~#boxclose {
        display: none;
    }

    .test:hover~.test2 {
        display: none;
    }

    .video-text {
        position: absolute;
        color: #fff;
        font-family: Nunito Sans;
        font-size: 32px;
        font-style: normal;
        font-weight: 700;
        line-height: 150%;
        /* 48px */
    }

    .video-text span {
        color: #fff;
        font-family: Nunito Sans;
        font-size: 36px;
        font-style: normal;
        font-weight: 800;
        line-height: 150%;
        /* 54px */
    }

    #VisaChipCardVideo {
        width: 100rem;
    }

    @media (max-width: 1050px) {
        #VisaChipCardVideo {
            width: 74rem;
        }
    }

    @media (max-width: 800px) {
        #VisaChipCardVideo {
            width: 54rem;
        }
    }

    @media (max-width: 590px) {
        #VisaChipCardVideo {
            width: 40rem;
        }
    }

    @media (max-width: 420px) {
        #VisaChipCardVideo {
            width: 30rem;
        }
    }
</style>

<body>
    <section id="sdsc_video">
        <div class="container">
            <div id="light">
                <a class="boxclose" id="boxclose" onclick="lightbox_close();"></a>
                <video id="VisaChipCardVideo" controls>
                    <source
                        src="http://softdreams.vn/wp-content/uploads/2024/03/Final-2.mp4"
                        type="video/mp4">
                </video>
            </div>
            <div id="fade" onClick="lightbox_close();"></div>
        </div>
    </section>
    <div>
        <video autoplay muted id="myVideo" class="bg-video">
            <source src="http://softdreams.vn/wp-content/uploads/2024/03/0308.mp4" type="video/mp4">
        </video>
        <button id="myBtn" onclick="lightbox_open();">Nhận quà ngay</button>
    </div>
    <script>
        var video = document.getElementById("myVideo");
        var btn = document.getElementById("myBtn");
        video.onended = function () {
            btn.style.display = "block";
        };
    </script>
</body>
<script>
    window.document.onkeydown = function (e) {
        if (!e) {
            e = event;
        }
        if (e.keyCode == 27) {
            lightbox_close();
        }
    }

    function lightbox_open() {
        var lightBoxVideo = document.getElementById("VisaChipCardVideo");
        document.getElementById('light').style.display = 'block';
        document.getElementById('fade').style.display = 'block';
        lightBoxVideo.play();
    }

    function lightbox_close() {
        var lightBoxVideo = document.getElementById("VisaChipCardVideo");
        document.getElementById('light').style.display = 'none';
        document.getElementById('fade').style.display = 'none';
        lightBoxVideo.pause();
    }
</script>

</html>