/* LINE Seed Sans TH is loaded by the shared local stylesheet. */ :root { --main: #0084ff; --sub: #000000; --bg_main: #ffffff; --bg_sub: #ffffff; --font_main: #212121; --font_sub: #000000; --font_sec: #000000; --bg_border: #000000; --bg_opa: 100%; --sub-opa-50: #00000080; --sub-opa-25: #0084ff; } :root { --main-font: 'LINE Seed Sans TH', sans-serif; --heading-font: 'LINE Seed Sans TH', sans-serif; } body { font-family: var(--main-font); /* Use the main font for body text */ } h1, h2, h3, h4, h5 { font-family: var(--heading-font); /* Use the heading font for headings */ } body { position: relative; min-height: 100vh; overflow-x: hidden; color: #ffffff; background-color: #ffffff; font-family: 'LINE Seed Sans TH', sans-serif; background-image: radial-gradient(72% 62% at 2% 3%, color-mix(in srgb, var(--sub) 43%, transparent), transparent 70%), radial-gradient(70% 62% at 98% 97%, color-mix(in srgb, var(--sub) 37%, transparent), transparent 72%); background-repeat: no-repeat, no-repeat; background-position: left top, right bottom; background-size: 100% 100%, 100% 100%; } /* Animated backgrounds live on an isolated, non-interactive layer behind page content. */ body[data-background-style="7"],body[data-background-style="8"],body[data-background-style="9"],body[data-background-style="10"],body[data-background-style="11"],body[data-background-style="12"]{isolation:isolate} body[data-background-style="7"]:before,body[data-background-style="8"]:before,body[data-background-style="9"]:before,body[data-background-style="10"]:before,body[data-background-style="11"]:before,body[data-background-style="12"]:before{content:"";position:fixed;z-index:-1;pointer-events:none;inset:-14%;transform:translate3d(0,0,0);will-change:transform,background-position;} body[data-background-style="7"]:before{opacity:.95;background:linear-gradient(118deg,transparent 9%,color-mix(in srgb,var(--main) 14%,transparent) 24%,transparent 39%,color-mix(in srgb,var(--sub) 22%,transparent) 58%,transparent 76%),radial-gradient(ellipse 48% 42% at 22% 34%,color-mix(in srgb,var(--main) 48%,transparent),transparent 72%),radial-gradient(ellipse 46% 42% at 76% 38%,color-mix(in srgb,var(--sub) 44%,transparent),transparent 73%),radial-gradient(ellipse 54% 44% at 52% 82%,color-mix(in srgb,var(--main) 28%,transparent),transparent 75%);background-size:180% 180%;animation:siteAuroraDrift 12s ease-in-out infinite alternate} body[data-background-style="8"]:before{opacity:.78;background-image:radial-gradient(circle,color-mix(in srgb,var(--main) 88%,white) 0 1.3px,transparent 2px),radial-gradient(circle,color-mix(in srgb,var(--sub) 88%,white) 0 1.3px,transparent 2px),radial-gradient(ellipse 58% 48% at 50% 50%,color-mix(in srgb,var(--sub) 30%,transparent),transparent 76%);background-size:137px 137px,211px 211px,100% 100%;background-position:0 0,56px 83px,center;animation:siteParticleDrift 18s linear infinite} body[data-background-style="9"]:before{opacity:.9;background:linear-gradient(120deg,color-mix(in srgb,var(--main) 24%,transparent),transparent 38%,color-mix(in srgb,var(--sub) 29%,transparent) 67%,transparent),radial-gradient(ellipse 52% 38% at 25% 45%,color-mix(in srgb,var(--main) 40%,transparent),transparent 74%),radial-gradient(ellipse 50% 42% at 78% 56%,color-mix(in srgb,var(--sub) 38%,transparent),transparent 75%);background-size:220% 220%;animation:siteWaveFlow 9s ease-in-out infinite alternate} body[data-background-style="10"]:before{opacity:.82;background-image:radial-gradient(circle at 20% 105%,color-mix(in srgb,var(--main) 48%,transparent) 0 18px,transparent 19px),radial-gradient(circle at 66% 115%,color-mix(in srgb,var(--sub) 50%,transparent) 0 28px,transparent 29px),radial-gradient(circle at 88% 108%,color-mix(in srgb,var(--main) 38%,transparent) 0 12px,transparent 13px),radial-gradient(circle at 42% 120%,color-mix(in srgb,var(--sub) 32%,transparent) 0 9px,transparent 10px);background-size:100% 100%;animation:siteBubblesRise 11s ease-in-out infinite} body[data-background-style="11"]:before{opacity:.42;background-image:linear-gradient(color-mix(in srgb,var(--main) 22%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--sub) 22%,transparent) 1px,transparent 1px),radial-gradient(ellipse at 50% 50%,color-mix(in srgb,var(--main) 18%,transparent),transparent 74%);background-size:46px 46px,46px 46px,100% 100%;animation:siteGridShift 8s linear infinite} body[data-background-style="12"]:before{opacity:.8;inset:-40%;background:linear-gradient(112deg,transparent 43%,color-mix(in srgb,var(--main) 20%,transparent) 48%,color-mix(in srgb,var(--sub) 52%,transparent) 50%,color-mix(in srgb,var(--main) 24%,transparent) 52%,transparent 58%);filter:blur(10px);animation:siteLightSweep 7s ease-in-out infinite alternate} @keyframes siteAuroraDrift{0%{transform:translate3d(-5%,-3%,0) scale(1.03);background-position:0 50%}50%{transform:translate3d(4%,2%,0) scale(1.09);background-position:100% 20%}100%{transform:translate3d(-2%,5%,0) scale(1.06);background-position:12% 100%}} @keyframes siteParticleDrift{to{transform:translate3d(8%,-7%,0);background-position:137px -137px,-155px 211px,center}} @keyframes siteWaveFlow{0%{transform:translate3d(-5%,1%,0) scale(1.02);background-position:0 40%}100%{transform:translate3d(5%,-2%,0) scale(1.08);background-position:100% 60%}} @keyframes siteBubblesRise{0%{transform:translate3d(-1%,5%,0)}50%{transform:translate3d(2%,-4%,0)}100%{transform:translate3d(-2%,-12%,0)}} @keyframes siteGridShift{to{background-position:46px 46px,-46px 46px,100% 100%}} @keyframes siteLightSweep{0%{transform:translate3d(-38%,0,0) rotate(-4deg);opacity:.35}100%{transform:translate3d(38%,0,0) rotate(4deg);opacity:.9}} .site-bg-floating-logo{position:fixed;z-index:0;top:28vh;right:11vw;display:grid;width:clamp(68px,11vw,150px);aspect-ratio:1;place-items:center;pointer-events:none;opacity:.25;filter:drop-shadow(0 0 18px color-mix(in srgb,var(--main) 72%,transparent));animation:siteLogoFloat 4.8s ease-in-out infinite}.site-bg-floating-logo img{display:block;width:100%;height:100%;object-fit:contain}.site-bg-logo-mark{display:grid;width:100%;height:100%;place-items:center;border:2px solid color-mix(in srgb,var(--main) 65%,transparent);border-radius:30%;color:var(--main);font-size:clamp(36px,6vw,84px)} .site-bg-block-avatar{position:fixed;z-index:0;left:-160px;bottom:4vh;width:112px;height:176px;pointer-events:none;filter:drop-shadow(0 8px 20px color-mix(in srgb,var(--sub) 42%,transparent));animation:siteAvatarPass 23s linear infinite alternate}.site-bg-block-avatar span{position:absolute;display:block}.site-bg-block-avatar .avatar-head{top:4px;left:38px;width:38px;height:38px;border:2px solid rgba(255,255,255,.45);border-radius:7px;background:linear-gradient(145deg,#ffd29b,#f0a663);box-shadow:inset -7px -7px rgba(0,0,0,.11)}.site-bg-block-avatar .avatar-head:after{content:"••";position:absolute;left:8px;top:7px;color:#26334b;font:bold 14px/1 sans-serif;letter-spacing:5px}.site-bg-block-avatar .avatar-torso{top:47px;left:30px;width:54px;height:57px;border:2px solid rgba(255,255,255,.42);border-radius:8px;background:linear-gradient(145deg,var(--main),var(--sub))}.site-bg-block-avatar .avatar-arm{top:50px;width:20px;height:55px;border:2px solid rgba(255,255,255,.35);border-radius:7px;background:linear-gradient(160deg,var(--sub),var(--main));transform-origin:top center}.site-bg-block-avatar .avatar-arm-left{left:7px;transform:rotate(12deg);animation:siteAvatarArm 1.3s ease-in-out infinite alternate}.site-bg-block-avatar .avatar-arm-right{right:7px;transform:rotate(-12deg);animation:siteAvatarArm 1.3s ease-in-out infinite alternate-reverse}.site-bg-block-avatar .avatar-leg{top:108px;width:24px;height:61px;border:2px solid rgba(255,255,255,.35);border-radius:7px;background:linear-gradient(160deg,#26334b,#121827);transform-origin:top center}.site-bg-block-avatar .avatar-leg-left{left:29px;animation:siteAvatarLeg .72s ease-in-out infinite alternate}.site-bg-block-avatar .avatar-leg-right{right:29px;animation:siteAvatarLeg .72s ease-in-out infinite alternate-reverse} @keyframes siteLogoFloat{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-34px) rotate(3deg)}} @keyframes siteAvatarPass{0%{transform:translate3d(0,0,0)}45%{transform:translate3d(calc(50vw + 80px),-18px,0)}100%{transform:translate3d(calc(100vw + 190px),8px,0)}} @keyframes siteAvatarArm{to{rotate:22deg}} @keyframes siteAvatarLeg{to{rotate:24deg}} .site-bg-block-avatar{animation:siteAvatarPass 23s linear infinite alternate;opacity:.56} .site-bg-floating-logo{position:fixed;z-index:0;top:28vh;right:11vw;display:grid;width:clamp(68px,11vw,150px);aspect-ratio:1;place-items:center;pointer-events:none;opacity:.24;filter:drop-shadow(0 0 18px color-mix(in srgb,var(--main) 72%,transparent));animation:siteLogoFloat 4.8s ease-in-out infinite}.site-bg-floating-logo img{display:block;width:100%;height:100%;object-fit:contain}.site-bg-logo-mark{display:grid;width:100%;height:100%;place-items:center;border:2px solid color-mix(in srgb,var(--main) 65%,transparent);border-radius:30%;color:var(--main);font-size:clamp(36px,6vw,84px)} .site-bg-block-avatar{position:fixed;z-index:0;left:-160px;bottom:4vh;width:112px;height:176px;pointer-events:none;filter:drop-shadow(0 8px 20px color-mix(in srgb,var(--sub) 42%,transparent));animation:siteAvatarPass 23s linear infinite}.site-bg-block-avatar span{position:absolute;display:block}.site-bg-block-avatar .avatar-head{top:4px;left:38px;width:38px;height:38px;border:2px solid rgba(255,255,255,.45);border-radius:7px;background:linear-gradient(145deg,#ffd29b,#f0a663);box-shadow:inset -7px -7px rgba(0,0,0,.11)}.site-bg-block-avatar .avatar-head:after{content:"••";position:absolute;left:8px;top:7px;color:#26334b;font:bold 14px/1 sans-serif;letter-spacing:5px}.site-bg-block-avatar .avatar-torso{top:47px;left:30px;width:54px;height:57px;border:2px solid rgba(255,255,255,.42);border-radius:8px;background:linear-gradient(145deg,var(--main),var(--sub))}.site-bg-block-avatar .avatar-arm{top:50px;width:20px;height:55px;border:2px solid rgba(255,255,255,.35);border-radius:7px;background:linear-gradient(160deg,var(--sub),var(--main));transform-origin:top center}.site-bg-block-avatar .avatar-arm-left{left:7px;transform:rotate(12deg);animation:siteAvatarArm 1.3s ease-in-out infinite alternate}.site-bg-block-avatar .avatar-arm-right{right:7px;transform:rotate(-12deg);animation:siteAvatarArm 1.3s ease-in-out infinite alternate-reverse}.site-bg-block-avatar .avatar-leg{top:108px;width:24px;height:61px;border:2px solid rgba(255,255,255,.35);border-radius:7px;background:linear-gradient(160deg,#26334b,#121827);transform-origin:top center}.site-bg-block-avatar .avatar-leg-left{left:29px;animation:siteAvatarLeg .72s ease-in-out infinite alternate}.site-bg-block-avatar .avatar-leg-right{right:29px;animation:siteAvatarLeg .72s ease-in-out infinite alternate-reverse} @keyframes siteLogoFloat{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-34px) rotate(3deg)}} @keyframes siteAvatarPass{0%{transform:translate3d(0,0,0)}45%{transform:translate3d(calc(50vw + 80px),-18px,0)}100%{transform:translate3d(calc(100vw + 190px),8px,0)}} @keyframes siteAvatarArm{to{rotate:22deg}} @keyframes siteAvatarLeg{to{rotate:24deg}} .site-bg-block-avatar{animation:siteAvatarPass 23s linear infinite alternate;opacity:.56} @media(prefers-reduced-motion:reduce){body[data-background-style="7"]:before,body[data-background-style="8"]:before,body[data-background-style="9"]:before,body[data-background-style="10"]:before,body[data-background-style="11"]:before,body[data-background-style="12"]:before{animation:none;will-change:auto}} @media(max-width:767px){.site-bg-floating-logo{top:22vh;right:7vw;width:74px}.site-bg-block-avatar{transform:scale(.78);transform-origin:bottom left}} /* สำหรับมือถือ */ @media only screen and (max-width: 768px) { body { background-attachment: scroll; /* ไม่ fixed */ background-position: center center; /* ตรงกลาง */ background-size: cover; /* ครอบคลุมเต็มพื้นที่ */ } } .text-super { font-size: 2.2rem; font-weight: 700; letter-spacing: -1px; line-height: 1; background: linear-gradient( to bottom right, color-mix(in srgb, var(--main) 55%, white) 0%, var(--main) 25%, var(--sub) 100% ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; padding-bottom: 4px; } /* เอฟเฟกต์โหลด */ #app{ transition: opacity .25s ease, transform .25s ease; } .app-hide{ opacity:0; transform:translateY(10px); } /* |-------------------------------------------------------------------------- | ENTER SITE LOADER |-------------------------------------------------------------------------- */ #app-loader{ position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition: opacity .18s ease, visibility .18s ease; pointer-events:none; } /* |-------------------------------------------------------------------------- | active |-------------------------------------------------------------------------- */ #app-loader.active{ opacity:1; visibility:visible; pointer-events:all; } /* |-------------------------------------------------------------------------- | orbit wrapper |-------------------------------------------------------------------------- */ #app-loader::before{ content:''; position:absolute; width:160px; height:160px; border-radius:50%; background: conic-gradient( from 0deg, transparent 0deg, color-mix(in srgb, var(--main) 5%, transparent) 40deg, color-mix(in srgb, var(--main) 18%, transparent) 90deg, color-mix(in srgb, var(--sub) 30%, transparent) 140deg, var(--sub) 200deg, var(--main) 270deg, color-mix(in srgb, var(--main) 30%, transparent) 320deg, transparent 360deg ); filter: blur(.2px) drop-shadow(0 0 18px var(--main)); -webkit-mask: radial-gradient( farthest-side, transparent calc(100% - 2px), #fff calc(100% - 2px) ); transform:rotateX(70deg); animation: orbit1 2.4s linear infinite; } /* |-------------------------------------------------------------------------- | orbit 2 |-------------------------------------------------------------------------- */ #app-loader::after{ content:''; position:absolute; width:130px; height:130px; border-radius:50%; background: conic-gradient( from 180deg, transparent 0deg, color-mix(in srgb, var(--sub) 5%, transparent) 50deg, color-mix(in srgb, var(--sub) 15%, transparent) 100deg, color-mix(in srgb, var(--main) 28%, transparent) 150deg, var(--main) 230deg, var(--sub) 300deg, transparent 360deg ); filter: blur(.2px) drop-shadow(0 0 14px var(--sub)); -webkit-mask: radial-gradient( farthest-side, transparent calc(100% - 2px), #fff calc(100% - 2px) ); transform:rotateY(70deg); animation: orbit2 3s linear infinite reverse; } /* |-------------------------------------------------------------------------- | center logo |-------------------------------------------------------------------------- */ #app-loader .loader-logo{ position:absolute; width:40px; height:40px; object-fit:contain; z-index:2; filter: drop-shadow(0 0 12px var(--sub)); animation: glow 2s ease-in-out infinite; } /* |-------------------------------------------------------------------------- | orbit 3 |-------------------------------------------------------------------------- */ #app-loader .orbit3{ position:absolute; width:100px; height:100px; border-radius:50%; background: conic-gradient( from 90deg, transparent 0deg, color-mix(in srgb, var(--main) 5%, transparent) 60deg, color-mix(in srgb, var(--sub) 15%, transparent) 120deg, color-mix(in srgb, var(--main) 30%, transparent) 180deg, var(--sub) 250deg, var(--main) 320deg, transparent 360deg ); filter: blur(.3px) drop-shadow(0 0 12px var(--main)); -webkit-mask: radial-gradient( farthest-side, transparent calc(100% - 1.5px), #fff calc(100% - 1.5px) ); animation: orbit3 1.8s linear infinite; } /* |-------------------------------------------------------------------------- | glow |-------------------------------------------------------------------------- */ #app-loader .loader-glow{ position:absolute; width:70px; height:70px; border-radius:50%; background: radial-gradient( circle, color-mix(in srgb, var(--main) 40%, transparent) 0%, color-mix(in srgb, var(--sub) 20%, transparent) 35%, transparent 75% ); filter:blur(14px); animation: glowPulse 2s ease-in-out infinite; } /* |-------------------------------------------------------------------------- | keyframes |-------------------------------------------------------------------------- */ @keyframes orbit1{ from{ transform:rotateX(70deg) rotateZ(0deg); } to{ transform:rotateX(70deg) rotateZ(360deg); } } @keyframes orbit2{ from{ transform:rotateY(70deg) rotateZ(0deg); } to{ transform:rotateY(70deg) rotateZ(360deg); } } @keyframes orbit3{ to{ transform:rotate(360deg); } } @keyframes glowPulse{ 0%,100%{ opacity:.5; transform:scale(1); } 50%{ opacity:1; transform:scale(1.3); } } @keyframes glow{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.08); } } .font-main { color: var(--font_main) !important; text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.2),0 0 2px rgba(0, 0, 0, 0.15),0 0 1px rgba(255, 255, 255, 0.2); } .font-sub { color: var(--font_sub) !important; text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.2),0 0 2px rgba(0, 0, 0, 0.15),0 0 1px rgba(255, 255, 255, 0.2);} .font-sec { color: var(--font_sec) !important; text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.2),0 0 2px rgba(0, 0, 0, 0.15),0 0 1px rgba(255, 255, 255, 0.2);} .text-muted { color: var(--font_sub) !important; text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.2),0 0 2px rgba(0, 0, 0, 0.15),0 0 1px rgba(255, 255, 255, 0.2);} .text-on { color: #00ff70 !important; text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.2),0 0 2px rgba(0, 0, 0, 0.15),0 0 1px rgba(255, 255, 255, 0.2);} .text-off { color: #ff0e00 !important ; text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.2),0 0 2px rgba(0, 0, 0, 0.15),0 0 1px rgba(255, 255, 255, 0.2);} .text-wait { color: #ffcc00 !important; text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.2),0 0 2px rgba(0, 0, 0, 0.15),0 0 1px rgba(255, 255, 255, 0.2);} .text-pri { color: #0066cc !important; text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.2),0 0 2px rgba(0, 0, 0, 0.15),0 0 1px rgba(255, 255, 255, 0.2);} .input-main { background-color: color-mix(in srgb, var(--bg_sub) 100%, transparent) !important; backdrop-filter: blur(10px); border-radius: 1vh; padding: 10px; font-size: 14px; color: #212121; border: 2px solid rgba(255,255,255,1); transition: all 0.3s ease; } .input-main:disabled { color: rgba(255, 255, 255, 0.5); /* ตัวอักษรจาง */ border: 2px solid rgba(255,255,255,1 ); cursor: not-allowed; opacity: 0.7; } .input-main:focus, .input-main:focus-visible { color: #212121 !important; border-color: #0084ff !important; box-shadow: 0 0 5px #0084ff !important; } .form-control { border: 2px solid rgba(255,255,255,1 ); } .modal-dialog { transform: scale(0.94) !important; opacity: 0; transition: transform 0.08s ease-out, opacity 0.06s ease-out; } .modal.show .modal-dialog { transform: scale(1) !important; opacity: 1; } .modal { transition: opacity 0.07s ease-out; } .modal-backdrop { transition: opacity 0.08s ease-out; } .bg-mainn { background-color: color-mix(in srgb, var(--bg_main) 100%, transparent) !important; backdrop-filter: blur(10px); box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;} .bg-sub { background-color: rgba(255,255,255,1 ) !important; backdrop-filter: blur(10px); box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;} /* Secondary-background buttons must stay readable in light themes. */ .btn.bg-sub, .btn.bg-sub:hover, .btn.bg-sub:focus, .btn.bg-sub:active { color: var(--font_main) !important; } .btn.bg-sub :is(i,span,strong,small) { color: inherit !important; } .bg-dark { background-color: rgba( 255,255,255,1 ) !important; backdrop-filter: blur(10px); } .box-light { border: 1px solid rgba(0,0,0,1); border-radius: 16px; height: fit-content; overflow: hidden; } .box-light:hover { border: solid 1px #0084ff; border-radius: 16px; height: fit-content; box-shadow: #0084ff 0px 5px 20px 1px; background-color: #0084ff; } /* รูปภาพทุกตัวที่อยู่ใน .box-light */ .box-light img { transition: transform 0.3s ease; } /* เมื่อเอาเมาส์ชี้ .box-light ให้ img ซูม */ .box-light:hover img { transform: scale(1.1); } /* ======================================== Base Tag ======================================== */ .tag { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 50px; font-size: 10px; font-weight: 700; line-height: 1; border: 1px solid transparent; white-space: nowrap; } /* ======================================== Dot ======================================== */ .tag::before { content: ""; width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; animation: tagPulse 1.5s infinite; } /* ======================================== SUCCESS — Bright Green ======================================== */ .tag-success { color: #00b96b; background: rgba(0, 201, 119, .12); border-color: rgba(0, 201, 119, .25); } .tag-success::before { background: #00e68a; box-shadow: 0 0 0 4px rgba(0, 230, 138, .15), 0 0 14px #00e68a; } /* ======================================== DANGER — Bright Red / Pink ======================================== */ .tag-danger { color: #ff3158; background: rgba(255, 49, 88, .11); border-color: rgba(255, 49, 88, .24); } .tag-danger::before { background: #ff3d61; box-shadow: 0 0 0 4px rgba(255, 61, 97, .15), 0 0 14px #ff3d61; } /* ======================================== WARNING — Bright Yellow ======================================== */ .tag-warning { color: #e89b00; background: rgba(255, 193, 7, .14); border-color: rgba(255, 193, 7, .28); } .tag-warning::before { background: #ffd43b; box-shadow: 0 0 0 4px rgba(255, 212, 59, .18), 0 0 14px #ffd43b; } /* ======================================== INFO — Bright Cyan ======================================== */ .tag-info { color: #009dcc; background: rgba(0, 200, 240, .12); border-color: rgba(0, 200, 240, .25); } .tag-info::before { background: #21d4ff; box-shadow: 0 0 0 4px rgba(33, 212, 255, .16), 0 0 14px #21d4ff; } /* ======================================== PRIMARY — Bright Blue ======================================== */ .tag-primary { color: #1769e0; background: rgba(45, 125, 255, .11); border-color: rgba(45, 125, 255, .24); } .tag-primary::before { background: #4d91ff; box-shadow: 0 0 0 4px rgba(77, 145, 255, .15), 0 0 14px #4d91ff; } /* ======================================== SECONDARY — Soft Gray ======================================== */ .tag-secondary { color: #687586; background: rgba(108, 117, 125, .10); border-color: rgba(108, 117, 125, .20); } .tag-secondary::before { background: #9ba7b5; box-shadow: 0 0 0 4px rgba(155, 167, 181, .15), 0 0 12px #9ba7b5; } /* ======================================== DARK — Bright Neutral ======================================== */ .tag-dark { color: #495057; background: rgba(73, 80, 87, .09); border-color: rgba(73, 80, 87, .18); } .tag-dark::before { background: #6c757d; box-shadow: 0 0 0 4px rgba(108, 117, 125, .12), 0 0 12px #6c757d; } /* ======================================== LIGHT — Clean ======================================== */ .tag-light { color: #7b8794; background: #f8fafc; border-color: #e5eaf0; } .tag-light::before { background: #b7c0cc; box-shadow: 0 0 0 4px rgba(183, 192, 204, .12), 0 0 10px rgba(183, 192, 204, .8); } /* ======================================== Pulse ======================================== */ @keyframes tagPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.7); opacity: .55; } } ::-webkit-scrollbar { width: 3px; } ::-webkit-scrollbar-track { background: #000; } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #000000, #0084ff); border-radius: 20px; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #0084ff, #0084ff); } .border-radius { border-radius: 16px; } .image-filter { width: 100%; max-width: 20px; opacity: 0.45; filter: grayscale(100%); /* ใส่ฟิลเตอร์สีเทา */ transition: filter 0.3s ease, opacity 0.3s ease; /* เพิ่ม transition เพื่อให้การเปลี่ยนแปลงนุ่ม */ } .image-filter:hover { filter: grayscale(0%); /* คืนสู่สีปกติเมื่อเมาส์ชี้ */ opacity: 1; /* คืนค่าความทึบกลับเป็นปกติ */ } .modal-backdrop { background-color: rgba(0, 0, 0, 0.35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transition: opacity 0.12s ease-out; } .modal-backdrop.show { opacity: 1; } .modal { opacity: 0; visibility: hidden; transform: none !important; transition: opacity 0.1s ease-out, visibility 0s linear 0.1s; } .modal.show { opacity: 1; visibility: visible; transition: opacity 0.1s ease-out, visibility 0s linear 0s; } .modal-dialog { transform: scale(0.9) !important; opacity: 0; transition: transform 0.12s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.08s ease-out; } .modal.show .modal-dialog { transform: scale(1) !important; opacity: 1; } .modal-content { border: none; border-radius: 16px; } .prize-text { font-family: 'LINE Seed Sans TH', sans-serif; white-space: pre-wrap; } /* ===== Quantity Box Style ===== */ .quantity-box .input-group { overflow: hidden; border: 2px solid transparent; transition: all .3s ease; } .quantity-box .input-group:focus-within { border-color: var(--main); box-shadow: 0 0 10px rgba(0, 255, 200, 0.3); } /* ปุ่ม + - */ .quantity-box .minus, .quantity-box .plus { background-color: rgba(255,255,255,1 ) !important; color: #212121; font-weight: bold; font-size: 18px; width: 45px; border: none; transition: all .25s ease; } .quantity-box .minus:hover, .quantity-box .plus:hover { background: var(--main); color: #212121; } /* ตอนกด */ .quantity-box .minus:active, .quantity-box .plus:active { transform: scale(0.9); } /* input */ .quantity-box input[type="number"] { background-color: rgba(255,255,255,1 ) !important; color: #212121; border: none; font-weight: bold; font-size: 18px; box-shadow: none !important; } .quantity-box input[type="number"]:focus { outline: none; } /* ซ่อนลูกศร default ของ number */ .quantity-box input::-webkit-outer-spin-button, .quantity-box input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .quantity-box input[type=number] { -moz-appearance: textfield; } .game-detail-box { background-color: rgba(255,255,255,1 ) !important; border-radius: 16px; padding: 20px; box-shadow: 0 8px 25px rgba(0,0,0,0.08); transition: 0.3s ease; } .game-detail-title { font-size: 18px; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .game-detail-text { font-size: 14px; line-height: 1.8; color: #000000; } .game-play-step { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; } .game-play-number { min-width: 24px; height: 24px; border-radius: 50%; background: #0084ff; color: #212121; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 14px; } .game-play-text { font-size: 14px; line-height: 1.6; } .game-highlight-box { background: linear-gradient(135deg, #00ff7022, #00ff7022); padding: 14px; border: solid 1px #00ff7022; border-radius: 16px; font-size: 13px; margin-top: 15px; } .navbar-dark .navbar-toggler { color: transparent !important; border-color: transparent !important; } a { color: #0084ff ; text-decoration: none; } a:hover { color: #000000; } .badge:hover { cursor: pointer; } .text-ani { filter: drop-shadow(0 0 90px #0084ff); font-family: 'LINE Seed Sans TH', sans-serif; transition: all .5s ease; text-transform: uppercase; background-image: linear-gradient(to right, #000000 10%, #0084ff 30%, #000000 60%, #0084ff 100%); background-size: auto auto; background-clip: border-box; background-size: 200% auto; background-clip: text; text-fill-color: transparent; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: textclip 3s linear infinite; transition: all .5s ease; } .text-ani:hover { transform: scale(1.05); } @keyframes textclip { to { background-position: 200% center; } } .float-ani { animation: float 4s ease-in-out infinite; } @keyframes float { 0% { transform: translatey(0px); } 50% { transform: translatey(-30px); } 100% { transform: translatey(0px); } } .btn-log { background: linear-gradient(90deg, var(--main) 0%, var(--sub) 100%) !important;; border-radius:16px; border: 0; padding:0.2rem 0.5rem; } .btn-log:hover { background-color:#4a5f48; } .btn-log-1 { border-radius:16px; padding:0.2rem 0.5rem; } @media only screen and (max-width: 600px) { .btn-log { background-color:#1e1e1e; border-radius:16px; padding:0.2rem 0.5rem; margin-right:2.5rem; text-align: center; } .btn-log:hover { background-color:#4a5f48; } .btn-log-1 { border-radius:16px; padding:0.2rem 0.5rem; margin-right:2.5rem; text-align: center; } } .footer-block { position: fixed; bottom: 1em; width: 100%; display: flex; left: 50%; transform: translateX(-50%); justify-content: center; height: 4.2em; bottom: 0; max-width: 550px; border-radius: 16px; transition: all 0.3s ease; z-index: 100; } .footer-box { /* outline: solid 2px; */ flex: 1; height: 3.8em; border-radius: 16px; position: relative; overflow: hidden; z-index: 2; } .footer-box.left { border-radius: 1em 1em 0 1em; width: 51%; transform: translateX(1px); filter: drop-shadow(0px 4px 6px #000000ad); } .footer-box.left > .corner { width: 0.8em; height: 3em; background: #0084ff; z-index: 2; border-radius: 1px 259px 233px 0px; right: 3em; position: absolute; top: -8%; transform: rotate(-5deg); } .footer-box.left::before { position: absolute; padding: 3em; content: ''; margin: -3.3em; border-radius: 50%; right: 0; box-shadow: 0 0 0 500px #0084ff; overflow: hidden; } .footer-box.right { border-radius: 1em 1em 1em 0; width: 51%; transform: translateX(-1px); filter: drop-shadow(9px 0px 6px #000000b9); } .footer-box.right > .corner { width: 0.8em; height: 3em; background: #0084ff; z-index: 2; border-radius: 259px 233px 0px 233px; left: 2.95em; position: absolute; top: -1%; transform: rotate(5deg); } .footer-box.right::before { position: absolute; padding: 3em; content: ''; margin: -3.3em; border-radius: 50%; box-shadow: 0 0 0 500px #0084ff; overflow: hidden; left: 0; } .footer-info-user { display: flex; justify-content: space-between; align-items: flex-start; } .footer-info-user { height: 7em; width: 95%; position: absolute; border-top-left-radius: 1.5em; border-top-right-radius: 1.5em; background-size: cover; background-repeat: no-repeat; background-position: center center; top: -100%; overflow: hidden; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); background: #000000bd; padding: 0.65em 1em; } .footer-info-user > .account-balance { height: 2.5em; display: flex; } .footer-info-user > .account-balance > .info { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; line-height: 1; } .footer-info-user > .account-balance > .info > .amount { text-align: left; font-size: 1.3em; margin-top: auto; } .footer-info-user > .account-balance > .ic { height: 95%; object-fit: contain; margin-right: 1em; } .footer-info-user > .account-bonus { width: 39%; } .footer-info-user > .account-bonus > .bonus-loss { font-size: 0.9em; font-weight: 200; display: flex; justify-content: space-between; padding: 2px 8px; border-radius: 1em; background: #ffffff14; margin-bottom: 2px; line-height: 1; } .footer-info-user > .account-bonus > .bonus-ref { font-size: 0.9em; font-weight: 200; display: flex; justify-content: space-between; padding: 2px 8px; border-radius: 1em; background: #ffffff14; } .footer-info-user > .account-bonus > .bonus-ref > .title { white-space: nowrap; max-width: 65px; overflow: hidden; } .footer-btn-main { width: 4.2em; height: 4.2em; border-radius: 50%; position: absolute; top: -50%; border: none; outline: none; z-index: 10; box-shadow: 1px 1px 15px 4px #0000003d; background: linear-gradient(90deg, var(--main) 0%, var(--sub) 100%) !important; background-size: 400% 400%; animation: gradient 15s ease infinite; animation-name: move-bg-gradient; animation-duration: 10s; animation-timing-function: linear; animation-iteration-count: infinite; display: flex; justify-content: center; align-items: center; } .footer-btn-main::after { content: ""; z-index: -1; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: inherit; border-radius: inherit; } .footer-btn-main > .ic { width: 55%; object-fit: contain; filter: drop-shadow(2px 4px 6px #000000ba); } .footer-menu-item > .ic { width: 60%; height: 45%; object-fit: contain; } .footer-menu-item > .name { font-size: 0.7em; margin-top: 4px; font-weight: 200; } .footer-menu-container { display: flex; width: 75%; height: 100%; justify-content: center; position: relative; z-index: 10; } .footer-menu-container.ms-auto { margin-left: auto; } .footer-menu-container > .footer-menu-item { max-width: 40%; flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-decoration: none; } .neon { display: grid; place-items: center; position: relative; padding: 4px; } .neon::before, .neon::after { content: ''; position: absolute; background: linear-gradient( 130deg, var(--main) 0%, var(--sub) 25%, var(--main) 50%, var(--sub) 75%, var(--main) 100% ); background-size: 300% 100%; width: 100%; height: 100%; z-index: -1; /* วิ่งเหมือน .bg-main */ animation: smooth-color-run 4s ease-in-out infinite; border-radius: 16px; } .neon::after { filter: blur(5px); } /* ใช้ animation เดียวกับ .bg-main */ @keyframes smooth-color-run { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .cc { width: 100%; max-width: 250px; } @media only screen and (max-width: 1000px) { .cc { width: 100%; max-width: 100vh; } } .icon-circle { display: inline-flex; justify-content: center; align-items: center; width: 50px; height: 50px; border-radius: 50%; color: #ffffff; } .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .show>.nav-link { color: #212121; } .navbar-dark .navbar-nav .nav-link { color: #000000; } .navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover { color: #0084ff; } .border-spe { background: transparent; } /* ======================================== MAIN ======================================== */ .bg-main { background: linear-gradient( 130deg, var(--main) 0%, var(--sub) 25%, var(--main) 50%, var(--sub) 75%, var(--main) 100% ); background-size: 300% 100%; animation: smooth-color-run 4s ease-in-out infinite; border: none; padding: 12px 24px; color: white; text-align: center; font-size: 16px; border-radius: 16px; cursor: pointer; position: relative; overflow: hidden; transition: all 0.5s ease; } .bg-main:hover { animation: none; background: #0084ff; box-shadow: #0084ff 0px 0px 20px 1px; } /* ======================================== DANGER ======================================== */ .bg-danger { background: linear-gradient( 90deg, #670000 0%, #e60000 25%, #670000 50%, #e60000 75%, #670000 100% ); background-size: 300% 100%; animation: smooth-color-run 4s ease-in-out infinite; transition: all 0.5s ease; position: relative; overflow: hidden; } .bg-danger:hover { animation: none; background: #e60000; box-shadow: #e60000 0px 0px 20px 1px; } /* ======================================== SUCCESS ======================================== */ .bg-success { background: linear-gradient( 90deg, #006400 0%, #00b300 25%, #006400 50%, #00b300 75%, #006400 100% ); background-size: 300% 100%; animation: smooth-color-run 4s ease-in-out infinite; transition: all 0.5s ease; position: relative; overflow: hidden; } .bg-success:hover { animation: none; background: #00b300; box-shadow: #00b300 0px 0px 20px 1px; } /* ======================================== PRIMARY ======================================== */ .bg-primary { background: linear-gradient( 90deg, #003366 0%, #0066cc 25%, #003366 50%, #0066cc 75%, #003366 100% ); background-size: 300% 100%; animation: smooth-color-run 4s ease-in-out infinite; transition: all 0.5s ease; position: relative; overflow: hidden; } .bg-primary:hover { animation: none; background: #0066cc; box-shadow: #0066cc 0px 0px 20px 1px; } /* ======================================== WARNING ======================================== */ .bg-warning { background: linear-gradient( 90deg, #ff9900 0%, #ffcc00 25%, #ff9900 50%, #ffcc00 75%, #ff9900 100% ); background-size: 300% 100%; animation: smooth-color-run 4s ease-in-out infinite; transition: all 0.5s ease; position: relative; overflow: hidden; } .bg-warning:hover { animation: none; background: #ffcc00; box-shadow: #ffcc00 0px 0px 20px 1px; } /* ======================================== BUTTON DANGER ======================================== */ .btn-danger { background: linear-gradient( 90deg, #670000 0%, #e60000 25%, #670000 50%, #e60000 75%, #670000 100% ); background-size: 300% 100%; animation: smooth-color-run 4s ease-in-out infinite; border: none; padding: 12px 24px; color: white; text-align: center; font-size: 16px; border-radius: 16px; cursor: pointer; position: relative; overflow: hidden; transition: all 0.5s ease; } .btn-danger:hover { animation: none; background: #e60000; box-shadow: #e60000 0px 0px 20px 1px; } /* ======================================== BUTTON SUCCESS ======================================== */ .btn-success { background: linear-gradient( 90deg, #006400 0%, #00b300 25%, #006400 50%, #00b300 75%, #006400 100% ); background-size: 300% 100%; animation: smooth-color-run 4s ease-in-out infinite; border: none; padding: 12px 24px; color: white; text-align: center; font-size: 16px; border-radius: 16px; cursor: pointer; position: relative; overflow: hidden; transition: all 0.5s ease; } .btn-success:hover { animation: none; background: #00b300; box-shadow: #00b300 0px 0px 20px 1px; } /* ======================================== BUTTON PRIMARY ======================================== */ .btn-primary { background: linear-gradient( 90deg, #003366 0%, #0066cc 25%, #003366 50%, #0066cc 75%, #003366 100% ); background-size: 300% 100%; animation: smooth-color-run 4s ease-in-out infinite; border: none; padding: 12px 24px; color: white; text-align: center; font-size: 16px; border-radius: 16px; cursor: pointer; position: relative; overflow: hidden; transition: all 0.5s ease; } .btn-primary:hover { animation: none; background: #0066cc; box-shadow: #0066cc 0px 0px 20px 1px; } /* ======================================== BUTTON WARNING ======================================== */ .btn-warning { background: linear-gradient( 90deg, #ff9900 0%, #ffcc00 25%, #ff9900 50%, #ffcc00 75%, #ff9900 100% ); background-size: 300% 100%; animation: smooth-color-run 4s ease-in-out infinite; border: none; padding: 12px 24px; color: white; text-align: center; font-size: 16px; border-radius: 16px; cursor: pointer; position: relative; overflow: hidden; transition: all 0.5s ease; } .btn-warning:hover { animation: none; background: #ffcc00; box-shadow: #ffcc00 0px 0px 20px 1px; } /* ======================================== SECONDARY ======================================== */ .btn-secondary { background: rgba( 255,255,255,1 ); border: none; position: relative; overflow: hidden; } .btn-secondary:hover { background: #ffffff; border: none; } /* ======================================== HOVER LIGHT SWEEP ======================================== */ .bg-main::before, .bg-danger::before, .bg-success::before, .bg-primary::before, .bg-warning::before, .btn-danger::before, .btn-success::before, .btn-primary::before, .btn-warning::before, .btn-secondary::before { content: ""; position: absolute; top: -100%; left: -125%; width: 76%; height: 300%; background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.02) 14%, rgba(255, 255, 255, 0.08) 30%, rgba(255, 255, 255, 0.30) 50%, rgba(255, 255, 255, 0.08) 70%, rgba(255, 255, 255, 0.02) 86%, transparent 100% ); transform: rotate(20deg); opacity: 0; pointer-events: none; z-index: 10; } /* ======================================== LIGHT SWEEP ON HOVER ======================================== */ .bg-main:hover::before, .bg-danger:hover::before, .bg-success:hover::before, .bg-primary:hover::before, .bg-warning:hover::before, .btn-danger:hover::before, .btn-success:hover::before, .btn-primary:hover::before, .btn-warning:hover::before, .btn-secondary:hover::before { opacity: 1; animation: smooth-button-light 1.85s cubic-bezier(.22, .61, .36, 1) forwards; } /* ======================================== LIGHT SWEEP ANIMATION ======================================== */ @keyframes smooth-button-light { 0% { left: -125%; } 100% { left: 165%; } } /* ======================================== ORIGINAL COLOR ANIMATION ======================================== */ @keyframes smooth-color-run { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* ======================================== SMOOTH HOVER LIFT ======================================== */ .bg-main, .bg-danger, .bg-success, .bg-primary, .bg-warning, .btn-danger, .btn-success, .btn-primary, .btn-warning, .btn-secondary { transition: transform 0.35s cubic-bezier(.22, 1, .36, 1), box-shadow 0.5s ease, filter 0.35s ease; } /* ลอยขึ้นเล็กน้อยตอนชี้ */ .bg-main:hover, .bg-danger:hover, .bg-success:hover, .bg-primary:hover, .bg-warning:hover, .btn-danger:hover, .btn-success:hover, .btn-primary:hover, .btn-warning:hover, .btn-secondary:hover { transform: translateY(-2px); filter: brightness(1.04); } /* กดแล้วกลับลงนิดหนึ่ง */ .bg-main:active, .bg-danger:active, .bg-success:active, .bg-primary:active, .bg-warning:active, .btn-danger:active, .btn-success:active, .btn-primary:active, .btn-warning:active, .btn-secondary:active { transform: translateY(0) scale(0.985); transition: transform 0.1s ease, filter 0.1s ease; } .navbar, .navbar-collapse, .container, .container-fluid { overflow: visible !important; } .dropdown-menu-dark { /* สีตัวอักษร */ color: #212121 !important; /* Glass background */ background: rgba( 255,255,255,1 ) !important; /* Blur */ -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); /* Border */ border: 2px solid rgba( 0,0,0,0.35 ) !important; /* ช่วยให้ effect สวยขึ้น */ box-shadow: 0 8px 32px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05); border-radius: 16px; overflow: visible; /* สำคัญกับ blur */ isolation: isolate; } /* Item */ .dropdown-menu-dark .dropdown-item { color: #000000 !important; transition: all .2s ease; } /* Hover */ .dropdown-menu-dark .dropdown-item:focus, .dropdown-menu-dark .dropdown-item:hover { color: #212121 !important; background: rgba( 0,132,255,0.18 ) !important; backdrop-filter: blur(10px); } .border-spe { background: #000; border: 0px solid #000; } .img-anim { position: relative; text-align: center; overflow: hidden; border-radius: 16px; } .img-anim img { width: 100%; height: auto; margin-left: auto; } .img-anim>img { background-size: cover; background-position: center; transition: all 0.3s ease; } .img-anim>div.bg { position: absolute; z-index: 2; opacity: 0; width: 100%; height: 100%; background-color: rgba(1, 1, 1, 0.3); transition: all 0.3s ease; } .img-anim>div.text { position: absolute; z-index: 3; top: 50%; left: 30%; opacity: 0; color: #212121; font-size: 20px; border-bottom: 1px solid transparent; border-image: linear-gradient(to right, #d53535,#ff8b00); border-image-slice: 1; transform: translate(-50%, -50%); transition: all 0.3s ease; } .img-anim:hover>img { transform: scale(1.1); } .img-anim:hover>div { opacity: 1; } .img-anim:hover>div.text { top: 80%; opacity: 1; } /* ปุ่ม */ #toggleFooterBtn { position: fixed; /* ทำให้ปุ่มอยู่ในตำแหน่งคงที่ */ bottom: 135px; /* ระยะห่างจากด้านบน */ right: 27px; /* ระยะห่างจากด้านขวา */ z-index: 9999; /* นำปุ่มให้อยู่หน้าสุด */ background-color: #007bff; /* สีพื้นหลัง */ color: #fff; /* สีข้อความ */ width: 10px; /* กำหนดความกว้าง */ height: 10px; /* กำหนดความสูง */ display: flex; /* จัดตำแหน่งไอคอนในปุ่ม */ align-items: center; /* จัดแนวตั้งไอคอน */ justify-content: center; /* จัดแนวนอนไอคอน */ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* เงา */ cursor: pointer; /* เปลี่ยนเคอร์เซอร์เมื่อชี้ */ } hr { border: none; height: 2px !important; background: linear-gradient( 90deg, rgba(255, 255, 255, 0), var(--main), var(--sub), var(--main), rgba(255, 255, 255, 0) ); background-size: 300% 100%; animation: hr-gradient-run 4s ease-in-out infinite; opacity: 1; border-radius: 16px; } /* animation สำหรับการเคลื่อนไหว */ @keyframes hr-gradient-run { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .card-wrapper { position: relative; } .card_tags { position: absolute; /* 🔥 เปลี่ยนจาก relative */ inset: 0; /* ให้เต็มพื้นที่รูป */ z-index: 10; pointer-events: none; } .card_tags .discount { position: absolute; right: 5px; top: 5px; background-color: #0084ff; color: white; font-size: 0.75rem; font-weight: 700; padding: 0.375rem 0.75rem; white-space: nowrap; } .card_tags .sticker { position: absolute; left: 5px; top: 5px; width: 70px; /* ปรับขนาดได้ */ height: auto; } @media (max-width: 768px) { .card_tags .sticker { width: 50px; } } .card_tags .time { position: absolute; left: 50%; bottom: 5px; /* ชิดล่างสุด */ transform: translateX(-50%); color: white; font-size: 0.75rem; font-weight: 700; padding: 0.375rem 0.75rem; white-space: nowrap; border-radius: 0.5rem 0.5rem 0 0; } /* 📱 Mobile */ @media (max-width: 576px) { .card_tags .time { font-size: 0.55rem; /* ตัวอักษรเล็กลง */ padding: 0.25rem 0.5rem; /* padding เล็กลง */ bottom: 3px; /* ขยับลงอีกนิด */ border-radius: 0.4rem 0.4rem 0 0; } } .filter-gray { filter: brightness(30%); } .image-wrapper { position: relative; display: inline-block; width: 100%; } .out-stock { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 1rem; font-weight: bold; background-color: rgba(0, 0, 0, 0.7); padding: 10px 20px; border-radius: 16px; } @media (max-width: 768px) { .out-stock { font-size: 0.65rem; padding: 6px 12px; white-space: nowrap; width: max-content; max-width: 94%; } } .marquee-megaphone{ overflow:hidden; white-space:nowrap; width:100%; } .marquee-track{ display:inline-block; padding-left:100%; animation: marquee 18s linear infinite; will-change: transform; } .marquee-track span{ color:#9ca3af; font-size:14px; } @keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-100%); } } /* หยุดเมื่อ hover */ .marquee:hover .marquee-track{ animation-play-state: paused; } .text-ell-1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .text-ell-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .text-ell-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .result-item { opacity: 0; transform: translateY(-20px); transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.2s; display: flex; align-items: center; gap: 1rem; cursor: pointer; padding: 0.5rem 0.75rem; border-radius: 16px; } /* แสดงผล fade-in */ .result-item.show { opacity: 1; transform: translateY(0); } /* hover effect — พื้นหลังสีฟ้า */ .result-item:hover { background-color: color-mix(in srgb,var(--sub) 19%,transparent); /* สีรองโปร่งใส */ } /* ลูกศรขวาสุด */ .result-item .arrow { margin-left: auto; font-size: 1rem; color: #000000; transition: transform 0.2s, color 0.2s; } /* hover ลูกศรเลื่อนและเปลี่ยนสี */ .result-item:hover .arrow i { color: #0084ff; } #searchResults { max-height: 500px; /* สูงสุดที่ต้องการให้เลื่อน */ overflow-y: auto; padding-right: 0.25rem; /* กัน scrollbar ชิดขอบ */ } /* optional: scrollbar สวย ๆ */ #searchResults::-webkit-scrollbar { width: 2px; } #searchResults::-webkit-scrollbar-thumb { background-color: #0084ff; border-radius: 16px; } #searchResults::-webkit-scrollbar-track { background: transparent; } #loadingSpinner { pointer-events: none; } .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; line-height: 1; } /* Main / Primary */ .badge-main { background: rgba(99, 102, 241, 0.1); border: 1px solid rgba(99, 102, 241, 0.2); color: #6366f1; } /* Info */ .badge-info { background: rgba(13, 202, 240, 0.1); border: 1px solid rgba(13, 202, 240, 0.2); color: #0dcaf0; } /* Success */ .badge-success { background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.2); color: #10b981; } /* Warning */ .badge-warning { background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.2); color: #f59e0b; } /* Danger */ .badge-danger { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2); color: #ef4444; } /* Secondary */ .badge-secondary { background: rgba(108, 117, 125, 0.1); border: 1px solid rgba(108, 117, 125, 0.2); color: #6c757d; } /* Dark */ .badge-dark { background: rgba(33, 37, 41, 0.1); border: 1px solid rgba(33, 37, 41, 0.2); color: #212529; } /* Light */ .badge-light { background: rgba(248, 249, 250, 0.1); border: 1px solid rgba(248, 249, 250, 0.2); color: #6c757d; } .reward-rainbow{position:relative;background:transparent!important;transition:.25s}.reward-rainbow:hover,.reward-rainbow.active,body[data-page="reward"] .reward-rainbow{color:#111!important;background:linear-gradient(110deg,#ff3b6b,#ff9d2e,#ffe54b,#35dc8b,#32a7ff,#8458ff,#e44dff)!important;background-size:260% 260%!important;animation:rewardRainbow 4s linear infinite;box-shadow:0 8px 24px rgba(120,90,255,.23)}@keyframes rewardRainbow{0%{background-position:0 50%}100%{background-position:260% 50%}} .member-admin{color:#57e389!important}.member-admin:hover{background:rgba(34,197,94,.16)!important;color:#75f09c!important}.member-admin i{color:#45d879!important} @media(max-width:991.98px){.member-profile-menu .member-profile-links>a[href*="page=profile"]{display:none!important}#authModal{z-index:1095!important}#authModal .modal-dialog{z-index:1096!important}.modal-backdrop{z-index:1085!important}} .reward-rainbow.active,.reward-rainbow.active span,.reward-rainbow.active i,body[data-page="reward"] .reward-rainbow,body[data-page="reward"] .reward-rainbow span,body[data-page="reward"] .reward-rainbow i{color:#111!important} .reward-rainbow.active,body[data-page="reward"] .reward-rainbow{background:linear-gradient(110deg,#ff3b6b,#ff9d2e,#ffe54b,#35dc8b,#32a7ff,#8458ff,#e44dff)!important;background-size:260% 260%!important;animation:rewardRainbow 4s linear infinite!important} @media(max-width:991.98px){.mobile-main-menu{display:flex!important;flex-direction:column;gap:4px}.mobile-main-menu .nav-link{display:flex!important;align-items:center;min-height:44px;border-radius:12px;padding:9px 12px!important}.mobile-main-menu .reward-rainbow.active{box-shadow:0 7px 20px rgba(132,88,255,.24)!important}} /* ===== V20 NAVBAR: one layout, no desktop/mobile collision ===== */ #nav-original{position:relative;z-index:1030;padding:.45rem 0!important;border-bottom:1px solid var(--bg_border)!important;background:color-mix(in srgb,var(--bg_main) 92%,transparent)!important;backdrop-filter:blur(16px)} #nav-original>.container-fluid{max-width:1380px!important;width:min(94%,1380px)!important;margin:auto!important;padding:0 10px!important;display:flex!important;align-items:center!important;gap:12px!important} #nav-original .navbar-brand{display:flex!important;align-items:center!important;gap:8px!important;flex:0 0 auto!important;margin-right:8px!important} #nav-original .navbar-brand img{height:42px!important;max-width:120px!important;width:auto!important;object-fit:contain!important} #nav-original .site-brand-name{white-space:nowrap;font-size:14px;font-weight:700} #nav-original .site-brand-name{text-transform:uppercase!important} #offcanvasDarkNavbar{border-color:var(--bg_border)!important;background:color-mix(in srgb,var(--bg_main) 96%,transparent)!important} #offcanvasDarkNavbar .desktop-menu{align-items:center!important;gap:4px!important;margin:0!important;padding:0!important} #offcanvasDarkNavbar .desktop-menu>.nav-item>.nav-link{display:flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;min-height:40px!important;padding:8px 11px!important;border-radius:12px!important;font-size:12px!important;font-weight:700!important;color:var(--font_main)!important;white-space:nowrap;transition:.2s ease} #offcanvasDarkNavbar .desktop-menu>.nav-item>.nav-link:not(.reward-rainbow):hover,#offcanvasDarkNavbar .desktop-menu>.nav-item>.nav-link:not(.reward-rainbow).active{background:color-mix(in srgb,var(--main) 13%,var(--bg_sub))!important;color:var(--font_main)!important} #offcanvasDarkNavbar .service-dropdown{min-width:300px!important;padding:8px!important;border:1px solid var(--bg_border)!important;border-radius:16px!important;background:var(--bg_main)!important} #offcanvasDarkNavbar .service-item{border-radius:11px!important;padding:9px 10px!important} #nav-original .navbar-nav.mb-2.mt-2{margin:0!important;display:flex!important;align-items:center!important;gap:8px!important;flex-direction:row!important} #nav-original .member-profile-trigger{margin:0!important} @media(min-width:992px){ #offcanvasDarkNavbar{position:static!important;visibility:visible!important;transform:none!important;width:auto!important;height:auto!important;background:transparent!important;border:0!important;flex:1 1 auto!important;display:flex!important;align-items:center!important;box-shadow:none!important;margin:0!important;padding:0!important} #offcanvasDarkNavbar .offcanvas-header{display:none!important} #offcanvasDarkNavbar .offcanvas-body{padding:0!important;overflow:visible!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;width:100%!important} #offcanvasDarkNavbar .mobile-main-menu,#offcanvasDarkNavbar .mobile-member-actions{display:none!important} #offcanvasDarkNavbar .desktop-menu{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;flex:1 1 auto!important;justify-content:center!important} } @media(max-width:991.98px){ #nav-original{padding:.35rem 0!important} #nav-original>.container-fluid{width:100%!important;max-width:none!important;padding:0 12px!important} #nav-original .navbar-brand img{height:38px!important;max-width:105px!important} #nav-original .site-brand-name{font-size:12px!important} #nav-original .navbar-toggler{width:38px!important;height:38px!important;display:inline-grid!important;place-items:center!important;border:1px solid var(--bg_border)!important;border-radius:11px!important;padding:0!important;background:var(--bg_sub)!important;box-shadow:none!important} #offcanvasDarkNavbar{width:min(88vw,370px)!important;margin:0!important;padding:0!important;border-left:1px solid var(--bg_border)!important} #offcanvasDarkNavbar .offcanvas-header{min-height:62px!important;padding:10px 14px!important;border-bottom:1px solid var(--bg_border)!important;margin:0!important} #offcanvasDarkNavbar .offcanvas-body{padding:12px!important;display:block!important;overflow-y:auto!important} #offcanvasDarkNavbar .desktop-menu,#nav-original .desktop-menu{display:none!important} #offcanvasDarkNavbar .mobile-main-menu{display:grid!important;grid-template-columns:1fr!important;gap:7px!important;padding:0!important;margin:0!important} #offcanvasDarkNavbar .mobile-main-menu .nav-item{width:100%!important;margin:0!important} #offcanvasDarkNavbar .mobile-main-menu .nav-link{width:100%!important;display:flex!important;align-items:center!important;gap:10px!important;min-height:46px!important;padding:10px 12px!important;border-radius:13px!important;border:1px solid transparent!important;color:var(--font_main)!important;font-size:12px!important;font-weight:700!important;background:transparent!important} #offcanvasDarkNavbar .mobile-main-menu .nav-link:not(.reward-rainbow).active,#offcanvasDarkNavbar .mobile-main-menu .nav-link:not(.reward-rainbow):hover{background:color-mix(in srgb,var(--main) 12%,var(--bg_sub))!important;border-color:color-mix(in srgb,var(--main) 28%,var(--bg_border))!important} #offcanvasDarkNavbar .mobile-profile-card{display:block!important;margin-top:12px!important;padding:12px!important;border:1px solid var(--bg_border)!important;border-radius:16px!important;background:var(--bg_sub)!important} #offcanvasDarkNavbar .mobile-profile-user{display:flex!important;align-items:center!important;gap:10px!important;padding:0!important} #offcanvasDarkNavbar .mobile-profile-user img{width:44px!important;height:44px!important;border-radius:13px!important;object-fit:cover!important;border:1px solid var(--bg_border)!important} #offcanvasDarkNavbar .mobile-profile-wallet{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;margin-top:10px!important} #offcanvasDarkNavbar .mobile-profile-wallet>div{padding:9px 10px!important;border-radius:12px!important;background:var(--bg_main)!important;border:1px solid var(--bg_border)!important} #offcanvasDarkNavbar .mobile-profile-wallet small{display:block;font-size:8px!important;color:var(--font_sub)!important} #offcanvasDarkNavbar .mobile-profile-wallet strong{font-size:12px!important;color:var(--font_main)!important} }