{"id":2215,"date":"2024-01-30T13:19:00","date_gmt":"2024-01-30T06:19:00","guid":{"rendered":"https:\/\/arch.rmutsv.ac.th\/ruts\/?page_id=2215"},"modified":"2026-11-03T15:46:07","modified_gmt":"2026-11-03T08:46:07","slug":"contactus","status":"publish","type":"page","link":"https:\/\/arch.rmutsv.ac.th\/ruts\/contactus\/","title":{"rendered":"\u0e15\u0e34\u0e14\u0e15\u0e48\u0e2d\u0e04\u0e13\u0e30"},"content":{"rendered":"\n<style>\n  .arch-c2-wrap {\n    position: relative;\n    max-width: 1180px;\n    margin: 20px auto 90px;\n    padding: 0 20px;\n    font-family: 'Prompt', -apple-system, BlinkMacSystemFont, sans-serif;\n    color: #0f172a;\n    box-sizing: border-box;\n  }\n  .arch-c2-wrap *,\n  .arch-c2-wrap *::before,\n  .arch-c2-wrap *::after {\n    box-sizing: border-box;\n  }\n\n  \/* =========================================================\n     1. SCANLINE BLOOM HERO BANNER (IMAGE 1 + IMAGE 2 FUSION)\n     ========================================================= *\/\n  .arch-c2-hero {\n    position: relative;\n    background: #0b0909;\n    border-radius: 32px;\n    padding: clamp(34px, 4.8vw, 56px);\n    color: #ffffff;\n    overflow: hidden;\n    box-shadow: 0 28px 65px -15px rgba(11, 9, 9, 0.55),\n                0 0 0 1px rgba(255, 106, 79, 0.22) inset;\n    margin-bottom: 24px;\n    display: grid;\n    grid-template-columns: 1.2fr 0.95fr;\n    gap: 36px;\n    align-items: center;\n    cursor: crosshair;\n  }\n  @media (max-width: 960px) {\n    .arch-c2-hero {\n      grid-template-columns: 1fr;\n      gap: 28px;\n    }\n  }\n\n  \/* WebGL Scanline Bloom Canvas Background *\/\n  .arch-bloom-canvas {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    display: block;\n    pointer-events: none;\n    z-index: 0;\n  }\n\n  \/* Readability Vignette Scrim so text stays 100% crisp over scanline art *\/\n  .arch-bloom-scrim {\n    position: absolute;\n    inset: 0;\n    background:\n      radial-gradient(circle at 22% 50%, rgba(11, 9, 9, 0.78) 0%, rgba(11, 9, 9, 0.42) 48%, rgba(11, 9, 9, 0.18) 100%),\n      linear-gradient(90deg, rgba(11, 9, 9, 0.68) 0%, rgba(11, 9, 9, 0.22) 55%, rgba(11, 9, 9, 0.45) 100%);\n    pointer-events: none;\n    z-index: 1;\n  }\n\n  .arch-c2-hero-left {\n    position: relative;\n    z-index: 2;\n  }\n\n  \/* Live Status + Real-time Clock Pill *\/\n  .arch-c2-status-bar {\n    display: inline-flex;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: 10px;\n    background: rgba(15, 12, 12, 0.72);\n    backdrop-filter: blur(14px);\n    -webkit-backdrop-filter: blur(14px);\n    border: 1px solid rgba(255, 106, 79, 0.28);\n    padding: 7px 16px;\n    border-radius: 999px;\n    font-size: 0.82rem;\n    font-weight: 500;\n    color: #f8fafc;\n    margin-bottom: 20px;\n    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);\n  }\n  .arch-c2-pulse-dot {\n    width: 9px;\n    height: 9px;\n    border-radius: 50%;\n    background: #10b981;\n    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.25), 0 0 12px #10b981;\n    display: inline-block;\n  }\n  .arch-c2-pulse-dot.is-closed {\n    background: #f59e0b;\n    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.25), 0 0 12px #f59e0b;\n  }\n  .arch-c2-clock-badge {\n    padding-left: 10px;\n    border-left: 1px solid rgba(255, 255, 255, 0.2);\n    color: #ff8a65;\n    font-weight: 600;\n  }\n\n  .arch-c2-hero-eyebrow {\n    font-size: 0.8rem;\n    font-weight: 700;\n    letter-spacing: 0.14em;\n    text-transform: uppercase;\n    color: #ff6a4f;\n    margin: 0 0 8px;\n    display: block;\n    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);\n  }\n  .arch-c2-hero-title {\n    font-size: clamp(2rem, 3.8vw, 2.85rem);\n    font-weight: 700;\n    line-height: 1.2;\n    margin: 0 0 14px;\n    color: #ffffff !important;\n    letter-spacing: -0.01em;\n    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.75);\n  }\n  .arch-c2-hero-title span {\n    background: linear-gradient(135deg, #ff5722 0%, #ff9800 55%, #ffc107 100%);\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n  }\n  .arch-c2-hero-desc {\n    font-size: 1rem;\n    line-height: 1.65;\n    color: #e2e8f0;\n    margin: 0 0 26px;\n    max-width: 540px;\n    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85);\n  }\n\n  \/* Quick Hero CTA Buttons *\/\n  .arch-c2-hero-ctas {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: 12px;\n  }\n  .arch-c2-btn-primary {\n    display: inline-flex;\n    align-items: center;\n    gap: 9px;\n    padding: 13px 24px;\n    border-radius: 999px;\n    background: linear-gradient(135deg, #e3161f 0%, #ff6600 100%);\n    color: #ffffff !important;\n    font-size: 0.92rem;\n    font-weight: 600;\n    text-decoration: none !important;\n    box-shadow: 0 12px 28px -6px rgba(227, 22, 31, 0.6);\n    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),\n                box-shadow 0.25s ease;\n    cursor: pointer;\n  }\n  .arch-c2-btn-primary:hover {\n    transform: translateY(-3px);\n    box-shadow: 0 18px 34px -6px rgba(255, 102, 0, 0.75);\n  }\n  .arch-c2-btn-glass {\n    display: inline-flex;\n    align-items: center;\n    gap: 9px;\n    padding: 13px 22px;\n    border-radius: 999px;\n    background: rgba(15, 12, 12, 0.65);\n    border: 1px solid rgba(255, 106, 79, 0.35);\n    color: #ffffff !important;\n    font-size: 0.92rem;\n    font-weight: 600;\n    text-decoration: none !important;\n    backdrop-filter: blur(12px);\n    -webkit-backdrop-filter: blur(12px);\n    transition: all 0.25s ease;\n    cursor: pointer;\n  }\n  .arch-c2-btn-glass:hover {\n    background: rgba(227, 22, 31, 0.25);\n    border-color: #ff6a4f;\n    transform: translateY(-3px);\n  }\n\n  \/* Right Side of Hero: Interactive Department Switcher Card *\/\n  .arch-c2-dept-box {\n    position: relative;\n    z-index: 2;\n    background: rgba(14, 12, 16, 0.72);\n    backdrop-filter: blur(18px);\n    -webkit-backdrop-filter: blur(18px);\n    border: 1px solid rgba(255, 106, 79, 0.26);\n    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);\n    border-radius: 24px;\n    padding: 24px;\n    cursor: default;\n  }\n  .arch-c2-dept-label {\n    font-size: 0.78rem;\n    text-transform: uppercase;\n    letter-spacing: 0.08em;\n    color: #fca5a5;\n    font-weight: 600;\n    margin: 0 0 12px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n  .arch-c2-dept-tabs {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 6px;\n    background: rgba(8, 7, 10, 0.78);\n    padding: 5px;\n    border-radius: 14px;\n    margin-bottom: 18px;\n    border: 1px solid rgba(255, 106, 79, 0.16);\n  }\n  .arch-c2-dept-tab {\n    appearance: none;\n    border: none;\n    background: transparent;\n    color: #cbd5e1;\n    font-family: inherit;\n    font-size: 0.8rem;\n    font-weight: 600;\n    padding: 9px 8px;\n    border-radius: 10px;\n    cursor: pointer;\n    transition: all 0.25s ease;\n    text-align: center;\n  }\n  .arch-c2-dept-tab.is-active {\n    background: linear-gradient(135deg, #e3161f 0%, #ff6600 100%);\n    color: #ffffff;\n    box-shadow: 0 4px 14px rgba(227, 22, 31, 0.45);\n  }\n  .arch-c2-dept-panel {\n    display: none;\n    animation: archFadeSlide 0.3s ease forwards;\n  }\n  .arch-c2-dept-panel.is-active {\n    display: block;\n  }\n  @keyframes archFadeSlide {\n    from { opacity: 0; transform: translateY(6px); }\n    to { opacity: 1; transform: translateY(0); }\n  }\n  .arch-c2-dept-title {\n    font-size: 1.08rem;\n    font-weight: 700;\n    color: #ffffff;\n    margin: 0 0 4px;\n  }\n  .arch-c2-dept-sub {\n    font-size: 0.84rem;\n    color: #cbd5e1;\n    margin: 0 0 14px;\n  }\n  .arch-c2-dept-row {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    background: rgba(8, 7, 10, 0.68);\n    border: 1px solid rgba(255, 255, 255, 0.1);\n    padding: 11px 14px;\n    border-radius: 14px;\n    margin-bottom: 8px;\n  }\n  .arch-c2-dept-row:last-child {\n    margin-bottom: 0;\n  }\n  .arch-c2-dept-key {\n    font-size: 0.78rem;\n    color: #94a3b8;\n    display: block;\n  }\n  .arch-c2-dept-val {\n    font-size: 0.95rem;\n    font-weight: 700;\n    color: #ffffff;\n  }\n  .arch-c2-mini-copy {\n    appearance: none;\n    border: 1px solid rgba(255, 106, 79, 0.3);\n    background: rgba(255, 255, 255, 0.08);\n    color: #ffffff;\n    font-family: inherit;\n    font-size: 0.76rem;\n    font-weight: 600;\n    padding: 6px 12px;\n    border-radius: 999px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n  }\n  .arch-c2-mini-copy:hover {\n    background: #e3161f;\n    border-color: #ff6a4f;\n  }\n\n  \/* =========================================================\n     2. INTERACTIVE SPOTLIGHT BENTO CARDS (3 COLUMNS)\n     ========================================================= *\/\n  .arch-c2-bento {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 20px;\n    margin-bottom: 24px;\n  }\n  @media (max-width: 960px) {\n    .arch-c2-bento {\n      grid-template-columns: 1fr;\n    }\n  }\n\n  .arch-c2-card {\n    position: relative;\n    background: #ffffff;\n    border-radius: 28px;\n    padding: 28px 26px;\n    border: 1px solid rgba(15, 23, 42, 0.07);\n    box-shadow: 0 18px 45px -15px rgba(15, 23, 42, 0.07);\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    overflow: hidden;\n    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),\n                box-shadow 0.35s ease,\n                border-color 0.3s ease;\n  }\n  .arch-c2-card:hover {\n    transform: translateY(-7px);\n    border-color: rgba(255, 102, 0, 0.35);\n    box-shadow: 0 28px 55px -14px rgba(255, 102, 0, 0.16);\n  }\n\n  .arch-c2-spotlight {\n    position: absolute;\n    width: 280px;\n    height: 280px;\n    border-radius: 50%;\n    background: radial-gradient(circle, rgba(255, 102, 0, 0.11) 0%, rgba(255, 102, 0, 0) 70%);\n    transform: translate(-50%, -50%);\n    pointer-events: none;\n    opacity: 0;\n    transition: opacity 0.3s ease;\n    z-index: 0;\n  }\n  .arch-c2-card:hover .arch-c2-spotlight {\n    opacity: 1;\n  }\n\n  .arch-c2-card-content {\n    position: relative;\n    z-index: 1;\n  }\n  .arch-c2-card-head {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: 20px;\n  }\n  .arch-c2-icon-box {\n    width: 56px;\n    height: 56px;\n    border-radius: 18px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);\n  }\n  .arch-c2-card:hover .arch-c2-icon-box {\n    transform: scale(1.08) rotate(-4deg);\n  }\n  .arch-c2-icon-orange {\n    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);\n    color: #ea580c;\n    border: 1px solid rgba(234, 88, 12, 0.15);\n  }\n  .arch-c2-icon-teal {\n    background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%);\n    color: #0d9488;\n    border: 1px solid rgba(13, 148, 136, 0.15);\n  }\n  .arch-c2-icon-slate {\n    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);\n    color: #0f172a;\n    border: 1px solid rgba(15, 23, 42, 0.12);\n  }\n\n  .arch-c2-badge-num {\n    font-size: 0.74rem;\n    font-weight: 700;\n    letter-spacing: 0.08em;\n    text-transform: uppercase;\n    padding: 5px 12px;\n    border-radius: 999px;\n    background: #f8fafc;\n    color: #475569;\n    border: 1px solid rgba(15, 23, 42, 0.07);\n  }\n\n  .arch-c2-card-title {\n    font-size: 1.24rem;\n    font-weight: 700;\n    color: #0f172a;\n    margin: 0 0 6px;\n  }\n  .arch-c2-card-main {\n    font-size: 1.12rem;\n    font-weight: 700;\n    color: #ea580c;\n    margin: 0 0 12px;\n    word-break: break-word;\n  }\n  .arch-c2-meta-list {\n    list-style: none;\n    padding: 0;\n    margin: 0 0 20px;\n    border-top: 1px dashed rgba(15, 23, 42, 0.1);\n    padding-top: 12px;\n  }\n  .arch-c2-meta-list li {\n    display: flex;\n    justify-content: space-between;\n    font-size: 0.86rem;\n    color: #475569;\n    padding: 4px 0;\n  }\n  .arch-c2-meta-list li strong {\n    color: #0f172a;\n    font-weight: 600;\n  }\n\n  .arch-c2-card-foot {\n    position: relative;\n    z-index: 1;\n    display: flex;\n    gap: 10px;\n  }\n  .arch-c2-act-btn {\n    flex: 1;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 7px;\n    padding: 10px 14px;\n    border-radius: 14px;\n    font-size: 0.84rem;\n    font-weight: 600;\n    font-family: inherit;\n    text-decoration: none !important;\n    cursor: pointer;\n    border: 1px solid rgba(15, 23, 42, 0.1);\n    background: #f8fafc;\n    color: #0f172a !important;\n    transition: all 0.22s ease;\n  }\n  .arch-c2-act-btn:hover {\n    background: #0f172a;\n    color: #ffffff !important;\n    border-color: #0f172a;\n  }\n  .arch-c2-act-btn.is-solid {\n    background: #0f172a;\n    color: #ffffff !important;\n    border-color: #0f172a;\n  }\n  .arch-c2-act-btn.is-solid:hover {\n    background: #ff6600;\n    border-color: #ff6600;\n  }\n\n  \/* =========================================================\n     3. 4-CHANNEL SOCIAL MEDIA DOCK (MORPHING BRAND CARDS)\n     ========================================================= *\/\n  .arch-c2-social-grid {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    gap: 16px;\n    margin-bottom: 24px;\n  }\n  @media (max-width: 960px) {\n    .arch-c2-social-grid {\n      grid-template-columns: repeat(2, 1fr);\n    }\n  }\n  @media (max-width: 520px) {\n    .arch-c2-social-grid {\n      grid-template-columns: 1fr;\n    }\n  }\n\n  .arch-c2-soc-card {\n    position: relative;\n    background: #ffffff;\n    border-radius: 22px;\n    padding: 20px 22px;\n    border: 1px solid rgba(15, 23, 42, 0.07);\n    box-shadow: 0 12px 32px -12px rgba(15, 23, 42, 0.06);\n    text-decoration: none !important;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 14px;\n    overflow: hidden;\n    transition: all 0.32s cubic-bezier(0.16, 1, 0.3, 1);\n  }\n  .arch-c2-soc-left {\n    display: flex;\n    align-items: center;\n    gap: 14px;\n    position: relative;\n    z-index: 1;\n  }\n  .arch-c2-soc-icon {\n    width: 46px;\n    height: 46px;\n    border-radius: 14px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: #ffffff;\n    flex-shrink: 0;\n    transition: transform 0.3s ease;\n  }\n  .arch-c2-soc-fb .arch-c2-soc-icon { background: #1877f2; }\n  .arch-c2-soc-msg .arch-c2-soc-icon { background: linear-gradient(135deg, #00b2ff 0%, #006aff 100%); }\n  .arch-c2-soc-ig .arch-c2-soc-icon { background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }\n  .arch-c2-soc-tt .arch-c2-soc-icon { background: #0f172a; }\n\n  .arch-c2-soc-name {\n    font-size: 0.98rem;\n    font-weight: 700;\n    color: #0f172a;\n    margin: 0 0 2px;\n    transition: color 0.25s ease;\n  }\n  .arch-c2-soc-handle {\n    font-size: 0.78rem;\n    color: #64748b;\n    margin: 0;\n    transition: color 0.25s ease;\n  }\n  .arch-c2-soc-arrow {\n    width: 34px;\n    height: 34px;\n    border-radius: 50%;\n    background: #f1f5f9;\n    color: #0f172a;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);\n  }\n  .arch-c2-soc-card:hover {\n    transform: translateY(-5px);\n    box-shadow: 0 20px 40px -12px rgba(15, 23, 42, 0.16);\n    border-color: rgba(255, 102, 0, 0.3);\n  }\n  .arch-c2-soc-card:hover .arch-c2-soc-icon {\n    transform: scale(1.1) rotate(-5deg);\n  }\n  .arch-c2-soc-card:hover .arch-c2-soc-arrow {\n    background: #ff6600;\n    color: #ffffff;\n    transform: rotate(45deg);\n  }\n\n  \/* =========================================================\n     4. ARCHITECTURAL MAP SHOWCASE WITH FLOATING COMPASS PANEL\n     ========================================================= *\/\n  .arch-c2-map-card {\n    position: relative;\n    background: #ffffff;\n    border-radius: 32px;\n    padding: 14px;\n    border: 1px solid rgba(15, 23, 42, 0.08);\n    box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.1);\n  }\n  .arch-c2-map-inner {\n    position: relative;\n    width: 100%;\n    height: 480px;\n    border-radius: 22px;\n    overflow: hidden;\n    background: #e2e8f0;\n  }\n  @media (max-width: 768px) {\n    .arch-c2-map-inner {\n      height: 380px;\n    }\n  }\n  .arch-c2-map-inner iframe {\n    width: 100%;\n    height: 100%;\n    border: 0;\n    display: block;\n  }\n\n  .arch-c2-map-overlay {\n    position: absolute;\n    bottom: 20px;\n    left: 20px;\n    right: 20px;\n    max-width: 440px;\n    background: rgba(15, 23, 42, 0.88);\n    backdrop-filter: blur(16px);\n    -webkit-backdrop-filter: blur(16px);\n    color: #ffffff;\n    padding: 22px 24px;\n    border-radius: 22px;\n    border: 1px solid rgba(255, 255, 255, 0.15);\n    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);\n    z-index: 3;\n  }\n  @media (max-width: 640px) {\n    .arch-c2-map-overlay {\n      position: relative;\n      bottom: auto;\n      left: auto;\n      right: auto;\n      max-width: 100%;\n      margin-top: 12px;\n      background: #0f172a;\n    }\n  }\n  .arch-c2-gps-tag {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 0.72rem;\n    font-weight: 700;\n    letter-spacing: 0.1em;\n    color: #fb923c;\n    text-transform: uppercase;\n    margin-bottom: 6px;\n  }\n  .arch-c2-map-overlay h3 {\n    font-size: 1.15rem;\n    font-weight: 700;\n    color: #ffffff !important;\n    margin: 0 0 6px;\n  }\n  .arch-c2-map-overlay p {\n    font-size: 0.84rem;\n    color: #cbd5e1;\n    line-height: 1.5;\n    margin: 0 0 16px;\n  }\n  .arch-c2-map-btns {\n    display: flex;\n    gap: 10px;\n    flex-wrap: wrap;\n  }\n  .arch-c2-nav-btn {\n    flex: 1;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    padding: 10px 18px;\n    border-radius: 999px;\n    background: linear-gradient(135deg, #ff6600 0%, #ea580c 100%);\n    color: #ffffff !important;\n    font-size: 0.84rem;\n    font-weight: 600;\n    text-decoration: none !important;\n    box-shadow: 0 8px 20px -4px rgba(255, 102, 0, 0.5);\n    transition: transform 0.22s ease;\n  }\n  .arch-c2-nav-btn:hover {\n    transform: translateY(-2px);\n  }\n\n  \/* =========================================================\n     5. FLOATING TOAST NOTIFICATION & SCROLL REVEAL\n     ========================================================= *\/\n  .arch-c2-toast {\n    position: fixed;\n    bottom: 28px;\n    left: 50%;\n    transform: translate(-50%, 24px);\n    background: #0f172a;\n    color: #ffffff;\n    padding: 12px 24px;\n    border-radius: 999px;\n    font-size: 0.88rem;\n    font-weight: 600;\n    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.35);\n    border: 1px solid rgba(255, 255, 255, 0.14);\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    opacity: 0;\n    pointer-events: none;\n    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);\n    z-index: 99999;\n  }\n  .arch-c2-toast.is-visible {\n    opacity: 1;\n    transform: translate(-50%, 0);\n  }\n  .arch-c2-toast-dot {\n    width: 9px;\n    height: 9px;\n    border-radius: 50%;\n    background: #10b981;\n  }\n\n  .arch-c2-reveal {\n    opacity: 1;\n    transform: translateY(0);\n    transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),\n                transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);\n  }\n  .arch-c2-reveal.arch-wait {\n    opacity: 0 !important;\n    transform: translateY(30px) !important;\n    transition: none !important;\n  }\n  .arch-c2-reveal.arch-show {\n    opacity: 1 !important;\n    transform: translateY(0) !important;\n    transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),\n                transform 0.85s cubic-bezier(0.16, 1, 0.3, 1) !important;\n  }\n<\/style>\n\n<div class=\"arch-c2-wrap\">\n\n  <div class=\"arch-c2-hero arch-c2-reveal\" id=\"archBloomHero\">\n    <canvas class=\"arch-bloom-canvas\" id=\"archBloomCanvas\" aria-hidden=\"true\"><\/canvas>\n    <div class=\"arch-bloom-scrim\" aria-hidden=\"true\"><\/div>\n\n    <div class=\"arch-c2-hero-left\">\n      <div class=\"arch-c2-status-bar\">\n        <span class=\"arch-c2-pulse-dot\" id=\"archC2Dot\"><\/span>\n        <span id=\"archC2Status\">\u0e40\u0e1b\u0e34\u0e14\u0e17\u0e33\u0e01\u0e32\u0e23 \u0e08\u0e31\u0e19\u0e17\u0e23\u0e4c \u2013 \u0e28\u0e38\u0e01\u0e23\u0e4c (08:30 \u2013 16:30 \u0e19.)<\/span>\n        <span class=\"arch-c2-clock-badge\" id=\"archC2Clock\">\u0e2a\u0e07\u0e02\u0e25\u0e32 08:30 \u0e19.<\/span>\n      <\/div>\n\n      <span class=\"arch-c2-hero-eyebrow\">Faculty of Architecture \u2022 RUTS<\/span>\n      <h2 class=\"arch-c2-hero-title\">\n        \u0e15\u0e34\u0e14\u0e15\u0e48\u0e2d<span>\u0e04\u0e13\u0e30\u0e2a\u0e16\u0e32\u0e1b\u0e31\u0e15\u0e22\u0e01\u0e23\u0e23\u0e21\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c<\/span>\n      <\/h2>\n      <p class=\"arch-c2-hero-desc\">\n        \u0e21\u0e2b\u0e32\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e23\u0e32\u0e0a\u0e21\u0e07\u0e04\u0e25\u0e28\u0e23\u0e35\u0e27\u0e34\u0e0a\u0e31\u0e22 (\u0e1e\u0e37\u0e49\u0e19\u0e17\u0e35\u0e48\u0e1a\u0e48\u0e2d\u0e22\u0e32\u0e07 \u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e40\u0e21\u0e37\u0e2d\u0e07\u0e2a\u0e07\u0e02\u0e25\u0e32) \u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e15\u0e49\u0e2d\u0e19\u0e23\u0e31\u0e1a\u0e41\u0e25\u0e30\u0e43\u0e2b\u0e49\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e14\u0e49\u0e32\u0e19\u0e2b\u0e25\u0e31\u0e01\u0e2a\u0e39\u0e15\u0e23 \u0e07\u0e32\u0e19\u0e2a\u0e32\u0e23\u0e1a\u0e23\u0e23\u0e13 \u0e41\u0e25\u0e30\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e2a\u0e32\u0e19\u0e07\u0e32\u0e19\u0e17\u0e38\u0e01\u0e20\u0e32\u0e04\u0e2a\u0e48\u0e27\u0e19\n      <\/p>\n\n      <div class=\"arch-c2-hero-ctas\">\n        <a href=\"tel:074317173\" class=\"arch-c2-btn-primary\" data-no-bloom=\"1\">\n          <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.3\"><path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z\"><\/path><\/svg>\n          <span>\u0e42\u0e17\u0e23\u0e2a\u0e33\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19 0-7431-7173<\/span>\n        <\/a>\n        <a href=\"https:\/\/m.me\/113341151873720\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"arch-c2-btn-glass\" data-no-bloom=\"1\">\n          <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\"><path d=\"M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z\"><\/path><\/svg>\n          <span>\u0e17\u0e31\u0e01\u0e41\u0e0a\u0e17 Messenger \u0e14\u0e48\u0e27\u0e19<\/span>\n        <\/a>\n      <\/div>\n    <\/div>\n\n    <div class=\"arch-c2-dept-box\" data-no-bloom=\"1\">\n      <div class=\"arch-c2-dept-label\">\n        <span>\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e17\u0e35\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e15\u0e34\u0e14\u0e15\u0e48\u0e2d\u0e14\u0e48\u0e27\u0e19<\/span>\n        <span>QUICK DIRECTORY<\/span>\n      <\/div>\n\n      <div class=\"arch-c2-dept-tabs\">\n        <button type=\"button\" class=\"arch-c2-dept-tab is-active\" data-tab=\"0\">\u0e2a\u0e33\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19\/\u0e2a\u0e32\u0e23\u0e1a\u0e23\u0e23\u0e13<\/button>\n        <button type=\"button\" class=\"arch-c2-dept-tab\" data-tab=\"1\">\u0e2a\u0e21\u0e31\u0e04\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\/\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23<\/button>\n        <button type=\"button\" class=\"arch-c2-dept-tab\" data-tab=\"2\">\u0e1b\u0e23\u0e30\u0e0a\u0e32\u0e2a\u0e31\u0e21\u0e1e\u0e31\u0e19\u0e18\u0e4c<\/button>\n      <\/div>\n\n      <div class=\"arch-c2-dept-panel is-active\" data-panel=\"0\">\n        <h4 class=\"arch-c2-dept-title\">\u0e07\u0e32\u0e19\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e17\u0e31\u0e48\u0e27\u0e44\u0e1b\u0e41\u0e25\u0e30\u0e2a\u0e32\u0e23\u0e1a\u0e23\u0e23\u0e13<\/h4>\n        <p class=\"arch-c2-dept-sub\">\u0e2a\u0e48\u0e07\u0e2b\u0e19\u0e31\u0e07\u0e2a\u0e37\u0e2d\u0e23\u0e32\u0e0a\u0e01\u0e32\u0e23 \u0e15\u0e34\u0e14\u0e15\u0e48\u0e2d\u0e2a\u0e33\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19\u0e04\u0e13\u0e1a\u0e14\u0e35 \u0e41\u0e25\u0e30\u0e1b\u0e23\u0e30\u0e2a\u0e32\u0e19\u0e07\u0e32\u0e19\u0e20\u0e32\u0e22\u0e19\u0e2d\u0e01<\/p>\n        <div class=\"arch-c2-dept-row\">\n          <div>\n            <span class=\"arch-c2-dept-key\">\u0e42\u0e17\u0e23\u0e28\u0e31\u0e1e\u0e17\u0e4c\u0e2a\u0e33\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19 \/ \u0e42\u0e17\u0e23\u0e2a\u0e32\u0e23 (Fax)<\/span>\n            <span class=\"arch-c2-dept-val\">0-7431-7173 \/ 0-7431-7174<\/span>\n          <\/div>\n          <button type=\"button\" class=\"arch-c2-mini-copy arch-copy-trigger\" data-copy=\"074317173\">\u0e04\u0e31\u0e14\u0e25\u0e2d\u0e01<\/button>\n        <\/div>\n        <div class=\"arch-c2-dept-row\">\n          <div>\n            <span class=\"arch-c2-dept-key\">\u0e2d\u0e35\u0e40\u0e21\u0e25\u0e07\u0e32\u0e19\u0e2a\u0e32\u0e23\u0e1a\u0e23\u0e23\u0e13<\/span>\n            <span class=\"arch-c2-dept-val\">saraban.25@rmutsv.ac.th<\/span>\n          <\/div>\n          <button type=\"button\" class=\"arch-c2-mini-copy arch-copy-trigger\" data-copy=\"saraban.25@rmutsv.ac.th\">\u0e04\u0e31\u0e14\u0e25\u0e2d\u0e01<\/button>\n        <\/div>\n      <\/div>\n\n      <div class=\"arch-c2-dept-panel\" data-panel=\"1\">\n        <h4 class=\"arch-c2-dept-title\">\u0e2a\u0e2d\u0e1a\u0e16\u0e32\u0e21\u0e01\u0e32\u0e23\u0e23\u0e31\u0e1a\u0e2a\u0e21\u0e31\u0e04\u0e23\u0e19\u0e31\u0e01\u0e28\u0e36\u0e01\u0e29\u0e32\u0e41\u0e25\u0e30\u0e2b\u0e25\u0e31\u0e01\u0e2a\u0e39\u0e15\u0e23<\/h4>\n        <p class=\"arch-c2-dept-sub\">\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e23\u0e2d\u0e1a Portfolio, \u0e42\u0e04\u0e27\u0e15\u0e32, \u0e23\u0e31\u0e1a\u0e15\u0e23\u0e07 \u0e41\u0e25\u0e30\u0e2b\u0e25\u0e31\u0e01\u0e2a\u0e39\u0e15\u0e23\u0e17\u0e31\u0e49\u0e07 4 \u0e2a\u0e32\u0e02\u0e32\u0e27\u0e34\u0e0a\u0e32<\/p>\n        <div class=\"arch-c2-dept-row\">\n          <div>\n            <span class=\"arch-c2-dept-key\">\u0e2a\u0e32\u0e22\u0e15\u0e23\u0e07\u0e1b\u0e23\u0e30\u0e0a\u0e32\u0e2a\u0e31\u0e21\u0e1e\u0e31\u0e19\u0e18\u0e4c\u0e41\u0e25\u0e30\u0e23\u0e31\u0e1a\u0e2a\u0e21\u0e31\u0e04\u0e23<\/span>\n            <span class=\"arch-c2-dept-val\">0-7431-7107<\/span>\n          <\/div>\n          <button type=\"button\" class=\"arch-c2-mini-copy arch-copy-trigger\" data-copy=\"074317107\">\u0e04\u0e31\u0e14\u0e25\u0e2d\u0e01<\/button>\n        <\/div>\n        <div class=\"arch-c2-dept-row\">\n          <div>\n            <span class=\"arch-c2-dept-key\">\u0e23\u0e30\u0e1a\u0e1a\u0e23\u0e31\u0e1a\u0e2a\u0e21\u0e31\u0e04\u0e23\u0e2d\u0e2d\u0e19\u0e44\u0e25\u0e19\u0e4c \u0e21\u0e17\u0e23.\u0e28\u0e23\u0e35\u0e27\u0e34\u0e0a\u0e31\u0e22<\/span>\n            <span class=\"arch-c2-dept-val\">admission.rmutsv.ac.th<\/span>\n          <\/div>\n          <a href=\"https:\/\/admission.rmutsv.ac.th\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"arch-c2-mini-copy\" style=\"text-decoration:none;\">\u0e40\u0e1b\u0e34\u0e14\u0e40\u0e27\u0e47\u0e1a<\/a>\n        <\/div>\n      <\/div>\n\n      <div class=\"arch-c2-dept-panel\" data-panel=\"2\">\n        <h4 class=\"arch-c2-dept-title\">\u0e07\u0e32\u0e19\u0e1b\u0e23\u0e30\u0e0a\u0e32\u0e2a\u0e31\u0e21\u0e1e\u0e31\u0e19\u0e18\u0e4c\u0e41\u0e25\u0e30\u0e2a\u0e37\u0e48\u0e2d\u0e2a\u0e32\u0e23\u0e2d\u0e07\u0e04\u0e4c\u0e01\u0e23<\/h4>\n        <p class=\"arch-c2-dept-sub\">\u0e15\u0e34\u0e14\u0e15\u0e48\u0e2d\u0e1b\u0e23\u0e30\u0e2a\u0e32\u0e19\u0e07\u0e32\u0e19\u0e02\u0e48\u0e32\u0e27\u0e2a\u0e32\u0e23 \u0e01\u0e34\u0e08\u0e01\u0e23\u0e23\u0e21\u0e19\u0e31\u0e01\u0e28\u0e36\u0e01\u0e29\u0e32 \u0e41\u0e25\u0e30\u0e2a\u0e37\u0e48\u0e2d\u0e42\u0e0b\u0e40\u0e0a\u0e35\u0e22\u0e25\u0e21\u0e35\u0e40\u0e14\u0e35\u0e22<\/p>\n        <div class=\"arch-c2-dept-row\">\n          <div>\n            <span class=\"arch-c2-dept-key\">\u0e2d\u0e35\u0e40\u0e21\u0e25\u0e01\u0e25\u0e32\u0e07\u0e04\u0e13\u0e30\u0e2a\u0e16\u0e32\u0e1b\u0e31\u0e15\u0e22\u0e01\u0e23\u0e23\u0e21\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c<\/span>\n            <span class=\"arch-c2-dept-val\">arch30.rmutsv@gmail.com<\/span>\n          <\/div>\n          <button type=\"button\" class=\"arch-c2-mini-copy arch-copy-trigger\" data-copy=\"arch30.rmutsv@gmail.com\">\u0e04\u0e31\u0e14\u0e25\u0e2d\u0e01<\/button>\n        <\/div>\n        <div class=\"arch-c2-dept-row\">\n          <div>\n            <span class=\"arch-c2-dept-key\">\u0e40\u0e1e\u0e08 Facebook \u0e17\u0e32\u0e07\u0e01\u0e32\u0e23<\/span>\n            <span class=\"arch-c2-dept-val\">\u0e04\u0e13\u0e30\u0e2a\u0e16\u0e32\u0e1b\u0e31\u0e15\u0e22\u0e01\u0e23\u0e23\u0e21\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c \u0e21\u0e17\u0e23.\u0e28\u0e23\u0e35\u0e27\u0e34\u0e0a\u0e31\u0e22<\/span>\n          <\/div>\n          <a href=\"https:\/\/www.facebook.com\/profile.php?id=61553102787733\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"arch-c2-mini-copy\" style=\"text-decoration:none;\">\u0e40\u0e1b\u0e34\u0e14\u0e40\u0e1e\u0e08<\/a>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <div class=\"arch-c2-bento\">\n\n    <div class=\"arch-c2-card arch-c2-reveal\">\n      <div class=\"arch-c2-spotlight\"><\/div>\n      <div class=\"arch-c2-card-content\">\n        <div class=\"arch-c2-card-head\">\n          <div class=\"arch-c2-icon-box arch-c2-icon-orange\">\n            <svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\"><path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z\"><\/path><\/svg>\n          <\/div>\n          <span class=\"arch-c2-badge-num\">01 \u2022 PHONE &amp; FAX<\/span>\n        <\/div>\n        <h3 class=\"arch-c2-card-title\">\u0e2b\u0e21\u0e32\u0e22\u0e40\u0e25\u0e02\u0e42\u0e17\u0e23\u0e28\u0e31\u0e1e\u0e17\u0e4c<\/h3>\n        <p class=\"arch-c2-card-main\">0-7431-7173<\/p>\n        <ul class=\"arch-c2-meta-list\">\n          <li><span>\u0e2a\u0e32\u0e22\u0e15\u0e23\u0e07\u0e1b\u0e23\u0e30\u0e0a\u0e32\u0e2a\u0e31\u0e21\u0e1e\u0e31\u0e19\u0e18\u0e4c<\/span> <strong>0-7431-7107<\/strong><\/li>\n          <li><span>\u0e42\u0e17\u0e23\u0e2a\u0e32\u0e23 (Fax)<\/span> <strong>0-7431-7174<\/strong><\/li>\n        <\/ul>\n      <\/div>\n      <div class=\"arch-c2-card-foot\">\n        <a href=\"tel:074317173\" class=\"arch-c2-act-btn is-solid\">\u0e42\u0e17\u0e23\u0e2d\u0e2d\u0e01\u0e17\u0e31\u0e19\u0e17\u0e35<\/a>\n        <button type=\"button\" class=\"arch-c2-act-btn arch-copy-trigger\" data-copy=\"074317173\">\u0e04\u0e31\u0e14\u0e25\u0e2d\u0e01\u0e40\u0e1a\u0e2d\u0e23\u0e4c<\/button>\n      <\/div>\n    <\/div>\n\n    <div class=\"arch-c2-card arch-c2-reveal\">\n      <div class=\"arch-c2-spotlight\"><\/div>\n      <div class=\"arch-c2-card-content\">\n        <div class=\"arch-c2-card-head\">\n          <div class=\"arch-c2-icon-box arch-c2-icon-teal\">\n            <svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\"><path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"><\/path><polyline points=\"22,6 12,13 2,6\"><\/polyline><\/svg>\n          <\/div>\n          <span class=\"arch-c2-badge-num\">02 \u2022 OFFICIAL EMAIL<\/span>\n        <\/div>\n        <h3 class=\"arch-c2-card-title\">\u0e2d\u0e35\u0e40\u0e21\u0e25\u0e41\u0e25\u0e30\u0e2a\u0e32\u0e23\u0e1a\u0e23\u0e23\u0e13<\/h3>\n        <p class=\"arch-c2-card-main\">saraban.25@rmutsv.ac.th<\/p>\n        <ul class=\"arch-c2-meta-list\">\n          <li><span>\u0e2d\u0e35\u0e40\u0e21\u0e25\u0e01\u0e25\u0e32\u0e07\u0e04\u0e13\u0e30<\/span> <strong>arch30.rmutsv@gmail.com<\/strong><\/li>\n          <li><span>\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c<\/span> <strong>arch.rmutsv.ac.th\/ruts<\/strong><\/li>\n        <\/ul>\n      <\/div>\n      <div class=\"arch-c2-card-foot\">\n        <a href=\"mailto:saraban.25@rmutsv.ac.th\" class=\"arch-c2-act-btn is-solid\">\u0e2a\u0e48\u0e07\u0e2d\u0e35\u0e40\u0e21\u0e25<\/a>\n        <button type=\"button\" class=\"arch-c2-act-btn arch-copy-trigger\" data-copy=\"saraban.25@rmutsv.ac.th\">\u0e04\u0e31\u0e14\u0e25\u0e2d\u0e01\u0e2d\u0e35\u0e40\u0e21\u0e25<\/button>\n      <\/div>\n    <\/div>\n\n    <div class=\"arch-c2-card arch-c2-reveal\">\n      <div class=\"arch-c2-spotlight\"><\/div>\n      <div class=\"arch-c2-card-content\">\n        <div class=\"arch-c2-card-head\">\n          <div class=\"arch-c2-icon-box arch-c2-icon-slate\">\n            <svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z\"><\/path><circle cx=\"12\" cy=\"10\" r=\"3\"><\/circle><\/svg>\n          <\/div>\n          <span class=\"arch-c2-badge-num\">03 \u2022 CAMPUS ADDRESS<\/span>\n        <\/div>\n        <h3 class=\"arch-c2-card-title\">\u0e2a\u0e16\u0e32\u0e19\u0e17\u0e35\u0e48\u0e15\u0e31\u0e49\u0e07\u0e04\u0e13\u0e30<\/h3>\n        <p class=\"arch-c2-card-main\">2\/6 \u0e16\u0e19\u0e19\u0e23\u0e32\u0e0a\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e19\u0e2d\u0e01<\/p>\n        <ul class=\"arch-c2-meta-list\">\n          <li><span>\u0e15\u0e33\u0e1a\u0e25 \/ \u0e2d\u0e33\u0e40\u0e20\u0e2d<\/span> <strong>\u0e1a\u0e48\u0e2d\u0e22\u0e32\u0e07 \u2022 \u0e40\u0e21\u0e37\u0e2d\u0e07\u0e2a\u0e07\u0e02\u0e25\u0e32<\/strong><\/li>\n          <li><span>\u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14 \/ \u0e23\u0e2b\u0e31\u0e2a\u0e44\u0e1b\u0e23\u0e29\u0e13\u0e35\u0e22\u0e4c<\/span> <strong>\u0e2a\u0e07\u0e02\u0e25\u0e32 90000<\/strong><\/li>\n        <\/ul>\n      <\/div>\n      <div class=\"arch-c2-card-foot\">\n        <a href=\"#archC2Map\" class=\"arch-c2-act-btn is-solid\">\u0e14\u0e39\u0e41\u0e1c\u0e19\u0e17\u0e35\u0e48<\/a>\n        <button type=\"button\" class=\"arch-c2-act-btn arch-copy-trigger\" data-copy=\"\u0e04\u0e13\u0e30\u0e2a\u0e16\u0e32\u0e1b\u0e31\u0e15\u0e22\u0e01\u0e23\u0e23\u0e21\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c \u0e21\u0e2b\u0e32\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e23\u0e32\u0e0a\u0e21\u0e07\u0e04\u0e25\u0e28\u0e23\u0e35\u0e27\u0e34\u0e0a\u0e31\u0e22 2\/6 \u0e16\u0e19\u0e19\u0e23\u0e32\u0e0a\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e19\u0e2d\u0e01 \u0e15\u0e33\u0e1a\u0e25\u0e1a\u0e48\u0e2d\u0e22\u0e32\u0e07 \u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e40\u0e21\u0e37\u0e2d\u0e07\u0e2a\u0e07\u0e02\u0e25\u0e32 \u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e2a\u0e07\u0e02\u0e25\u0e32 90000\">\u0e04\u0e31\u0e14\u0e25\u0e2d\u0e01\u0e17\u0e35\u0e48\u0e2d\u0e22\u0e39\u0e48<\/button>\n      <\/div>\n    <\/div>\n\n  <\/div>\n\n  <div class=\"arch-c2-social-grid arch-c2-reveal\">\n\n    <a href=\"https:\/\/www.facebook.com\/profile.php?id=61553102787733\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"arch-c2-soc-card arch-c2-soc-fb\">\n      <div class=\"arch-c2-soc-left\">\n        <div class=\"arch-c2-soc-icon\">\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z\"><\/path><\/svg>\n        <\/div>\n        <div>\n          <h4 class=\"arch-c2-soc-name\">Facebook Page<\/h4>\n          <p class=\"arch-c2-soc-handle\">\u0e04\u0e13\u0e30\u0e2a\u0e16\u0e32\u0e1b\u0e31\u0e15\u0e22\u0e01\u0e23\u0e23\u0e21\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c \u0e21\u0e17\u0e23.\u0e28\u0e23\u0e35\u0e27\u0e34\u0e0a\u0e31\u0e22<\/p>\n        <\/div>\n      <\/div>\n      <div class=\"arch-c2-soc-arrow\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\"><line x1=\"7\" y1=\"17\" x2=\"17\" y2=\"7\"><\/line><polyline points=\"7 7 17 7 17 17\"><\/polyline><\/svg>\n      <\/div>\n    <\/a>\n\n    <a href=\"https:\/\/m.me\/113341151873720\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"arch-c2-soc-card arch-c2-soc-msg\">\n      <div class=\"arch-c2-soc-left\">\n        <div class=\"arch-c2-soc-icon\">\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\"><path d=\"M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z\"><\/path><\/svg>\n        <\/div>\n        <div>\n          <h4 class=\"arch-c2-soc-name\">Messenger Chat<\/h4>\n          <p class=\"arch-c2-soc-handle\">\u0e17\u0e31\u0e01\u0e41\u0e0a\u0e17\u0e2a\u0e2d\u0e1a\u0e16\u0e32\u0e21\u0e40\u0e08\u0e49\u0e32\u0e2b\u0e19\u0e49\u0e32\u0e17\u0e35\u0e48\u0e42\u0e14\u0e22\u0e15\u0e23\u0e07<\/p>\n        <\/div>\n      <\/div>\n      <div class=\"arch-c2-soc-arrow\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\"><line x1=\"7\" y1=\"17\" x2=\"17\" y2=\"7\"><\/line><polyline points=\"7 7 17 7 17 17\"><\/polyline><\/svg>\n      <\/div>\n    <\/a>\n\n    <a href=\"https:\/\/www.instagram.com\/arch.ruts\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"arch-c2-soc-card arch-c2-soc-ig\">\n      <div class=\"arch-c2-soc-left\">\n        <div class=\"arch-c2-soc-icon\">\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\"><rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\" ry=\"5\"><\/rect><path d=\"M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z\"><\/path><line x1=\"17.5\" y1=\"6.5\" x2=\"17.51\" y2=\"6.5\"><\/line><\/svg>\n        <\/div>\n        <div>\n          <h4 class=\"arch-c2-soc-name\">Instagram<\/h4>\n          <p class=\"arch-c2-soc-handle\">@arch.ruts<\/p>\n        <\/div>\n      <\/div>\n      <div class=\"arch-c2-soc-arrow\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\"><line x1=\"7\" y1=\"17\" x2=\"17\" y2=\"7\"><\/line><polyline points=\"7 7 17 7 17 17\"><\/polyline><\/svg>\n      <\/div>\n    <\/a>\n\n    <a href=\"https:\/\/www.tiktok.com\/@arch_ruts\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"arch-c2-soc-card arch-c2-soc-tt\">\n      <div class=\"arch-c2-soc-left\">\n        <div class=\"arch-c2-soc-icon\">\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\"><path d=\"M9 12a4 4 0 1 0 4 4V4a5 5 0 0 0 5 5\"><\/path><\/svg>\n        <\/div>\n        <div>\n          <h4 class=\"arch-c2-soc-name\">TikTok Official<\/h4>\n          <p class=\"arch-c2-soc-handle\">@arch_ruts<\/p>\n        <\/div>\n      <\/div>\n      <div class=\"arch-c2-soc-arrow\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\"><line x1=\"7\" y1=\"17\" x2=\"17\" y2=\"7\"><\/line><polyline points=\"7 7 17 7 17 17\"><\/polyline><\/svg>\n      <\/div>\n    <\/a>\n\n  <\/div>\n\n  <div class=\"arch-c2-map-card arch-c2-reveal\" id=\"archC2Map\">\n    <div class=\"arch-c2-map-inner\">\n      <iframe\n        loading=\"lazy\"\n        allowfullscreen\n        referrerpolicy=\"no-referrer-when-downgrade\"\n        src=\"https:\/\/maps.google.com\/maps?q=%E0%B8%84%E0%B8%93%E0%B8%B0%E0%B8%AA%E0%B8%96%E0%B8%B2%E0%B8%9B%E0%B8%B1%E0%B8%95%E0%B8%A2%E0%B8%81%E0%B8%A3%E0%B8%A3%E0%B8%A1%E0%B8%A8%E0%B8%B2%E0%B8%AA%E0%B8%95%E0%B8%A3%E0%B9%8C%20%E0%B8%A1%E0%B8%97%E0%B8%A3.%E0%B8%A8%E0%B8%A3%E0%B8%B5%E0%B8%A7%E0%B8%B4%E0%B8%8A%E0%B8%B1%E0%B8%A2&amp;t=m&amp;z=17&amp;output=embed&amp;iwloc=near\"\n        title=\"\u0e41\u0e1c\u0e19\u0e17\u0e35\u0e48 \u0e04\u0e13\u0e30\u0e2a\u0e16\u0e32\u0e1b\u0e31\u0e15\u0e22\u0e01\u0e23\u0e23\u0e21\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c \u0e21\u0e17\u0e23.\u0e28\u0e23\u0e35\u0e27\u0e34\u0e0a\u0e31\u0e22\"\n      ><\/iframe>\n\n      <div class=\"arch-c2-map-overlay\">\n        <div class=\"arch-c2-gps-tag\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><polygon points=\"16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76\"><\/polygon><\/svg>\n          <span>7.1906\u00b0 N, 100.5953\u00b0 E \u2022 SONGKHLA<\/span>\n        <\/div>\n        <h3>\u0e04\u0e13\u0e30\u0e2a\u0e16\u0e32\u0e1b\u0e31\u0e15\u0e22\u0e01\u0e23\u0e23\u0e21\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c \u0e21\u0e17\u0e23.\u0e28\u0e23\u0e35\u0e27\u0e34\u0e0a\u0e31\u0e22<\/h3>\n        <p>2\/6 \u0e16\u0e19\u0e19\u0e23\u0e32\u0e0a\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e19\u0e2d\u0e01 \u0e15\u0e33\u0e1a\u0e25\u0e1a\u0e48\u0e2d\u0e22\u0e32\u0e07 \u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e40\u0e21\u0e37\u0e2d\u0e07\u0e2a\u0e07\u0e02\u0e25\u0e32 \u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e2a\u0e07\u0e02\u0e25\u0e32 90000 (\u0e43\u0e01\u0e25\u0e49\u0e2b\u0e32\u0e14\u0e2a\u0e21\u0e34\u0e2b\u0e25\u0e32\u0e41\u0e25\u0e30\u0e22\u0e48\u0e32\u0e19\u0e40\u0e21\u0e37\u0e2d\u0e07\u0e40\u0e01\u0e48\u0e32\u0e2a\u0e07\u0e02\u0e25\u0e32)<\/p>\n        <div class=\"arch-c2-map-btns\">\n          <a href=\"https:\/\/www.google.com\/maps\/search\/?api=1&amp;query=%E0%B8%84%E0%B8%93%E0%B8%B0%E0%B8%AA%E0%B8%96%E0%B8%B2%E0%B8%9B%E0%B8%B1%E0%B8%95%E0%B8%A2%E0%B8%81%E0%B8%A3%E0%B8%A3%E0%B8%A1%E0%B8%A8%E0%B8%B2%E0%B8%AA%E0%B8%95%E0%B8%A3%E0%B9%8C+%E0%B8%A1%E0%B8%97%E0%B8%A3.%E0%B8%A8%E0%B8%A3%E0%B8%B5%E0%B8%A7%E0%B8%B4%E0%B8%8A%E0%B8%B1%E0%B8%A2+%E0%B8%AA%E0%B8%87%E0%B8%82%E0%B8%A5%E0%B8%B2\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"arch-c2-nav-btn\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.3\"><polygon points=\"3 11 22 2 13 21 11 13 3 11\"><\/polygon><\/svg>\n            <span>\u0e40\u0e1b\u0e34\u0e14\u0e19\u0e33\u0e17\u0e32\u0e07 Google Maps<\/span>\n          <\/a>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <div class=\"arch-c2-toast\" id=\"archC2Toast\">\n    <span class=\"arch-c2-toast-dot\"><\/span>\n    <span id=\"archC2ToastText\">\u0e04\u0e31\u0e14\u0e25\u0e2d\u0e01\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e40\u0e23\u0e35\u0e22\u0e1a\u0e23\u0e49\u0e2d\u0e22\u0e41\u0e25\u0e49\u0e27 \u2713<\/span>\n  <\/div>\n\n<\/div>\n\n<script>\n  (function() {\n    var TAU = Math.PI * 2;\n\n    function mulberry32(seed) {\n      var s = seed >>> 0;\n      return function() {\n        s = (s + 0x6d2b79f5) >>> 0;\n        var t = s;\n        t = Math.imul(t ^ (t >>> 15), t | 1);\n        t ^= t + Math.imul(t ^ (t >>> 7), t | 61);\n        return ((t ^ (t >>> 14)) >>> 0) \/ 4294967296;\n      };\n    }\n\n    function nextSeed(seed) {\n      return ((Math.imul((seed ^ 0x9e3779b9) >>> 0, 0x85ebca6b) >>> 0) % 999983) + 1;\n    }\n\n    function gray(v) {\n      var clamped = Math.min(1, Math.max(0, v));\n      var c = Math.round(clamped * 255);\n      return 'rgb(' + c + ',' + c + ',' + c + ')';\n    }\n    function shade(a) { return 'rgba(0,0,0,' + a + ')'; }\n    function glow(a) { return 'rgba(255,255,255,' + a + ')'; }\n\n    function layoutBouquet(seed, aspect) {\n      var rnd = mulberry32(seed);\n      function jit(v, amt) { return v + (rnd() * 2 - 1) * amt; }\n      var tall = 0.85 > aspect;\n      var heart = [jit(0.5, 0.05), jit(tall ? 0.52 : 0.58, 0.04)];\n      var leaves = [];\n      var flowers = [];\n      var buds = [];\n\n      var dirs = [-2.55, -2.1, -1.7, -1.3, -0.85, -0.35, 0.15, 0.6, 2.5, 2.95, 3.4];\n      for (var d = 0; dirs.length > d; d += 1) {\n        leaves.push({\n          kind: 'leaf',\n          x: heart[0] + jit(0, 0.03),\n          y: heart[1] + jit(0, 0.03),\n          r: jit(tall ? 0.4 : 0.47, 0.08),\n          a: jit(dirs[d], 0.14),\n          k: jit(0.27, 0.05),\n          b: jit(0, 0.3),\n          tone: jit(0.55, 0.15)\n        });\n      }\n\n      var spots = tall\n        ? [[0.5, 0.1, 0.32], [0.26, 0.4, 0.26], [0.74, 0.63, 0.28], [0.3, 0.88, 0.29]]\n        : [[0.47, 0.12, 0.33], [0.24, 0.8, 0.29], [0.7, 0.8, 0.32]];\n\n      for (var i = 0; spots.length > i; i += 1) {\n        var sp = spots[i];\n        var sx = sp[0];\n        var sy = sp[1];\n        var sr = sp[2];\n        var threshold = i === 0 ? 0.75 : 0.5;\n        var kind = threshold > rnd() ? 'lily' : 'rose';\n        var tucked = 2 + Math.floor(rnd() * 2);\n        for (var l = 0; tucked > l; l += 1) {\n          leaves.push({\n            kind: 'leaf',\n            x: sx + jit(0, 0.02),\n            y: sy + jit(0, 0.02),\n            r: sr * jit(1.45, 0.25),\n            a: rnd() * TAU,\n            k: jit(0.3, 0.05),\n            b: jit(0, 0.35),\n            tone: jit(0.5, 0.15)\n          });\n        }\n        flowers.push({\n          kind: kind,\n          x: jit(sx, 0.05),\n          y: jit(sy, 0.04),\n          r: jit(sr, 0.035) * (kind === 'rose' ? 0.85 : 1),\n          a: rnd() * TAU,\n          k: jit(0.78, 0.14),\n          b: 0,\n          tone: jit(0.94, 0.05)\n        });\n      }\n\n      var hasRose = false;\n      var hasLily = false;\n      for (var f = 0; flowers.length > f; f += 1) {\n        if (flowers[f].kind === 'rose') hasRose = true;\n        if (flowers[f].kind === 'lily') hasLily = true;\n      }\n      if (!hasRose) {\n        flowers[1].kind = 'rose';\n        flowers[1].r = flowers[1].r * 0.85;\n      }\n      if (!hasLily) {\n        flowers[2].kind = 'lily';\n      }\n\n      var budCoords = [[0.19, 0.3], [0.84, 0.17], [0.9, 0.56]];\n      for (var bc = 0; budCoords.length > bc; bc += 1) {\n        var bx = jit(budCoords[bc][0], 0.04);\n        var by = jit(budCoords[bc][1], 0.04);\n        buds.push({\n          kind: 'bud',\n          x: bx,\n          y: by,\n          r: jit(0.075, 0.02),\n          a: Math.atan2(by - heart[1], (bx - heart[0]) * aspect) + jit(0, 0.3),\n          k: 0,\n          b: 0,\n          tone: jit(0.8, 0.1)\n        });\n      }\n\n      flowers.sort(function(p, q) { return p.y - q.y; });\n      return { heart: heart, blooms: leaves.concat(buds, flowers) };\n    }\n\n    function paintSize(w, h, dpr) {\n      var scale = Math.min(Math.min(dpr, 1.5), 1400 \/ Math.max(w, h, 1));\n      return [Math.max(2, Math.round(w * scale)), Math.max(2, Math.round(h * scale))];\n    }\n\n    function paintLeaf(ctx, x, y, len, leaf) {\n      var wid = len * leaf.k;\n      var bend = leaf.b;\n      var t = leaf.tone;\n      function off(f) { return bend * len * f * f; }\n      ctx.save();\n      ctx.translate(x, y);\n      ctx.rotate(leaf.a);\n\n      var upper = new Path2D();\n      upper.moveTo(0, 0);\n      upper.bezierCurveTo(len * 0.22, -wid * 1.05 + off(0.22), len * 0.68, -wid * 0.8 + off(0.68), len, off(1));\n      upper.quadraticCurveTo(len * 0.5, 0, 0, 0);\n      var lower = new Path2D();\n      lower.moveTo(0, 0);\n      lower.bezierCurveTo(len * 0.22, wid * 0.95 + off(0.22), len * 0.68, wid * 0.72 + off(0.68), len, off(1));\n      lower.quadraticCurveTo(len * 0.5, 0, 0, 0);\n      var whole = new Path2D();\n      whole.addPath(upper);\n      whole.addPath(lower);\n\n      var mid = off(0.5);\n      var up = ctx.createLinearGradient(0, mid, 0, mid - wid * 0.9);\n      up.addColorStop(0, gray(t * 0.42));\n      up.addColorStop(0.35, gray(t * 0.78));\n      up.addColorStop(1, gray(t * 0.98));\n      ctx.fillStyle = up;\n      ctx.fill(upper);\n\n      var low = ctx.createLinearGradient(0, mid, 0, mid + wid * 0.85);\n      low.addColorStop(0, gray(t * 0.2));\n      low.addColorStop(0.5, gray(t * 0.46));\n      low.addColorStop(1, gray(t * 0.3));\n      ctx.fillStyle = low;\n      ctx.fill(lower);\n\n      ctx.save();\n      ctx.clip(whole);\n      var along = ctx.createLinearGradient(0, 0, len, 0);\n      along.addColorStop(0, shade(0.85));\n      along.addColorStop(0.3, shade(0.15));\n      along.addColorStop(0.85, shade(0));\n      along.addColorStop(1, shade(0.25));\n      ctx.fillStyle = along;\n      ctx.fillRect(-4, -len, len + 8, len * 2);\n\n      ctx.lineCap = 'round';\n      var sides = [-1, 1];\n      for (var i = 1; 8 > i; i += 1) {\n        var f = i \/ 8.5;\n        var g = Math.min(1, f + 0.16);\n        for (var s = 0; sides.length > s; s += 1) {\n          var side = sides[s];\n          ctx.beginPath();\n          ctx.moveTo(len * f, off(f));\n          ctx.quadraticCurveTo(len * (f + 0.07), off(f + 0.07) + side * wid * 0.35, len * g, off(g) + side * wid * 0.85 * (1 - f * 0.8));\n          ctx.strokeStyle = shade(0.32);\n          ctx.lineWidth = Math.max(1, wid * 0.035);\n          ctx.stroke();\n        }\n      }\n      ctx.restore();\n\n      ctx.beginPath();\n      ctx.moveTo(0, 0);\n      ctx.quadraticCurveTo(len * 0.5, 0, len * 0.97, off(0.97));\n      ctx.strokeStyle = shade(0.6);\n      ctx.lineWidth = Math.max(1, wid * 0.09);\n      ctx.stroke();\n\n      ctx.beginPath();\n      ctx.moveTo(len * 0.05, -wid * 0.06);\n      ctx.quadraticCurveTo(len * 0.5, -wid * 0.06, len * 0.9, off(0.9) - wid * 0.04);\n      ctx.strokeStyle = glow(0.22);\n      ctx.lineWidth = Math.max(1, wid * 0.03);\n      ctx.stroke();\n\n      ctx.strokeStyle = shade(0.7);\n      ctx.lineWidth = Math.max(1, len * 0.006);\n      ctx.stroke(whole);\n      ctx.restore();\n    }\n\n    function petalPath(len, wid, curl) {\n      var p = new Path2D();\n      p.moveTo(0, 0);\n      p.bezierCurveTo(len * 0.25, -wid * 1.1, len * 0.66, -wid * 0.95, len, curl);\n      p.bezierCurveTo(len * 0.66, wid * 0.8, len * 0.25, wid * 1.0, 0, 0);\n      return p;\n    }\n\n    function paintLily(ctx, x, y, R, lily, rnd) {\n      ctx.save();\n      ctx.translate(x, y);\n      ctx.rotate(lily.a);\n      ctx.scale(1, lily.k);\n\n      var backs = [true, false];\n      for (var bIdx = 0; backs.length > bIdx; bIdx += 1) {\n        var back = backs[bIdx];\n        for (var i = 0; 3 > i; i += 1) {\n          var ang = (i * TAU) \/ 3 + (back ? Math.PI \/ 3 : 0) + (rnd() - 0.5) * 0.25;\n          var len = R * (back ? 0.9 : 1) * (0.92 + rnd() * 0.12);\n          var wid = R * (back ? 0.29 : 0.34);\n          var curl = wid * (rnd() - 0.3) * 0.5;\n          var tone = lily.tone * (back ? 0.68 : 1);\n          ctx.save();\n          ctx.rotate(ang);\n          var petal = petalPath(len, wid, curl);\n          var g = ctx.createLinearGradient(0, 0, len, 0);\n          g.addColorStop(0, gray(0.04));\n          g.addColorStop(0.16, gray(tone * 0.32));\n          g.addColorStop(0.5, gray(tone * 0.97));\n          g.addColorStop(0.82, gray(tone * 0.86));\n          g.addColorStop(1, gray(tone * 0.5));\n          ctx.fillStyle = g;\n          ctx.fill(petal);\n\n          ctx.save();\n          ctx.clip(petal);\n          var side = ctx.createLinearGradient(0, -wid, 0, wid);\n          side.addColorStop(0, shade(0));\n          side.addColorStop(0.48, shade(0.05));\n          side.addColorStop(0.55, shade(0.4));\n          side.addColorStop(1, shade(0.55));\n          ctx.fillStyle = side;\n          ctx.fillRect(0, -wid * 1.2, len, wid * 2.4);\n\n          for (var s = 0; 22 > s; s += 1) {\n            var fx = len * (0.14 + rnd() * 0.36);\n            var fy = (rnd() - 0.5) * wid * 1.1 * (fx \/ len + 0.3);\n            ctx.beginPath();\n            ctx.arc(fx, fy, R * (0.006 + rnd() * 0.01), 0, TAU);\n            ctx.fillStyle = shade(0.75);\n            ctx.fill();\n          }\n          ctx.restore();\n\n          ctx.beginPath();\n          ctx.moveTo(len * 0.08, 0);\n          ctx.quadraticCurveTo(len * 0.5, wid * 0.05, len * 0.86, curl * 0.8);\n          ctx.strokeStyle = shade(0.55);\n          ctx.lineWidth = Math.max(1, wid * 0.1);\n          ctx.stroke();\n\n          ctx.beginPath();\n          ctx.moveTo(len * 0.12, -wid * 0.1);\n          ctx.quadraticCurveTo(len * 0.5, -wid * 0.08, len * 0.8, curl * 0.8 - wid * 0.08);\n          ctx.strokeStyle = glow(0.28);\n          ctx.lineWidth = Math.max(1, wid * 0.04);\n          ctx.stroke();\n\n          ctx.strokeStyle = shade(0.65);\n          ctx.lineWidth = Math.max(1, R * 0.01);\n          ctx.stroke(petal);\n          ctx.restore();\n        }\n      }\n\n      var throat = ctx.createRadialGradient(0, 0, 0, 0, 0, R * 0.24);\n      throat.addColorStop(0, shade(0.95));\n      throat.addColorStop(1, shade(0));\n      ctx.fillStyle = throat;\n      ctx.beginPath();\n      ctx.arc(0, 0, R * 0.24, 0, TAU);\n      ctx.fill();\n\n      ctx.lineCap = 'round';\n      for (var st = 0; 7 > st; st += 1) {\n        var pistil = st === 6;\n        var sAng = pistil ? rnd() * TAU : (st * TAU) \/ 6 + (rnd() - 0.5) * 0.6;\n        var sLen = R * (pistil ? 0.62 : 0.45 + rnd() * 0.15);\n        var ex = Math.cos(sAng) * sLen;\n        var ey = Math.sin(sAng) * sLen;\n        var bow = (rnd() - 0.5) * R * 0.2;\n        ctx.beginPath();\n        ctx.moveTo(0, 0);\n        ctx.quadraticCurveTo(ex * 0.5 - Math.sin(sAng) * bow, ey * 0.5 + Math.cos(sAng) * bow, ex, ey);\n        ctx.strokeStyle = shade(0.8);\n        ctx.lineWidth = Math.max(1.5, R * 0.022);\n        ctx.stroke();\n        ctx.strokeStyle = gray(0.72);\n        ctx.lineWidth = Math.max(1, R * 0.011);\n        ctx.stroke();\n        ctx.save();\n        ctx.translate(ex, ey);\n        ctx.rotate(sAng + Math.PI \/ 2 + (rnd() - 0.5) * 0.8);\n        ctx.beginPath();\n        if (pistil) ctx.arc(0, 0, R * 0.03, 0, TAU);\n        else ctx.ellipse(0, 0, R * 0.06, R * 0.022, 0, 0, TAU);\n        var pollen = ctx.createLinearGradient(0, -R * 0.022, 0, R * 0.022);\n        pollen.addColorStop(0, gray(pistil ? 0.8 : 0.9));\n        pollen.addColorStop(1, gray(0.35));\n        ctx.fillStyle = pollen;\n        ctx.fill();\n        ctx.restore();\n      }\n      ctx.restore();\n    }\n\n    function paintRose(ctx, x, y, R, rose, rnd) {\n      ctx.save();\n      ctx.translate(x, y);\n      ctx.rotate(rose.a);\n      ctx.lineJoin = 'round';\n      var t = rose.tone;\n\n      function drawPetal(cx, cy, rx, ry, rot, reach, tone) {\n        ctx.beginPath();\n        var k = 3 + Math.floor(rnd() * 3);\n        var ph = rnd() * TAU;\n        for (var j = 0; 64 >= j; j += 1) {\n          var th = (j \/ 64) * TAU;\n          var outer = Math.max(0, Math.cos(th));\n          var w = 1 + 0.05 * Math.sin(k * th + ph) * outer + 0.025 * Math.sin(11 * th + ph * 2) - 0.07 * Math.pow(outer, 24);\n          var ex = Math.cos(th) * rx * w;\n          var ey = Math.sin(th) * ry * w;\n          var px = cx + ex * Math.cos(rot) - ey * Math.sin(rot);\n          var py = cy + ex * Math.sin(rot) + ey * Math.cos(rot);\n          if (j) ctx.lineTo(px, py);\n          else ctx.moveTo(px, py);\n        }\n        ctx.closePath();\n        var g = ctx.createRadialGradient(0, 0, reach * 0.1, 0, 0, reach);\n        g.addColorStop(0, gray(0.03));\n        g.addColorStop(0.55, gray(tone * 0.45));\n        g.addColorStop(0.9, gray(tone * 0.95));\n        g.addColorStop(1, gray(tone));\n        ctx.fillStyle = g;\n        ctx.fill();\n        ctx.strokeStyle = shade(0.75);\n        ctx.lineWidth = Math.max(1.5, R * 0.014);\n        ctx.stroke();\n\n        ctx.beginPath();\n        ctx.ellipse(cx, cy, rx * 0.94, ry * 0.94, rot, -1.1, 1.1);\n        ctx.strokeStyle = glow(0.3);\n        ctx.lineWidth = Math.max(1, R * 0.01);\n        ctx.stroke();\n      }\n\n      for (var i = 0; 5 > i; i += 1) {\n        var ang = (i * TAU) \/ 5 + (rnd() - 0.5) * 0.4;\n        var d = R * 0.42;\n        drawPetal(Math.cos(ang) * d, Math.sin(ang) * d, R * 0.6, R * 0.46, ang, R, t * 0.85);\n      }\n\n      var layers = 16;\n      for (var m = 0; layers > m; m += 1) {\n        var f = 1 - m \/ layers;\n        var rr = R * 0.72 * Math.pow(f, 0.9);\n        var rAng = m * 2.39996 + rnd() * 0.2;\n        var rd = rr * 0.28;\n        drawPetal(Math.cos(rAng) * rd, Math.sin(rAng) * rd, rr * 0.78, rr * 0.6, rAng, rr * 1.1, t * (0.7 + 0.3 * f));\n      }\n\n      ctx.beginPath();\n      ctx.arc(0, 0, R * 0.05, 0, TAU);\n      ctx.fillStyle = shade(0.9);\n      ctx.fill();\n      ctx.restore();\n    }\n\n    function paintBud(ctx, x, y, R, bud) {\n      ctx.save();\n      ctx.translate(x, y);\n      ctx.rotate(bud.a);\n      var body = new Path2D();\n      body.moveTo(0, 0);\n      body.bezierCurveTo(R * 0.2, -R * 0.55, R * 0.9, -R * 0.35, R * 1.5, 0);\n      body.bezierCurveTo(R * 0.9, R * 0.35, R * 0.2, R * 0.55, 0, 0);\n      var g = ctx.createLinearGradient(0, -R * 0.45, 0, R * 0.45);\n      g.addColorStop(0, gray(bud.tone));\n      g.addColorStop(0.45, gray(bud.tone * 0.7));\n      g.addColorStop(1, gray(bud.tone * 0.2));\n      ctx.fillStyle = g;\n      ctx.fill(body);\n      ctx.strokeStyle = shade(0.7);\n      ctx.lineWidth = Math.max(1, R * 0.04);\n      ctx.stroke(body);\n\n      ctx.beginPath();\n      ctx.moveTo(R * 0.1, 0);\n      ctx.quadraticCurveTo(R * 0.8, -R * 0.08, R * 1.45, 0);\n      ctx.strokeStyle = shade(0.5);\n      ctx.stroke();\n\n      var sides = [-1, 1];\n      for (var s = 0; sides.length > s; s += 1) {\n        var side = sides[s];\n        ctx.beginPath();\n        ctx.moveTo(0, 0);\n        ctx.quadraticCurveTo(R * 0.3, side * R * 0.5, R * 0.75, side * R * 0.32);\n        ctx.quadraticCurveTo(R * 0.3, side * R * 0.2, 0, 0);\n        ctx.fillStyle = gray(0.3);\n        ctx.fill();\n        ctx.stroke();\n      }\n      ctx.restore();\n    }\n\n    function paintBouquet(canvas, w, h, seed) {\n      canvas.width = w;\n      canvas.height = h;\n      var ctx = canvas.getContext('2d');\n      if (!ctx) return;\n      ctx.fillStyle = '#000';\n      ctx.fillRect(0, 0, w, h);\n      var unit = Math.sqrt(w * h);\n      var layout = layoutBouquet(seed, w \/ h);\n      var heart = layout.heart;\n      var blooms = layout.blooms;\n      var rnd = mulberry32(seed ^ 0x5bd1e995);\n      var hx = heart[0] * w;\n      var hy = heart[1] * h;\n\n      ctx.lineCap = 'round';\n      for (var i = 0; blooms.length > i; i += 1) {\n        var b = blooms[i];\n        if (b.kind === 'leaf') continue;\n        var ex = b.x * w;\n        var ey = b.y * h;\n        ctx.beginPath();\n        ctx.moveTo(hx, hy);\n        ctx.quadraticCurveTo((hx + ex) \/ 2 + (rnd() - 0.5) * unit * 0.15, (hy + ey) \/ 2, ex, ey);\n        ctx.strokeStyle = shade(1);\n        ctx.lineWidth = unit * 0.016;\n        ctx.stroke();\n        ctx.strokeStyle = gray(0.4);\n        ctx.lineWidth = unit * 0.008;\n        ctx.stroke();\n      }\n\n      for (var k = 0; blooms.length > k; k += 1) {\n        var bl = blooms[k];\n        var bx = bl.x * w;\n        var by = bl.y * h;\n        var size = bl.r * unit;\n        if (bl.kind === 'leaf') paintLeaf(ctx, bx, by, size, bl);\n        else if (bl.kind === 'bud') paintBud(ctx, bx, by, size, bl);\n        else if (bl.kind === 'lily') paintLily(ctx, bx, by, size, bl, rnd);\n        else paintRose(ctx, bx, by, size, bl, rnd);\n      }\n    }\n\n    var VERT_SRC = [\n      'attribute vec2 a_position;',\n      'void main() {',\n      '  gl_Position = vec4(a_position, 0.0, 1.0);',\n      '}'\n    ].join('\\n');\n\n    var FRAG_SRC = [\n      '#ifdef GL_FRAGMENT_PRECISION_HIGH',\n      'precision highp float;',\n      '#else',\n      'precision mediump float;',\n      '#endif',\n      'uniform sampler2D u_texA;',\n      'uniform sampler2D u_texB;',\n      'uniform vec4 u_scene;',\n      'uniform vec4 u_pointer;',\n      'uniform vec4 u_print;',\n      'uniform vec4 u_fx;',\n      'uniform vec4 u_frame;',\n      'uniform vec4 u_post;',\n      'uniform vec3 u_ink;',\n      'uniform vec3 u_hot;',\n      'uniform vec3 u_bg;',\n      'uniform vec3 u_frameColor;',\n      'float hash(vec2 p) {',\n      '  vec3 p3 = fract(vec3(p.xyx) * 0.1031);',\n      '  p3 += dot(p3, p3.yzx + 33.33);',\n      '  return fract((p3.x + p3.y) * p3.z);',\n      '}',\n      'float noise(vec2 p) {',\n      '  vec2 i = floor(p);',\n      '  vec2 f = fract(p);',\n      '  vec2 u = f * f * (3.0 - 2.0 * f);',\n      '  return mix(',\n      '    mix(hash(i), hash(i + vec2(1.0, 0.0)), u.x),',\n      '    mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), u.x),',\n      '    u.y);',\n      '}',\n      'vec2 cover(vec2 uv, float texAspect) {',\n      '  float ca = u_scene.x \/ u_scene.y;',\n      '  vec2 s = ca > texAspect ? vec2(1.0, texAspect \/ ca) : vec2(ca \/ texAspect, 1.0);',\n      '  return clamp((uv - 0.5) * s + 0.5, 0.0, 1.0);',\n      '}',\n      'float scanned(float fromTop, float row, float progress) {',\n      '  float front = progress * 1.2 - 0.1;',\n      '  return step(fromTop + (hash(vec2(row, 3.7)) - 0.5) * 0.05, front);',\n      '}',\n      'void main() {',\n      '  vec2 res = u_scene.xy;',\n      '  float time = u_scene.z;',\n      '  float dpr = u_scene.w;',\n      '  vec2 frag = gl_FragCoord.xy;',\n      '  vec2 uv = frag \/ res;',\n      '  float fromTop = 1.0 - uv.y;',\n      '  float sp = max(u_print.x, 1.5) * dpr;',\n      '  vec2 pd = (frag - u_pointer.xy) \/ dpr;',\n      '  float R = max(u_fx.x, 1.0);',\n      '  float lens = u_pointer.z * exp(-dot(pd, pd) \/ (R * R)) * step(1.0, u_fx.x);',\n      '  float ly = frag.y + u_fx.w * dpr + lens * sp * 1.8;',\n      '  float row = floor(ly \/ sp);',\n      '  float band = floor(frag.y \/ (sp * 3.0));',\n      '  vec2 s = uv;',\n      '  s += u_print.w * 0.004 * vec2(',\n      '    sin(uv.y * 7.0 + time * 0.8) + 0.5 * sin(uv.y * 17.0 - time * 1.3),',\n      '    0.6 * sin(uv.x * 5.0 + time * 0.6));',\n      '  s -= (frag - u_pointer.xy) \/ res * lens * 0.4;',\n      '  float tick = floor(time * 9.0);',\n      '  float tear = u_pointer.w;',\n      '  float torn = step(1.0 - tear * 0.45, hash(vec2(band, tick)));',\n      '  s.x += (hash(vec2(band + 11.0, tick)) - 0.5) * tear * 0.09 * torn;',\n      '  float tone = texture2D(u_texA, cover(s, u_frame.x)).r;',\n      '  float swapping = step(u_fx.y, 0.999);',\n      '  if (swapping > 0.5) {',\n      '    float toneB = texture2D(u_texB, cover(s, u_frame.y)).r;',\n      '    tone = mix(tone, toneB, scanned(fromTop, row, u_fx.y));',\n      '  }',\n      '  tone *= scanned(fromTop, row, u_fx.z);',\n      '  tone = clamp((tone - 0.03) * 1.12, 0.0, 1.0);',\n      '  tone = min(1.0, tone + lens * 0.14 * step(0.02, tone));',\n      '  float field = noise(uv * vec2(2.2, 2.8) + u_frame.w * 1.37);',\n      '  float m = smoothstep(0.5, 0.18, uv.y + (field - 0.5) * 0.55);',\n      '  m = clamp(m * min(u_print.y, 1.0) + max(u_print.y - 1.0, 0.0), 0.0, 1.0);',\n      '  m = mix(m, 1.0 - m, lens);',\n      '  float across = abs(fract(ly \/ sp) - 0.5) * 2.0;',\n      '  float rag = (noise(vec2(frag.x \/ (dpr * 2.5), row * 1.7)) - 0.5) * 0.45;',\n      '  float th = clamp(pow(tone, 0.8) * 1.05 + rag * tone, 0.0, 1.0);',\n      '  float aa = 1.4 \/ sp;',\n      '  float lines = 1.0 - smoothstep(th - aa, th + aa, across);',\n      '  float dotPx = max(1.0, floor(u_print.z * dpr + 0.5));',\n      '  vec2 cell = floor(frag \/ dotPx);',\n      '  lines *= step(0.1, hash(cell + 7.3)) * step(0.015, tone);',\n      '  float boil = floor(time * 10.0) * step(0.25, lens);',\n      '  float stipple = step(hash(cell + boil * vec2(17.0, 31.0)), pow(tone, 1.3) * 1.04);',\n      '  float lit = m > hash(cell + 91.0) ? stipple : lines;',\n      '  float grain = u_post.x;',\n      '  vec3 paper = u_bg * (1.0 - grain * 0.35 + grain * 0.7 * hash(cell + 5.0));',\n      '  paper += u_bg * (noise(frag \/ (dpr * 40.0)) - 0.5) * grain * 0.6;',\n      '  paper += u_ink * tone * 0.1;',\n      '  if (u_frame.z > 0.0) {',\n      '    vec2 edge = min(frag, res - frag) \/ dpr;',\n      '    float d = abs(min(edge.x, edge.y) - u_frame.z);',\n      '    float inside = step(u_frame.z - 1.0, min(edge.x, edge.y));',\n      '    paper = mix(paper, u_frameColor, (1.0 - smoothstep(0.5, 1.3, d)) * inside * 0.9);',\n      '  }',\n      '  vec3 ink = mix(u_ink * 0.5, u_ink, smoothstep(0.08, 0.55, tone));',\n      '  ink = mix(ink, u_hot, smoothstep(0.7, 1.0, tone) * 0.75 + lens * 0.15);',\n      '  vec3 col = mix(paper, ink, lit);',\n      '  float introFront = u_fx.z * 1.2 - 0.1;',\n      '  float swapFront = u_fx.y * 1.2 - 0.1;',\n      '  col += u_hot * 0.55 * lines * exp(-abs(fromTop - introFront) * 60.0) * step(u_fx.z, 0.999);',\n      '  col += u_hot * 0.55 * lines * exp(-abs(fromTop - swapFront) * 60.0) * swapping;',\n      '  float ringD = abs(length(pd) - R * 0.9);',\n      '  float dash = step(0.5, fract(atan(pd.y, pd.x) * 3.8197 + time * 0.15));',\n      '  float ring = u_pointer.z * (1.0 - smoothstep(0.4, 1.2, ringD)) * dash * step(1.0, u_fx.x);',\n      '  col = mix(col, u_hot, ring * 0.75);',\n      '  float vd = length(uv - 0.5) * 1.41421356;',\n      '  col *= 1.0 - u_post.y * smoothstep(0.4, 1.05, vd);',\n      '  gl_FragColor = vec4(clamp(col, 0.0, 1.0), 1.0);',\n      '}'\n    ].join('\\n');\n\n    function compileProgram(gl, vert, frag) {\n      var program = gl.createProgram();\n      if (!program) return null;\n      var pairs = [[gl.VERTEX_SHADER, vert], [gl.FRAGMENT_SHADER, frag]];\n      for (var i = 0; pairs.length > i; i += 1) {\n        var type = pairs[i][0];\n        var source = pairs[i][1];\n        var shader = gl.createShader(type);\n        if (!shader) return null;\n        gl.shaderSource(shader, source);\n        gl.compileShader(shader);\n        if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n          gl.deleteShader(shader);\n          gl.deleteProgram(program);\n          return null;\n        }\n        gl.attachShader(program, shader);\n        gl.deleteShader(shader);\n      }\n      gl.linkProgram(program);\n      if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n        gl.deleteProgram(program);\n        return null;\n      }\n      return program;\n    }\n\n    function easeInOut(x) {\n      return 0.5 > x ? 2 * x * x : 1 - Math.pow(-2 * x + 2, 2) \/ 2;\n    }\n\n    function initScanlineBloom() {\n      var hero = document.getElementById('archBloomHero');\n      var canvas = document.getElementById('archBloomCanvas');\n      if (!hero) return;\n      if (!canvas) return;\n      if (canvas._bloomReady) return;\n      canvas._bloomReady = true;\n\n      var gl = canvas.getContext('webgl', { antialias: false, alpha: false });\n      if (!gl) return;\n      var program = compileProgram(gl, VERT_SRC, FRAG_SRC);\n      if (!program) return;\n\n      var triBuf = gl.createBuffer();\n      gl.bindBuffer(gl.ARRAY_BUFFER, triBuf);\n      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);\n      var posLoc = gl.getAttribLocation(program, 'a_position');\n      gl.enableVertexAttribArray(posLoc);\n      gl.vertexAttribPointer(posLoc, 2, gl.FLOAT, false, 0, 0);\n      gl.useProgram(program);\n\n      function u(name) { return gl.getUniformLocation(program, name); }\n      var loc = {\n        texA: u('u_texA'),\n        texB: u('u_texB'),\n        scene: u('u_scene'),\n        pointer: u('u_pointer'),\n        print: u('u_print'),\n        fx: u('u_fx'),\n        frame: u('u_frame'),\n        post: u('u_post'),\n        ink: u('u_ink'),\n        hot: u('u_hot'),\n        bg: u('u_bg'),\n        frameColor: u('u_frameColor')\n      };\n      gl.uniform1i(loc.texA, 0);\n      gl.uniform1i(loc.texB, 1);\n\n      function makeTex() {\n        var tex = gl.createTexture();\n        gl.bindTexture(gl.TEXTURE_2D, tex);\n        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);\n        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);\n        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);\n        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);\n        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([0, 0, 0, 255]));\n        return tex;\n      }\n\n      var texA = makeTex();\n      var texB = makeTex();\n      var aspectA = 1;\n      var aspectB = 1;\n      gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);\n\n      var painter = document.createElement('canvas');\n      var currentSeed = 7;\n\n      function paintInto(tex, seedVal) {\n        var dpr = window.devicePixelRatio || 1;\n        var dims = paintSize(canvas.clientWidth || 800, canvas.clientHeight || 480, dpr);\n        paintBouquet(painter, dims[0], dims[1], seedVal);\n        gl.bindTexture(gl.TEXTURE_2D, tex);\n        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, painter);\n        return dims[0] \/ dims[1];\n      }\n\n      var pointer = { x: 0, y: 0, inside: false, speed: 0, lastX: 0, lastY: 0, lastT: 0 };\n      var presence = 0;\n      var tear = 0;\n      var time = 0;\n      var scan = 0;\n      var last = 0;\n      var raf = 0;\n      var introStart = -1;\n      var swapStart = -1;\n      var swapTo = currentSeed;\n\n      var inkRgb = new Float32Array([227 \/ 255, 22 \/ 255, 31 \/ 255]);\n      var hotRgb = new Float32Array([255 \/ 255, 106 \/ 255, 79 \/ 255]);\n      var bgRgb = new Float32Array([11 \/ 255, 9 \/ 255, 9 \/ 255]);\n\n      function resize() {\n        var dpr = Math.min(window.devicePixelRatio || 1, 2);\n        var w = Math.max(1, Math.round((canvas.clientWidth || 800) * dpr));\n        var h = Math.max(1, Math.round((canvas.clientHeight || 480) * dpr));\n        if (canvas.width !== w) canvas.width = w;\n        if (canvas.height !== h) canvas.height = h;\n      }\n\n      function draw(now) {\n        raf = 0;\n        var dt = last ? Math.min((now - last) \/ 1000, 0.05) : 0.016;\n        last = now;\n        resize();\n\n        time += dt;\n        scan = (scan + dt * 5) % (5 * 240);\n\n        if (0 > introStart) introStart = now;\n        var intro = Math.min(1, (now - introStart) \/ 1700);\n        var swap = 1;\n        if (swapStart >= 0) {\n          swap = Math.min(1, (now - swapStart) \/ 1300);\n          if (swap >= 1) {\n            var tmp = texA;\n            texA = texB;\n            texB = tmp;\n            aspectA = aspectB;\n            currentSeed = swapTo;\n            swapStart = -1;\n          }\n        }\n\n        var targetPres = pointer.inside ? 1 : 0;\n        presence += (targetPres - presence) * (1 - Math.exp(-dt \/ 0.18));\n        pointer.speed *= Math.exp(-dt \/ 0.12);\n        var tearTarget = Math.min(1, 0.3 * 0.25 + pointer.speed \/ 2600);\n        tear += (tearTarget - tear) * (1 - Math.exp(-dt \/ 0.08));\n\n        var dpr = canvas.width \/ Math.max(1, canvas.clientWidth || 1);\n\n        gl.viewport(0, 0, canvas.width, canvas.height);\n        gl.activeTexture(gl.TEXTURE0);\n        gl.bindTexture(gl.TEXTURE_2D, texA);\n        gl.activeTexture(gl.TEXTURE1);\n        gl.bindTexture(gl.TEXTURE_2D, texB);\n\n        gl.uniform4f(loc.scene, canvas.width, canvas.height, time, dpr);\n        gl.uniform4f(loc.pointer, pointer.x * dpr, ((canvas.clientHeight || 480) - pointer.y) * dpr, presence, tear);\n        gl.uniform4f(loc.print, 5.0, 1.0, 1.6, 1.0);\n        gl.uniform4f(loc.fx, 145.0, easeInOut(swap), easeInOut(intro), scan);\n        gl.uniform4f(loc.frame, aspectA, aspectB, 14.0, currentSeed % 97);\n        gl.uniform4f(loc.post, 0.5, 0.35, 0, 0);\n        gl.uniform3fv(loc.ink, inkRgb);\n        gl.uniform3fv(loc.hot, hotRgb);\n        gl.uniform3fv(loc.bg, bgRgb);\n        gl.uniform3fv(loc.frameColor, inkRgb);\n        gl.drawArrays(gl.TRIANGLES, 0, 3);\n\n        if (!document.hidden) {\n          raf = requestAnimationFrame(draw);\n        }\n      }\n\n      function kick() {\n        if (!raf) {\n          if (!document.hidden) {\n            raf = requestAnimationFrame(draw);\n          }\n        }\n      }\n\n      function triggerRebloom() {\n        if (swapStart >= 0) return;\n        swapTo = nextSeed(currentSeed);\n        aspectB = paintInto(texB, swapTo);\n        swapStart = performance.now();\n        kick();\n      }\n\n      aspectA = paintInto(texA, currentSeed);\n      kick();\n\n      window.addEventListener('pointermove', function(e) {\n        var r = canvas.getBoundingClientRect();\n        var insideX = false;\n        if (e.clientX >= r.left) {\n          if (r.right >= e.clientX) insideX = true;\n        }\n        var insideY = false;\n        if (e.clientY >= r.top) {\n          if (r.bottom >= e.clientY) insideY = true;\n        }\n        pointer.inside = insideX ? insideY : false;\n        pointer.x = e.clientX - r.left;\n        pointer.y = e.clientY - r.top;\n        var now = e.timeStamp || performance.now();\n        if (pointer.lastT) {\n          if (now > pointer.lastT) {\n            var v = Math.hypot(e.clientX - pointer.lastX, e.clientY - pointer.lastY) \/ ((now - pointer.lastT) \/ 1000);\n            if (pointer.inside) {\n              pointer.speed = Math.max(pointer.speed, Math.min(v, 6000));\n            }\n          }\n        }\n        pointer.lastX = e.clientX;\n        pointer.lastY = e.clientY;\n        pointer.lastT = now;\n        kick();\n      }, { passive: true });\n\n      hero.addEventListener('click', function(e) {\n        var t = e.target;\n        if (t) {\n          if (t.closest) {\n            if (t.closest('a, button, [data-no-bloom]')) return;\n          }\n        }\n        triggerRebloom();\n      });\n\n      setInterval(function() {\n        if (!document.hidden) {\n          triggerRebloom();\n        }\n      }, 5000);\n    }\n\n    function updateClockAndStatus() {\n      var dot = document.getElementById('archC2Dot');\n      var statusEl = document.getElementById('archC2Status');\n      var clockEl = document.getElementById('archC2Clock');\n      if (!dot) return;\n      if (!statusEl) return;\n\n      var now = new Date();\n      var day = now.getDay();\n      var hrs = now.getHours();\n      var mins = now.getMinutes();\n      var totalMins = hrs * 60 + mins;\n\n      var hh = hrs >= 10 ? String(hrs) : '0' + String(hrs);\n      var mm = mins >= 10 ? String(mins) : '0' + String(mins);\n      if (clockEl) {\n        clockEl.textContent = '\u0e40\u0e27\u0e25\u0e32\u0e1b\u0e31\u0e08\u0e08\u0e38\u0e1a\u0e31\u0e19 ' + hh + ':' + mm + ' \u0e19.';\n      }\n\n      var isWeekday = false;\n      if (day >= 1) {\n        if (5 >= day) {\n          isWeekday = true;\n        }\n      }\n      var isOpenHours = false;\n      if (totalMins >= 510) {\n        if (990 >= totalMins) {\n          isOpenHours = true;\n        }\n      }\n\n      if (isWeekday) {\n        if (isOpenHours) {\n          dot.classList.remove('is-closed');\n          statusEl.textContent = '\u0e02\u0e13\u0e30\u0e19\u0e35\u0e49\u0e40\u0e1b\u0e34\u0e14\u0e17\u0e33\u0e01\u0e32\u0e23\u0e1b\u0e01\u0e15\u0e34 (08:30 \u2013 16:30 \u0e19.)';\n          return;\n        }\n      }\n      dot.classList.add('is-closed');\n      statusEl.textContent = '\u0e19\u0e2d\u0e01\u0e40\u0e27\u0e25\u0e32\u0e17\u0e33\u0e01\u0e32\u0e23 \u2022 \u0e40\u0e1b\u0e34\u0e14\u0e08\u0e31\u0e19\u0e17\u0e23\u0e4c \u2013 \u0e28\u0e38\u0e01\u0e23\u0e4c (08:30 \u2013 16:30 \u0e19.)';\n    }\n\n    function setupTabs() {\n      var tabs = document.querySelectorAll('.arch-c2-dept-tab');\n      var panels = document.querySelectorAll('.arch-c2-dept-panel');\n      for (var i = 0; tabs.length > i; i += 1) {\n        (function(tab) {\n          if (tab._boundTab) return;\n          tab._boundTab = true;\n          tab.addEventListener('click', function() {\n            var targetIdx = tab.getAttribute('data-tab');\n            for (var k = 0; tabs.length > k; k += 1) {\n              tabs[k].classList.remove('is-active');\n            }\n            for (var m = 0; panels.length > m; m += 1) {\n              var p = panels[m];\n              if (p.getAttribute('data-panel') === targetIdx) {\n                p.classList.add('is-active');\n              } else {\n                p.classList.remove('is-active');\n              }\n            }\n            tab.classList.add('is-active');\n          });\n        })(tabs[i]);\n      }\n    }\n\n    var toastTimer = null;\n    function showToast(msg) {\n      var toast = document.getElementById('archC2Toast');\n      var toastText = document.getElementById('archC2ToastText');\n      if (!toast) return;\n      if (toastText) {\n        toastText.textContent = msg;\n      }\n      toast.classList.add('is-visible');\n      if (toastTimer) {\n        clearTimeout(toastTimer);\n      }\n      toastTimer = setTimeout(function() {\n        toast.classList.remove('is-visible');\n      }, 2200);\n    }\n\n    function setupCopyTriggers() {\n      var btns = document.querySelectorAll('.arch-copy-trigger');\n      for (var i = 0; btns.length > i; i += 1) {\n        (function(btn) {\n          if (btn._boundCopy2) return;\n          btn._boundCopy2 = true;\n          btn.addEventListener('click', function() {\n            var val = btn.getAttribute('data-copy') || '';\n            var orig = btn.textContent;\n            if (navigator.clipboard) {\n              navigator.clipboard.writeText(val);\n            }\n            btn.textContent = '\u0e04\u0e31\u0e14\u0e25\u0e2d\u0e01\u0e41\u0e25\u0e49\u0e27 \u2713';\n            showToast('\u0e04\u0e31\u0e14\u0e25\u0e2d\u0e01 \"' + val + '\" \u0e40\u0e23\u0e35\u0e22\u0e1a\u0e23\u0e49\u0e2d\u0e22\u0e41\u0e25\u0e49\u0e27');\n            setTimeout(function() {\n              btn.textContent = orig;\n            }, 1800);\n          });\n        })(btns[i]);\n      }\n    }\n\n    function setupSpotlights() {\n      var cards = document.querySelectorAll('.arch-c2-card');\n      for (var i = 0; cards.length > i; i += 1) {\n        (function(card) {\n          if (card._boundSpot) return;\n          card._boundSpot = true;\n          var spot = card.querySelector('.arch-c2-spotlight');\n          if (!spot) return;\n          card.addEventListener('mousemove', function(e) {\n            var rect = card.getBoundingClientRect();\n            var x = e.clientX - rect.left;\n            var y = e.clientY - rect.top;\n            spot.style.left = x + 'px';\n            spot.style.top = y + 'px';\n          });\n        })(cards[i]);\n      }\n    }\n\n    function setupReveal() {\n      var items = document.querySelectorAll('.arch-c2-reveal');\n      if (!items.length) return;\n\n      for (var i = 0; items.length > i; i += 1) {\n        var el = items[i];\n        if (!el._archInit2) {\n          el._archInit2 = true;\n          el.classList.add('arch-wait');\n        }\n      }\n\n      function checkItems() {\n        for (var j = 0; items.length > j; j += 1) {\n          var item = items[j];\n          if (!item.classList.contains('arch-show')) {\n            var rect = item.getBoundingClientRect();\n            if (window.innerHeight * 0.94 > rect.top) {\n              (function(target, delayIdx) {\n                setTimeout(function() {\n                  target.classList.remove('arch-wait');\n                  target.classList.add('arch-show');\n                }, delayIdx * 85);\n              })(item, j % 4);\n            }\n          }\n        }\n      }\n\n      window.addEventListener('scroll', checkItems, true);\n      setInterval(checkItems, 250);\n      requestAnimationFrame(function() {\n        requestAnimationFrame(checkItems);\n      });\n    }\n\n    function initAll() {\n      initScanlineBloom();\n      updateClockAndStatus();\n      setupTabs();\n      setupCopyTriggers();\n      setupSpotlights();\n      setupReveal();\n    }\n\n    if (document.readyState === 'loading') {\n      document.addEventListener('DOMContentLoaded', initAll);\n    } else {\n      initAll();\n    }\n    setTimeout(initAll, 250);\n    setInterval(updateClockAndStatus, 30000);\n  })();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>\u0e40\u0e1b\u0e34\u0e14\u0e17\u0e33\u0e01\u0e32\u0e23 \u0e08\u0e31\u0e19\u0e17\u0e23\u0e4c \u2013 \u0e28\u0e38\u0e01\u0e23\u0e4c (08:30 \u2013 16:30 \u0e19.) \u0e2a\u0e07\u0e02\u0e25\u0e32 08:30 [&hellip;]<\/p>\n","protected":false},"author":13,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2215","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/arch.rmutsv.ac.th\/ruts\/wp-json\/wp\/v2\/pages\/2215","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/arch.rmutsv.ac.th\/ruts\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/arch.rmutsv.ac.th\/ruts\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/arch.rmutsv.ac.th\/ruts\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/arch.rmutsv.ac.th\/ruts\/wp-json\/wp\/v2\/comments?post=2215"}],"version-history":[{"count":8,"href":"https:\/\/arch.rmutsv.ac.th\/ruts\/wp-json\/wp\/v2\/pages\/2215\/revisions"}],"predecessor-version":[{"id":14607,"href":"https:\/\/arch.rmutsv.ac.th\/ruts\/wp-json\/wp\/v2\/pages\/2215\/revisions\/14607"}],"wp:attachment":[{"href":"https:\/\/arch.rmutsv.ac.th\/ruts\/wp-json\/wp\/v2\/media?parent=2215"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}