<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta content="width=device-width, initial-scale=1" name="viewport">
        <!-- CSRF Token -->
        <meta content="3xvWjeGgIJJ7PhyAQjIdLC3eszKNIlHgevKKe7Fv" name="csrf-token">
        <meta content="โรงเรียนกีฬาจังหวัดตราด" name="author">
        <!-- Google Fonts: Kanit -->
        <link href="https://fonts.googleapis.com" rel="preconnect">
        <link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect">
        <link href="https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700&amp;display=swap" rel="stylesheet">
        <!-- Styles -->
        <link href="http://www.tratss.ac.th/assets/css/bootstrap.min.css" rel="stylesheet">
        <link crossorigin="anonymous" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" referrerpolicy="no-referrer" rel="stylesheet">
        <title>
   โรงเรียนกีฬาจังหวัดตราด
        </title>
        <style>
            body {
                font-family         : "Kanit", sans-serif;
                background          : linear-gradient(135deg, #f1f4f8 0%, #e2e8f0 100%);
                min-height          : 100vh;
                display             : flex;
                align-items         : center;
                margin              : 0;
                padding             : 40px 0;
            }
            /* ปรับปรุง Container ให้กว้างขึ้นมาก */
            .main-content-wrapper {
                background          : #ffffff;
                border-radius       : 24px;
                box-shadow          : 0 20px 40px rgba(0, 0, 0, 0.06);
                overflow            : hidden;
                border              : 1px solid rgba(0,0,0,0.03);
            }
            /* Split Layout ในหน้าจอใหญ่ */
            @media (min-width: 992px) {
                .split-layout {
                    display             : flex;
                    align-items         : stretch;
                }
                .info-section {
                    flex                : 1; /* ปรับลดลงเล็กน้อยเพื่อสมดุล */
                    padding             : 60px;
                    display             : flex;
                    flex-direction      : column;
                    justify-content     : center;
                    text-align          : left !important;
                }
                .image-section {
                    flex                : 0 0 70%; /* ขยายรูปภาพให้กว้างขึ้นมากเป็น 70% */
                    position            : relative;
                    min-height          : 500px;
                }
                .hero-img-modern {
                    position            : absolute;
                    top                 : 0;
                    left                : 0;
                    width               : 100%;
                    height              : 100%;
                    object-fit          : cover;
                }
            }
            /* Layout ในหน้าจอมือถือ/แท็บเล็ต */
            @media (max-width: 991.98px) {
                .info-section {
                    padding             : 40px 20px;
                    text-align          : center;
                }
                .image-section {
                    width               : 100%;
                    height              : 300px; /* ปรับความสูงภาพบนมือถือ */
                    overflow            : hidden;
                }
                .hero-img-modern {
                    width               : 100%;
                    height              : 100%;
                    object-fit          : cover;
                    object-position     : top;
                }
            }
            .school-logo-modern {
                width               : 70px;
                height              : auto;
                margin-bottom       : 20px;
                filter              : drop-shadow(0 4px 6px rgba(0,0,0,0.08));
            }
            .welcome-text {
                color               : #718096;
                font-size           : 1.1rem;
                font-weight         : 300;
                text-transform      : uppercase;
                letter-spacing      : 2px;
                margin-bottom       : 10px;
            }
            .school-title-modern {
                font-size           : 2.5rem;
                font-weight         : 700;
                color               : #1a202c;
                line-height         : 1.2;
                margin-bottom       : 30px;
            }
            @media (max-width: 768px) {
                .school-title-modern {
                    font-size           : 1.8rem;
                }
            }
            .action-buttons-modern {
                display             : flex;
                flex-direction      : column;
                gap                 : 15px;
                width               : 100%;
                max-width           : 400px;
            }
            /* ในหน้าจอใหญ่ จัดปุ่มให้อยู่ทางซ้ายตามข้อความ */
            @media (min-width: 992px) {
                .action-buttons-modern {
                    margin-left         : 0;
                }
            }
            /* ในหน้าจอมือถือ จัดปุ่มให้อยู่ตรงกลาง */
            @media (max-width: 991.98px) {
                .action-buttons-modern {
                    margin-left         : auto;
                    margin-right        : auto;
                }
            }
            .btn-modern {
                border-radius       : 12px;
                padding             : 15px 25px;
                font-size           : 1.1rem;
                font-weight         : 500;
                transition          : all 0.3s ease;
                text-decoration     : none;
                display             : inline-flex;
                align-items         : center;
                justify-content     : center;
                gap                 : 12px;
                border              : none;
            }
            .btn-enter-modern {
                background          : #1e3c72; /* สีน้ำเงินเข้มดูทันสมัย */
                color               : #ffffff;
                box-shadow          : 0 4px 15px rgba(30, 60, 114, 0.2);
            }
            .btn-enter-modern:hover {
                background          : #2a5298;
                color               : #ffffff;
                transform           : translateY(-3px);
                box-shadow          : 0 6px 20px rgba(30, 60, 114, 0.3);
            }
            .btn-wishes-modern {
                background          : #4a5568; /* สีเทาเข้มสำรวม */
                color               : #ffffff;
                box-shadow          : 0 4px 15px rgba(74, 85, 104, 0.15);
            }
            .btn-wishes-modern:hover {
                background          : #2d3748;
                color               : #ffffff;
                transform           : translateY(-3px);
                box-shadow          : 0 6px 20px rgba(74, 85, 104, 0.25);
            }
            .footer-text-modern {
                color               : #a0aec0;
                font-size           : 0.9rem;
                margin-top          : 40px;
                font-weight         : 300;
            }
        </style>
    </head>
    <body>
        <div class="container-fluid px-md-5">
            <div class="row justify-content-center">
                <!-- ขยาย col-xl ให้กว้างขึ้น เป็น 11 จาก 10 -->
                <div class="col-12 col-lg-11 col-xl-11">
                    <div class="main-content-wrapper split-layout">
                        <!-- ฝั่งซ้าย: ข้อมูลและปุ่ม -->
                        <div class="info-section">
                            <div class="text-center-mobile">
                                <img alt="ตราโรงเรียนกีฬาจังหวัดตราด" class="school-logo-modern" src="http://www.tratss.ac.th/index.php/assets/images/queen-banner.png">
                                <div class="welcome-text">
         ยินดีต้อนรับสู่
                                </div>
                                <h1 class="school-title-modern">
                                    โรงเรียนกีฬา
                                    <br>
                                    จังหวัดตราด
                                </h1>
                                <div class="action-buttons-modern">
                                    <a class="btn-modern btn-enter-modern" href="http://www.tratss.ac.th/index.php/app">
                                        <i class="fa-solid fa-right-to-bracket">
                                        </i>
                                        <span>
                                            เข้าสู่เว็บไซต์
                                        </span>
                                    </a>
                                    <a class="btn-modern btn-wishes-modern" href="http://www.tratss.ac.th/index.php/v1/wishes">
                                        <i class="fa-solid fa-ribbon">
                                        </i>
                                        <span>
                                            ลงนามถวายความอาลัย
                                        </span>
                                    </a>
                                </div>
                                <div class="footer-text-modern">
                                    &copy; 2026 โรงเรียนกีฬาจังหวัดตราด. สงวนลิขสิทธิ์.
                                </div>
                            </div>
                        </div>
                        <!-- ฝั่งขวา: ภาพแบนเนอร์เต็มพื้นที่ -->
                        <div class="image-section">
                            <img alt="ภาพเฉลิมพระเกียรติ" class="hero-img-modern" src="http://www.tratss.ac.th/index.php/assets/images/king.jpg">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Script สำหรับ Bootstrap -->
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
        </script>
    </body>
</html>