<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1">
    <title>HTT</title>

    <link rel="icon" href="https://raw.githubusercontent.com/hothtn/hothanhtuan/c21c25a6f36483bcb6f45f706308e1512133866a/cropped-htt_logo-32x32.png" sizes="32x32" />
    <link rel="icon" href="https://raw.githubusercontent.com/hothtn/hothanhtuan/c21c25a6f36483bcb6f45f706308e1512133866a/cropped-htt_logo-192x192.png" sizes="192x192" />
    <link rel="apple-touch-icon" href="https://raw.githubusercontent.com/hothtn/hothanhtuan/c21c25a6f36483bcb6f45f706308e1512133866a/cropped-htt_logo-180x180.png" />
    <meta name="msapplication-TileImage" content="https://raw.githubusercontent.com/hothtn/hothanhtuan/c21c25a6f36483bcb6f45f706308e1512133866a/cropped-htt_logo-270x270.png" />

    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;800&display=swap&subset=vietnamese" rel="stylesheet">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />

    <style>
        /* CSS Variables */
        :root {
            --main-bg-color: #CAA348; /* Mustard yellow from screenshot */
            --text-dark: #000000;
            --icon-color: #CAA348;   /* Màu icon: vàng đất */
            --icon-bg-color: #000000; /* Màu nền icon: đen */
            --icon-hover-color: #000000; /* Màu icon khi hover: đen */
            --icon-hover-bg-color: #CAA348; /* Màu nền icon khi hover: vàng đất */

            /* Fonts */
            --font-poppins: 'Poppins', sans-serif;
            --font-arial: Arial, sans-serif;
        }

        /* Base Styles */
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            font-family: var(--font-poppins);
            line-height: 1.6;
            color: var(--text-dark);
            background-color: var(--main-bg-color);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            overflow: hidden;
        }

        a {
            text-decoration: none;
            transition: all 0.3s ease;
        }

        /* --- Hero Section Styles --- */
        .hero-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center; /* Căn giữa dọc các flex item */
            min-height: 100vh;
            background-color: var(--main-bg-color);
            position: relative; /* Giữ thuộc tính này cho transform */
            overflow: hidden;
        }

        .graphic-area {
            position: relative;
            width: 100%;
            max-width: 600px;
            height: 300px; /* Chiều cao cố định cho vùng graphic */
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .snail-graphic-centered {
            width: 100%;
            max-width: 400px;
            height: auto;
            display: block;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1;
        }

        /* --- Social Media Icons --- */
        .social-icons-hero {
            display: flex;
            gap: 20px;
            z-index: 2;
            margin-top: 40px;
        }

        .social-icons-hero a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 38px;
            height: 38px;
            border-radius: 50%;
            font-size: 18px;
            background-color: var(--icon-bg-color);
            color: var(--icon-color);
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }

        .social-icons-hero a:hover {
            background-color: var(--icon-hover-bg-color);
            color: var(--icon-hover-color);
            transform: scale(1.1);
        }

        /* Responsive Adjustments */
        @media (max-width: 960px) {
            .graphic-area {
                max-width: 500px;
                height: 250px;
            }
            .snail-graphic-centered {
                max-width: 350px;
            }
            .social-icons-hero {
                margin-top: 30px;
            }
            .social-icons-hero a {
                width: 34px;
                height: 34px;
                font-size: 16px;
            }
        }

        @media (max-width: 600px) {
            .hero-container {
                /* Đẩy toàn bộ khối nội dung (logo + icon) lên trên 5% chiều cao của chính nó */
                transform: translateY(-5%); 
            }
            .graphic-area {
                max-width: 400px;
                height: 200px;
                /* Đã bỏ margin-bottom cũ */
            }
            .snail-graphic-centered {
                max-width: 250px;
            }
            .social-icons-hero {
                margin-top: 35px;
                gap: 25px;
            }
            .social-icons-hero a {
                width: 28px;
                height: 28px;
                font-size: 13px;
            }
        }
    </style>
</head>
<body>

    <section class="hero-container">
        <div class="graphic-area">
            <img src="https://raw.githubusercontent.com/hothtn/hothanhtuan/c21c25a6f36483bcb6f45f706308e1512133866a/htt_logo-2.png" alt="Snail Graphic" class="snail-graphic-centered">
        </div>

        <div class="social-icons-hero">
            <a href="https://www.facebook.com/hothtn/" aria-label="Facebook" target="_blank" rel="noopener noreferrer"><i class="fab fa-facebook-f"></i></a>
            <a href="https://www.linkedin.com/in/hothanhtuan/" aria-label="LinkedIn" target="_blank" rel="noopener noreferrer"><i class="fab fa-linkedin-in"></i></a>
            <a href="/cdn-cgi/l/email-protection#e588848c89a58d8a918d848b8d9190848bcb868a88" aria-label="Email" target="_blank" rel="noopener noreferrer"><i class="fas fa-envelope"></i></a>
        </div>
    </section>

<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script></body>
</html>
