@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Noto+Sans+Thai:wght@200;300;400;500;600;700&family=Noto+Serif+Thai:wght@300;400;500;600;700&display=swap');

/* QPRIME Global CSS — Appearance → Customize → Additional CSS */
/* Covers: Header, Footer, Animations, Buttons, Typography */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        html { scroll-behavior: smooth; }
        body { overflow-x: hidden; }
        ::selection { background: rgba(142,183,199,0.25); color: #000 }
        
        @keyframes breathe { 0%,100% { opacity:0.03 } 50% { opacity:0.06 } }
        @keyframes marquee { from { transform:translateX(0) } to { transform:translateX(-50%) } }
        
        .nav-item { position:relative; color:rgba(255,255,255,0.65); text-decoration:none; font-family:'Noto Sans Thai','Plus Jakarta Sans',sans-serif; font-size:11.5px; font-weight:300; letter-spacing:0.04em; padding:6px 0; transition:color 0.5s; line-height:1; display:inline-flex; align-items:center }
        .nav-item.nav-en { font-family:'Plus Jakarta Sans',sans-serif; font-size:10px; font-weight:400; letter-spacing:0.22em; text-transform:uppercase; line-height:1 }
        .nav-item.nav-thai { font-family:'Noto Sans Thai','Plus Jakarta Sans',sans-serif; font-size:10.5px; letter-spacing:0.08em; text-transform:none; font-weight:300; line-height:1 }
        .nav-item::after { content:''; position:absolute; bottom:0; left:50%; width:0; height:0.5px; background:linear-gradient(90deg,transparent,#D7A748,transparent); transition:all 0.6s cubic-bezier(0.16,1,0.3,1); transform:translateX(-50%) }
        .nav-item:hover::after { width:120% }
        .nav-item:hover { color:#fff }
        .nav-solid .nav-item { color:rgba(0,0,0,0.7) }
        .nav-solid .nav-item:hover { color:#000 }
        
        .nav-dropdown-wrap { position:relative; display:flex; align-items:center }
        .nav-dropdown { position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(8px); min-width:240px; background:rgba(255,255,255,0.98); backdrop-filter:blur(30px) saturate(1.3); border:1px solid rgba(0,0,0,0.04); padding:16px 0; opacity:0; pointer-events:none; transition:all 0.4s cubic-bezier(0.16,1,0.3,1); box-shadow:0 16px 48px rgba(0,0,0,0.06) }
        .nav-dropdown.active { opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0) }
        .nav-dropdown a { display:block; padding:9px 28px; font-family:'Noto Sans Thai','Plus Jakarta Sans',sans-serif; font-size:11.5px; font-weight:300; color:rgba(60,61,63,0.6); text-decoration:none; letter-spacing:0.03em; text-transform:none; transition:all 0.3s }
        .nav-dropdown a:hover { color:#000; background:rgba(215,167,72,0.03); padding-left:34px }
        .nav-dropdown a .sub-en { display:block; font-family:'Plus Jakarta Sans',sans-serif; font-size:10px; color:#8EB7C7; letter-spacing:0.12em; margin-top:2px; text-transform:uppercase }
        .nav-dropdown::before { content:''; position:absolute; top:-12px; left:0; right:0; height:12px }
        #langSw { line-height:1; display:inline-flex; align-items:center }
        #navDiv { flex-shrink:0 }
        
        .cta-gold { display:inline-flex; align-items:center; gap:10px; background:transparent; border:1px solid #D7A748; color:#D7A748; font-family:'Noto Sans Thai','Plus Jakarta Sans',sans-serif; font-weight:500; font-size:11px; letter-spacing:0.2em; text-transform:uppercase; padding:12px 32px; cursor:pointer; position:relative; overflow:hidden; transition:all 0.6s cubic-bezier(0.16,1,0.3,1) }
        .cta-gold::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,#D7A748,#FDE8A2,#EBBC64,#FFD779); transform:translateY(101%); transition:transform 0.6s cubic-bezier(0.16,1,0.3,1) }
        .cta-gold:hover::before { transform:translateY(0) }
        .cta-gold:hover { color:#000; border-color:transparent }
        .cta-gold span { position:relative; z-index:1 }
        .nav-solid .cta-gold { background:linear-gradient(135deg,#D7A748,#FDE8A2,#EBBC64,#FFD779); border-color:transparent; color:#000 }
        .nav-solid .cta-gold::before { background:#000 }
        .nav-solid .cta-gold:hover { color:#D7A748 }
        
        .cta-dark { display:inline-flex; align-items:center; gap:10px; background:#000; border:1px solid #000; color:#fff; font-family:'Noto Sans Thai','Plus Jakarta Sans',sans-serif; font-weight:500; font-size:11px; letter-spacing:0.2em; text-transform:uppercase; padding:12px 32px; cursor:pointer; transition:all 0.5s cubic-bezier(0.16,1,0.3,1) }
        .cta-dark:hover { background:transparent; color:#000 }
        
        .cta-outline { display:inline-flex; align-items:center; background:transparent; border:1px solid rgba(255,255,255,0.25); color:rgba(255,255,255,0.7); font-family:'Noto Sans Thai','Plus Jakarta Sans',sans-serif; font-weight:400; font-size:11px; letter-spacing:0.2em; text-transform:uppercase; padding:12px 32px; cursor:pointer; transition:all 0.5s cubic-bezier(0.16,1,0.3,1) }
        .cta-outline:hover { border-color:rgba(255,255,255,0.8); color:#fff }

        .marquee-track { display:flex; animation:marquee 30s linear infinite; width:fit-content }
        
        @media(max-width:900px) {
          .desk-nav { display:none !important }
          .mob-trigger { display:flex !important }
          #navInner { padding:0 20px !important; width:100% !important; max-width:100% !important }
          #navLogo { height:26px !important }
          .mob-trigger { width:36px !important; height:36px !important }
          .mob-trigger .ham-top { width:22px !important }
          .mob-trigger .ham-mid { width:16px !important }
          .mob-trigger .ham-bot { width:11px !important }
          .hero-title { font-size:42px !important; line-height:1.15 !important }
          .sec-title { font-size:36px !important }
          .grid-2 { grid-template-columns:1fr !important }
          .grid-3 { grid-template-columns:1fr !important }
          .grid-silo { grid-template-columns:1fr !important }
          .grid-silo > div:first-child { grid-column:span 1 !important; grid-row:span 1 !important }
          .faq-layout { grid-template-columns:1fr !important }
          .faq-sticky { position:static !important }
          .community-flex { flex-direction:column !important }
          .footer-grid { grid-template-columns:repeat(3, 1fr) !important; gap:24px !important }
          .hero-ctas { flex-direction:column !important; align-items:flex-start !important }
          .ba-height { min-height:320px !important }
          .trust-6 { grid-template-columns:repeat(3,1fr) !important }
          .mobile-cta-bar { display:flex !important }
        }
        @media(min-width:901px) {
          .mobile-cta-bar { display:none !important }
        }
        @media(max-width:540px) {
          .hero-title { font-size:32px !important }
          .sec-title { font-size:28px !important }
          .trust-row { flex-direction:column !important; gap:32px !important }
          .footer-grid { grid-template-columns:repeat(2,1fr) !important; gap:20px !important }
          .trust-6 { grid-template-columns:repeat(2,1fr) !important }
        }
      

/* ── Reveal animation ── */
.rv { opacity:0; transform:translateY(40px); transition:opacity 1s cubic-bezier(0.16,1,0.3,1), transform 1s cubic-bezier(0.16,1,0.3,1) }
.rv.vis { opacity:1; transform:translateY(0) }
.gold-line { height:1px; background:linear-gradient(90deg,#D7A748,rgba(215,167,72,0.1) 100%) }
a.cta-gold, a.cta-dark, a.cta-outline { text-decoration:none }
.mob-overlay { position:fixed; inset:0; z-index:999; background:rgba(0,0,0,0.98); display:flex; flex-direction:column; justify-content:center; padding:80px 48px; transform:translateX(100%); transition:transform 0.6s cubic-bezier(0.16,1,0.3,1) }
.mob-overlay.open { transform:translateX(0) }
.mob-overlay .mob-nav-group { opacity:0; transform:translateX(20px); transition:all 0.5s cubic-bezier(0.16,1,0.3,1) }
.mob-overlay.open .mob-nav-group { opacity:1; transform:translateX(0) }
.mob-overlay.open .mob-nav-group:nth-child(1) { transition-delay:0.1s }
.mob-overlay.open .mob-nav-group:nth-child(2) { transition-delay:0.15s }
.mob-overlay.open .mob-nav-group:nth-child(3) { transition-delay:0.2s }
.mob-overlay.open .mob-nav-group:nth-child(4) { transition-delay:0.25s }
.mob-overlay.open .mob-nav-group:nth-child(5) { transition-delay:0.3s }
.mob-overlay.open .mob-nav-group:nth-child(6) { transition-delay:0.35s }
.mob-nav-group { border-bottom:1px solid rgba(255,255,255,0.04); padding:18px 0 }
.mob-main-link { font-family:'Noto Serif Thai',serif; font-size:22px; font-weight:400; color:rgba(255,255,255,0.75); text-decoration:none; display:block; transition:color 0.3s; letter-spacing:0.01em }
.mob-main-link:hover { color:#D7A748 }
.mob-main-link.en-link { font-family:'Playfair Display',serif; font-size:26px; font-weight:300; letter-spacing:0.04em; color:rgba(255,255,255,0.9) }
.mob-sub { display:flex; gap:16px; flex-wrap:wrap; margin-top:10px }
.mob-sub a { font-family:'Noto Sans Thai',sans-serif; font-size:12px; font-weight:300; color:rgba(255,255,255,0.25); text-decoration:none; letter-spacing:0.02em; transition:color 0.3s; position:relative; padding-left:10px }
.mob-sub a::before { content:''; position:absolute; left:0; top:50%; width:4px; height:1px; background:rgba(215,167,72,0.3) }
.mob-sub a:hover { color:#D7A748 }
.mob-trigger.open .ham-top { transform: translateY(6px) rotate(45deg); width: 20px !important; }
.mob-trigger.open .ham-mid { opacity: 0; transform: scaleX(0); }
.mob-trigger.open .ham-bot { transform: translateY(-6px) rotate(-45deg); width: 20px !important; }
.silo-card { transition:all 0.5s cubic-bezier(0.16,1,0.3,1) }
.silo-card:not(.featured):hover { background:#F2F2F0 !important }
.mm-cell { transition:all 0.4s cubic-bezier(0.16,1,0.3,1) }
.mm-cell:hover { background:#F2F2F0 !important; padding-left:28px !important }
.doc-card:hover .doc-img { transform:scale(1.03) }
.doc-img { transition:transform 0.8s cubic-bezier(0.16,1,0.3,1) }
.blog-card:hover .blog-img { transform:scale(1.05) }
.blog-img { transition:transform 0.8s cubic-bezier(0.16,1,0.3,1) }
.brand-logo:hover { color:#D7A748 !important; border-color:rgba(215,167,72,0.4) !important }
.faq-item { border-bottom:1px solid rgba(142,183,199,0.12); cursor:pointer; padding:32px 0 }
.faq-icon { width:28px; height:28px; border:1px solid rgba(142,183,199,0.2); display:flex; align-items:center; justify-content:center; transition:transform 0.5s cubic-bezier(0.16,1,0.3,1); flex-shrink:0 }
.faq-item.open .faq-icon { transform:rotate(45deg) }
.faq-a { max-height:0; overflow:hidden; transition:max-height 0.6s cubic-bezier(0.16,1,0.3,1), opacity 0.4s; opacity:0 }
.faq-item.open .faq-a { max-height:400px; opacity:1 }
.ft-link { display:block; color:rgba(255,255,255,0.3); text-decoration:none; font-weight:300; line-height:2.6; transition:color 0.3s }
.ft-link:hover { color:rgba(255,255,255,0.7) }
.ft-link.en { font-family:'Plus Jakarta Sans',sans-serif; font-size:11.5px; letter-spacing:0.03em }
.ft-link.th { font-family:'Noto Sans Thai',sans-serif; font-size:12px; letter-spacing:0.01em }
.ft-legal { font-family:'Plus Jakarta Sans',sans-serif; font-size:11px; color:rgba(255,255,255,0.15); text-decoration:none; letter-spacing:0.05em; transition:color 0.3s }
.ft-legal:hover { color:rgba(255,255,255,0.35) }
.social-icon { width:40px; height:40px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,0.1); color:rgba(255,255,255,0.35); transition:all 0.4s cubic-bezier(0.16,1,0.3,1); text-decoration:none }
.social-icon:hover { border-color:rgba(215,167,72,0.4); color:#D7A748 }
/* ── Hide GeneratePress default header/footer (ใช้ custom แทน) ── */
.site-header, .site-footer { display: none !important; }
#page { padding-top: 0 !important; }

/* ── Fallback: แสดง hero text แม้ JS ยังไม่โหลด ── */
/* เริ่มต้นเห็นทั้งหมด — JS จะเพิ่ม .anim-ready เพื่อเปิด animation */
.hero-el { opacity: 1 !important; transform: translateY(0) !important; }
.anim-ready .hero-el { opacity: 0 !important; transform: translateY(30px) !important; }
.anim-ready .hero-el.show { opacity: 1 !important; transform: translateY(0) !important; }
.rv { opacity: 1; transform: translateY(0); }
.anim-ready .rv { opacity: 0; transform: translateY(40px); }
.anim-ready .rv.vis { opacity: 1; transform: translateY(0); }

เก็บไว้ได้ครับ — รวม CSS ทั้งหมดที่ควรอยู่ใน Additional CSS ตอนนี้:

```css
/* Fix mobile menu overlay */
.mob-overlay:not(.open) { pointer-events: none !important; visibility: hidden !important; display: none !important; }
.mob-overlay.open { pointer-events: auto !important; visibility: visible !important; display: flex !important; }

/* Mobile tap feedback */
@media (max-width: 900px) {
  a:active, button:active { opacity: 0.6 !important; transform: scale(0.97) !important; transition: all 0.05s !important; }
}

/* Fix: Mommy Makeover hover gold */
.mob-main-link.en-link:hover,
.mob-main-link.en-link:active { color: #D7A748 !important; }
```

**ลบอันอื่นทิ้ง** เอาแค่ 3 อันนี้พอครับ