:root {
            --gold: #f1e0a6;
            --gold2: #cdb474;
            --fg: #ffffff;
            --btnfg: #2a1c10;
            --shadow: rgba(0, 0, 0, .55);
        }
        :root{
        /* ตำแหน่งแนวตั้งของ ‘เส้น’ ต่อจากขอบบนจอ */
        --line-y-desktop: 14vh; /* ปรับได้ 16–22vh */
        --line-y-tablet: 16vh;
        --line-y-mobile: 14vh;
        
        /* ความสูงเส้น + ระยะห่างใต้เส้น */
        --line-h: 56px; /* ความสูงของ SVG เส้น */
        --gap-under: 10px; /* ช่องว่างใต้เส้นก่อนเริ่มเนื้อหา */
        }

        * {
            box-sizing: border-box
        }

        html,
        body {
            height: 100%
        }

        body {
            margin: 0;
            font-family: "Noto Sans Thai", system-ui, -apple-system, Segoe UI, Roboto, Arial;
            color: var(--fg);
            background: #000;
        }

        /* Background */
        .bg {
            position: fixed;
            inset: 0;
            z-index: 0
        }

        .bg img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: contrast(1.05) saturate(1.05);
            opacity: .96
        }

        .overlay {
            position: fixed;
            inset: 0;
            z-index: 1;
            background: radial-gradient(1200px 700px at 10% 0, rgba(0, 0, 0, .32), transparent 55%), radial-gradient(1000px 700px at 90% 100%, rgba(0, 0, 0, .45), transparent 60%), rgba(0, 0, 0, .12)
        }

        /* Layout */
        .shell {
            min-height: 100%;
            display: grid;
            place-items: center;
            padding: clamp(12px, 3vw, 36px)
        }

        .stack {
            width: min(100%, 980px);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: clamp(10px, 2.2vw, 16px);
            transform: translateY(10vh)
        }

        /* Decorative gold line */
        .decor {
            width: min(100%, 960px);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: .95
        }

        .decor svg {
            width: 100%;
            height: auto;
            max-height: 54px
        }

        /* Text only (no panel bg) */
        .line1 {
            font-weight: 700;
            font-size: clamp(16px, 2.2vw, 18px);
            text-shadow: 0 2px 12px var(--shadow);
            text-align: center
        }

        .line2 {
            font-weight: 600;
            font-size: clamp(15px, 2.1vw, 17px);
            opacity: .95;
            text-align: center
        }

/* ===== ปรับให้ปุ่มและข้อความมาอยู่บริเวณที่วงสีแดง ===== */
/* วางตำแหน่งด้วย top แทน bottom */
/* กล่องข้อความ+ปุ่ม ให้เริ่ม ‘ใต้เส้น’ เสมอ */
.rwd-bottom{
position: fixed;
left: 50%;
transform: translateX(-50%);
top: calc(var(--line-y-desktop) + var(--line-h) + var(--gap-under)); /* ✅ ใต้เส้น */
text-align: center; /* ถ้าต้องการชิดซ้ายเปลี่ยนเป็น left:6%; transform:none; text-align:left; */
max-width: 720px;
color: #f9e7c2;
text-shadow: 0 2px 8px rgba(0,0,0,.65);
z-index: 6;
}

/* Tablet */
@media (max-width:1024px){
.decor-line{ top: var(--line-y-tablet); }
.rwd-bottom{
top: calc(var(--line-y-tablet) + var(--line-h) + var(--gap-under));
}
}
/* Mobile */
@media (max-width:768px){
.decor-line{ top: var(--line-y-mobile); }
.rwd-bottom{
top: calc(var(--line-y-mobile) + var(--line-h) + var(--gap-under));
max-width: 90%;
}
}


.rwd-bottom .r1 {
font-size: clamp(15px, 1.9vw, 17px);
margin-bottom: 3px;
background:linear-gradient(180deg,#fff8e1 0%, #e7d09a 60%, #d6b46a 100%);
-webkit-background-clip:text; background-clip:text; color:transparent;
text-shadow:0 2px 10px rgba(0,0,0,.55);
}

.rwd-bottom .r2 {
white-space: nowrap; /* ❗ห้ามตัดบรรทัด */
/*overflow: hidden; /* กันข้อความล้น */
text-overflow: ellipsis; /* ถ้าเกินขอบให้มี ... ต่อท้าย (เลือกใส่หรือไม่ก็ได้) */
display: inline-block; /* ทำให้ nowrap ทำงานใน inline-block */
max-width: 100%; /* ให้กินได้ทั้งความกว้างที่มี */
}

.rwd-bottom .btn {
display: inline-block;
background: linear-gradient(180deg, #c9a85c 0%, #8f6a32 100%);
color: #fff8e1;
font-weight: 700;
font-size: clamp(13px, 1.4vw, 15px);
padding: 9px 24px;
border-radius: 8px;
text-decoration: none;
box-shadow: 0 3px 8px rgba(0,0,0,0.4), inset 0 0 4px rgba(255,255,255,0.3);
transition: all 0.25s ease-in-out;
margin-top: 14px;
}

.rwd-bottom .btn:hover {
background: linear-gradient(180deg, #d8b97b 0%, #9c743d 100%);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.45), inset 0 0 6px rgba(255,255,255,0.4);
color: #fff9dc;
}
.vignette{
position:fixed; inset:0; pointer-events:none; z-index:2;
background:radial-gradient(120% 90% at 50% 40%,
rgba(0,0,0,0) 55%, rgba(0,0,0,.45) 100%);
mix-blend-mode:multiply;
}
.dust{ position:fixed; inset:0; pointer-events:none; z-index:3; overflow:hidden;  }
.dust span{
position:absolute; width:3px; height:3px; border-radius:50%;
background:rgba(255,223,138,.8); filter:blur(.2px);
animation:float 9s linear infinite; opacity:.55;
}
@keyframes float{
0%{ transform:translateY(110vh) scale(.8); opacity:.0 }
10%{ opacity:.55 }
100%{ transform:translateY(-10vh) scale(1); opacity:0 }
}

/* Preview stacking fix: keep the original artwork visible behind content. */
body { position: relative; isolation: isolate; }
.shell { position: relative; z-index: 4; }
.rwd-bottom .r1, .rwd-bottom .r2 { white-space: pre-line; }

/* Content Manager: hide redundant title; main text and organization on separate lines. */
.rwd-bottom .r2,
.rwd-bottom .r3 {
  display: block;
  white-space: pre-line;
  overflow-wrap: anywhere;
  max-width: 100%;
}
.rwd-bottom .r3 { margin-top: 6px; }

/* Content Manager layout: separate main message, group, and site name. */
.rwd-bottom .r2,
.rwd-bottom .r3,
.rwd-bottom .r4 {
  display: block;
  white-space: pre-line;
  overflow-wrap: anywhere;
  max-width: 100%;
}
.rwd-bottom .r2 { margin-bottom: 8px; }
.rwd-bottom .r3 { margin-top: 0; }
.rwd-bottom .r4 { margin-top: 3px; }
.rwd-bottom .r4[hidden] { display: none; }

/* RWD Content Manager text lines (2026-10-08). */
.rwd-bottom .r1{display:none!important}
.rwd-bottom .r2,.rwd-bottom .r3,.rwd-bottom .r4{display:block;white-space:pre-line;overflow-wrap:anywhere;max-width:100%}
.rwd-bottom .r2{margin-bottom:8px}
.rwd-bottom .r3{margin-top:0}
.rwd-bottom .r4{margin-top:3px}
.rwd-bottom .r4[hidden]{display:none}