<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Us - Trialise</title>
    <style>
        /* Khởi tạo hệ thống màu sắc & Phông chữ phẳng cao cấp */
        :root {
            --tl-primary: #0f172a;       /* Đen Slate đậm nét */
            --tl-accent: #f97316;        /* Cam thương hiệu Trialise */
            --tl-text-muted: #64748b;    /* Xám mờ tinh tế */
            --tl-border: #f1f5f9;        /* Viền siêu mảnh */
            --tl-input-focus: #e2e8f0;
        }

        body {
            font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
            line-height: 1.6;
            color: var(--tl-primary);
            background-color: #ffffff;
            margin: 0;
            padding: 0;
        }

        /* Container chính */
        .tl-contact-section {
            max-width: 1100px;
            margin: 80px auto;
            padding: 0 24px;
            box-sizing: border-box;
        }

        /* Header section */
        .tl-header {
            text-align: center;
            margin-bottom: 60px;
        }

        .tl-subtitle-top {
            color: var(--tl-accent);
            font-size: 0.9rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            display: block;
            margin-bottom: 8px;
        }

        .tl-title {
            color: var(--tl-primary);
            font-size: 2.6rem;
            font-weight: 800;
            margin: 0 0 15px 0;
            letter-spacing: -0.5px;
        }

        .tl-subtitle {
            color: var(--tl-text-muted);
            font-size: 1.05rem;
            max-width: 580px;
            margin: 0 auto;
        }

        /* Layout chia cột phẳng */
        .tl-grid {
            display: grid;
            grid-template-columns: 1fr 1.4fr;
            gap: 60px;
            align-items: start;
        }

        /* Cột thông tin liên hệ phía bên trái */
        .tl-info-card {
            padding-right: 10px;
        }

        .tl-info-heading {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--tl-primary);
            margin: 0 0 35px 0;
            position: relative;
        }

        /* Thanh gạch nhỏ màu cam dưới tiêu đề khối */
        .tl-info-heading::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 0;
            width: 30px;
            height: 2px;
            background-color: var(--tl-accent);
        }

        .tl-info-item {
            margin-bottom: 30px;
        }

        .tl-label {
            display: block;
            text-transform: uppercase;
            font-size: 0.75rem;
            font-weight: 700;
            color: var(--tl-text-muted);
            letter-spacing: 1px;
            margin-bottom: 6px;
        }

        .tl-content {
            font-size: 1.05rem;
            color: var(--tl-primary);
            margin: 0;
            font-weight: 500;
        }

        /* Khung Form liên hệ phía bên phải */
        .tl-form-wrapper {
            background: #ffffff;
            padding: 40px;
            border: 1px solid var(--tl-border);
            border-radius: 8px;
            box-shadow: 0 4px 30px rgba(15, 23, 42, 0.02);
        }

        .tl-form-group {
            margin-bottom: 22px;
        }

        .tl-form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            font-size: 0.9rem;
            color: var(--tl-primary);
        }

        .tl-input, .tl-textarea {
            width: 100%;
            padding: 13px 16px;
            border: 1.5px solid #e2e8f0;
            border-radius: 6px;
            font-family: inherit;
            font-size: 0.95rem;
            transition: all 0.25s ease;
            box-sizing: border-box;
            background-color: #ffffff;
            color: var(--tl-primary);
        }

        .tl-input:focus, .tl-textarea:focus {
            outline: none;
            border-color: var(--tl-primary);
            box-shadow: 0 0 0 4px rgba(15, 23, 42, 0.05);
        }

        .tl-textarea {
            height: 140px;
            resize: none;
        }

        /* Nút bấm phẳng đồng bộ lookbook */
        .tl-submit-btn {
            background-color: var(--tl-primary);
            color: white;
            width: 100%;
            padding: 15px;
            border: none;
            border-radius: 6px;
            font-size: 1rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.25s ease;
        }

        .tl-submit-btn:hover {
            background-color: var(--tl-accent);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(249, 115, 22, 0.2);
        }

        /* Trạng thái gửi thông báo */
        .tl-status-msg {
            display: none;
            margin-top: 20px;
            padding: 15px;
            border-radius: 6px;
            text-align: center;
            font-size: 0.9rem;
        }

        .tl-status-success {
            display: block !important;
            background-color: #f0fdf4;
            color: #166534;
            border: 1px solid #bbf7d0;
        }

        /* Chân trang tinh giản */
        .tl-footer {
            text-align: center;
            padding: 40px 0;
            color: var(--tl-text-muted);
            font-size: 0.85rem;
            border-top: 1px solid var(--tl-border);
            margin-top: 100px;
        }

        /* Responsive linh hoạt */
        @media (max-width: 992px) {
            .tl-grid {
                grid-template-columns: 1fr;
                gap: 50px;
            }
            .tl-info-card {
                padding-right: 0;
                text-align: center;
            }
            .tl-info-heading::after {
                left: 50%;
                transform: translateX(-50%);
            }
            .tl-title {
                font-size: 2.2rem;
            }
        }
        
        @media (max-width: 576px) {
            .tl-contact-section {
                margin: 50px auto;
            }
            .tl-form-wrapper {
                padding: 24px;
            }
            .tl-title {
                font-size: 1.8rem;
            }
        }
    </style>
</head>
<body>

    <section class="tl-contact-section">
        <header class="tl-header">
            <span class="tl-subtitle-top">Get Support</span>
            <h1 class="tl-title">Contact Us</h1>
            <p class="tl-subtitle">Have a question regarding your order? We are here to help. Send us a message and we'll respond as soon as possible.</p>
        </header>

        <div class="tl-grid">
            
            <div class="tl-info-card">
                <h2 class="tl-info-heading">Corporate Info</h2>
                
                <div class="tl-info-item">
                    <span class="tl-label">Company </span>
                    <p class="tl-content">Lam Tri Tai</p>
                </div>

                <div class="tl-info-item">
                    <span class="tl-label">Email </span>
                    <p class="tl-content">tritai@trialise.com</p>
                </div>

                <div class="tl-info-item">
                    <span class="tl-label">Phone Number</span>
                    <p class="tl-content">0817470897</p>
                </div>

                <div class="tl-info-item">
                    <span class="tl-label">Address</span>
                    <p class="tl-content">115 Ấp Phú Tức, Phú Mỹ,<br>Mỹ Tú, Sóc Trăng, Vietnam</p>
                </div>

                <div class="tl-info-item">
                    <span class="tl-label">Support Time</span>
                    <p class="tl-content">Mon – Fri | 8:00 AM – 5:00 PM (EST)</p>
                </div>
            </div>

            
            <div class="tl-form-wrapper">
                <form id="tlContactForm">
                    <div class="tl-form-group">
                        <label for="name">Full Name</label>
                        <input type="text" id="name" class="tl-input" placeholder="Enter your name" required>
                    </div>

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

                    <div class="tl-form-group">
                        <label for="order">Order Number (Optional)</label>
                        <input type="text" id="order" class="tl-input" placeholder="#ITM12345">
                    </div>

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

                    <button type="submit" class="tl-submit-btn" id="tlSubmitBtn">Send Message</button>
                </form>
                <div id="tlStatus" class="tl-status-msg"></div>
            </div>
        </div>
    </section>

    
    <footer class="tl-footer">
        &copy; 2026 Trialise. All rights reserved. Designed for clarity and trust.
    </footer>

    <script>
        document.getElementById('tlContactForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const btn = document.getElementById('tlSubmitBtn');
            const status = document.getElementById('tlStatus');
            
            btn.style.backgroundColor = '#f97316';
            btn.innerText = 'Processing...';
            btn.disabled = true;

            // Giả lập hệ thống gửi dữ liệu phẳng
            setTimeout(() => {
                status.innerText = "Message sent successfully! Our support team will be in touch soon.";
                status.className = "tl-status-msg tl-status-success";
                
                this.reset();
                btn.style.backgroundColor = '#0f172a';
                btn.innerText = 'Send Message';
                btn.disabled = false;

                setTimeout(() => {
                    status.className = "tl-status-msg";
                }, 5000);
            }, 1200);
        });
    </script>

</body>
</html>

Home

Shop

About Us

Contact Us

Order Tracking

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.

trialise

Contact us

United States