<!DOCTYPE html>
<html lang="vi">
<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    

    <title>The Practice House</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="styles-small.css" media="screen and (max-width: 768px)"> <!-- Dùng cho màn hình nhỏ -->
    <link rel="stylesheet" href="masonry.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">


    <!-- Thêm Google Identity Services -->
    <script src="https://accounts.google.com/gsi/client" async defer></script>


    <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>



</head>
<body>
     
    <!-- Phần chứa logo -->
    <div class="logo-container">
        <img src="Logo.png" alt="The Practice House Logo" class="logo">
    </div>
    
    <!-- Thanh điều hướng các tab -->
    <div class="tab">
        <button class="tablinks" onclick="openTab(event, 'DichPhienAm')" id="defaultOpen">Dịch Phiên Âm</button>
        <button class="tablinks" onclick="openTab(event, 'KhoaPhatAm')">Khoá Phát Âm</button>
        <button class="tablinks" onclick="openTab(event, 'KhoaGiaoTiep')">Khoá Giao Tiếp</button>
        <button class="tablinks" onclick="openTab(event, '4KiNang')">4 Kĩ Năng</button>
        <button class="tablinks" onclick="openTab(event, 'BaiTapLuyen')">Bài tập luyện</button>
    </div>
    
    <!-- Nội dung tab Dịch Phiên Âm -->
    <!-- Nội dung tab Dịch Phiên Âm -->
    <!-- Nội dung tab Dịch Phiên Âm -->

    <div id="DichPhienAm" class="tabcontent">
        
                <!-- MÀN HÌNH LỚN -->
        <div class="container small-screen-hide">

            <div class="editable" id="editableDiv" contenteditable="true"></div>

            <button class="clear-btn hidden" id="clearEditable">
                <img src="clear-icon.png" alt="Clear" />
            </button>

            <div class="note">
                <p>(*) bạn muốn nghe chữ nào, hãy nhấp vào chữ đó,<br>bạn muốn nghe đoạn nào, hãy quét chọn đoạn đó</p>
            </div>

            <button id="playAudio" class="audio-button">
                <img src="play-icon.png" alt="Play Audio">
            </button>

            <button id="stopAudio" class="audio-button hidden">
                <img src="speaking-icon.png" alt="Stop Audio">
            </button>
            
            <div id="ipaResult">
                <button class="copy-button ipa-copy" onclick="copyIPAToClipboard()">
                    <img id="ipa-copy-icon" src="file-OHmcKVxPhS1eZ1OisXdc7mKM.png" alt="Copy Icon">
                    <span id="ipa-copy-text">Copy</span>
                </button>
            </div>

            <div id="translationResult">
                <button class="copy-button translation-copy" onclick="copyToClipboard()">
                    <img id="translation-copy-icon" src="file-OHmcKVxPhS1eZ1OisXdc7mKM.png" alt="Copy Icon">
                    <span id="translation-copy-text">Copy</span>
                </button>
            </div>

        </div>
    </div>
    
    
    <!-- Nội dung tab Khoá Phát Âm -->
    <!-- Nội dung tab Khoá Phát Âm -->
    <!-- Nội dung tab Khoá Phát Âm -->
    <div id="KhoaPhatAm" class="tabcontent">
        <img src="cover.jpg" alt="Hình ảnh mô tả" class="cover-image">
        <img src="welcome.png" alt="Xin chào mừng" class="welcome-image">
        <img src="me.png" alt="Tôi" class="me-image">
        <img src="infor1.png" class="infor1-image">
        <img src="infor2.png" class="infor2-image">
        <img src="infor3.png" class="infor3-image">
        <img src="phu-am.png" class="phu-am-image">
        <img src="nguyen-am.png" class="nguyen-am-image">
        <img src="at-home.png" class="at-home-image">
        <img src="result.png" class="result-image">

        <div class="video-container1">
            <iframe class="centered-video1" src="https://www.youtube.com/embed/7cedTEXETMg" frameborder="0" allowfullscreen></iframe>
        </div>

        <div class="video-container2">
            <video class="centered-video2" controls poster="thao.png">
                <source src="thao.mp4" type="video/mp4">
                Trình duyệt của bạn không hỗ trợ thẻ video.
            </video>   
        </div>

        <img src="zoom.png" class="zoom-image">
        <img src="khoan.png" class="khoan-image">
        <img src="say1.png" class="say1-image">
        <img src="say2.png" class="say2-image">
        <img src="schedule.png" class="schedule-image">
        <!--
        <form class="registration-form">
            <div class="form-group">
                <input type="text" id="name" name="name" placeholder="Họ và tên">
            </div>
            <div class="form-group">
                <input type="email" id="email" name="email" placeholder="Email">
            </div>
            <div class="form-group">
                <input type="tel" id="phone" name="phone" placeholder="Số điện thoại">
            </div>
            <div class="form-group">
                <select id="time" name="time">
                    <option value="" disabled selected>Chọn giờ học</option>
                    <option value="">A1</option>
                    <option value="">A2</option>
                    <option value="">A3</option>
                    <option value="">A4</option>
                    <option value="">B1</option>
                    <option value="">B2</option>
                    <option value="">B3</option>
                    <option value="">B4</option>
                </select>
            </div>
            <div class="form-group button-group">
                <button type="submit">GỬI</button>
            </div>
        </form>
        -->
    </div>
    
    <!-- Nội dung tab Khoá Giao Tiếp -->
    <!-- Nội dung tab Khoá Giao Tiếp -->
    <!-- Nội dung tab Khoá Giao Tiếp -->
    <div id="KhoaGiaoTiep" class="tabcontent">
        <img src="cover.jpg" alt="Hình ảnh mô tả" class="cover-image">
        <img src="welcome.png" alt="Xin chào mừng" class="welcome-image">
        <img src="me.png" alt="Tôi" class="me-image">
        <img src="gt1.png" alt="giao tiếp 1" class="gt1-image">
        <img src="gt2.png" alt="giao tiếp 2" class="gt2-image">
        <img src="gt3.png" alt="giao tiếp 3" class="gt3-image">
        <!-- Container chứa các video -->
<div class="videos-wrapper">
    <!-- Video Container 3 -->
    <div class="video-container">
        <video class="centered-video" controls poster="01.png">
            <source src="01.mp4" type="video/mp4">
            Trình duyệt của bạn không hỗ trợ thẻ video.
        </video>   
    </div>
    <!-- Video Container 4 -->
    <div class="video-container">
        <video class="centered-video" controls poster="02.png">
            <source src="02.mp4" type="video/mp4">
            Trình duyệt của bạn không hỗ trợ thẻ video.
        </video>   
    </div>
    <!-- Video Container 5 -->
    <div class="video-container">
        <video class="centered-video" controls poster="03.png">
            <source src="03.mp4" type="video/mp4">
            Trình duyệt của bạn không hỗ trợ thẻ video.
        </video>   
    </div>
</div>
        <div class="video-container6">
            <video class="centered-video6" controls poster="thao.png">
                <source src="thao2.mp4" type="video/mp4">
                Trình duyệt của bạn không hỗ trợ thẻ video.
            </video>   
        </div>
        <img src="nxgiaotiep.png" alt="nhận xét giao tiếp" class="nx-image">
    </div>
    