<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Us | Jotga</title>
    <style>
        /* --- CSS STYLES --- */
        :root {
            --primary-color: #00468c; /* Navy Blue */
            --accent-color: #00d2ff;  /* Cyan */
            --bg-body: #f0f4f8;
            --text-main: #2d3748;
            --white: #ffffff;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        }

        body {
            background-color: var(--bg-body);
            color: var(--text-main);
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            width: 100%;
            max-width: 1000px;
            background: var(--white);
            display: flex;
            flex-direction: column; /* Mặc định cho Mobile */
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 15px 35px rgba(0,0,0,0.1);
        }

        /* Phần thông tin bên trái */
        .contact-info {
            background-color: var(--primary-color);
            color: var(--white);
            padding: 40px;
            flex: 1;
        }

        .contact-info h1 {
            font-size: 28px;
            margin-bottom: 15px;
            color: var(--accent-color);
        }

        .contact-info p {
            line-height: 1.6;
            margin-bottom: 30px;
            font-size: 15px;
            opacity: 0.9;
        }

        .info-block {
            margin-bottom: 25px;
        }

        .info-block h3 {
            font-size: 13px;
            text-transform: uppercase;
            letter-spacing: 1.2px;
            margin-bottom: 5px;
            color: var(--accent-color);
        }

        .info-block span {
            font-size: 16px;
        }

        /* Phần Form bên phải */
        .contact-form {
            padding: 40px;
            flex: 1.4;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            font-weight: 600;
            font-size: 14px;
            margin-bottom: 8px;
        }

        .form-group input, 
        .form-group select, 
        .form-group textarea {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            font-size: 15px;
            outline: none;
            transition: all 0.3s ease;
        }

        .form-group input:focus, 
        .form-group textarea:focus {
            border-color: var(--accent-color);
            box-shadow: 0 0 0 3px rgba(0, 210, 255, 0.1);
        }

        .submit-btn {
            width: 100%;
            padding: 14px;
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: background 0.3s ease;
        }

        .submit-btn:hover {
            background-color: #003366;
        }

        /* --- RESPONSIVE FIX (PC & Tablet) --- */
        @media (min-width: 768px) {
            .container {
                flex-direction: row; /* Chuyển sang 2 cột trên màn hình lớn */
                min-height: 550px;
            }
            
            .contact-info {
                padding: 60px 40px;
            }

            .contact-form {
                padding: 60px;
            }
        }
    </style>
</head>
<body>

    <div class="container">
        <div class="contact-info">
            <h1>Contact Us</h1>
            <p>We'd love to hear from you. Please fill out the form and our team will get in touch with you shortly.</p>
            
            <div class="info-block">
 <h3>Store</h3>
                <span>LE VAN NE</span>

                <h3>Email</h3>
                <span>helpgen@Jotga.com</span>
            </div>

            <div class="info-block">
               
         
                <h3>Office</h3>
                <span>Ấp Qui Lân 2, Thạnh Quới, Vĩnh Thạnh, Cần Thơ</span>
            </div>
        </div>

        <div class="contact-form">
            <form action="#">
                <div class="form-group">
                    <label for="name">Full Name</label>
                    <input type="text" id="name" placeholder="Enter your name" required>
                </div>

                <div class="form-group">
                    <label for="email">Email Address</label>
                    <input type="email" id="email" placeholder="example@mail.com" required>
                </div>

                <div class="form-group">
                    <label for="subject">Subject</label>
                    <select id="subject">
                        <option value="general">General Inquiry</option>
                        <option value="support">Technical Support</option>
                        <option value="billing">Billing Question</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="message">Message</label>
                    <textarea id="message" rows="4" placeholder="How can we help you?" required></textarea>
                </div>

                <button type="submit" class="submit-btn">Send Message</button>
            </form>
        </div>
    </div>

</body>
</html>

English

German

Australia

Spanish

Portuguese

Canada

French

Italian

Japanese

Korean

Vietnamese

Contact us for any questions, support, or inquiries. We are here to help with your shopping experience.

LE VAN NE

Contact us

United States