<?php// home.php - หน้าแรกเวอร์ชันรวม CSS ในตัว ป้องกันหน้าเว็บเละ$cfg = [  // 🎥 ใส่ชื่อไฟล์วิดีโอพื้นหลัง .mp4 ของคุณตรงนี้ (เช่น images/ets/bg_video.mp4)  'bgVideo'   => 'images/ets/bg_video.mp4',  // โลโก้กลาง (PNG โปร่งใส)  'logo'      => 'images/ets/logotar.png',  // รูปตัวละครซ้าย/ขวา (ถ้ายังไม่มีรูปให้ใส่เป็น "" ไปก่อนเพื่อไม่ให้ขึ้นรูปแตก)  'charLeft'  => '',  'charRight' => '',  // ลิงก์ของปุ่มกดต่างๆ  'downloadUrl' => 'https://google.com?',  'RegisterTh'  => 'register.php',  'GroupsTh'    => 'https://discord.gg',  'DonateUrl'   => 'Pay/index.php',  // ข้อความภาษาไทยใต้ปุ่ม  'downloadSTh' => 'ดาวน์โหลด',  'RegisterSTh' => 'สมัครสมาชิก',  'GroupsSTh'   => 'กลุ่มพูดคุย ซื้อ - ขาย',  'DonateSUrlTh'=> 'สนับสนุนเซิฟเวอร์',  // ข้อความเล็กบนโลโก้ (ถ้าไม่ต้องการใช้ให้ใส่เป็น "")  'badgeText'   => '',];?><!doctype html><html lang="th"><head>  <meta charset="utf-8" />  <meta name="viewport" content="width=device-width, initial-scale=1" />  <title>Sunny-RO Hiclass Juti</title>    <style>    /* รวม CSS ทั้งหมดไว้ที่นี่เพื่อไม่ให้ระบบหาไฟล์ไม่เจอ */    :root {      --glass: rgba(120, 0, 0, .35);      --stroke: rgba(255, 255, 255, .18);      --neon1: rgba(255, 40, 40, .85);      --neon2: rgba(180, 0, 0, .75);      --btnBg: rgba(120, 0, 0, .45);      --btnBg2: rgba(30, 0, 0, .65);      --text: #ffffff;    }    * {       box-sizing: border-box;     }    html, body {       height: 100%;       margin: 0;       font-family: system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;       color: var(--text);       overflow-x: hidden;       background-color: #000;    }    img {      border: 0px;      text-align: center;    }    /* 🎥 จัดการวิดีโอพื้นหลังให้อยู่หลังสุดแบบเต็มจอ */    .bg-video {      position: fixed;      top: 50%;      left: 50%;      min-width: 100%;      min-height: 100%;      width: auto;      height: auto;      z-index: 1;      transform: translate(-50%, -50%);      object-fit: cover;      pointer-events: none;    }    /* เลเยอร์ย้อมสีและคุมการจัดวางเนื้อหา */    .hero {      min-height: 100vh;      display: flex;      align-items: center;      justify-content: center;      position: relative;      overflow: hidden;    }    .hero::before {      content: "";      position: absolute;       inset: 0;      z-index: 2;      background:         linear-gradient(120deg, rgba(255, 0, 0, 0.25), rgba(0, 0, 0, 0.8)),        radial-gradient(800px 400px at 40% 40%, rgba(255, 60, 60, 0.15), transparent 60%);      mix-blend-mode: screen;      filter: saturate(1.2);      pointer-events: none;    }    .wrap {      width: min(1200px, 92vw);      height: min(720px, 80vh);      position: relative;      display: flex;      align-items: center;      justify-content: center;      z-index: 3;    }    /* ตัวละครซ้าย/ขวา + แอนิเมชันลอยนุ่มๆ */    .char {      position: absolute;      bottom: 0;      width: min(420px, 38vw);      max-height: 95%;      filter: drop-shadow(0 18px 28px rgba(0,0,0,.45));      opacity: .98;      user-select: none;      pointer-events: none;    }    .char.left {       left: -2%;       animation: floatLeft 6s ease-in-out infinite;    }    .char.right {       right: -2%;       animation: floatRight 6s ease-in-out infinite;    }    /* กล่องควบคุมตรงกลาง (โลโก้ + ปุ่ม) */    .center {      position: relative;      text-align: center;      padding: 28px 22px 22px;      border-radius: 22px;      background: linear-gradient(180deg, rgba(20,0,40,.25), rgba(10,0,25,.18));      border: 1px solid rgba(255, 255, 255, .10);      box-shadow: 0 25px 60px rgba(0,0,0,.45);      backdrop-filter: blur(6px);    }    .logoBox {      position: relative;      display: inline-block;      padding: 10px 14px 0;    }    .badge {      position: absolute;      top: -8px;       right: 10px;      padding: 6px 10px;      border-radius: 999px;      font-weight: 800;      font-size: 12px;      letter-spacing: .6px;      background: linear-gradient(90deg, rgba(255,0,200,.65), rgba(0,220,255,.55));      border: 1px solid rgba(255,255,255,.25);      box-shadow: 0 0 18px rgba(255,0,200,.35);      text-transform: uppercase;      z-index: 4;    }    /* 🔥🩸 LOGO FIRE + BLOOD (MASKED) */    .logoWrap {      position: relative;      display: inline-block;    }    .logo {      position: relative;      z-index: 2;      display: block;      width: min(640px, 80vw);      max-width: 100%;      height: auto;      filter:        drop-shadow(0 0 18px var(--neon1))        drop-shadow(0 0 26px var(--neon2));    }    .logoEffect {      position: absolute;      inset: 0;      z-index: 3;      pointer-events: none;      background:        radial-gradient(circle at 20% 30%, rgba(255,80,40,.85), transparent 7%),        radial-gradient(circle at 80% 40%, rgba(255,120,60,.75), transparent 7%),        radial-gradient(circle at 50% 70%, rgba(200,40,0,.85), transparent 7%),        linear-gradient(          to bottom,          rgba(120,0,0,.0) 0%,          rgba(160,0,0,.65) 99%,          rgba(120,0,0,.9) 100%        );            -webkit-mask-size: contain;      -webkit-mask-repeat: no-repeat;      -webkit-mask-position: center;      mask-size: contain;      mask-repeat: no-repeat;      mask-position: center;      filter: blur(2px) saturate(1.4);      mix-blend-mode: screen;      animation:        fireFlicker 0.8s infinite alternate,        bloodDrip 3.6s linear infinite;    }    .logoGlow {      position: absolute;      inset: -10px;      z-index: 1;      background: radial-gradient(circle, rgba(255,60,60,.35), transparent 70%);      filter: blur(18px);      animation: glowPulse 2s ease-in-out infinite;    }    /* แถวปุ่มกด */    .btnRow {      display: flex;      gap: 16px;      justify-content: center;      flex-wrap: wrap;      margin-top: 18px;    }    .btnNeon {      position: relative;      display: inline-flex;      flex-direction: column;      align-items: center;      justify-content: center;      width: 190px;      padding: 14px 14px 12px;      border-radius: 14px;      text-decoration: none;      color: #fff;      background: linear-gradient(180deg, var(--btnBg), var(--btnBg2));      border: 1px solid rgba(255, 255, 255, .18);      box-shadow:        0 10px 26px rgba(0,0,0,.35),        0 0 0 1px rgba(255,255,255,.06) inset;      transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;      overflow: hidden;    }    /* แสงวิบวับวิ่งตัดผ่านปุ่ม (Shine Effect) */    .btnNeon::after {      content: '';      position: absolute;      top: 0; left: -150%;      width: 50%; height: 100%;      background: linear-gradient(to right, transparent, rgba(255,255,255,0.2), transparent);      transform: skewX(-30deg);      animation: buttonShine 4s infinite ease-in-out;    }    .btnRow a:nth-child(2)::after { animation-delay: 0.8s; }    .btnRow a:nth-child(3)::after { animation-delay: 1.6s; }    .btnRow a:nth-child(4)::after { animation-delay: 2.4s; }    .btnNeon::before {      content: "";      position: absolute;       inset: -2px;      background: linear-gradient(90deg, rgba(255,40,40,.8), rgba(120,0,0,.9));      opacity: .0;      transition: opacity .12s ease;      filter: blur(10px);      pointer-events: none;    }    .btnNeon:hover {      transform: translateY(-2px);      box-shadow: 0 16px 34px rgba(0,0,0,.45), 0 0 24px rgba(255,0,200,.22);      filter: saturate(1.1);    }    .btnNeon:hover::before { opacity: .55; }    .btnEn {      font-size: 18px;      font-weight: 900;      letter-spacing: 1px;      text-transform: uppercase;      text-shadow: 0 2px 10px rgba(0,0,0,.55);    }    .btnTh {      margin-top: 4px;      font-size: 13px;      opacity: .9;      text-shadow: 0 2px 10px rgba(0,0,0,.55);    }    /* แอนิเมชัน คีย์เฟรม */    @keyframes fireFlicker {      0%   { opacity: .55; filter: blur(2px) saturate(1.3); }      100% { opacity: 1;  filter: blur(3px) saturate(2.6); }    }    @keyframes bloodDrip {      0%   { background-position: 0 0, 0 0, 0 0, 0 -100%; }      100% { background-position: 0 0, 0 0, 0 0, 0 100%; }    }    @keyframes glowPulse {      0%, 100% { opacity: .6; }      50%     { opacity: 1; }    }    @keyframes floatLeft {      0%, 100% { transform: translateY(0) translateX(0); }      50% { transform: translateY(-10px) translateX(3px); }    }    @keyframes floatRight {      0%, 100% { transform: translateY(0) translateX(0); }      50% { transform: translateY(-10px) translateX(-3px); }    }    @keyframes buttonShine {      0% { left: -150%; }      25%, 100% { left: 150%; }    }    @media (max-width: 900px) {      .wrap { height: auto; padding: 40px 0; flex-direction: column; }      .char { position: relative; width: 150px; max-height: 220px; opacity: .4; margin: 10px auto; }      .char.left, .char.right { left: auto; right: auto; animation: none; }      .center { width: 92vw; }      .btnNeon { width: 160px; }    }  </style></head><body>  <!-- 🎥 วิดีโอพื้นหลังเต็มจอ -->  <?php if (!empty($cfg['bgVideo']) && file_exists($cfg['bgVideo'])): ?>    <video class="bg-video" autoplay loop muted playsinline>      <source src="<?= htmlspecialchars($cfg['bgVideo']) ?>" type="video/mp4">    </video>  <?php endif; ?>  <main class="hero">    <section class="wrap">            <!-- ตัวละครซ้าย -->      <?php if (!empty($cfg['charLeft'])): ?>        <img class="char left" src="<?= htmlspecialchars($cfg['charLeft']) ?>" alt="character left">      <?php endif; ?>      <!-- กล่องคอนเทนต์ตรงกลาง -->      <div class="center">        <div class="logoBox">          <?php if (!empty($cfg['badgeText'])): ?>            <div class="badge"><?= htmlspecialchars($cfg['badgeText']) ?></div>          <?php endif; ?>