.elementor-kit-7{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-kit-7 a{color:#87621D;}.elementor-kit-7 a:hover{color:#C9A34A;}.elementor-kit-7 h1{color:#C9A34A;}.elementor-kit-7 h2{color:#C9A34A;}.elementor-kit-7 h3{color:#C9A34A;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS */<style>
/* ===== BLACK GOLD RED WEBSITE BACKGROUND ===== */

html,
body {
  margin: 0;
  min-height: 100%;
  background: #080808;
}

body {
  background-color: #080808;
  background-image:
    radial-gradient(
      ellipse at 5% 10%,
      rgba(135, 0, 15, 0.30) 0%,
      transparent 35%
    ),
    radial-gradient(
      ellipse at 95% 20%,
      rgba(190, 130, 20, 0.16) 0%,
      transparent 30%
    ),
    radial-gradient(
      ellipse at 85% 85%,
      rgba(150, 0, 20, 0.22) 0%,
      transparent 32%
    ),
    radial-gradient(
      ellipse at 10% 90%,
      rgba(190, 140, 40, 0.12) 0%,
      transparent 28%
    ),
    linear-gradient(
      135deg,
      #080808 0%,
      #12100D 45%,
      #090909 100%
    );

  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}

/* พื้นหลังหลักของเนื้อหา */
.premium-background {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #F5F5F5;
  background:
    radial-gradient(
      ellipse at 0% 0%,
      rgba(180, 20, 30, 0.15),
      transparent 42%
    ),
    radial-gradient(
      ellipse at 100% 100%,
      rgba(201, 163, 74, 0.12),
      transparent 40%
    ),
    #0B0B0C;
}

/* เส้นแสงสีทอง */
.premium-background::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;

  background:
    linear-gradient(
      120deg,
      transparent 0%,
      transparent 38%,
      rgba(201, 163, 74, 0.07) 48%,
      transparent 52%,
      transparent 100%
    );

  opacity: 0.8;
}

/* จุดแสงตกแต่ง */
.premium-background::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;

  background-image:
    radial-gradient(
      circle,
      rgba(235, 190, 85, 0.45) 1px,
      transparent 1.5px
    );

  background-size: 48px 48px;
  opacity: 0.12;
}

/* การ์ดเนื้อหาธีมดำทอง */
.premium-card {
  background: linear-gradient(
    145deg,
    rgba(29, 25, 19, 0.96),
    rgba(12, 12, 13, 0.98)
  );

  border: 1px solid rgba(201, 163, 74, 0.35);
  border-radius: 14px;
  padding: 24px;
  color: #F5F5F5;

  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* หัวข้อสีทอง */
.premium-title {
  color: #E5C36B;
  text-shadow: 0 0 18px rgba(201, 163, 74, 0.15);
}

/* ปุ่มสีทอง */
.premium-button {
  display: inline-block;
  padding: 12px 26px;
  border-radius: 8px;

  background: linear-gradient(
    135deg,
    #F2D98D,
    #C9A34A 55%,
    #936B25
  );

  color: #15110A;
  font-weight: bold;
  text-decoration: none;

  box-shadow: 0 4px 18px rgba(201, 163, 74, 0.20);
  transition: 0.25s ease;
}

.premium-button:hover {
  filter: brightness(1.12);
  transform: translateY(-2px);
}

/* ปรับมือถือ */
@media (max-width: 767px) {
  body {
    background-attachment: scroll;
  }

  .premium-card {
    padding: 18px;
  }
}
<\/style>

<!-- ตัวอย่างพื้นที่เว็บไซต์ -->
<section class="premium-background"
  style="min-height:600px; padding:60px 20px;">

  <div style="
    max-width:1100px;
    margin:0 auto;
    text-align:center;
    padding-top:60px;
  ">

    <h1 class="premium-title"
      style="font-size:clamp(28px,5vw,48px);">
      PREMIUM WEBSITE
    </h1>

    <p style="
      color:#C8C5C0;
      line-height:1.8;
      max-width:650px;
      margin:20px auto 30px;
    ">
      พื้นหลังสีดำตัดกับแสงสีทองและสีแดง
      เพิ่มความหรูหราให้กับเว็บไซต์
      พร้อมพื้นที่สำหรับจัดวางเนื้อหาและองค์ประกอบต่าง ๆ
    </p>

    <a href="#" class="premium-button">
      ดูรายละเอียดเพิ่มเติม
    </a>

    <div class="premium-card"
      style="max-width:650px; margin:55px auto 0;">

      <h2 class="premium-title">
        พื้นที่แสดงเนื้อหา
      </h2>

      <p style="color:#C8C5C0; line-height:1.8;">
        สามารถนำส่วนนี้ไปปรับเป็นกล่องบริการ
        บทความ แบนเนอร์ หรือเนื้อหาหลักของเว็บไซต์ได้
      </p>

    </div>

  </div>
</section>/* End custom CSS */