/* สั่งแก้ครั้งที่ 3 (ลูกค้าซื้อในบิล): ปุ่มสลับภาษา EN/ไทย · ปุ่มเชือกสลับธีมสว่าง/มืด · ประกายดาวตามเมาส์
   ไฟล์แยกจากดีไซน์ที่อนุมัติ — ค่าเริ่มต้นยังเป็นธีมมืดเหมือนเดิมทุกจุด ธีมสว่างเปิดเมื่อผู้ชมดึงเชือกเท่านั้น */

/* ---------- ปุ่มสลับภาษา (หัวเว็บ) ---------- */
.lang-switch{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:36px;padding:4px 12px;border:1px solid var(--gold);border-radius:999px;font-size:14px;line-height:1;color:var(--cream);white-space:nowrap;transition:background .18s,color .18s}
.lang-switch:hover{background:var(--gold);color:var(--bg)}
@media(max-width:600px){.lang-switch{min-width:40px;min-height:34px;padding:4px 9px;font-size:13px}}

/* ---------- ฟอนต์ไทย (หน้า /th) — Times New Roman ไม่มีตัวไทย ใช้ Noto Serif Thai คู่กัน ---------- */
html[lang="th"]{--serif:'Times New Roman',Times,'Noto Serif Thai',serif}
html[lang="th"] h1,html[lang="th"] h2,html[lang="th"] h3{line-height:1.35}
html[lang="th"] .eyebrow{letter-spacing:1px}
html[lang="th"] .hero-services a{line-height:1.3}
html[lang="th"] .service-body h3{line-height:1.3}

/* ---------- ปุ่มเชือกสลับธีม ---------- */
/* ตัวปุ่มกว้างแค่ลูกตุ้ม เส้นเชือกกดทะลุได้ (ไม่บังปุ่มเมนู/ปุ่มจองบนหัวเว็บ) · เชือกอยู่ในขอบขวาที่ว่างของหัวเว็บ */
.theme-cord{position:fixed;top:0;right:clamp(0px,.5vw,10px);z-index:60;width:30px;height:132px;padding:0;border:0;background:none;cursor:grab;-webkit-tap-highlight-color:transparent;touch-action:none;transform-origin:50% 0;pointer-events:none}
.theme-cord .cord-knob{pointer-events:auto}
.theme-cord .cord-knob::before{content:'';position:absolute;inset:-8px}
.theme-cord:active{cursor:grabbing}
.theme-cord .cord-rope{position:absolute;left:50%;top:0;width:2px;height:98px;margin-left:-1px;background:linear-gradient(#d2ae7300,#d2ae73 22%,#f5dba8);border-radius:2px;transform-origin:50% 0;transition:height .35s cubic-bezier(.3,1.6,.5,1)}
.theme-cord .cord-knob{position:absolute;left:50%;top:94px;width:30px;height:30px;margin-left:-15px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3cf,#d2ae73 55%,#8a6431);box-shadow:0 0 0 1px #f5dba880,0 0 14px #ffd36a99;color:#3a2410;transition:top .35s cubic-bezier(.3,1.6,.5,1),box-shadow .2s}
.theme-cord .cord-knob svg{width:16px;height:16px}
.theme-cord:hover .cord-knob,.theme-cord:focus-visible .cord-knob{box-shadow:0 0 0 1px #fff3cf,0 0 22px #ffd36acc}
.theme-cord.is-pulled .cord-rope{height:122px}
.theme-cord.is-pulled .cord-knob{top:118px}
.theme-cord.is-swinging{animation:cord-swing 1.1s cubic-bezier(.3,.6,.4,1)}
.theme-cord .icon-sun{display:none}
html[data-theme="light"] .theme-cord .icon-moon{display:none}
html[data-theme="light"] .theme-cord .icon-sun{display:block}
@keyframes cord-swing{0%{transform:rotate(0)}20%{transform:rotate(7deg)}45%{transform:rotate(-5deg)}70%{transform:rotate(2.5deg)}100%{transform:rotate(0)}}
@media(max-width:1100px){.theme-cord{height:116px;width:26px}.theme-cord .cord-rope{height:84px}.theme-cord .cord-knob{top:80px;width:26px;height:26px;margin-left:-13px}.theme-cord.is-pulled .cord-rope{height:106px}.theme-cord.is-pulled .cord-knob{top:102px}}
/* เปลี่ยนธีมนุ่มๆ (เฉพาะตอนกดเปลี่ยน ไม่ทำให้หน้าโหลดช้า) */
html.theme-fading body,html.theme-fading body *{transition:background-color .45s ease,color .45s ease,border-color .45s ease!important}

/* ---------- ธีมสว่าง ---------- */
html[data-theme="light"]{color-scheme:light;--bg:#fbf6ef;--surface:#fffdf9;--cream:#2c1d38;--pink:#9c1f7c;--muted:#5a4966;--line:#d9c4d9;--gold:#a37a35}
html[data-theme="light"] .muted{color:#6a5875}
html[data-theme="light"] .site-header{background:#fffaf3;border-bottom-color:#d9c4d9}
html[data-theme="light"] .main-nav a:hover{color:var(--pink)}
html[data-theme="light"] .section-title h2,html[data-theme="light"] .story-copy h2,html[data-theme="light"] .intro-layout h2,html[data-theme="light"] .contact-layout h2,html[data-theme="light"] .page-heading h1,html[data-theme="light"] .credentials h3,html[data-theme="light"] .faq-answer .faq-answer-title,html[data-theme="light"] .story-full .story-sign{color:#4b1d52}
html[data-theme="light"] .service-card{background:#fff;box-shadow:0 6px 22px #5a2a5a14}
html[data-theme="light"] .service-body{background:#fff}
html[data-theme="light"] .seeking-card{background:#fff}
html[data-theme="light"] .seeking-card:hover{background:#f8eaf4}
html[data-theme="light"] .story-band{background-image:linear-gradient(90deg,#f6ece2 60%,#f6ece2ec 82%,#f6ece266 100%),url('/assets/crystals.webp')}
html[data-theme="light"] .story-copy{text-shadow:none}
html[data-theme="light"] .intro-band{background:#f6ece2}
html[data-theme="light"] .gallery-arrow{background:#fff;border-color:#4b1d52;color:#4b1d52}
html[data-theme="light"] .faq-band{background:#f6ece2;border-color:#d9c4d9}
html[data-theme="light"] .faq-list details{background:#fff}
html[data-theme="light"] .contact-band{background-image:linear-gradient(90deg,#f6ece2 40%,#f6ece2ec 65%,#f6ece266 100%),url('/assets/crystals.webp')}
html[data-theme="light"] .inquiry-form{background:#fff;border-color:#d9c4d9;box-shadow:0 6px 22px #5a2a5a14}
html[data-theme="light"] .site-footer{background:#f2e7dc}
html[data-theme="light"] .footer-top{border-bottom-color:#d9c4d9}
html[data-theme="light"] .footer-bottom p{color:#5f4e6a}
html[data-theme="light"] .page-heading{background:radial-gradient(ellipse at 85% 90%,#f2d7ea 0,transparent 55%),#f8efe6;border-bottom-color:#d9c4d9}
html[data-theme="light"] .breadcrumb{color:#6a5875}
html[data-theme="light"] .preparation{border-color:#d9c4d9}
html[data-theme="light"] .button.outline{background:#fff;border-color:#b0459c;color:#7c106b}
html[data-theme="light"] .button:hover{border-color:#7c106b}
html[data-theme="light"] .button.gold:not(.hero-buttons .button){background:#fff;color:#4b1d52}
html[data-theme="light"] .stars{color:#c99700}
html[data-theme="light"] .credentials{background:#ffffffb3}
html[data-theme="light"] .lang-switch:hover{color:#fff}
html[data-theme="light"] .menu-toggle{color:#7c106b}
/* ไอคอนนีออนสีเหลืองบนพื้นสว่างอ่านยาก → ทองเข้ม (บนรูปแบนเนอร์หน้าแรกยังเป็นพื้นมืด คงนีออนไว้) */
html[data-theme="light"] .seeking-card .icon,html[data-theme="light"] .steps .icon,html[data-theme="light"] .steps .step-arrow,html[data-theme="light"] .contact-info .icon,html[data-theme="light"] .check-list .icon,html[data-theme="light"] .credential-list .icon{color:#c48a00;filter:drop-shadow(0 0 3px #ffd60a66)}
html[data-theme="light"] .faq-ideal-list li::marker{color:#c48a00}
@media(max-width:1100px){html[data-theme="light"] .main-nav{background:#fffaf3;box-shadow:0 16px 25px #5a2a5a1f}}

/* ---------- ประกายดาว ---------- */
.sparkle{position:fixed;left:0;top:0;z-index:70;pointer-events:none;width:var(--s,14px);height:var(--s,14px);margin:calc(var(--s,14px)/-2) 0 0 calc(var(--s,14px)/-2);animation:sparkle-fly var(--d,.9s) cubic-bezier(.2,.7,.3,1) forwards;will-change:transform,opacity}
.sparkle svg{display:block;width:100%;height:100%;filter:drop-shadow(0 0 3px #ffd36acc)}
@keyframes sparkle-fly{0%{opacity:0;transform:translate(var(--x),var(--y)) scale(.2) rotate(0)}18%{opacity:1;transform:translate(var(--x),var(--y)) scale(1) rotate(20deg)}100%{opacity:0;transform:translate(calc(var(--x) + var(--dx)),calc(var(--y) + var(--dy))) scale(.3) rotate(var(--r,90deg))}}
@media(prefers-reduced-motion:reduce){.sparkle{display:none}.theme-cord .cord-rope,.theme-cord .cord-knob{transition:none}}

/* ---------- ปุ่มเปิด/ปิดเพลง (แก้ด่วน 471) ---------- */
.music-toggle{position:fixed;left:max(14px,env(safe-area-inset-left));bottom:max(14px,env(safe-area-inset-bottom));z-index:60;width:44px;height:44px;padding:0;display:grid;place-items:center;border:1px solid var(--gold);border-radius:50%;background:var(--bg);color:var(--gold);box-shadow:0 4px 14px #0006;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .18s,color .18s}
.music-toggle:hover{background:var(--gold);color:var(--bg)}
.music-toggle svg{width:20px;height:20px}
.music-toggle .music-slash{display:none}
.music-toggle.is-off{opacity:.75}
.music-toggle.is-off .music-slash{display:block}
.music-toggle.is-on::after{content:'';position:absolute;inset:-1px;border:1px solid var(--gold);border-radius:50%;pointer-events:none;animation:music-pulse 2.8s ease-out infinite}
@keyframes music-pulse{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.45)}}
html[data-theme="light"] .music-toggle{background:#fff;box-shadow:0 4px 14px #5a2a5a26}
html[data-theme="light"] .music-toggle:hover{background:var(--gold);color:#fff}
@media(prefers-reduced-motion:reduce){.music-toggle.is-on::after{animation:none;opacity:.5}}
@media print{.music-toggle{display:none}}