:root{
      /* โทนสดใสใกล้ต้นฉบับ + หรูขึ้น */
      --pink:#ff2fb3;
      --rose:#ff5ad6;
      --orange:#ff9a3c;
      --saffron:#ffd54a;
      --gold:#d9b35f;
      --violet:#7a2cff;
      --indigo:#4b2cff;
      --cyan:#00e5ff;
      --mint:#3cffd0;

      --ink:#23102f;
      --muted: rgba(35,16,47,.72);
      --bg1:#fff4fb;
      --bg2:#fff9f2;
      --bg3:#f3fbff;

      --card: rgba(255,255,255,.78);
      --glass: rgba(255,255,255,.64);
      --line: rgba(0,0,0,.06);

      --radius: 28px;
      --shadow: 0 26px 90px rgba(0,0,0,.14);
      --shadow2: 0 18px 50px rgba(0,0,0,.12);

      --max: 1180px;
      --navH: 78px;
    }

    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      font-family: Sora, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color: var(--ink);
      background:
        radial-gradient(900px 700px at 12% 0%, rgba(255,47,179,.22), transparent 55%),
        radial-gradient(900px 700px at 88% 10%, rgba(255,213,74,.20), transparent 55%),
        radial-gradient(900px 700px at 60% 100%, rgba(0,229,255,.16), transparent 60%),
        linear-gradient(180deg, var(--bg1), var(--bg2) 45%, var(--bg3) 100%);
      overflow-x:hidden;
    }
    body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(1200px 800px at 50% 0%, rgba(217,179,95,.12), transparent 60%),
    radial-gradient(1200px 900px at 20% 40%, rgba(255,47,179,.08), transparent 62%),
    radial-gradient(1200px 900px at 80% 40%, rgba(0,229,255,.06), transparent 62%),
    radial-gradient(1400px 1000px at 50% 100%, rgba(10,6,18,.08), transparent 70%);
  mix-blend-mode: multiply;
}
    a{ color:inherit; text-decoration:none; }
    img{ max-width:100%; display:block; }

    .container{
      width:min(var(--max), calc(100% - 40px));
      margin:0 auto;
    }

    /* ===== Nav (คล้ายโทนเดิมแต่หรูขึ้น) ===== */
    header{
      position: fixed;
      top:0; left:0; right:0;
      height: var(--navH);
      z-index: 60;
      backdrop-filter: blur(14px);
      background: linear-gradient(90deg,
        rgba(255,255,255,.70),
        rgba(255,255,255,.45),
        rgba(255,255,255,.70));
      border-bottom: 1px solid var(--line);
    }
    .nav{
      height: var(--navH);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
    }
    .brand{
      display:flex; align-items:center; gap: 12px;
      min-width: 240px;
    }
    .logo{
        width:46px; height:46px;
        /*border-radius:18px;*/
        background: url("../assets/intro/logo.png") center/cover no-repeat;
        box-shadow: 0 18px 40px rgba(122,44,255,.20),
                    0 12px 30px rgba(255,47,179,.16);
        overflow:hidden;
        }
        .logo:after{ display:none; } /* ถ้าไม่อยากให้มีกรอบซ้อน */
    /*.logo:after{
      content:"";
      position:absolute; inset: 9px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.55);
      box-shadow: inset 0 0 22px rgba(255,213,74,.35);
    }*/
    .brandTitle{
      font-family: Cinzel, serif;
      margin:0;
      font-size: 15px;
      letter-spacing: 1px;
      line-height: 1.1;
    }
    .brandSub{
      margin: 2px 0 0;
      font-size: 12px;
      opacity: .72;
    }

    .menu{
      display:flex;
      gap: 14px;
      align-items:center;
      justify-content:center;
      flex-wrap:wrap;
    }
    .menu a{
      font-weight: 500;
      font-size: 14px;
      padding: 10px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,.56);
      border: 1px solid var(--line);
      transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
    }
    .menu a:hover{
      transform: translateY(-1px);
      box-shadow: 0 14px 30px rgba(0,0,0,.10);
      background: rgba(255,255,255,.74);
    }

    .actions{
      display:flex; gap: 10px; align-items:center;
      min-width: 240px;
      justify-content:flex-end;
    }

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap: 10px;
      padding: 12px 14px;
      border-radius: 999px;
      font-weight: 900;
      font-size: 13px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.65);
      box-shadow: 0 16px 34px rgba(0,0,0,.10);
      transition: transform .15s ease, filter .15s ease;
      white-space: nowrap;
      cursor:pointer;
    }
    .btn:hover{ transform: translateY(-1px); filter: brightness(1.02); }
    .btn:active{ transform: translateY(0px); }

    .btnPrimary{
      color: #1b0a22;
      border: 1px solid rgba(0,0,0,.06);
      background:
        radial-gradient(18px 18px at 20% 30%, rgba(255,255,255,.9), transparent 65%),
        linear-gradient(135deg, var(--saffron), var(--orange), var(--rose));
    }

    .hamburger{
      display:none;
      width: 46px; height: 46px;
      border-radius: 18px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.70);
      font-weight: 900;
    }

    @media (max-width: 980px){
      .menu{ display:none; }
      .hamburger{ display:inline-flex; align-items:center; justify-content:center; }
      .brand, .actions{ min-width: unset; }
    }

    /* ===== Wave decorations (บน/ล่างแบบตัวอย่าง) ===== */
    .waveFrame{
      position:absolute;
      inset:0;
      pointer-events:none;
      z-index: 2;
      opacity: 1;
    }
    .waveTop, .waveBottom{
      position:absolute;
      left:0; right:0;
      height: 120px;
      filter: drop-shadow(0 18px 30px rgba(0,0,0,.12));
    }
    .waveTop{ top:0; transform: translateY(-1px); }
    .waveBottom{ bottom:0; transform: translateY(1px) rotate(180deg); }

    /* ===== HERO (เต็มจอ, เน้นภาพใหญ่) ===== */
    .hero{
      position:relative;
      min-height: 100vh;
      padding-top: var(--navH);
      overflow:hidden;
    }

    #glitter{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      pointer-events:none;
      z-index: 3;
      opacity:.85;
      mix-blend-mode: screen;
    }

    .orb{
      position:absolute;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      opacity: .9;
      z-index: 1;
      animation: floaty 7s ease-in-out infinite alternate;
      filter: blur(.2px);
    }
    .orb.one{
      left: -60px; top: 90px;
      background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.85), transparent 60%),
                  radial-gradient(circle at 60% 60%, rgba(255,47,179,.55), transparent 62%),
                  radial-gradient(circle at 40% 70%, rgba(122,44,255,.45), transparent 62%);
    }
    .orb.two{
      right: -80px; top: 150px;
      width: 260px; height: 260px;
      background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.85), transparent 60%),
                  radial-gradient(circle at 60% 50%, rgba(255,213,74,.55), transparent 62%),
                  radial-gradient(circle at 40% 70%, rgba(0,229,255,.40), transparent 62%);
      animation-duration: 8.5s;
    }
    .orb.three{
      left: 42%; bottom: -110px;
      width: 300px; height: 300px;
      background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.85), transparent 60%),
                  radial-gradient(circle at 60% 50%, rgba(255,154,60,.45), transparent 62%),
                  radial-gradient(circle at 40% 70%, rgba(63,255,208,.35), transparent 62%);
      animation-duration: 9.5s;
    }
    @keyframes floaty{
      from{ transform: translateY(0px) translateX(0px); }
      to{ transform: translateY(-30px) translateX(12px); }
    }

    .slider{
      position:absolute;
      inset:0;
      z-index: 0;
      overflow:hidden;
    }
    .slide{
      position:absolute;
      inset:0;
      opacity:0;
      transform: scale(1.07);
      transition: opacity .85s ease, transform 1.25s ease;
    }
    .slide.active{
      opacity:1;
      transform: scale(1.0);
    }
    .slide img, .slide video{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit: cover;
      filter: saturate(1.18) contrast(1.06);
    }

    .heroOverlay{
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.02),
      rgba(255,255,255,.60) 55%,
      rgba(255,255,255,.92));
}

    .heroContent{
      position: relative;
      z-index: 4;
      height: calc(100vh - var(--navH));
      min-height: 720px;
      display:flex;
      align-items:flex-end;
      padding: 36px 0 54px;
    }
    .heroGrid{
      display:grid;
      grid-template-columns: 1.15fr .85fr;
      gap: 18px;
      align-items:end;
    }
    @media (max-width: 980px){
      .heroGrid{ grid-template-columns: 1fr; }
      .heroContent{ padding-bottom: 66px; }
    }

    .pill{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding: 10px 14px;
      border-radius: 999px;
      background: rgba(255,255,255,.76);
      border: 1px solid var(--line);
      box-shadow: 0 18px 40px rgba(0,0,0,.10);
      font-weight: 900;
      letter-spacing: .2px;
      font-size: 12px;
      width: fit-content;
    }
    .pillDot{
      width: 9px; height: 9px;
      border-radius: 99px;
      background: linear-gradient(135deg, var(--pink), var(--violet), var(--cyan));
      box-shadow: 0 0 0 5px rgba(255,47,179,.12);
    }

    /* ===== HERO TITLE (Purple glow behind text, no black box) ===== */

.heroTitle{
  position: relative !important;
  z-index: 3 !important;
  color: #ffffff !important;

  /* ล้างทุกอย่างที่อาจสร้างขอบ */
  -webkit-text-stroke: 0 !important;

  outline: none !important;
  filter: none !important;

  /* เงาดำหนา + ใหญ่ เพื่อกินพื้นขาว */
  text-shadow:
    /* คมบาง */
    0 2px 0 rgba(0,0,0,.35),

    /* ดำชิดตัวอักษร */
    0 0 18px rgba(0,0,0,.95),
    0 0 36px rgba(0,0,0,.85),

    /* ดำกว้าง */
    0 0 70px rgba(0,0,0,.75),
    0 0 120px rgba(0,0,0,.65),
    0 0 200px rgba(0,0,0,.50);
}

/* “ม่วงคลุมหลังตัวอักษร” แบบเป็นออร่า ไม่ใช่กรอบ */
.heroTitle{
  font-family: Cinzel, serif !important;
  font-size: clamp(40px, 5.2vw, 78px) !important;
  line-height: 1.02 !important;
  letter-spacing: 1px !important;
  font-weight: 800 !important;
}

/* ชื่อห้อง “หลายสีเหมือนเดิม” */


.heroTitle::after{
  content:"";
  position:absolute;
  left:-48px;
  right:-48px;
  top:-24px;
  bottom:-24px;
  z-index:-1;
  pointer-events:none;

  background:
    radial-gradient(
      70% 85% at 45% 55%,
      rgba(0,0,0,.85),
      rgba(0,0,0,.45) 55%,
      rgba(0,0,0,0) 80%
    );

  filter: blur(24px);
}

    .heroSub{
      margin: 0 0 18px;
      font-size: 15px;
      line-height: 1.8;
      max-width: 70ch;
      color: rgba(35,16,47,.84);
      font-weight: 700;
    }

    .heroBtns{
      display:flex;
      gap: 12px;
      flex-wrap: wrap;
      align-items:center;
    }

    .btnBig{
      padding: 14px 18px;
      border-radius: 999px;
      font-weight: 900;
      border: 1px solid var(--line);
      box-shadow: 0 22px 48px rgba(0,0,0,.14);
      background: rgba(255,255,255,.74);
      transition: transform .15s ease;
      cursor:pointer;
    }
    .btnBig.primary{
      background: linear-gradient(135deg, var(--saffron), var(--orange), var(--rose));
    }
    .btnBig.fancy{
      background: linear-gradient(135deg, var(--cyan), var(--mint), #ffffff);
    }
    .btnBig:hover{ transform: translateY(-2px); }
    .btnBig:active{ transform: translateY(0); }

    /* right hero card */
    .heroCard{
      border-radius: calc(var(--radius) + 4px);
      background: rgba(255,255,255,.78);
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
      overflow:hidden;
      position: relative;
       width: 100%;      /* กำหนดความกว้างคงที่ */
        height: 250px;         /* ⭐ สำคัญ: ล็อกความสูง */
      /* margin-left: 20px; */
    }
   
    .heroCardTop{
      padding: 16px;
      background:
        radial-gradient(120px 120px at 20% 20%, rgba(255,255,255,.95), transparent 55%),
        linear-gradient(135deg, rgba(255,47,179,.20), rgba(122,44,255,.16), rgba(0,229,255,.14));
      border-bottom: 1px solid var(--line);
      height: 180px;
    }
    .heroCard{
        transform: translateY(-38px); /* ยกขึ้น */
    }
    .heroDots, .heroNav, .heroControls{
      position: relative;
      z-index: 6;
    }
    .heroBadges{
      display:flex; gap: 8px; flex-wrap:wrap;
      margin-bottom: 10px;
    }
    .badge{
      padding: 7px 10px;
      border-radius: 999px;
      font-weight: 900;
      font-size: 11px;
      background: rgba(255,255,255,.82);
      border: 1px solid var(--line);
      box-shadow: 0 14px 26px rgba(0,0,0,.10);
      user-select:none;
    }
    .badge.pink{ background: linear-gradient(135deg, rgba(255,47,179,.36), rgba(255,255,255,.88)); }
    .badge.gold{ background: linear-gradient(135deg, rgba(255,213,74,.48), rgba(255,255,255,.88)); }
    .badge.cyan{ background: linear-gradient(135deg, rgba(0,229,255,.34), rgba(255,255,255,.88)); }

    .heroCardTitle{
      margin: 0 0 6px;
      font-family: Cinzel, serif;
      letter-spacing: .7px;
      font-size: 18px;
    }
    .heroCardText{
      margin: 0;
      color: rgba(35,16,47,.82);
      line-height: 1.75;
      font-weight: 700;
      font-size: 13px;
    }
    .heroCardBottom{
      padding: 14px 16px 16px;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap: 10px;
    }
    .price{
      display:flex;
      flex-direction:column;
      gap: 2px;
    }
    .price b{
      font-size: 22px;
      letter-spacing: .2px;
    }
    .price span{
      font-size: 12px;
      opacity: .75;
      font-weight: 800;
    }

    /* slider UI */
    .sliderUI{
      position:absolute;
      left: 50%;
      bottom: 18px;
      transform: translateX(-50%);
      z-index: 6;
      display:flex;
      align-items:center;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,.78);
      border: 1px solid var(--line);
      box-shadow: 0 18px 40px rgba(0,0,0,.10);
    }
    .arrow{
      width: 42px; height: 42px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.86);
      font-weight: 900;
      cursor:pointer;
      box-shadow: 0 14px 28px rgba(0,0,0,.10);
    }
    .dots{ display:flex; gap: 10px; }
    .dot{
      width: 10px; height: 10px;
      border-radius: 99px;
      border: 1px solid rgba(0,0,0,.12);
      background: rgba(255,255,255,.80);
      cursor:pointer;
      transition: transform .12s ease;
    }
    .dot.active{
      transform: scale(1.22);
      background: linear-gradient(135deg, var(--pink), var(--violet), var(--cyan));
      border-color: rgba(255,47,179,.35);
    }

/* ===== Section BG: reset scene without hard blocks (no mid-section split) ===== */
section{
  position: relative;
  padding: 78px 0;
  overflow: hidden;

  /* base colors per section (override by class) */
  --base: #ffffff;                 /* สีฐาน (ไม่โปร่ง) */
  --g1: rgba(255,47,179,.10);      /* glow 1 */
  --g2: rgba(122,44,255,.08);      /* glow 2 */
  --g3: rgba(0,229,255,.07);       /* glow 3 */
  --pat: rgba(35,16,47,.08);       /* สีลาย (จางๆ) */

  background: var(--base);         /* สำคัญ: ให้มีพื้นหลังตลอด */
}

/* overlay: gradient + glow + pattern (ไม่ทำให้เห็น body) */
section::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;

  background:
    /* glow เวทมนต์ */
    radial-gradient(1100px 720px at 18% 12%, var(--g1), transparent 58%),
    radial-gradient(1100px 720px at 86% 16%, var(--g2), transparent 60%),
    radial-gradient(1200px 760px at 55% 112%, var(--g3), transparent 62%),

    /* gradient ของ section (ไม่จบด้วย transparent) */
    linear-gradient(180deg,
      rgba(255,255,255,.70) 0%,
      rgba(255,255,255,.52) 42%,
      rgba(255,255,255,.60) 100%),

    /* ลาย “เพชร” จางๆ แบบอินเดีย (ไม่ใช่เส้นตรงล้วน) */
    /*url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23000000' stroke-opacity='.08' stroke-width='1'%3E%3Cpath d='M60 10 L110 60 L60 110 L10 60 Z'/%3E%3Cpath d='M60 28 L92 60 L60 92 L28 60 Z'/%3E%3Ccircle cx='60' cy='60' r='3' fill='%23000000' fill-opacity='.06'/%3E%3C/g%3E%3C/svg%3E")*/
    ;

  /* ให้ลายดูเป็น “ผืนผ้า” */
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
  background-size: auto, auto, auto, auto, 180px 180px;

  mix-blend-mode: multiply;
  opacity: 1;
}

/* top soft separator ให้รู้ว่าเริ่มฉากใหม่ แต่ไม่แข็ง */
section::after{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: 56px;
  pointer-events:none;
  z-index:1;

  background:
    radial-gradient(60% 120% at 50% 0%,
      rgba(217,179,95,.30), transparent 60%),
    linear-gradient(90deg,
      transparent,
      rgba(255,47,179,.16),
      rgba(0,229,255,.10),
      rgba(217,179,95,.26),
      transparent),
    linear-gradient(180deg, rgba(255,255,255,.55), transparent);
  opacity:.95;

  mask-image: radial-gradient(90% 110% at 50% 0%, #000 48%, transparent 78%);
}


/* ใส่เส้นคั่นล่างด้วย (ใช้ shadow แทน element ใหม่) */
section{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(0,0,0,.03);
}

/* ทำให้หัวข้อดูเหมือนมี “ออร่า” แต่ไม่เป็นกล่อง */
.sectionHead{
  padding: 6px 0;           /* ไม่ทำเป็นการ์ด */
  background: transparent;  /* ย้ำว่าไม่เป็นบล็อค */
  border: 0;
  box-shadow: none;
  position: relative;
}
.sectionHead h2{
  font-family: Cinzel, serif;
  letter-spacing: .9px;
  position: relative;
}

.sectionHead h2::before{
  content:"ॐ";
  font-family: "Yatra One", system-ui;
  margin-right: 10px;
  font-size: 18px;
  color: rgba(217,179,95,.92);
  text-shadow: 0 14px 34px rgba(217,179,95,.18);
}

.sectionHead h2::after{
  content:"✦";
  margin-left: 10px;
  color: rgba(255,47,179,.60);
  text-shadow: 0 14px 34px rgba(255,47,179,.16);
}


/* ========= Soft section background reset (no hard blocks) ========= */
section{
  position: relative;
  padding: 78px 0;
  overflow: hidden;

  /* ค่าเริ่มต้น (ถ้า section ไหนไม่กำหนดเอง) */
  --s1: rgba(255,47,179,.10);  /* pink tint */
  --s2: rgba(122,44,255,.08);  /* violet tint */
  --s3: rgba(0,229,255,.07);   /* cyan tint */
  --paper: rgba(255,255,255,.66);
}



/* เส้นนำสายตาเบาๆ ด้านบน: ช่วยให้รู้ว่าเริ่ม section ใหม่ */
section::after{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: 26px;
  pointer-events:none;
  z-index:1;
  opacity: .9;

  background:
    /* เส้นไล่สีแบบเวทมนต์ */
    linear-gradient(90deg,
      transparent,
      rgba(217,179,95,.35),
      rgba(255,47,179,.18),
      rgba(0,229,255,.14),
      rgba(217,179,95,.35),
      transparent),
    /* highlight ขอบบน */
    linear-gradient(180deg,
  rgba(255,255,255,.70) 0%,
  rgba(255,255,255,.52) 42%,
  rgba(255,255,255,.60) 100%);
}

/* ให้คอนเทนต์อยู่เหนือพื้นหลัง */
section > .container{
  position: relative;
  z-index: 2;
}

/* Extra mandala layer (optional) */
section .magicPattern{
  position:absolute;
  inset:-12%;
  pointer-events:none;
  z-index:1;
  opacity:.22;
  mix-blend-mode:multiply;

  background:
    /* glow โทนทอง/ชมพู */
    radial-gradient(circle at 18% 30%, rgba(217,179,95,.22), transparent 45%),
    radial-gradient(circle at 82% 22%, rgba(255,47,179,.16), transparent 46%),
    radial-gradient(circle at 55% 88%, rgba(0,229,255,.10), transparent 52%),

    /* mandala/starburst กระจาย */
    /*url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.12' stroke-width='1'%3E%3Ccircle cx='130' cy='130' r='34'/%3E%3Ccircle cx='130' cy='130' r='56'/%3E%3Ccircle cx='130' cy='130' r='80'/%3E%3Cpath d='M130 22 L142 54 L176 54 L148 74 L160 108 L130 88 L100 108 L112 74 L84 54 L118 54 Z'/%3E%3Cpath d='M130 238 L118 206 L84 206 L112 186 L100 152 L130 172 L160 152 L148 186 L176 206 L142 206 Z'/%3E%3C/g%3E%3C/svg%3E"),*/

    /* paisley/ผ้าภารตะ (ลายหยดน้ำ) */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.10' stroke-width='1'%3E%3Cpath d='M86 52c28 2 44 24 44 46 0 24-18 44-42 44-22 0-40-16-40-38 0-18 12-32 26-36-4 10 2 24 18 26 18 2 26-14 20-26-6-14-18-16-26-16z'/%3E%3Cpath d='M160 148c-28-2-44-24-44-46 0-24 18-44 42-44 22 0 40 16 40 38 0 18-12 32-26 36 4-10-2-24-18-26-18-2-26 14-20 26 6 14 18 16 26 16z'/%3E%3C/g%3E%3C/svg%3E");

  background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat;
  background-size: auto, auto, auto, 320px 320px, 260px 260px;

  filter: blur(.15px);
}
/* ========= Section theme presets ========= */

/* ROOMS: ชมพู-ม่วง */
.sectionTheme-rooms{
  --base:#fff6fb;
  --g1: rgba(255,47,179,.14);
  --g2: rgba(122,44,255,.10);
  --g3: rgba(0,229,255,.06);
  background-attachment: fixed; background-repeat: no-repeat; background-size: cover;
}

.sectionTheme-pricing{
  --base:#fff9ef;
  --g1: rgba(255,213,74,.18);
  --g2: rgba(255,154,60,.12);
  --g3: rgba(217,179,95,.12);
}
.sectionTheme-gallery{
  --base:#f3fbff;
  --g1: rgba(0,229,255,.16);
  --g2: rgba(60,255,208,.10);
  --g3: rgba(122,44,255,.06);
}
.sectionTheme-news{
  --base:#f7f3ff;
  --g1: rgba(122,44,255,.14);
  --g2: rgba(255,47,179,.10);
  --g3: rgba(0,229,255,.06);
}
.sectionTheme-contact{
  --base:#fff7f0;
  --g1: rgba(217,179,95,.16);
  --g2: rgba(255,47,179,.10);
  --g3: rgba(0,229,255,.06);
}


/* แยกโทนเล็กน้อยให้แต่ละ section ไม่กลืนกัน แต่ยังเนียน */
#rooms::before  { opacity: .92; }
#pricing::before{ opacity: .92; filter: hue-rotate(10deg); }
#gallery::before{ opacity: .90; filter: hue-rotate(-8deg); }
#news::before   { opacity: .92; filter: hue-rotate(14deg); }
#contact::before{ opacity: .92; filter: hue-rotate(-14deg); }
    .sectionHead p{
      margin:0;
      max-width: 78ch;
      line-height: 1.75;
      font-weight: 700;
      color: var(--muted);
      font-size: 13px;
    }
    .divider{
      height: 1px;
      margin: 22px 0 0;
      background: linear-gradient(90deg, transparent, rgba(217,179,95,.70), transparent);
      position: relative;
    }
    .divider:after{
      content:"✦";
      position:absolute;
      left:50%;
      top:-10px;
      transform: translateX(-50%);
      color: rgba(217,179,95,.95);
      background: rgba(255,255,255,.92);
      padding: 0 10px;
      border-radius: 999px;
      border: 1px solid var(--line);
      box-shadow: 0 14px 24px rgba(0,0,0,.08);
    }

   /* .divider{
  height: 2px;
  margin: 26px 0 0;
  background: linear-gradient(90deg,
    transparent,
    rgba(217,179,95,.95),
    rgba(255,47,179,.35),
    rgba(0,229,255,.30),
    rgba(217,179,95,.95),
    transparent);
  position: relative;
  border-radius: 999px;
}

.divider:after{
  content:"ॐ";
  position:absolute;
  left:50%;
  top:-16px;
  transform: translateX(-50%);
  color: rgba(217,179,95,.98);
  background: rgba(255,255,255,.88);
  padding: 2px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 16px 30px rgba(0,0,0,.10);
  font-family: "Cinzel", serif;
}/*

    /* ===== ROOMS (การ์ดเกม+หรู) ===== */
    .toolbar{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap: 12px;
      margin: 10px 0 16px;
      flex-wrap: wrap;
    }
    .tabs{
      display:flex; gap: 10px; flex-wrap:wrap;
      background: rgba(255,255,255,.60);
      border: 1px solid var(--line);
      padding: 8px;
      border-radius: 999px;
      box-shadow: 0 16px 34px rgba(0,0,0,.08);
    }
    .tab{
      padding: 9px 12px;
      border-radius: 999px;
      font-weight: 900;
      font-size: 12px;
      border: 1px solid transparent;
      background: transparent;
      cursor:pointer;
      transition: transform .12s ease, background .12s ease;
    }
    .tab.active{
      background: linear-gradient(135deg, rgba(255,47,179,.22), rgba(122,44,255,.18), rgba(0,229,255,.16));
      border: 1px solid var(--line);
    }
    .tab:hover{ transform: translateY(-1px); }

    .search{
      display:flex; gap:10px; align-items:center;
      background: rgba(255,255,255,.60);
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 10px 12px;
      box-shadow: 0 16px 34px rgba(0,0,0,.08);
      min-width: min(420px, 100%);
    }
    .search input{
      border:0;
      outline:0;
      background: transparent;
      width:100%;
      font-weight: 700;
      color: var(--ink);
    }

    .roomsGrid{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }
    @media (max-width: 980px){
      .roomsGrid{ grid-template-columns: 1fr; }
      .search{ min-width: 100%; }
    }

    .roomCard{
      border-radius: var(--radius);
      overflow:hidden;
      background: rgba(255,255,255,.78);
      border: 1px solid var(--line);
      box-shadow: var(--shadow2);
      position:relative;
      transform-style: preserve-3d;
      transition: transform .18s ease, box-shadow .18s ease;
      cursor:pointer;
      isolation:isolate;
      color: #000;
      font-weight: 500;
    }
    .roomGlow{
      position:absolute;
      inset:-2px;
      border-radius: calc(var(--radius) + 2px);
      background: linear-gradient(135deg, var(--pink), var(--violet), var(--cyan), var(--saffron));
      opacity: .0;
      transition: opacity .18s ease;
      z-index:0;
      filter: blur(0px);
    }
    .roomCard:hover .roomGlow{ opacity: .85; }
    .roomInner{
      position:relative;
      z-index:1;
      border-radius: var(--radius);
      overflow:hidden;
      background: rgba(255,255,255,.90);
      margin: 2px;
    }

    .roomMedia{
      aspect-ratio: 16/10;
      position:relative;
      overflow:hidden;
    }
    .roomMedia img{
      width:100%;
      height:100%;
      object-fit: cover;
      transform: scale(1.04);
      transition: transform .25s ease;
      filter: saturate(1.18) contrast(1.05);

      object-position: center 45%; /* ปรับขึ้นลงได้ */
    }
    .roomCard:hover .roomMedia img{ transform: scale(1.12); }

    .roomOverlay{
      position:absolute;
      inset:0;
      background:
        linear-gradient(180deg, rgba(255,255,255,0) 38%, rgba(0,0,0,.58) 100%);
      display:flex;
      align-items:flex-end;
      padding: 14px;
    }

    .roomTags{
      position:absolute;
      top: 12px;
      left: 12px;
      display:flex;
      gap: 8px;
      flex-wrap:wrap;
      z-index:2;
    }
    .tag{
      padding: 7px 10px;
      border-radius: 999px;
      font-weight: 900;
      font-size: 11px;
      color: #1c0b2a;
      background: rgba(255,255,255,.90);
      border: 1px solid var(--line);
      box-shadow: 0 14px 24px rgba(0,0,0,.10);
    }
    .tag.hot{ background: linear-gradient(135deg, rgba(255,213,74,.95), rgba(255,255,255,.92)); }
    .tag.new{ background: linear-gradient(135deg, rgba(0,229,255,.82), rgba(255,255,255,.92)); }
    .tag.rare{ background: linear-gradient(135deg, rgba(255,47,179,.78), rgba(255,255,255,.92)); }

    /* shimmer */
    .shimmer{
      position:absolute;
      inset:-40%;
      background: linear-gradient(120deg,
        transparent 35%,
        rgba(255,255,255,.65) 48%,
        transparent 60%);
      transform: translateX(-40%) rotate(12deg);
      opacity: 0;
      pointer-events:none;
    }
    .roomCard:hover .shimmer{
      opacity: .75;
      animation: shimmerMove .9s ease forwards;
    }
    @keyframes shimmerMove{
      to{ transform: translateX(60%) rotate(12deg); }
    }

    .roomBody{ padding: 14px 14px 12px; }
    .roomName{ margin:0 0 6px; font-weight: 700; letter-spacing:.2px; }
    .roomDesc{
      margin:0 0 12px;
      color: rgba(35,16,47,.80);
      font-weight: 400;
      font-size: 15px;
      line-height: 1.7;
    }

    .stats{
      display:grid;
      gap: 10px;
      margin-bottom: 12px;
    }
    .statRow{
      display:grid;
      grid-template-columns: 120px 1fr 36px;
      gap: 10px;
      align-items:center;
      font-size: 12px;
      font-weight: 900;
      color: rgba(35,16,47,.74);
    }
    .bar{
      height: 9px;
      border-radius: 999px;
      background: rgba(0,0,0,.06);
      border: 1px solid var(--line);
      overflow:hidden;
    }
    .bar > i{
      display:block;
      height:100%;
      width: var(--w, 60%);
      background: linear-gradient(90deg, var(--pink), var(--violet), var(--cyan), var(--saffron));
      box-shadow: 0 0 18px rgba(122,44,255,.16);
    }

    .roomFooter{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
      padding: 12px 14px 14px;
      border-top: 1px solid var(--line);
      background: rgba(255,255,255,.74);
    }
    .miniPrice{ display:flex; flex-direction:column; gap:2px; font-weight: 900; }
    .miniPrice b{ font-size: 16px; }
    .miniPrice span{ font-size: 11px; opacity: .70; }

    /* ===== PRICING (สวยกว่าเดิม + ภาพใหญ่) ===== */
    .pricingGrid{
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }
    @media (max-width: 980px){ .pricingGrid{ grid-template-columns: 1fr; } }

    .priceCard{
      border-radius: var(--radius);
      overflow:hidden;
      background: rgba(255,255,255,.78);
      border: 1px solid var(--line);
      box-shadow: var(--shadow2);
      position:relative;
     
    }
    

.priceTop img{
  width:100%; height:100%;
  object-fit: cover;
  filter: saturate(1.18) contrast(1.05);
  transform: scale(1.05);
  transition: transform .25s ease;
}
.priceCard:hover .priceTop img{ transform: scale(1.12); }

/* ✅ ปรับเฟด: ด้านบนใส, เข้มเฉพาะใกล้ตัวหนังสือ */
.priceTop::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: 88px;            /* ✅ ความสูงกล่องเทา */
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.55) 100%
  );
  pointer-events:none;
}
@media (max-width:520px){
  .priceTop::after{ height: 72px; } /* ✅ มือถือเตี้ยลง */
}


/* ✅ ตัวหนังสือคมขึ้น + เงาที่อ่านง่าย */
.priceTitle{
  position:absolute;
  left: 14px; bottom: 14px;
  color: #fff;
  font-weight: 900;
  text-shadow:
    0 2px 10px rgba(0,0,0,.65),
    0 10px 30px rgba(0,0,0,.35);
     
}
.priceTitle b{ display:block; font-size: 18px; letter-spacing:.2px; }
.priceTitle span{ font-size: 12px; opacity: .95; }


    .priceBody{ padding: 14px; }
    .plist{
      margin:0; padding:0;
      list-style:none;
      display:grid;
      gap: 10px;
      font-weight: 700;
      color: rgba(35,16,47,.78);
      font-size: 12px;
      line-height: 1.6;
    }
    .plist li{
      display:flex; justify-content:space-between; gap: 10px;
      border-bottom: 1px dashed rgba(0,0,0,.08);
      padding-bottom: 8px;
    }
    .plist li:last-child{ border-bottom:0; padding-bottom:0; }
    .plist b{ color: rgba(35,16,47,.92); }
    .priceCTA{
      padding: 14px;
      border-top: 1px solid var(--line);
      background: rgba(255,255,255,.74);
      display:flex; justify-content:space-between; align-items:center; gap:10px;
    }

    /* ===== GALLERY (เน้นรูปใหญ่ชัด + masonry) ===== */
    .masonry{
      columns: 3 290px;
      column-gap: 16px;
    }
    @media (max-width: 980px){ .masonry{ columns: 1 300px; } }

    .shot{
      break-inside: avoid;
      margin: 0 0 16px;
      border-radius: var(--radius);
      overflow:hidden;
      background: rgba(255,255,255,.78);
      border: 1px solid var(--line);
      box-shadow: var(--shadow2);
      position:relative;
      cursor: zoom-in;
    }
    .shot img{
      width:100%;
      height:auto;
      filter: saturate(1.15) contrast(1.05);
      transform: scale(1.02);
      transition: transform .25s ease;
    }
    .shot:hover img{ transform: scale(1.06); }
    .shot:after{
      content:"";
      position:absolute; inset:0;
      background: linear-gradient(180deg, rgba(255,255,255,0) 60%, rgba(0,0,0,.55));
      pointer-events:none;
      opacity:.9;
    }
    .shotLabel{
      position:absolute;
      left: 14px;
      bottom: 12px;
      color: #fff;
      font-weight: 900;
      text-shadow: 0 18px 40px rgba(0,0,0,.35);
      font-size: 12px;
      opacity: .95;
    }

    /* ===== NEWS (ภาพประกอบได้/ไม่ได้) ===== */
    .newsGrid{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }
    @media (max-width: 980px){ .newsGrid{ grid-template-columns: 1fr; } }

    .newsCard{
      border-radius: var(--radius);
      overflow:hidden;
      background: rgba(255,255,255,.78);
      border: 1px solid var(--line);
      box-shadow: var(--shadow2);
      display:grid;
      grid-template-rows: auto 1fr auto;
      cursor:pointer;
    }
    .newsMedia{
      aspect-ratio: 16/10;
      background: linear-gradient(135deg, rgba(255,47,179,.22), rgba(122,44,255,.18), rgba(0,229,255,.16));
      position:relative;
      overflow:hidden;
    }
    .newsMedia img{
      width:100%; height:100%;
      object-fit: cover;
      filter: saturate(1.12) contrast(1.05);
      transform: scale(1.05);
      transition: transform .25s ease;
    }
    .newsCard:hover .newsMedia img{ transform: scale(1.12); }
    .newsBody{ padding: 14px; }
    .newsMeta{ font-size: 11px; font-weight: 900; color: rgba(35,16,47,.65); }
    .newsTitle{ margin: 8px 0 6px; font-weight: 900; letter-spacing:.2px; }
    .newsText{ margin:0; font-size: 13px; line-height: 1.7; font-weight: 700; color: rgba(35,16,47,.78); }
    .newsFoot{
      padding: 12px 14px 14px;
      border-top: 1px solid var(--line);
      background: rgba(255,255,255,.74);
      display:flex; justify-content:space-between; align-items:center;
      font-weight: 900;
      font-size: 12px;
    }

    /* ===== CONTACT (ภาพใหญ่ + CTA) ===== */
    .contactGrid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      align-items: stretch;
    }
    @media (max-width: 980px){ .contactGrid{ grid-template-columns: 1fr; } }

    .panel{
      border-radius: var(--radius);
      background: rgba(255,255,255,.78);
      border: 1px solid var(--line);
      box-shadow: var(--shadow2);
      overflow:hidden;
    }
    .panelTop{
      padding: 16px;
      background:
        radial-gradient(140px 140px at 20% 20%, rgba(255,255,255,.95), transparent 55%),
        linear-gradient(135deg, rgba(255,213,74,.22), rgba(255,47,179,.18), rgba(0,229,255,.14));
      border-bottom: 1px solid var(--line);
    }
    .panelTitle{
      margin: 0;
      font-family: Cinzel, serif;
      letter-spacing: .7px;
    }
    .panelText{
      margin: 8px 0 0;
    
      line-height: 2.75;
      font-weight: 300;
      font-size: 14px;
    }
    .panelBody{ padding: 14px; display:grid; gap: 10px; }

    .infoRow{
      display:flex; gap:10px; align-items:center;
      font-weight: 800;
      color: rgba(35,16,47,.82);
      font-size: 13px;
      background: rgba(255,255,255,.65);
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 10px 12px;
    }
    .ico{
      width: 34px; height: 34px;
      border-radius: 14px;
      background: linear-gradient(135deg, var(--pink), var(--violet), var(--cyan));
      box-shadow: 0 16px 30px rgba(122,44,255,.16);
      display:flex; align-items:center; justify-content:center;
      color:#fff; font-weight: 900;
      flex: 0 0 auto;
    }

    .map{
      aspect-ratio: 16/10;
      background: #eee;
    }
    .map iframe{ width:100%; height:100%; border:0; }

    /* ===== Modal (room detail) ===== */
    .modalBack{
      position:fixed;
      inset:0;
      display:none;
      align-items:center;
      justify-content:center;
      padding: 20px;
      z-index: 120;
      background: rgba(0,0,0,.30);
      backdrop-filter: blur(12px);
    }
    .modalBack.show{ display:flex; }

    .modal{
      width: min(1020px, 100%);
      border-radius: calc(var(--radius) + 6px);
      background: rgba(255,255,255,.92);
      border: 1px solid var(--line);
      box-shadow: 0 40px 120px rgba(0,0,0,.25);
      overflow:hidden;
      position:relative;
    }
    .modalClose{
      position:absolute;
      top: 10px; right: 10px;
      width: 46px; height: 46px;
      border-radius: 18px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.88);
      font-weight: 900;
      cursor:pointer;
      z-index:2;
    }
    .modalTop{
      display:grid;
      grid-template-columns: 1.1fr .9fr;
    }
    @media (max-width: 980px){ .modalTop{ grid-template-columns: 1fr; } }

    .modalImg{
      position:relative;
      min-height: 340px;
      background: #eee;
      overflow:hidden;
    }
    .modalImg img{
      position:absolute; inset:0;
      width:100%; height:100%;
      object-fit: cover;
      filter: saturate(1.2) contrast(1.05);

  object-position: center 45%; /* ปรับขึ้นลงได้ */
    }
    .modalImg:after{
      content:"";
      position:absolute; inset:0;
      background: linear-gradient(180deg, rgba(255,255,255,0), rgba(0,0,0,.35));
    }
    .modalInfo{ padding: 16px; }
    .modalInfo h3{
      margin:0 0 6px;
      font-family: Cinzel, serif;
      letter-spacing: .7px;
    }
    .modalInfo p{
      margin:0 0 12px;
      line-height: 1.75;
      font-weight: 700;
      color: rgba(35,16,47,.82);
      font-size: 13px;
    }
    .themeBar{
      height: 10px;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--pink), var(--violet), var(--cyan), var(--saffron));
      box-shadow: 0 16px 40px rgba(122,44,255,.16);
      border: 1px solid rgba(0,0,0,.06);
      margin: 12px 0 14px;
    }

    /* ===== Reveal animations ===== */
    .reveal{
      opacity: 0;
      transform: translateY(10px);
      transition: opacity .6s ease, transform .6s ease;
    }
    .reveal.show{
      opacity: 1;
      transform: translateY(0);
    }
    @media (prefers-reduced-motion: reduce){
      .slide{ transition:none; }
      .orb{ animation:none; }
      .roomCard, .btn, .btnBig{ transition:none; }
      .reveal{ transition:none; opacity:1; transform:none; }
    }

    footer{
  padding: 46px 0 70px;
  border-top: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.88);
  background:
    radial-gradient(900px 500px at 15% 0%, rgba(255,47,179,.22), transparent 60%),
    radial-gradient(900px 500px at 85% 0%, rgba(255,213,74,.22), transparent 60%),
    radial-gradient(900px 700px at 55% 120%, rgba(0,229,255,.18), transparent 65%),
    linear-gradient(180deg, rgba(20,8,28,1), rgba(10,6,18,1));
  position: relative;
  overflow:hidden;
}

/* ลายผ้า/ม่านเบาๆ ให้ footer */
footer::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.00) 0px,
      rgba(255,255,255,.03) 18px,
      rgba(0,0,0,.14) 36px
    );
  opacity:.35;
  pointer-events:none;
}

/* เส้นแสงคาถาด้านบน footer */
footer::after{
  content:"";
  position:absolute;
  left: 50%;
  top: -22px;
  transform: translateX(-50%);
  width: min(var(--max), calc(100% - 40px));
  height: 44px;
  background: radial-gradient(closest-side, rgba(217,179,95,.85), transparent 70%);
  filter: blur(2px);
  opacity: .95;
  pointer-events:none;
}

/* ===== Footer layout + typography ===== */
.footerInd{
  position: relative;
  overflow: hidden;
  padding: 110px 0 62px;
  color: rgba(255,255,255,.90);
  border-top: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(900px 520px at 18% 15%, rgba(255,47,179,.22), transparent 62%),
    radial-gradient(900px 520px at 82% 10%, rgba(0,229,255,.18), transparent 60%),
    radial-gradient(980px 620px at 50% 110%, rgba(217,179,95,.18), transparent 65%),
    linear-gradient(180deg, #210a2f 0%, #14081f 60%, #0b0614 100%);
}

/* waves */
.fWaves{
  position:absolute;
  top:0; left:0; right:0;
  height: 170px;
  pointer-events:none;
  opacity: .98;
}
.fWaves svg{ width:100%; height:100%; display:block; }
.fWaves .w1{ fill: rgba(255,255,255,.92); }
.fWaves .w2{ fill: rgba(255,47,179,.22); opacity:.92; }
.fWaves .w3{ fill: rgba(0,229,255,.14); opacity:.90; }

/* texture + “เส้นผ้า” */
.footerInd::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.55;
  background:
    radial-gradient(560px 360px at 15% 55%, rgba(255,47,179,.18), transparent 70%),
    radial-gradient(640px 420px at 85% 45%, rgba(0,229,255,.15), transparent 72%),
    radial-gradient(720px 440px at 50% 110%, rgba(217,179,95,.14), transparent 72%),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.00) 0px,
      rgba(255,255,255,.03) 16px,
      rgba(0,0,0,.18) 32px
    );
}

/* shimmer magic */
.footerInd::after{
  content:"";
  position:absolute;
  inset:-40% -30%;
  pointer-events:none;
  opacity:.20;
  background: linear-gradient(120deg,
    transparent 42%,
    rgba(255,255,255,.30) 50%,
    transparent 58%);
  transform: translateX(-20%) rotate(10deg);
  animation: footerShimmer 6.5s ease-in-out infinite;
}
@keyframes footerShimmer{
  0%{ transform: translateX(-25%) rotate(10deg); opacity:.08; }
  35%{ opacity:.22; }
  100%{ transform: translateX(25%) rotate(10deg); opacity:.08; }
}

/* logo */
.fTop{
  display:flex;
  justify-content:center;
  margin-bottom: 18px;
}
.fLogo{
  width: 120px;
  height: auto;
  filter:
    drop-shadow(0 22px 44px rgba(0,0,0,.35))
    drop-shadow(0 0 22px rgba(217,179,95,.22));
}

/* headings */
.fH{
  margin: 0 0 10px;
  font-family: Cinzel, serif;
  letter-spacing: 1.4px;
  font-size: 16px;
  color: rgba(255,255,255,.92);
}

/* top grid: 3 columns balanced */
.fGridTop{
  display:grid;
  grid-template-columns: 1.05fr .9fr 1.05fr;
  gap: 28px;
  align-items:start;
}
@media (max-width: 980px){
  .fGridTop{ grid-template-columns: 1fr; text-align:center; gap:18px; }
}

/* body text (ชัดขึ้น) */
.fText, .fContact{
  margin:0;
  font-family: Sora, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 650;
  line-height: 1.95;
  font-size: 13px;
  color: rgba(255,255,255,.78);
}

/* chip */
.fChip{
  margin-top: 14px;
  display:inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing:.2px;
  color: rgba(255,255,255,.90);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 45px rgba(0,0,0,.25);
}

/* center OPEN block */
.fCenter{ text-align:center; }
.fOpenTitle{
  font-family: Cinzel, serif;
  letter-spacing: 2.6px;
  font-size: 30px;
  color: rgba(255,255,255,.95);
  text-shadow: 0 20px 60px rgba(255,47,179,.18);
  margin-bottom: 6px;
}
.fOpenThai{
  font-weight: 800;
  opacity: .88;
  font-size: 13px;
}
.fOpenBig{
  margin-top: 6px;
  font-weight: 900;
  font-size: 20px;
  letter-spacing:.4px;
  color: rgba(217,179,95,.92);
  text-shadow: 0 18px 50px rgba(217,179,95,.10);
}

/* right align on desktop */
.fRight{ text-align:right; }
@media (max-width: 980px){ .fRight{ text-align:center; } }

/* ornament divider: เพิ่ม “ลวดลายเส้น” */
.fOrnament{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 14px;
  margin: 26px 0 18px;
  opacity: .95;
}
.fOrnament span{
  height: 1px;
  width: min(420px, 34vw);
  background: linear-gradient(90deg,
    transparent,
    rgba(217,179,95,.62),
    rgba(255,47,179,.18),
    rgba(0,229,255,.16),
    rgba(217,179,95,.62),
    transparent);
}
.fOrnament i{
  font-style: normal;
  color: rgba(217,179,95,.95);
  text-shadow: 0 16px 40px rgba(217,179,95,.18);
}

/* bottom visitors centered */
.fGridBottom{
  display:flex;
  justify-content:center;
}
.fVisitors{
  text-align:center;
  padding: 8px 10px;
}
.fVisitorsLabel{
  font-family: Cinzel, serif;
  letter-spacing: 2.6px;
  font-size: 14px;
  color: rgba(255,255,255,.86);
}
.fVisitorsNum{
  margin-top: 8px;
  font-size: clamp(38px, 5vw, 56px);
  letter-spacing: 6px;
  font-weight: 300;
  color: rgba(255,255,255,.92);
  text-shadow:
    0 22px 70px rgba(0,0,0,.45),
    0 0 26px rgba(0,229,255,.18),
    0 0 22px rgba(255,47,179,.14);
}

/* toTop button */
.fToTop{
  display:flex;
  align-items:center;
  justify-content:center;
  width: 46px; height: 46px;
  margin: 22px auto 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(16px 16px at 25% 25%, rgba(255,255,255,.35), transparent 60%),
    linear-gradient(135deg, rgba(255,47,179,.22), rgba(122,44,255,.20), rgba(0,229,255,.16));
  color: rgba(255,255,255,.92);
  font-weight: 900;
  cursor:pointer;
  box-shadow: 0 18px 44px rgba(0,0,0,.35);
  transition: transform .12s ease, filter .12s ease;
}
.fToTop:hover{ transform: translateY(-2px); filter: brightness(1.04); }
.fToTop:active{ transform: translateY(0); }

.fBottom{
  text-align:center;
  font-family: Sora, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 650;
  font-size: 12px;
  color: rgba(255,255,255,.70);
  margin-top: 6px;
}
.fStar{
  color: rgba(217,179,95,.92);
  text-shadow: 0 16px 40px rgba(217,179,95,.18);
  margin: 0 10px;
}

.footerInd .container{
  position: relative;
}
.footerInd .container::before{
  content:"";
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  top: 62px;
  width: min(var(--max), calc(100% - 40px));
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  opacity:.8;
  pointer-events:none;
}
/* quick box ให้เป็น glass เข้ม */
.quick{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 22px 70px rgba(0,0,0,.35);
}
.fBottom::before{
  content:"✦";
  margin-right: 10px;
  color: rgba(217,179,95,.92);
}
.fBottom::after{
  content:"✦";
  margin-left: 10px;
  color: rgba(217,179,95,.92);
}

.fine{ color: rgba(255,255,255,.78); }
    .footerGrid{
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap: 16px;
      align-items:start;
    }
    @media (max-width: 980px){ .footerGrid{ grid-template-columns: 1fr; } }
    .fine{
      font-weight: 700;
      opacity: .78;
      line-height: 1.75;
      font-size: 13px;
    }
    .quick{
      display:grid;
      gap: 10px;
      padding: 14px;
      border-radius: var(--radius);
      background: rgba(255,255,255,.72);
      border: 1px solid var(--line);
      box-shadow: 0 18px 40px rgba(0,0,0,.10);
    }

    /* =========================
       INTRO CURTAIN (เพิ่มใหม่)
       ========================= */
    #intro{
      position:fixed;
      inset:0;
      z-index:9999;
      display:grid;
      place-items:center;
      background:#000;
      overflow:hidden;
    }
    #intro.out{ animation:introFade .65s ease forwards; }
    @keyframes introFade{ to{ opacity:0; visibility:hidden; } }

    .introLogo{
      position:relative;
      z-index:3;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:10px;
      transform: translateZ(0);
      animation: logoIn .9s cubic-bezier(.2,.8,.2,1) forwards;
    }
    @keyframes logoIn{
      from{ opacity:0; transform: translateY(10px) scale(.92); filter: blur(6px); }
      to  { opacity:1; transform: translateY(0) scale(1); filter: blur(0); }
    }

    .introMark{
        width:220px; height:150px;
        border-radius:28px;
        background: url("../assets/intro/logo.png") center/cover no-repeat;
        box-shadow: 0 28px 90px rgba(122,44,255,.35),
                    0 20px 60px rgba(255,47,179,.20);
        overflow:hidden;
        }
        .introMark:after,
        .introMark:before{ display:none; } /* ปิดกรอบ/ชิมเมอร์ ถ้าไม่ต้องการ */

    /*.introMark{
      width:86px;
      height:86px;
      border-radius: 28px;
      position:relative;
      background:
        radial-gradient(24px 24px at 25% 25%, rgba(255,255,255,.9), transparent 60%),
        linear-gradient(135deg, var(--pink), var(--violet), var(--cyan));
      box-shadow:
        0 28px 90px rgba(122,44,255,.35),
        0 20px 60px rgba(255,47,179,.20);
      overflow:hidden;
    }
    .introMark:after{
      content:"";
      position:absolute;
      inset: 14px;
      border-radius: 22px;
      border: 1px solid rgba(255,255,255,.55);
      box-shadow: inset 0 0 30px rgba(255,213,74,.35);
    }
    .introMark:before{
      content:"";
      position:absolute;
      inset:-60%;
      background: linear-gradient(120deg,
        transparent 35%,
        rgba(255,255,255,.65) 48%,
        transparent 60%);
      transform: translateX(-40%) rotate(12deg);
      animation: logoShimmer 1.2s ease-in-out infinite;
      opacity:.85;
      mix-blend-mode: screen;
    }*/
    @keyframes logoShimmer{
      0%{ transform: translateX(-55%) rotate(12deg); opacity:.0; }
      25%{ opacity:.9; }
      100%{ transform: translateX(65%) rotate(12deg); opacity:.0; }
    }
    .introRing{
      position:absolute;
      inset:-18px;
      border-radius: 40px;
      border: 2px solid rgba(217,179,95,.65);
      filter: drop-shadow(0 0 20px rgba(217,179,95,.35));
      animation: ringPulse 1.4s ease-in-out infinite;
      opacity:.9;
    }
    @keyframes ringPulse{
      0%,100%{ transform: scale(1); opacity:.65; }
      50%{ transform: scale(1.06); opacity:1; }
    }
    .introText{
      color: rgba(255,255,255,.92);
      font-family: Cinzel, serif;
      letter-spacing:1.2px;
      font-size: 18px;
      text-shadow: 0 18px 60px rgba(255,47,179,.18);
    }
    .introSub{
      color: rgba(255,255,255,.70);
      font-weight: 700;
      font-size: 12px;
      letter-spacing:.4px;
    }

    .curtain{
  position:absolute;
  top:0;
  bottom:0;
  width:52%;
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  box-shadow: inset 0 0 80px rgba(0,0,0,.65);
}

.curtain.left, .curtain--left {
  left:0;
  background-image:
    radial-gradient(120px 300px at 20% 40%, rgba(255,255,255,.08), transparent 70%),
    url("../assets/images/curtains/curtain-left.png");
}

.curtain.right, .curtain--right{
  right:0;
  background-image:
    radial-gradient(180px 420px at 80% 60%, rgba(255,47,179,.10), transparent 70%),
    url("../assets/images/curtains/curtain-right.png");
}
    .curtain:after{
      content:"";
      position:absolute;
      inset:0;
      background: repeating-linear-gradient(
        90deg,
        rgba(255,255,255,.00) 0px,
        rgba(255,255,255,.02) 10px,
        rgba(0,0,0,.08) 20px
      );
      opacity:.55;
    }
    .curtainTie{
      position:absolute;
      left:50%;
      top:0;
      bottom:0;
      width:2px;
      transform: translateX(-50%);
      background: linear-gradient(180deg, transparent, rgba(217,179,95,.85), transparent);
      filter: drop-shadow(0 0 18px rgba(217,179,95,.35));
      opacity:.9;
      z-index:2;
    }

    #intro.open .curtain.left{ animation: curtainLeft 1.2s cubic-bezier(.2,.8,.2,1) forwards; }
    #intro.open .curtain.right{ animation: curtainRight 1.2s cubic-bezier(.2,.8,.2,1) forwards; }
    @keyframes curtainLeft{ to{ transform: translateX(-104%); } }
    @keyframes curtainRight{ to{ transform: translateX(104%); } }

    #intro.open .introLogo{ animation: logoOpen 1.2s cubic-bezier(.2,.8,.2,1) forwards; }
    @keyframes logoOpen{
      0%{ opacity:1; transform: scale(1); filter: blur(0); }
      55%{ opacity:1; transform: scale(1.05); filter: drop-shadow(0 0 26px rgba(255,213,74,.35)); }
      100%{ opacity:0; transform: scale(1.12); filter: blur(6px); }
    }

    @media (prefers-reduced-motion: reduce){
      #intro, #intro *{ animation:none !important; transition:none !important; }
      #intro{ display:none; }
    }

    /* =========================
   TAJ MAHAL REALM (GLOBAL)
   ========================= */

/* 1) ฟีลพระจันทร์+ทองทั้งเว็บ */
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(1200px 800px at 50% -10%,
      rgba(217,179,95,.20), transparent 62%),
    radial-gradient(900px 700px at 18% 18%,
      rgba(255,255,255,.18), transparent 62%),
    radial-gradient(900px 700px at 82% 22%,
      rgba(0,229,255,.10), transparent 65%),
    radial-gradient(1300px 900px at 50% 105%,
      rgba(10,6,18,.08), transparent 70%);
  mix-blend-mode: multiply;
}

/* =========================
   TAJ SECTION BACKGROUND
   ใช้กับ section ที่อยากให้เป็นทัชมาฮาล
   ========================= */
.sectionTheme-taj{
  --tajBase: #fff9f0; /* หินอ่อนอุ่นๆ */
  --tajGold: rgba(217,179,95,.22);
  --tajRose: rgba(255,47,179,.10);
  --tajMoon: rgba(0,229,255,.08);
  --tajInk: rgba(35,16,47,.10);

  background: var(--tajBase);
  position:relative;
  overflow:hidden;
}

/* ชั้นบรรยากาศ + ลายหินอ่อน + floral inlay */
.sectionTheme-taj::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;

  background:
    /* moon glow */
    radial-gradient(900px 650px at 70% 8%, rgba(255,255,255,.26), transparent 60%),
    radial-gradient(1000px 720px at 18% 18%, var(--tajGold), transparent 62%),
    radial-gradient(1100px 760px at 55% 112%, var(--tajMoon), transparent 66%),

    /* marble veins (หินอ่อน) */
    repeating-linear-gradient(
      115deg,
      rgba(0,0,0,.00) 0px,
      rgba(0,0,0,.012) 14px,
      rgba(255,255,255,.06) 28px,
      rgba(0,0,0,.00) 44px
    ),

    /* Mughal floral inlay (ลายดอกแบบฝังหิน) */
    /*url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.10' stroke-width='1'%3E%3Cpath d='M130 44c18 16 22 30 14 46-10 18-30 20-40 6-10-14-2-32 26-52z'/%3E%3Cpath d='M130 44c-18 16-22 30-14 46 10 18 30 20 40 6 10-14 2-32-26-52z'/%3E%3Cpath d='M70 152c26-10 44-6 52 12 10 20-4 38-24 34-18-4-22-22-28-46z'/%3E%3Cpath d='M190 152c-26-10-44-6-52 12-10 20 4 38 24 34 18-4 22-22 28-46z'/%3E%3Ccircle cx='130' cy='130' r='10'/%3E%3Ccircle cx='130' cy='130' r='56'/%3E%3C/g%3E%3C/svg%3E")*/
    ;

  background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat;
  background-size: auto, auto, auto, auto, 320px 320px;

  opacity: .95;
  mix-blend-mode: multiply;
}

/* 2) “Mughal Arch” ด้านบน ให้รู้สึกเริ่มฉากใหม่แบบทัชมาฮาล */
.sectionTheme-taj::after{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: 84px;
  z-index:1;
  pointer-events:none;

  background:
    /* แสงทองพาด */
    linear-gradient(90deg,
      transparent,
      rgba(217,179,95,.38),
      rgba(255,47,179,.14),
      rgba(0,229,255,.10),
      rgba(217,179,95,.38),
      transparent),
    /* arch highlight */
    radial-gradient(75% 120% at 50% 0%,
      rgba(217,179,95,.26), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.62), transparent);

  /* ทำรูปโค้งซุ้ม (mask) */
  -webkit-mask-image: radial-gradient(85% 130% at 50% 0%, #000 55%, transparent 78%);
  mask-image: radial-gradient(85% 130% at 50% 0%, #000 55%, transparent 78%);
}

/* 3) ทำหัวข้อให้เหมือนป้ายพิธีการหน้าวัง */
.sectionTheme-taj .sectionHead h2{
  position:relative;
  display:inline-block;
  padding: 10px 18px;
  border-radius: 999px;
  background:
    radial-gradient(20px 20px at 20% 30%, rgba(255,255,255,.75), transparent 62%),
    linear-gradient(135deg, rgba(217,179,95,.55), rgba(255,255,255,.25));
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 18px 46px rgba(0,0,0,.10);
}

.sectionTheme-taj .sectionHead h2::before{
  content:"✦";
  margin-right: 10px;
  color: rgba(217,179,95,.95);
  text-shadow: 0 16px 40px rgba(217,179,95,.18);
}

.sectionTheme-taj .sectionHead h2::after{
  content:"✦";
  margin-left: 10px;
  color: rgba(217,179,95,.95);
  text-shadow: 0 16px 40px rgba(217,179,95,.18);
}

/* 4) ทำให้การ์ดดู “หินอ่อน+ทอง” มากขึ้นนิด */
.sectionTheme-taj .roomInner,
.sectionTheme-taj .panel,
.sectionTheme-taj .priceCard,
.sectionTheme-taj .newsCard,
.sectionTheme-taj .shot{
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 22px 70px rgba(0,0,0,.12);
}

.sectionTheme-taj .roomGlow{
  background: linear-gradient(135deg,
    rgba(217,179,95,1),
    rgba(255,154,60,1),
    rgba(255,47,179,1),
    rgba(0,229,255,1));
}

/* กล่องซ้ายของ hero (กรอบแดงที่คุณวง) */
.heroLeft{
  position: relative;
  z-index: 5;
  display: inline-block; /* ทำให้เงาไม่ยาวทั้งคอลัมน์ */
}

/* เงาม่วงเป็นแผ่นอยู่ "ข้างหลัง" กล่องซ้ายทั้งหมด */
.heroLeft::before{
  content:"";
  position:absolute;
  left: -26px;
  right: -26px;
  top: -20px;
  bottom: -26px;          /* ครอบคลุมลงล่างถึงปุ่ม */
  z-index: -1;
  pointer-events:none;

  /* ใส่ให้ดูเหมือน aura/เวทย์มนต์ */
  background:
    radial-gradient(closest-side at 18% 25%,
      rgba(122,44,255,.70), rgba(122,44,255,0) 70%),
    radial-gradient(closest-side at 55% 45%,
      rgba(255,47,179,.32), rgba(255,47,179,0) 72%),
    radial-gradient(closest-side at 75% 70%,
      rgba(0,229,255,.18), rgba(0,229,255,0) 76%),
    linear-gradient(180deg,
      rgba(10,6,18,.78) 0%,
      rgba(10,6,18,.55) 55%,
      rgba(10,6,18,0) 100%);

  border-radius: 28px;
  filter: blur(0px);
  opacity: 0;

  /* ทำให้มัน “กลืนกับรูป” แบบเงาเวท */
  mix-blend-mode: multiply;
}

/* ตัวอักษร Hero (คงฟอนต์เดิมทั้งหมด) */
.heroTitle{
  color: rgba(255,255,255,.96); /* ตัวอักษรสว่าง */
  position: relative;

  /* ออร่าสีม่วงที่แผ่ออกมาจากตัวอักษร */
  text-shadow:
    /* เงาคมบาง ๆ ช่วยให้อ่านชัด */
    0 2px 0 rgba(0,0,0,.35),

    /* ออร่าสีม่วงหลัก */
    0 0 18px rgba(122,44,255,.95),
    0 0 36px rgba(122,44,255,.75),
    0 0 64px rgba(122,44,255,.55),
    0 0 110px rgba(122,44,255,.40),

    /* โทนเวทมนต์เสริม */
    0 0 40px rgba(255,47,179,.35),
    0 0 28px rgba(0,229,255,.20);
}

/* คำหลัก (เช่นชื่อห้อง) ให้แรงขึ้นอีกนิด */
.heroTitle span{
  color: rgba(255,255,255,.98);
  text-shadow:
    0 2px 0 rgba(0,0,0,.35),
    0 0 22px rgba(122,44,255,.98),
    0 0 48px rgba(122,44,255,.80),
    0 0 92px rgba(122,44,255,.55);
}

/* คำอธิบายใต้หัวข้อ */
.heroSub{
  color: rgba(255,255,255,.88);
  text-shadow:
    0 2px 0 rgba(0,0,0,.30),
    0 0 26px rgba(122,44,255,.45),
    0 0 56px rgba(122,44,255,.30);
}

/* เอากรอบ/ขอบดำที่เหมือนกรอบรอบ hero ออก */
/* กัน overlay/กรอบ/สโตรคที่หลงเหลือ */
.heroContent, .heroGrid, .heroGrid > div{
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

/* กล่องซ้ายของ hero (ให้ aura คลุมเฉพาะฝั่งข้อความ) */
.heroLeft{
  position: relative;
  z-index: 5;
  display: inline-block;
}

/* aura หลังกล่องซ้าย (ม่วงเข้มเกือบดำ) */
.heroLeft::before{
  content:"";
  position:absolute;
  left:-28px;
  right:-28px;
  top:-22px;
  bottom:-26px;
  z-index:-1;
  pointer-events:none;
  border-radius: 28px;

  background:
    radial-gradient(closest-side at 18% 25%,
      rgba(60,20,110,.92), rgba(60,20,110,0) 72%),
    radial-gradient(closest-side at 55% 45%,
      rgba(40,10,80,.70), rgba(40,10,80,0) 74%),
    radial-gradient(closest-side at 75% 70%,
      rgba(0,229,255,.12), rgba(0,229,255,0) 78%),
    linear-gradient(180deg,
      rgba(8,5,14,.86) 0%,
      rgba(8,5,14,.58) 55%,
      rgba(8,5,14,0) 100%);

  opacity: 0;
  mix-blend-mode: multiply;
}

/* Title base */
.heroTitle{
  font-family: Cinzel, serif !important;
  font-size: clamp(40px, 5.2vw, 78px) !important;
  line-height: 1.02 !important;
  letter-spacing: 1px !important;
  font-weight: 800 !important;

  color: rgba(255,255,255,.96) !important;

  -webkit-text-stroke: 0 !important;
  outline: none !important;
  filter: none !important;

  /* เงาให้อ่านชัด */
  text-shadow:
    0 2px 0 rgba(0,0,0,.35),
    0 10px 28px rgba(0,0,0,.55),
    0 0 26px rgba(40,10,80,.55);
}

/* ชื่อห้อง: สีหลายสี + shimmer วิ่งบนตัวอักษรเท่านั้น */
#heroWorld{
  position: relative;
  display: inline-block;

  /* ซ่อนตัวอักษรจริง ไม่ให้เป็นตัวแสดงผล */
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;

  /* กันเงาดำที่เคยทับ */
  text-shadow: none !important;
}

/* ===== Base gradient text (ตัวหลัก) ===== */
#heroWorld::before{
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;

  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;

  background: linear-gradient(90deg, var(--pink), var(--violet), var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  /* เงาอ่านชัดแบบเบา ๆ (ไม่ดำทับ) */
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.25))
          drop-shadow(0 10px 26px rgba(0,0,0,.35));
}

/* ===== Shimmer layer (วิบวับวิ่งบนตัวอักษร) ===== */
#heroWorld::after{
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;

  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;

  background: linear-gradient(
    110deg,
    rgba(255,255,255,0) 40%,
    rgba(255,255,255,.95) 50%,
    rgba(255,255,255,0) 60%
  );
  background-size: 220% 100%;
  background-position: -120% 0;

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  mix-blend-mode: screen;  /* ให้เป็น “แสง” */
  opacity: .95;

  filter: drop-shadow(0 0 10px rgba(255,255,255,.30))
          drop-shadow(0 0 18px rgba(120,40,255,.18));

  animation: heroShimmer 2.2s ease-in-out infinite;
}

@keyframes heroShimmer{
  0%   { background-position: -120% 0; opacity: .75; }
  50%  { opacity: 1; }
  100% { background-position: 120% 0; opacity: .75; }
}


/* Sub text ให้อ่านง่าย */
.heroSub{
  color: rgba(255,255,255,.88) !important;
  text-shadow:
    0 2px 0 rgba(0,0,0,.30),
    0 0 22px rgba(40,10,80,.45),
    0 0 56px rgba(8,5,14,.35);
}

/* ทำให้คำว่า "Enter the" เล็กลง */
.heroTitle{
  font-size: clamp(40px, 5.2vw, 78px);
}

.heroTitle::first-line{
  font-size: 0.5em;
}

/* คำขึ้นต้น */
.heroLead{
  display:block;
  font-size: .65em;
  font-weight: 600;
  letter-spacing: .08em;
  opacity: .9;
  margin-bottom: .15em;
}

/* ชื่อห้องภาษาไทย (ของเดิมคุณสวยอยู่แล้ว) */
.heroRoomTH{
  display:block;
  line-height: 1.05;
}

/* ชื่อห้องภาษาอังกฤษ (บรรทัดเล็กด้านล่าง) */
.heroRoomEN{
  display:block;
  margin-top: .25em;

  font-size: .42em;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;

  color: #ffffff; /* ขาวล้วน */

  text-shadow:
    0 2px 6px rgba(0,0,0,.55),
    0 0 18px rgba(0,0,0,.45);
}
.heroRoomEN{
  font-family: Cinzel, serif;
}

.heroRoomTH,
.heroRoomEN{
  transition: opacity .35s ease, transform .35s ease;
}

.heroChanging .heroRoomTH,
.heroChanging .heroRoomEN{
  opacity: 0;
  transform: translateY(4px);
}

/* 1) Gradient ให้มีผลเฉพาะชื่อห้องไทย (#heroWorld) เท่านั้น */
#heroWorld{
  background: linear-gradient(90deg, var(--pink), var(--violet), var(--cyan)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* 2) อังกฤษ (#heroWorldEN) บังคับให้ “ขาวจริง” และปิด clip/gradient ให้หมด */
#heroWorldEN{
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;

  color: #fff !important;
  -webkit-text-fill-color: #fff !important;

  /* กันเผื่อมี rule อื่นทำให้โปร่งใส */
  opacity: 1 !important;

  text-shadow:
    0 2px 6px rgba(0,0,0,.55),
    0 0 18px rgba(0,0,0,.45) !important;
}

.actions{ position: relative; } /* ให้ dropdown อิงตำแหน่งได้ */

.menuDrop{
  position: absolute;
  top: 52px;           /* ปรับตามความสูง header ของคุณ */
  right: 0;
  width: 220px;

  background: rgba(255,255,255,.90);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 16px;
  box-shadow: 0 18px 60px rgba(0,0,0,.18);
  backdrop-filter: blur(12px);

  padding: 10px;
  display: none;
  z-index: 9999;
}

.menuDrop a{
  display:block;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
  color: #111;
  font-weight: 700;
}

.menuDrop a:hover{
  background: rgba(122,44,255,.10);
}

.menuDrop.open{ display:block; }


/*header{
  position: sticky;    
  top: 0;
  z-index: 999999;     
} */

header, header *{
  pointer-events: auto; /* บังคับให้คลิกได้ */
}

/* พวกนี้ต้องห้ามรับคลิก */
body::before,
body::after,
.heroOverlay,
.waveTop,
.waveBottom,
#glitter{
  pointer-events: none !important;
}

.actions{ position: relative !important; }

#menuDrop{
  position: absolute !important;
  top: 52px !important;
  right: 0 !important;
  width: 220px !important;

  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.18) !important;
  backdrop-filter: blur(12px) !important;

  padding: 10px !important;
  z-index: 999999 !important;

  /* ซ่อนแบบนุ่ม */
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-6px) scale(.98) !important;
  transition: .18s ease !important;
}

#menuDrop.open{
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) scale(1) !important;
}

#menuDrop a{
  display:block;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration:none;
  color:#111;
  font-weight:700;
}
#menuDrop a:hover{ background: rgba(122,44,255,.10); }

/* ทำให้ priceTop เป็นกรอบสำหรับ overlay/text/badge */
.priceTop{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
}

/* ภาพ */
.priceTop img{
  width: 100%;
  height: 160px;          /* ปรับได้ให้ทุกการ์ดเท่ากัน */
  object-fit: cover;
  display: block;
}

/* overlay ดำบาง ๆ ให้ตัวอักษรอ่านง่าย */
.priceOverlay{
  position:absolute;
  inset:0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.35) 0%,
    rgba(0,0,0,.18) 45%,
    rgba(0,0,0,.60) 100%
  );
  pointer-events:none;
}

/* ตัวอักษรบนรูป (ทำให้ “ขาวคม” + เงา) */
.priceTitle{
  position:absolute;
  left: 14px;
  bottom: 14px;

  z-index: 2;
  color:#fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.7), 0 1px 0 rgba(0,0,0,.5);
}

.priceTitle b{
  display:block;
  font-weight: 900;
  letter-spacing: .5px;
  font-size: 18px;
  
}

.priceTitle span{
  display:block;
  margin-top: 2px;
  font-weight: 700;
  font-size: 12px;
  opacity: .95;
 
}

/* ⭐ ราคาเริ่มต้นมุมขวาล่าง (ตำแหน่งลูกศร) */
.priceBadge{
  position:absolute;
  right: 12px;
  bottom: 12px;
  z-index: 3;

  padding: 10px 12px;
  border-radius: 14px;
  text-align:center;
  line-height: 1.05;

  color:#1b0a2a;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);

  font-weight: 800;
  font-size: 12px;
}

.priceBadge b{
  display:block;
  margin-top: 4px;
  font-size: 22px;
  font-weight: 900;
}

.priceTagline{
  display:block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 600;
  opacity: .92;
  letter-spacing: .3px;

  /* เงาเบา ๆ ให้คม */
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
  color: #e8dcff;
}

/* FORCE override: ทำให้แถบเทา (overlay) เตี้ยลง */
.priceCard .priceTop{ position:relative; overflow:hidden; }

.priceCard .priceTop::after{
  content:"" !important;
  position:absolute !important;

  /* สำคัญ: ยกเลิก inset:0 ที่อาจยังถูกใช้ */
  inset:auto !important;

  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  top:auto !important;

  height: 70% !important; /* ✅ ปรับเตี้ยลงได้อีก: 28% / 24% */

  background: linear-gradient(
    180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.18) 60%,
    rgba(0,0,0,.62) 100%
  ) !important;

  pointer-events:none !important;
}

/* กล่องแคปชั่นทับบนรูป */
.roomCaption{
  position:absolute;
  left:16px;
  bottom:14px;
  z-index:3;
  max-width: calc(100% - 32px);
  color:#fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.75);
  line-height: 1.05;
}

/* ชื่อไทยตัวใหญ่ */
.roomNameTH{
  font-weight: 900;
  font-size: 22px;
  letter-spacing: .2px;
}

/* อังกฤษตัวเล็กกว่า */
.roomNameEN{
  margin-top: 4px;
  font-weight: 700;
  font-size: 13px;
  opacity: .92;
  letter-spacing: .3px;
}

/* มือถือปรับให้ไม่ล้น */
@media (max-width:520px){
  .roomNameTH{ font-size: 18px; }
  .roomNameEN{ font-size: 12px; }
}

/* แนะนำ: ทำแถบไล่ดำด้านล่างให้ตัวหนังสืออ่านชัด */
.roomCard .thumb::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: 42%;
  background: linear-gradient(180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.65) 100%
  );
  pointer-events:none;
  z-index:2;
}

/* ====== MODAL ROOM TYPO (กระทบแค่ใน modal) ====== */
#modalBack .modalTitle{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:baseline;
  margin: 6px 0 8px;
}

#modalBack .modalTitle .mTitleTH{
   font-family:"Sora", "Inter", system-ui, sans-serif;/* ไทยอ่านสวย */
  font-weight: 800;
  font-size: clamp(24px, 2.4vw, 30px);          /* ไทยตัวใหญ่ขึ้น */
  letter-spacing: .2px;
  line-height: 1.15;
}

#modalBack #modalTitle .mTitleEN{
  font-family:"Sora", "Inter", system-ui, sans-serif; /* ดูโมเดิร์น อ่านง่าย */
  font-weight:600;
  font-size: 12px;           /* เล็กลงชัดเจน */
  line-height:1.2;
  opacity:.75;
  letter-spacing:.8px;
  text-transform: uppercase; /* ให้ดูพรีเมียมขึ้น */
}

/* รายละเอียดให้ใหญ่ขึ้นอ่านง่าย */
#modalBack #modalDesc{
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.7;
}

/* =========================
   MODAL NAV (prev/next)
   ========================= */
.modalNav{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 54px;
  height: 54px;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.88);
  font-weight: 900;
  font-size: 28px;
  cursor: pointer;
  z-index: 3;
  box-shadow: 0 18px 60px rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
  transition: transform .12s ease, filter .12s ease, opacity .12s ease;
}
.modalNav:hover{
  filter: brightness(1.03);
  transform: translateY(-50%) scale(1.03);
}
.modalNav:active{
  transform: translateY(-50%) scale(0.98);
}
.modalNav.prev{ left: 12px; }
.modalNav.next{ right: 12px; }

@media (max-width: 980px){
  .modalNav{
    width: 48px;
    height: 48px;
    border-radius: 16px;
    font-size: 26px;
  }
}

/* กันปุ่มทับเนื้อหา (optional) */
.modal{ position: relative; }


/* =========================
   FANTASY SECTION BACKGROUNDS (SAFE / SCOPED)
   ใช้ได้กับทุก section โดยไม่ชนของเดิม
   ========================= */
:root{
  --ji-bg: #fff8f0;
  --ji-ink: #2b1c34;

  --ji-pink: #ff2fb3;
  --ji-rose: #ff5ad6;
  --ji-orange: #ff9a3c;
  --ji-gold: #ffd54a;
  --ji-violet: #7a2cff;
  --ji-indigo: #4b2cff;
  --ji-cyan: #00e5ff;
  --ji-mint: #3cffb3;
}

/* ใช้เป็น base ของบล็อก */
.ji-fantasy-block{
  position: relative;
  isolation: isolate; /* สำคัญ! แยก layer ไม่ให้ไปทับ section อื่น */
  padding: 44px 0;
  overflow: hidden;
  background: var(--ji-bg);
}

/* เส้นกรอบบางๆ ไล่สีบน/ล่าง (ช่วยให้ section ดูมีมิติทันที) */
.ji-fantasy-block::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    linear-gradient(to bottom,
      rgba(255,47,179,.18),
      transparent 35%,
      transparent 65%,
      rgba(0,229,255,.12)
    );
  opacity: .55;
}

/* Layer รูปวงเวท + แสงฟุ้ง */
.ji-fantasy-block::after{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(900px 520px at 15% 20%, rgba(255,90,214,.18), transparent 55%),
    radial-gradient(820px 480px at 85% 25%, rgba(0,229,255,.12), transparent 55%),
    radial-gradient(780px 520px at 50% 110%, rgba(122,44,255,.14), transparent 55%),
    radial-gradient(circle at 25% 65%, rgba(255,213,74,.10), transparent 45%),
    radial-gradient(circle at 80% 72%, rgba(60,255,179,.08), transparent 46%);
  filter: blur(0px);
  opacity: .9;
}

/* ทำให้ content อยู่เหนือ background */
.ji-fantasy-block > *{
  position: relative;
  z-index: 1;
}

/* ====== Sparkles (ดาววิ้ง) แบบเบาเครื่อง ====== */
.ji-sparkles{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.45;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.9) 0 1px, transparent 2px),
    radial-gradient(circle at 26% 34%, rgba(255,255,255,.8) 0 1px, transparent 2px),
    radial-gradient(circle at 44% 22%, rgba(255,255,255,.7) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 28%, rgba(255,255,255,.9) 0 1px, transparent 2px),
    radial-gradient(circle at 86% 18%, rgba(255,255,255,.7) 0 1px, transparent 2px),
    radial-gradient(circle at 16% 72%, rgba(255,255,255,.7) 0 1px, transparent 2px),
    radial-gradient(circle at 52% 78%, rgba(255,255,255,.8) 0 1px, transparent 2px),
    radial-gradient(circle at 80% 82%, rgba(255,255,255,.9) 0 1px, transparent 2px);
  mix-blend-mode: screen;
  filter: blur(.2px);
}

/* ====== วงแหวนเวท (Magic Rings) ====== */
.ji-magic-rings{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.6;
  background:
    radial-gradient(circle at 18% 35%, transparent 0 120px, rgba(255,47,179,.20) 121px 122px, transparent 123px),
    radial-gradient(circle at 18% 35%, transparent 0 170px, rgba(255,213,74,.14) 171px 172px, transparent 173px),
    radial-gradient(circle at 80% 55%, transparent 0 150px, rgba(0,229,255,.14) 151px 152px, transparent 153px),
    radial-gradient(circle at 80% 55%, transparent 0 220px, rgba(122,44,255,.14) 221px 222px, transparent 223px);
}

/* ====== รูปแบบ Section ที่เน้น “แฟนตาซีหรู” (เพิ่ม texture เบาๆ) ====== */
.ji-fantasy-lux{
  background:
    radial-gradient(900px 600px at 25% 10%, rgba(255,90,214,.14), transparent 60%),
    radial-gradient(850px 520px at 85% 20%, rgba(0,229,255,.10), transparent 60%),
    linear-gradient(180deg, #fff7f1, #fffdfb);
}

/* divider ระหว่าง section แบบเส้นโค้งนุ่มๆ */
.ji-section-divider{
  height: 22px;
  width: min(1180px, calc(100% - 36px));
  margin: 18px auto -6px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(255,47,179,.18),
    rgba(255,154,60,.12),
    rgba(255,213,74,.15),
    rgba(0,229,255,.12),
    rgba(122,44,255,.14)
  );
  filter: blur(.2px);
  opacity:.7;
}

/* ===== Base Block ===== */
.ji-block{
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  padding: clamp(18px, 2.2vw, 28px);
  margin: clamp(18px, 2.4vw, 34px) auto;
  box-shadow:
    0 18px 60px rgba(18, 10, 40, .10),
    inset 0 1px 0 rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.55);
}

.ji-bg{
  position:absolute; inset:-40%;
  pointer-events:none;
  z-index:0;
  opacity:.9;
  filter: blur(0px);
  transform: translateZ(0);
}

.ji-block > *:not(.ji-bg){
  position: relative;
  z-index: 1;
}

/* ===== THEME 1: ROOMS = Royal / Lux (ชมพูทอง-ม่วง) ===== */
.ji-theme-royal{
  background:
    radial-gradient(900px 380px at 18% 10%, rgba(255,80,210,.20), transparent 60%),
    radial-gradient(700px 360px at 88% 18%, rgba(255,205,90,.20), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
}

.ji-bg-rings{
  background:
    radial-gradient(circle at 28% 22%, rgba(255,205,90,.28) 0 10%, transparent 11% 100%),
    radial-gradient(circle at 28% 22%, rgba(255,80,210,.20) 0 18%, transparent 19% 100%),
    radial-gradient(circle at 72% 42%, rgba(122,44,255,.18) 0 12%, transparent 13% 100%),
    radial-gradient(circle at 72% 42%, rgba(255,205,90,.14) 0 22%, transparent 23% 100%);
  opacity:.85;
}

.ji-bg-sparkles{
  background:
    radial-gradient(2px 2px at 18% 24%, rgba(255,255,255,.95), transparent 60%),
    radial-gradient(2px 2px at 30% 62%, rgba(255,255,255,.85), transparent 60%),
    radial-gradient(2px 2px at 60% 30%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(2px 2px at 78% 58%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(2px 2px at 88% 26%, rgba(255,255,255,.85), transparent 60%);
  opacity:.55;
}
.ji-bg-sparkles.soft{ opacity:.30; }

/* ===== THEME 2: GALLERY = Aurora / Dreamy (ฟ้า-ม่วง-มิ้นท์) ===== */
.ji-theme-aurora{
  background:
    radial-gradient(900px 420px at 20% 15%, rgba(0,229,255,.18), transparent 60%),
    radial-gradient(900px 420px at 80% 25%, rgba(122,44,255,.14), transparent 62%),
    radial-gradient(700px 420px at 60% 90%, rgba(60,255,200,.14), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.80));
}

.ji-bg-aurora{
  background:
    conic-gradient(from 200deg at 50% 50%,
      rgba(0,229,255,.00),
      rgba(0,229,255,.18),
      rgba(122,44,255,.14),
      rgba(60,255,200,.14),
      rgba(0,229,255,.00)
    );
  filter: blur(26px);
  opacity:.70;
  animation: jiAurora 10s ease-in-out infinite alternate;
}
@keyframes jiAurora{
  from{ transform: translate(-2%, -2%) rotate(-6deg) scale(1.02); }
  to{ transform: translate(2%, 1%) rotate(6deg) scale(1.08); }
}

/* ===== THEME 3: NEWS = Parchment / Magic Letter (กระดาษ-ตราประทับ) ===== */
.ji-theme-parchment{
  background:
    radial-gradient(900px 420px at 20% 10%, rgba(255,180,90,.16), transparent 62%),
    radial-gradient(900px 420px at 85% 20%, rgba(255,80,210,.10), transparent 62%),
    linear-gradient(180deg, rgba(255,252,246,.92), rgba(255,245,230,.82));
  border: 1px solid rgba(220,160,90,.35);
}

.ji-bg-paper{
  background:
    repeating-linear-gradient(
      0deg,
      rgba(160,110,50,.05) 0px,
      rgba(160,110,50,.05) 1px,
      transparent 2px,
      transparent 6px
    );
  opacity:.55;
  filter: blur(.2px);
}

.ji-bg-stamp{
  background:
    radial-gradient(circle at 78% 26%, rgba(255,80,210,.18) 0 18%, transparent 19% 100%),
    radial-gradient(circle at 78% 26%, rgba(255,205,90,.14) 0 26%, transparent 27% 100%);
  opacity:.55;
  transform: rotate(-8deg);
}



    :root{
      --bg:#fbfbff;
      --ink:#1a1c2a;

      --pink:#ff2fb3;
      --rose:#ff5ad6;
      --orange:#ff9a3c;
      --saffron:#ffd54a;
      --gold:#d9b35f;
      --violet:#7a2cff;
      --indigo:#4b2cff;
      --cyan:#00e5ff;
      --mint:#3cffb4;

      --card:#ffffff;
      --line: rgba(30, 30, 50, .08);

      --shadow: 0 14px 40px rgba(10,10,30,.10);
      --shadow2: 0 22px 80px rgba(10,10,30,.16);

      --r16: 16px;
      --r18: 18px;
      --r22: 22px;
      --r26: 26px;

      --max: 1180px;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: "Sora", "Prompt", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background:
        radial-gradient(1000px 600px at 10% 0%, rgba(255,47,179,.12), transparent 60%),
        radial-gradient(900px 650px at 90% 10%, rgba(0,229,255,.11), transparent 62%),
        radial-gradient(1000px 700px at 50% 100%, rgba(122,44,255,.10), transparent 60%),
        var(--bg);
      color:var(--ink);
      overflow-x:hidden;
    }

    a{color:inherit; text-decoration:none}
    img{max-width:100%; display:block}

    /* ====== Common layout (safe / no conflict) ====== */
    .wrap{
      width: min(var(--max), calc(100% - 28px));
      margin: 0 auto;
    }

    .section{
      padding: 44px 0;
      position: relative;
    }

    /* Fantasy background layer per block (ไม่กระทบส่วนอื่น) */
    .fantasy-block{
      border-radius: 28px;
      background:
        radial-gradient(900px 360px at 20% 10%, rgba(255,90,214,.14), transparent 60%),
        radial-gradient(700px 420px at 90% 15%, rgba(0,229,255,.12), transparent 58%),
        radial-gradient(800px 460px at 40% 95%, rgba(255,154,60,.12), transparent 62%),
        linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.70));
      border: 1px solid rgba(255,255,255,.55);
      box-shadow: var(--shadow2);
      padding: 28px;
      position: relative;
      overflow: hidden;
      isolation: isolate;
      backdrop-filter: blur(8px);
    }

    .fantasy-block::before{
      content:"";
      position:absolute;
      inset:-40px;
      background:
        radial-gradient(circle at 12% 25%, rgba(255,47,179,.18), transparent 35%),
        radial-gradient(circle at 85% 15%, rgba(0,229,255,.16), transparent 38%),
        radial-gradient(circle at 75% 85%, rgba(122,44,255,.14), transparent 40%);
      filter: blur(22px);
      opacity:.85;
      z-index:-2;
    }

    .fantasy-block::after{
      content:"";
      position:absolute;
      inset:0;
      background-image:
        radial-gradient(rgba(255,255,255,.55) 1px, transparent 1px);
      background-size: 22px 22px;
      opacity:.17;
      z-index:-1;
      mask-image: radial-gradient(circle at 40% 0%, #000 0 48%, transparent 70%);
      pointer-events:none;
    }

    /* ====== Section Title ====== */
    .sec-title{
      display:flex;
      align-items:flex-end;
      gap:12px;
      margin-bottom: 16px;
      user-select:none;
    }
    .sec-title h2{
      margin:0;
      font-family:"Cinzel", serif;
      letter-spacing:.5px;
      font-size: 30px;
      line-height: 1;
    }
    .sec-title .spark{
      font-size: 18px;
      opacity:.9;
      transform: translateY(-2px);
    }
    .sec-sub{
      margin:0 0 22px 0;
      color: rgba(20,20,40,.70);
      font-size: 14px;
    }

    /* ==========================================================
       ✅ ROOM GALLERY (Lightbox / Slide) - isolated classes
       ========================================================== */

    .jg-gallery{
      display:grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 18px;
    }

    .jg-card{
      grid-column: span 4;
      position: relative;
      border-radius: 22px;
      overflow:hidden;
      background: #000;
      box-shadow: var(--shadow);
      border: 1px solid rgba(255,255,255,.55);
      cursor:pointer;
      transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
      min-height: 190px;
    }

    .jg-card:hover{
      transform: translateY(-4px) scale(1.01);
      box-shadow: 0 18px 60px rgba(10,10,30,.18);
      filter: saturate(1.08);
    }

    .jg-card:active{
      transform: translateY(-2px) scale(1.005);
    }

    .jg-card img{
      width:100%;
      height: 260px;
      object-fit: cover;
      transform: scale(1.03);
      object-position: center center;
  object-position: 50% 40%;
    }

    /* ===== ชื่อห้องในรูป: อ่านชัดแบบ premium ===== */
.jg-card::before{
  content:"";
  position:absolute;
  inset:0;
  /* เข้มขึ้นด้านล่าง เพื่อให้ตัวหนังสือเด่น */
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.02) 0%,
      rgba(0,0,0,.08) 35%,
      rgba(0,0,0,.88) 100%);
  pointer-events:none;
}

/* กล่องข้อมูลด้านล่าง (ชื่อ + ราคา) */
.jg-info{
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  z-index:2;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap: 14px;

  /* ✅ เพิ่มแผ่นรองตัวอักษรแบบด้านล่าง */
  padding: 10px 10px;
  border-radius: 18px;
  background: rgba(0,0,0,.32);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
}

/* ตัวหนังสือชื่อห้อง (ภาษาไทย) */
.jg-name .th{
  font-size: 20px;
  font-weight: 1000;
  color:#fff;

  /* ✅ เงาชัด อ่านง่าย */
  text-shadow:
    0 2px 0 rgba(0,0,0,.35),
    0 10px 26px rgba(0,0,0,.55);

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height: 1.15;
}

/* ตัวหนังสืออังกฤษ */
.jg-name .en{
  font-size: 12px;
  font-weight: 800;
  color: rgba(255,255,255,.90);
  text-shadow:
    0 2px 0 rgba(0,0,0,.35),
    0 10px 22px rgba(0,0,0,.50);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* กล่องราคาให้ชัดขึ้น */
.jg-price{
  flex: 0 0 auto;
  padding: 8px 10px;
  border-radius: 14px;
  color: rgba(255,255,255,.98);
  font-weight: 1000;
  font-size: 13px;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 38px rgba(0,0,0,.30);
  text-align:right;
  line-height:1.15;
}

.jg-price small{
  display:block;
  font-weight: 800;
  font-size: 11px;
  opacity: .92;
  margin-top: 2px;
}


    /* ===== Lightbox ===== */
    .jg-lightbox{
      position: fixed;
      inset: 0;
      display:none;
      z-index: 9999;
      background:
        radial-gradient(900px 600px at 15% 15%, rgba(255,47,179,.18), transparent 60%),
        radial-gradient(900px 600px at 85% 25%, rgba(0,229,255,.15), transparent 62%),
        radial-gradient(1100px 700px at 50% 100%, rgba(122,44,255,.18), transparent 66%),
        rgba(7, 8, 14, .72);
      backdrop-filter: blur(12px);
    }
    .jg-lightbox.open{display:block}

    .jg-lb-wrap{
      width: min(1120px, calc(100% - 20px));
      margin: 18px auto;
      height: calc(100% - 36px);
      display:flex;
      flex-direction:column;
      gap: 12px;
    }

    .jg-lb-topbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
      color:#fff;
      padding: 10px 8px;
      user-select:none;
    }

    .jg-lb-brand{
      display:flex;
      align-items:center;
      gap: 10px;
      font-weight: 900;
      letter-spacing:.2px;
    }

    .jg-lb-dot{
      width:10px;height:10px;border-radius:50%;
      background: linear-gradient(90deg, var(--pink), var(--cyan));
      box-shadow: 0 0 18px rgba(255,47,179,.45);
    }

    .jg-lb-actions{
      display:flex;
      gap: 8px;
      align-items:center;
    }

    .jg-btn{
      appearance:none;
      border: 1px solid rgba(255,255,255,.20);
      background: rgba(255,255,255,.10);
      color:#fff;
      padding: 10px 12px;
      border-radius: 14px;
      cursor:pointer;
      font-weight: 800;
      transition: transform .18s ease, background .18s ease;
      backdrop-filter: blur(10px);
    }
    .jg-btn:hover{
      background: rgba(255,255,255,.16);
      transform: translateY(-1px);
    }
    .jg-btn:active{transform: translateY(0px) scale(.98)}
    .jg-btn.close{
      background: rgba(255,90,214,.16);
      border-color: rgba(255,90,214,.28);
    }

    .jg-stage{
      position: relative;
      flex: 1;
      border-radius: 26px;
      overflow:hidden;
      box-shadow: 0 30px 90px rgba(0,0,0,.35);
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(0,0,0,.25);
    }

    .jg-stage img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      display:block;
      transform: scale(1.01);
      user-select:none;
      -webkit-user-drag:none;
    }

    /* cinematic overlay */
    .jg-stage::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.10), transparent 35%),
        linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.18) 38%, rgba(0,0,0,.78) 100%);
      pointer-events:none;
      z-index:1;
    }

    .jg-caption{
      position:absolute;
      left: 18px;
      right: 18px;
      bottom: 16px;
      z-index:2;
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap: 14px;
    }

    .jg-cap-left{
      min-width:0;
    }

    .jg-cap-title{
      margin:0;
      font-size: 26px;
      font-weight: 1000;
      letter-spacing:.2px;
      color:#fff;
      text-shadow: 0 16px 34px rgba(0,0,0,.38);
      line-height:1.05;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .jg-cap-sub{
      margin: 6px 0 0 0;
      font-size: 13px;
      color: rgba(255,255,255,.86);
      font-weight: 700;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .jg-cap-price{
      padding: 10px 12px;
      border-radius: 18px;
      background: rgba(0,0,0,.36);
      border: 1px solid rgba(255,255,255,.18);
      color:#fff;
      font-weight: 900;
      text-align:right;
      backdrop-filter: blur(10px);
      box-shadow: 0 18px 50px rgba(0,0,0,.28);
      flex: 0 0 auto;
    }
    .jg-cap-price span{
      display:block;
      font-size: 16px;
    }
    .jg-cap-price small{
      display:block;
      font-size: 12px;
      opacity:.88;
      margin-top: 2px;
      font-weight: 800;
    }

    /* arrows */
    .jg-nav{
      position:absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index:3;
      width: 44px;
      height: 44px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.22);
      background: rgba(255,255,255,.12);
      backdrop-filter: blur(10px);
      display:grid;
      place-items:center;
      cursor:pointer;
      transition: transform .18s ease, background .18s ease;
      user-select:none;
    }
    .jg-nav:hover{
      background: rgba(255,255,255,.18);
      transform: translateY(-50%) scale(1.03);
    }
    .jg-nav:active{
      transform: translateY(-50%) scale(.98);
    }
    .jg-nav.prev{left: 14px}
    .jg-nav.next{right: 14px}

    .jg-nav svg{
      width: 22px;
      height: 22px;
      fill: rgba(255,255,255,.95);
      filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
    }

    /* thumbs */
    .jg-thumbs{
      display:flex;
      gap: 10px;
      padding: 10px 6px 4px;
      overflow:auto;
      scrollbar-width: thin;
      scrollbar-color: rgba(255,255,255,.22) transparent;
    }
    .jg-thumbs::-webkit-scrollbar{height:10px}
    .jg-thumbs::-webkit-scrollbar-thumb{
      background: rgba(255,255,255,.16);
      border-radius: 999px;
    }

    .jg-thumb{
      flex: 0 0 auto;
      width: 96px;
      height: 62px;
      border-radius: 16px;
      overflow:hidden;
      cursor:pointer;
      border: 1px solid rgba(255,255,255,.18);
      box-shadow: 0 12px 30px rgba(0,0,0,.25);
      opacity:.78;
      transform: translateY(0);
      transition: opacity .18s ease, transform .18s ease, outline .18s ease;
      background: rgba(255,255,255,.10);
    }
    .jg-thumb img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
      object-position: center 45%; /* ปรับขึ้นลงได้ */
    }
    .jg-thumb.active{
      opacity:1;
      transform: translateY(-2px);
      outline: 2px solid rgba(255,90,214,.55);
      outline-offset: 2px;
    }

    /* responsive */
    @media (max-width: 980px){
      .jg-card{grid-column: span 6}
      .jg-card img{height: 230px}
      .jg-cap-title{font-size: 22px}
    }
    @media (max-width: 640px){
      .fantasy-block{padding: 18px}
      .jg-card{grid-column: span 12}
      .jg-card img{height: 240px}
      .jg-name .th{font-size: 18px}
      .jg-price{font-size: 12px}
      .jg-nav{display:none} /* มือถือใช้ swipe + ปุ่มบนแทน */
      .jg-thumb{width: 84px; height: 58px}
    }

    /* ==========================================================
   ✅ ROOMS = ให้หน้าตาเหมือนเดิม (เฉพาะใน #rooms เท่านั้น)
   วางท้ายสุดของไฟล์ CSS
   ========================================================== */
/* ==========================================================
   ROOMS CARD = OLD LOOK (match screenshot #2)
   วางไว้ท้ายสุดของ CSS เพื่อ override ของเดิม
   ========================================================== */

/* 1) ปิดของใหม่ที่ทำให้หน้าตาเปลี่ยน (tags, stats, bars ฯลฯ) */


/* 2) Grid ให้เหมือนเดิม */
#rooms .roomsGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 980px){
  #rooms .roomsGrid{ grid-template-columns: 1fr; }
}

/* 3) การ์ดหลัก + กรอบไล่สีแบบเดิม */
#rooms .roomCard{
  border-radius: 28px;
  overflow: hidden;
  background: transparent;
  border: 0;
  box-shadow: 0 26px 70px rgba(10,10,30,.12);
  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  cursor: pointer;
  isolation: isolate;
}

#rooms .roomGlow{
  position:absolute;
  inset:-2px;
  border-radius: 30px;
  background: linear-gradient(135deg, var(--cyan), var(--pink), var(--saffron));
  opacity: .75;                 /* ✅ ให้เห็นกรอบสีตลอดเหมือนเดิม */
  filter: saturate(1.1);
  z-index:0;
}
#rooms .roomCard:hover{
  transform: translateY(-4px);
  box-shadow: 0 34px 90px rgba(10,10,30,.16);
  filter: saturate(1.03);
}

#rooms .roomInner{
  position:relative;
  z-index:1;
  margin: 2px;                  /* ✅ โชว์กรอบไล่สี */
  border-radius: 26px;
  overflow: hidden;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.55);
}

/* 4) ภาพ + ชื่อห้องทับบนรูป (ไทย/อังกฤษ) */
#rooms .thumb{
  position: relative;
  height: 220px;                /* ✅ ล็อคสูงให้เหมือนการ์ดเดิม */
  overflow: hidden;
}
#rooms .thumb img{
  width:100%;
  height:100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform .25s ease;
  filter: saturate(1.14) contrast(1.06);
}
#rooms .roomCard:hover .thumb img{
  transform: scale(1.08);
}

/* เฟดดำเฉพาะด้านล่างของรูป ให้ตัวหนังสืออ่านชัด (เหมือนเดิม) */
#rooms .thumb::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: 46%;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.70) 100%);
  pointer-events:none;
  z-index:1;
}

/* caption บนรูป */
#rooms .roomCaption{
  position:absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  z-index:2;
  color:#fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.75);
  line-height: 1.06;
}

#rooms .roomNameTH{
  font-weight: 1000;
  font-size: 22px;
  letter-spacing: .2px;
}
#rooms .roomNameEN{
  margin-top: 4px;
  font-weight: 800;
  font-size: 12px;
  opacity: .92;
  letter-spacing: .8px;
  text-transform: uppercase;
}
@media (max-width:520px){
  #rooms .thumb{ height: 240px; }
  #rooms .roomNameTH{ font-size: 18px; }
  #rooms .roomNameEN{ font-size: 11px; }
}

/* 5) เนื้อหาใต้รูป */
#rooms .roomBody{
  padding: 14px 16px 10px;
}
#rooms .roomDesc{
  margin:0;
  color: rgba(35,16,47,.78);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.7;
  min-height: 44px;             /* กันการ์ดสูงไม่เท่ากัน */
}

/* 6) แถบล่าง: ราคา + ปุ่ม (เหมือนเดิม) */
#rooms .roomFooter{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.92);
}

#rooms .miniPrice{
  display:flex;
  flex-direction:column;
  gap: 4px;
  font-weight: 950;
  color: rgba(35,16,47,.92);
}
#rooms .miniPrice b{
  font-size: 22px;
  letter-spacing: .2px;
}
#rooms .miniPrice span{
  font-size: 12px;
  opacity: .78;
  font-weight: 900;
}

/* ปุ่ม “ดูรายละเอียด” แบบเดิม */
#rooms .roomBtn{
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.86);
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 950;
  cursor:pointer;
  box-shadow: 0 12px 26px rgba(0,0,0,.08);
  transition: transform .12s ease, filter .12s ease;
  white-space: nowrap;
}
#rooms .roomBtn:hover{ transform: translateY(-1px); filter: brightness(1.02); }
#rooms .roomBtn:active{ transform: translateY(0); }

/* ✅ ทำให้ .roomTags absolute อ้างอิงอยู่บนรูปของการ์ด */
.roomMedia{
  position: relative;
}

/* ✅ กันโดน shimmer/overlay ทับ */
.roomTags{
  z-index: 30 !important;
  pointer-events: none;
}

/* ถ้า overlay/shimmer มี z-index สูง ให้ลดลง */
.roomOverlay{ z-index: 10; }
.shimmer{ z-index: 12; }

/* ✅ ให้รูปอยู่ชั้นล่างสุด */
.roomMedia img{
  position: relative;
  z-index: 1;
  display:block;
  width:100%;
  height:auto;
  object-fit: cover;
   object-position: center 45%; /* ปรับขึ้นลงได้ */
}


.roomMedia{
  aspect-ratio: 4 / 3; /* หรือ 16/9 ตามดีไซน์ */
  overflow: hidden;
}

.roomMedia img{
  width:100%;
  height:100%; /* ⭐ ต้องเป็น 100% */
  object-fit: cover;
  object-position: center 60%; /* หรือ center 45% */
  display:block;
}

.stats{ margin-top: 12px; display: grid; gap: 10px; }

.statRow{
  display: grid;
  grid-template-columns: 140px 1fr 34px;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  color: rgba(20,20,20,.75);
}

.statRow .bar{
  height: 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.08);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.10);
}

.statRow .bar i{
  display: block;
  height: 100%;
  width: var(--w, 0%);
  border-radius: 999px;
  background: linear-gradient(90deg, #ff2fb3, #00e5ff, #ffd54a);
}

/* ================================
   Gallery: ให้การ์ดเหมือน News (ไม่มีกรอบดำ)
   ================================ */
#gallery .jg-card,
#gallery .roomCard{
  border: 0 !important;
  outline: 0 !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.12) !important; /* เงาแบบ soft เหมือน news */
  overflow: hidden;
}

/* ถ้าเดิมมีกรอบดำหนา/เส้นขอบจาก element ข้างใน */
#gallery .jg-card .roomInner{
  border: 0 !important;
  box-shadow: none !important;
}

/* ถ้ามีเส้นกรอบ/ขอบมนเฉพาะรูป */
#gallery .jg-card img,
#gallery .roomCard img{
  border: 0 !important;
  outline: 0 !important;
}

/* ถ้าเดิมมี pseudo-element ทำเป็นกรอบ */
#gallery .jg-card::before,
#gallery .jg-card::after,
#gallery .roomCard::before,
#gallery .roomCard::after{
  content: none !important;
}

/* ===== Gallery grid ===== */
.jg-gallery{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
}
@media (max-width: 980px){
  .jg-gallery{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .jg-gallery{ grid-template-columns:1fr; }
}

/* ===== Card style (แบบรูปที่ 2) ===== */
.jg-card{
  border-radius:22px;
  overflow:hidden;
  cursor:pointer;
  box-shadow:0 18px 40px rgba(0,0,0,.14);
  transform:translateZ(0);
}
.jg-card .jg-media{
  position:relative;
  aspect-ratio: 4 / 3;
  background:#111;
}
.jg-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  object-position: center center;
  object-position: 50% 40%;
}
.jg-vignette{
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 500px at 30% 15%, rgba(255,255,255,.14), transparent 55%),
    linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 55%);
  pointer-events:none;
}

/* เปลี่ยนจากแถบยาว -> เป็น 2 ก้อน (ซ้าย/ขวา) ไม่บังภาพ */

.jg-overlay{
  position:absolute;
  left:14px; right:14px; bottom:14px;

  /* เดิมมี padding + background หนาๆ ให้เอาออก */
  padding: 0;
  background: transparent;

  display:flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  color:#fff;
}

/* ทำ “ก้อนพื้นหลัง” เฉพาะข้อความ */
.jg-left, .jg-right{
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  padding: 12px 14px;
}

/* กันไม่ให้ก้อนซ้ายกินพื้นที่จนทับก้อนราคา */
.jg-left{
  max-width: calc(100% - 140px);
}

/* ก้อนราคา */
.jg-right{
  min-width: 110px;
  text-align:right;
}

/* อ่านชัดขึ้น */
.jg-title{
  font-weight: 900;
  font-size: 20px;
  line-height: 1.1;
  text-shadow: 0 10px 24px rgba(0,0,0,.75);
}

.jg-sub{
  opacity:.9;
  font-weight: 700;
  margin-top: 3px;
  text-shadow: 0 10px 24px rgba(0,0,0,.75);
}

.jg-price{
  font-weight: 900;
  font-size: 18px;
  text-shadow: 0 10px 24px rgba(0,0,0,.75);
}

.jg-unit{
  opacity:.9;
  font-size: 12px;
  text-shadow: 0 10px 24px rgba(0,0,0,.75);
}

.jg-media::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: 45%;
  background: linear-gradient(to top, rgba(0,0,0,.28), rgba(0,0,0,0));
  pointer-events:none;
}

/* เดสก์ท็อป: ใช้สัดส่วนแบนลง */
@media (min-width: 1024px){
  .jg-card .jg-media{
    aspect-ratio: 16 / 9;
  }
}

.jg-card img{ object-fit: contain; background:#111; }

/* =========================
   PRICING: ชัดขึ้นแบบเดิม
   (เพิ่มมืดรูป + เพิ่มเงาตัวอักษร)
   ========================= */

/* 1) ทำภาพมืดลงนิดนึง (ยังคงสไตล์เดิม) */
.priceCard .priceTop img{
  filter: brightness(.72) contrast(1.05) saturate(1.05);
   
}

/* 2) เพิ่มเงาดำหลังตัวอักษร (ชัดขึ้นมาก) */
.priceCard .priceTop .priceTitle b,
.priceCard .priceTop .priceTitle span{
  text-shadow:
    0 2px 8px rgba(0,0,0,.95),
    0 6px 18px rgba(0,0,0,.85);
}

/* ✅ ป้ายราคาเริ่มต้นแบบรูป (กล่องขาวมุมขวาล่าง) */
.priceCard .priceTop{
  position: relative;
}

.priceCard .priceBadge{
  position: absolute;
  right: 14px;
  bottom: 14px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: 10px 14px;
  text-align: center;
  min-width: 92px;
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
}

.priceCard .priceBadge small{
  display: block;
  font-weight: 800;
  font-size: 12px;
  color: rgba(0,0,0,.65);
  margin-bottom: 2px;
}

.priceCard .priceBadge b{
  display: block;
  font-weight: 900;
  font-size: 22px;
  color: #1b0b2a;
  line-height: 1;
}

.jg-open-room-btn{
  display:inline-block;
  padding:10px 18px;
  border-radius:999px;
  font-weight:800;
  font-size:14px;
  text-decoration:none;
  color:#fff;
  background:linear-gradient(135deg,#ff9a3c,#ff2fb3);
  box-shadow:0 8px 18px rgba(0,0,0,.35);
  transition:.2s;
}

.jg-open-room-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 24px rgba(0,0,0,.45);
}

.jg-cap-btn{
  background: linear-gradient(135deg, #ff7a2d, #e6008a);
  color: #fff;
  font-weight: 900;
  padding: 10px 18px;
  border-radius: 999px;
  text-decoration: none;

  text-shadow: 0 3px 8px rgba(0,0,0,.8);
  box-shadow:
    0 8px 22px rgba(0,0,0,.45),
    inset 0 -3px 8px rgba(0,0,0,.35);
}

/* พื้นหลังลายทัชมาฮาล */
/* section ที่ต้องการพื้นหลังทัชมาฮาล */
.taj-bg{
  position: relative;
  background: #efe3c4; /* สีพื้นหลังหลัก */
  overflow: hidden;
}

/* ชั้นเงาทัชมาฮาล */
.taj-bg::before{
  content:"";
  position:absolute;
  inset:0;



  opacity:0.06;              /* ปรับความจางของภาพ */
  filter: blur(0.12px);         /* ฟุ้งเล็กน้อย */
  pointer-events:none;
  z-index:0;
}

/* ให้เนื้อหาลอยเหนือพื้นหลัง */
.taj-bg > *{
  position:relative;
  z-index:1;
}


#pricingGrid{ display:grid; gap:16px; grid-template-columns: repeat(4, minmax(0, 1fr));color: #000; }
@media (max-width: 1100px){ #pricingGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px){ #pricingGrid{ grid-template-columns: 1fr; } }

.pCard{
  border-radius: 18px;
  overflow:hidden;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
}
.pImg{ height:170px; background-size:cover; background-position:center; }
.pBody{ padding:14px 14px 16px; }
.pHead{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.pTitle{ margin:0; font-weight:900; letter-spacing:.5px; }
.pFrom{ font-weight:900; white-space:nowrap; }
.pSub{ opacity:.85; margin:6px 0 10px; }
.pList{ display:grid; gap:8px; }
.pRow{ display:flex; justify-content:space-between; gap:10px; padding:8px 10px; border-radius:12px; background: rgba(0,0,0,.04); }
.pLabel{ font-weight:700; }
.pValue{ font-weight:900; white-space:nowrap; }

/* ===== Pricing: make title pop + hourly highlight + CTA button ===== */

.pTitle--strong{
  font-size: 20px;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-weight: 900;
  text-shadow: 0 6px 18px rgba(0,0,0,.12);
}

.pRow.is-hourly{
  transform: scale(1.02);
  border: 1px solid rgba(0,0,0,.08);
}

.pRow.is-hourly .pLabel{
  font-weight: 900;
  font-size: 16px;
}

.pRow.is-hourly .pValue{
  font-weight: 900;
  font-size: 18px; /* ✅ ราคาต่อชั่วโมงใหญ่กว่า */
}

.pActions{
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}

.pGoRooms{
  border: 0;
  cursor: pointer;
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
}

.pGoRooms:hover{
  transform: translateY(-1px);
}

/* ===== Pricing: Zone title เด่นขึ้น ===== */
.pHead{
  align-items: flex-end;
  gap: 10px;
}
.pTitle{
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.05;
  text-shadow: 0 10px 25px rgba(0,0,0,.12);
}
.pFrom{
  font-weight: 900;
}

/* ===== Pricing: แถว "ต่อชั่วโมง" ให้เด่นสุด ===== */
.pRow.is-hourly{
  border: 1px solid rgba(255,255,255,.45);
  box-shadow: 0 10px 25px rgba(0,0,0,.10);
  transform: translateY(-1px);
}
.pRow.is-hourly .pLabel{
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .02em;
}
.pRow.is-hourly .pValue{
  font-size: 18px;
  font-weight: 900;
}

.heroRoomDesc{
  position: relative;
}

.heroRoomDesc::before{
  content:"";
  position:absolute;
  left:0;
  top:14px;
  bottom:14px;
  width:4px;
  border-radius:999px;

  background: linear-gradient(
    180deg,
    #ff1fb8,
    #ff9f1c,
    #00d9ff
  );

  box-shadow: 0 0 12px rgba(255,80,200,.6);
}

 .heroDesc{
  position: relative;
}

.heroDesc::before{
  content:"";
  position:absolute;
  left:0;
  top:14px;
  bottom:14px;
  width:4px;
  border-radius:999px;
}


/* ===== Room score bars ===== */
.rScores{ margin: 12px 0 6px; display:flex; flex-direction:column; gap:10px; }
.rScore{ display:grid; grid-template-columns: 1fr 160px 34px; gap:10px; align-items:center; }

.rScoreLabel{
  font-size: 13px;
  font-weight: 700;
  color: #111827;
}

.rBar{
  height: 10px;
  border-radius: 999px;
  background: rgba(17,24,39,.10);
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}

.rFill{
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff1fb8, #7c3aed, #00d9ff, #f59e0b);
  box-shadow: 0 6px 14px rgba(124,58,237,.22);
}

.rScoreVal{
  font-size: 13px;
  font-weight: 900;
  color: #111827;
  text-align:right;
}





/* =========================
   Watercolor Fantasy Theme
   ========================= */

:root{
  --wc-pink:   #ff3dbd;
  --wc-rose:   #ff6ad5;
  --wc-orange: #ffb24a;
  --wc-gold:   #ffd36a;
  --wc-lime:   #86f7a1;
  --wc-mint:   #4ee7d0;
  --wc-cyan:   #5ad7ff;
  --wc-blue:   #6f8cff;
  --wc-violet: #a66bff;

  --ink: #1b1b22;
}

/* พื้นหลังรวมทั้งเว็บ */
body{
  background:
    /* วงแสงฟุ้ง ๆ */
    radial-gradient(900px 520px at 20% 10%, rgba(255, 61, 189, .20), transparent 60%),
    radial-gradient(880px 560px at 75% 18%, rgba(90, 215, 255, .18), transparent 62%),
    radial-gradient(820px 520px at 40% 70%, rgba(134, 247, 161, .16), transparent 62%),

    /* ไล่สีหลัก (พาสเทลสด) */
    linear-gradient(135deg,
      rgba(255, 178, 74, .14) 0%,
      rgba(255, 61, 189, .10) 18%,
      rgba(90, 215, 255, .10) 45%,
      rgba(166, 107, 255, .10) 70%,
      rgba(255, 211, 106, .10) 100%),

    /* สีพื้นสุดท้าย */
    #ffffff;
  background-attachment: fixed;
  color: var(--ink);
}

/* ทำ “สาดสี” แบบ CSS (ไม่ต้องมีรูป) */
.wc-splashes{
  position: relative;
  overflow: hidden;
}
.wc-splashes::after{
  content:"";
  position:absolute;
  inset:-80px;
  pointer-events:none;
  z-index:0;

  background:
    radial-gradient(18px 14px at 12% 22%, rgba(255,61,189,.35), transparent 70%),
    radial-gradient(22px 18px at 18% 30%, rgba(255,178,74,.28), transparent 72%),
    radial-gradient(26px 20px at 26% 18%, rgba(90,215,255,.28), transparent 72%),
    radial-gradient(16px 14px at 66% 22%, rgba(166,107,255,.28), transparent 72%),
    radial-gradient(24px 18px at 78% 30%, rgba(134,247,161,.26), transparent 72%),
    radial-gradient(14px 12px at 86% 20%, rgba(255,211,106,.28), transparent 72%);

  filter: blur(0.6px);
  opacity: .9;
  mix-blend-mode: multiply;
}

/* การ์ด/บล็อกให้ดู “นิยาย” นุ่มๆ */
.wc-card{
  position: relative;
  z-index: 1;
  border-radius: 26px;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 50px rgba(20,20,35,.12);
  border: 1px solid rgba(255,255,255,.55);
}

/* =========================
   Taj Silhouette Layer
   ========================= */

/* ===== Fantasy Background Layer Pack (ใช้กับ <section class="taj-bg"> ) ===== */
/* ===== Fantasy Watercolor + Taj (ใช้กับ <section class="taj-bg"> ) ===== */
.taj-bg{
  position: relative;
  overflow: hidden;

  /* พื้นหลัก = สีน้ำชัด ๆ */
  background:
    radial-gradient(1200px 720px at 16% 18%, rgba(255, 60, 200, .28), transparent 58%),
    radial-gradient(1000px 680px at 82% 16%, rgba(0, 220, 255, .24), transparent 60%),
    radial-gradient(980px 700px at 70% 82%, rgba(255, 170, 70, .24), transparent 62%),
    radial-gradient(980px 700px at 22% 84%, rgba(130, 70, 255, .22), transparent 62%),
    linear-gradient(180deg, #fff4ef 0%, #fff7fb 35%, #f1fbff 70%, #fff6ea 100%);
}

/* ให้ “เนื้อหา” อยู่เหนือทุกเลเยอร์พื้นหลัง */
.taj-bg > *{
  position: relative;
  z-index: 5;
}

/* 1) Taj watermark (ให้สว่าง/ละมุน ไม่หม่น) */
.taj-bg::before{
  content:"";
  position:absolute;
  inset:-60px;
  /* background: url("assets/patterns/taj.png") center bottom / min(1200px, 92vw) auto no-repeat; */

  /* สำคัญ: เปลี่ยนจาก multiply -> screen เพื่อให้ “สว่างฟุ้ง” */
  opacity: .35;
  mix-blend-mode: screen;

  /* ทำให้เป็น “หมอกสีน้ำ” */
  filter: blur(1.6px) saturate(1.15) contrast(.95) brightness(1.08);

  pointer-events:none;
  z-index: 2;
}

/* 2) สีสาด/สีน้ำพุ่ง (ทำให้รู้สึกเหมือนรูปตัวอย่าง) */
.taj-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    /* splash ซ้าย */
    radial-gradient(520px 360px at 18% 42%, rgba(255, 70, 70, .22), transparent 62%),
    radial-gradient(520px 360px at 24% 38%, rgba(255, 220, 70, .20), transparent 62%),
    radial-gradient(520px 360px at 26% 50%, rgba(70, 255, 170, .18), transparent 62%),

    /* splash ขวา */
    radial-gradient(560px 380px at 82% 40%, rgba(70, 160, 255, .20), transparent 62%),
    radial-gradient(560px 380px at 74% 52%, rgba(160, 80, 255, .18), transparent 62%),
    radial-gradient(560px 380px at 86% 54%, rgba(255, 90, 200, .16), transparent 62%),

    /* glow ล่าง */
    radial-gradient(1000px 420px at 50% 92%, rgba(255,255,255,.38), transparent 70%);

  mix-blend-mode: overlay;          /* ทำให้สี “พุ่ง” */
  filter: blur(.2px) saturate(1.35) contrast(1.05);
  opacity: .95;

  pointer-events:none;
  z-index: 3;
}

/* 3) magicPattern: เพิ่มให้เป็น “ประกาย+เกรนสีน้ำ” */
.taj-bg .magicPattern{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index: 4;

  background:
    /* glitter */
    radial-gradient(2px 2px at 12% 22%, rgba(255,255,255,.95), transparent 60%),
    radial-gradient(2px 2px at 26% 48%, rgba(255,255,255,.80), transparent 60%),
    radial-gradient(2px 2px at 72% 28%, rgba(255,255,255,.90), transparent 60%),
    radial-gradient(2px 2px at 84% 56%, rgba(255,255,255,.78), transparent 60%),

    /* watercolor grain (เบามาก) */
    radial-gradient(120px 80px at 14% 62%, rgba(0,0,0,.06), transparent 70%),
    radial-gradient(140px 90px at 62% 18%, rgba(0,0,0,.05), transparent 72%),
    radial-gradient(160px 110px at 86% 70%, rgba(0,0,0,.05), transparent 72%);

  opacity: .45;
  mix-blend-mode: soft-light;
  filter: blur(.15px);
}

.taj-bg .container{
  background: transparent !important;
}

/* FIX: background continuity */
html, body{
  min-height: 100%;
}

body{
  background-attachment: fixed; /* ให้ไล่สีติดกับ viewport ต่อเนื่อง */
}