*, *::before, *::after { box-sizing: border-box; }

    body {
      margin: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: #130205;
      color: #222;
    }

    a { text-decoration: none; color: inherit; }

    /* ===== HEADER แดงเข้ม GRADIENT ===== */
    .site-header {
      background: linear-gradient(90deg, #4a0000 0%, #a30000 40%, #f2994a 100%);
      box-shadow: 0 3px 10px rgba(0,0,0,0.4);
      position: sticky;
      top: 0;
      z-index: 100;
    }

    .nav-container {
      max-width: 1100px;
      margin: 0 auto;
      padding: 10px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .logo {
      font-weight: 800;
      font-size: 21px;
      color: #fff7d6;
      letter-spacing: 0.03em;
    }

    .nav-menu {
      list-style: none;
      display: flex;
      gap: 18px;
      margin: 0;
      padding: 0;
    }

    .nav-menu a {
      font-size: 14px;
      color: #ffe3b4;
      padding-bottom: 2px;
      border-bottom: 2px solid transparent;
      transition: color 0.2s ease, border-color 0.2s ease;
    }

    .nav-menu a:hover {
      color: #ffffff;
      border-bottom-color: #ffd27b;
    }

    #mobile-toggle {
      display: none;
      background: none;
      border: none;
      font-size: 26px;
      cursor: pointer;
      color: #fff7d6;
    }

    @media (max-width: 768px) {
      .nav-menu { display: none; }
      #mobile-toggle { display: block; }
    }

    /* ===== MOBILE NAV ===== */
    #mobile-nav {
      position: fixed;
      top: 0;
      left: -260px;
      width: 240px;
      height: 100vh;
      background: #1b0205;
      color: #f5f5f5;
      padding-top: 60px;
      transition: left 0.25s ease;
      z-index: 90;
    }

    #mobile-nav ul { list-style: none; padding: 0; margin: 0; }
    #mobile-nav li a {
      display: block;
      padding: 12px 18px;
      font-size: 15px;
      color: #f5f5f5;
    }
    #mobile-nav li a:hover { background: rgba(255,255,255,0.08); }

    #mobile-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.4);
      display: none;
      z-index: 80;
    }

    body.nav-open #mobile-nav { left: 0; }
    body.nav-open #mobile-overlay { display: block; }

    /* ===== HERO (ภาพไม่แตก) ===== */
    .hero-banner {
      width: 100%;
      display: flex;
      justify-content: center;
      background: #4a0000;
    }

    .hero-banner img {
      width: 100%;
      max-width: 1080px;
      height: auto;
      display: block;
      object-fit: contain;
    }

    /* ===== MAIN BACKGROUND (แดงเข้ม + GLOW) ===== */
    .page-wrapper {
      background: radial-gradient(circle at top,
                 #5A1A10 0%,
                 #3A0000 40%,
                 #170004 100%);
      padding-bottom: 40px;
    }

    .page-container {
      max-width: 1100px;
      margin: 0 auto;
      padding: 24px 16px 40px;
    }

    h1.page-title {
      font-size: 24px;
      text-align: center;
      margin: 0 0 6px;
      color: #FFE8B2;
    }

    .page-sub {
      text-align: center;
      font-size: 14px;
      color: #f7d1aa;
      margin-bottom: 22px;
    }

    /* ===== GRID 3 คอลัมน์ ===== */
    .ber-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 18px;
    }

    /* การ์ด + glow สีทอง + ลูกเล่นไฟเบา ๆ */
    .ber-item {
      position: relative;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.16);
      background:
        radial-gradient(circle at top left, rgba(255, 220, 180, 0.8) 0%, rgba(255,255,255,0) 55%),
        linear-gradient(145deg,#fffdf5,#fff5e8);
      box-shadow:
        0 0 0 1px rgba(255, 210, 120, 0.35),
        0 14px 26px rgba(0,0,0,0.35),
        0 0 22px rgba(255, 210, 120, 0.35); /* gold glow */
      padding: 14px 16px;
      overflow: hidden;
    }

    /* แสงวิ่งเบา ๆ ด้านหลัง (ไม่รก) */
    .ber-item::before {
      content: "";
      position: absolute;
      top: -40%;
      right: -40%;
      width: 160px;
      height: 160px;
      background: radial-gradient(circle, rgba(255,230,180,0.9) 0%, rgba(255,230,180,0) 60%);
      opacity: 0.45;
      pointer-events: none;
    }

    .ber-link { display: block; color: #222; position: relative; z-index: 1; }

    .row-top {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 8px;
    }

    /* เบอร์แบบเดิม – ไม่หนาเกินไป */
    .ber-number {
      font-size: 22px;
      font-weight: 600;
      letter-spacing: 0.3px;
      color: #111;
	    white-space: nowrap;
  display: inline-block;
    flex-shrink: 0;   /* ห้ามเลขถูกบีบ */
    }

    .ber-price {
      font-size: 18px;
      font-weight: 700;
      color: #D72638;
	    white-space: normal;   /* อนุญาตให้ตัดบรรทัด */
  text-align: right;
  margin-left: auto;     /* ดันไปฝั่งขวา */
    }
	

    .row-bottom {
      font-size: 15px;
      color: #555;
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      line-height: 1.45;
    }

    .separator { opacity: 0.55; }

    /* Icon เพศสีทอง */
    .sex-icon {
      font-size: 17px;
      margin-right: 2px;
      color: #D4A941;  /* ทอง */
    }

    .ber-network { font-weight: 600; }

    /* ปุ่มดำ–ทอง (ใช้ได้ในอนาคต) */
    .btn-gold {
      display: inline-block;
      padding: 6px 14px;
      border-radius: 999px;
      background: #111;
      border: 1px solid #ffd27b;
      color: #ffd27b;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.03em;
      text-transform: uppercase;
    }

    .btn-gold:hover {
      background: #ffd27b;
      color: #111;
    }

    /* Badge จองแล้ว – สีทองอ่อน */
    .reserve-badge {
      display: inline-block;
      padding: 2px 10px;
      border-radius: 999px;
      background: #ffeecd;
      font-size: 14px;
      font-weight: 600;
      margin-left: 6px;
background: linear-gradient(135deg,#b3121d,#e63946);
  color: #fff;
    }

    .tag-free {
      display: inline-block;
      padding: 2px 10px;
      background: #fff2d6;
      border-radius: 12px;
      font-size: 12px;
      color: #b05b00;
      margin-left: 6px;
    }

    @media (max-width: 599px) {
      .page-container { padding-top: 18px; }
      .ber-list { grid-template-columns: 1fr; }
      .ber-number { font-size: 20px; }
      .ber-price  { font-size: 16px; }
    }

    /* ===== FOOTER เข้าชุด ===== */
    .site-footer {
      background: #1a0003;
      border-top: 1px solid #3c1111;
      color: #f5d8b0;
      padding: 14px 16px 20px;
      font-size: 13px;
    }

    .footer-container {
      max-width: 1100px;
      margin: 0 auto;
      text-align: center;
    }

    .footer-highlight {
      color: #ffd27b;
      font-weight: 600;
    }
	
	
/* ===== TABS พลังดาว แบบ 2 บรรทัด ===== */
.star-tabs {
  display: flex;
  flex-wrap: wrap;         /* ให้ขึ้นบรรทัดใหม่ได้ */
  gap: 10px;
  justify-content: center; /* จัดกึ่งกลาง */
  padding: 4px 4px 16px;
  margin-bottom: 4px;
}

.star-tab {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid #ffd27b;
  background: #300000;
  color: #ffe8b2;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: 0.2s;
}

.star-tab:hover {
  background: #ffd27b;
  color: #300000;
}

.star-tab.is-active {
  background: linear-gradient(135deg, #ffd27b, #f8b76b);
  color: #300000;
  box-shadow: 0 0 0 1px rgba(255,220,160,0.6),
              0 6px 14px rgba(0,0,0,0.35);
}


.star-info {
  text-align: center;
  margin-top: -9px;        /* ขยับขึ้นให้เกาะ TABS พลังดาว */
  margin-bottom: 22px;
  font-size: 14px;
  color: #ffe8b2;           /* ทองอ่อนร่วมชุด */
  opacity: 0.9;
}

#m {
  margin-top:-50px;
  padding-top:50px;
}

/* =============================
   BLOCK หัวหมวด (Section Header)
   ============================= */
.number_name {
  position: relative;
  max-width: 1180px;
  margin: 70px auto 35px;
  padding: 24px 20px 18px;
  
  text-align: center;
  color: #fff;

  /* กรอบทองอ่อน + พื้นหลังนุ่ม */
  background: rgba(255, 225, 190, 0.06);
  border: 1px solid rgba(245,188,113,0.35);
  border-radius: 16px;

  /* เงาเบา ๆ ให้ดูมีมิติ */
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
}

/* =============================
   เส้นทองบนหัวหมวด (accent)
   ============================= */
.number_name::before {
  content: "";
  position: absolute;
  top: -18px;
  left: 15%;
  right: 15%;
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0),
    rgba(245,188,113,0.75),
    rgba(0,0,0,0)
  );
  opacity: 0.9;
}

/* =============================
   ชื่อหมวด
   ============================= */
.number_name h1 {
  margin: 0 0 6px;
  font-size: 26px;
  font-weight: 700;
  color: #F5E3C5;      /* ทองอ่อนอ่านง่าย */
  letter-spacing: 0.04em;
}

/* =============================
   จำนวนเบอร์
   ============================= */
.number_name-count,
.number_name span {
  display: block;
  font-size: 18px;
  opacity: 0.9;
  margin-top: 2px;
}

/* anchor scroll offset */
.number_name {
  scroll-margin-top: 120px;
}