/* app.css - Bootstrap 5.3 Production Theme Project: STING F1 Campaign PHP Goal: Bootstrap 5.3 + single app.css, Kanit 14px, mobile-first footer, easy to edit. */ @import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700;800&display=swap'); :root{ --app-font:'Kanit',system-ui,-apple-system,'Segoe UI',sans-serif; --app-max:768px; --app-bg:#f4f4f4; --app-text:#111827; --app-muted:#667085; --app-card:#ffffff; --app-line:#e8e8e8; --sting-red:#06a9de; --sting-red-dark:#007ea7; --sting-red-soft:#fff1f1; --sting-yellow:#ffd24d; --footer-h:74px; --safe-bottom:env(safe-area-inset-bottom,0px); --radius-sm:10px; --radius-md:16px; --radius-lg:22px; --shadow-sm:0 4px 12px rgba(16,24,40,.08); --shadow-md:0 10px 24px rgba(16,24,40,.12); --shadow-lg:0 18px 40px rgba(0,0,0,.18); } *{box-sizing:border-box}html{font-size:14px}body{margin:0;font-family:var(--app-font);font-size:14px;line-height:1.55;color:var(--app-text);background:var(--app-bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}body::before{content:'';position:fixed;inset:0;z-index:-1;background:radial-gradient(circle at 20% 0%,rgba(255,210,77,.22),transparent 28%),linear-gradient(135deg,#fff,#ececec)}a{text-decoration:none;color:inherit}img,svg{max-width:100%;vertical-align:middle}.hidden{display:none!important}.empty{padding:24px 10px;color:var(--app-muted);text-align:center}.app-shell{width:100%;max-width:var(--app-max);min-height:100vh;margin:0 auto;background:rgba(255,255,255,.42);box-shadow:0 0 35px rgba(0,0,0,.08)}.app-main{padding:22px 16px calc(var(--footer-h) + 34px + var(--safe-bottom))}.campaign-hero{position:relative;overflow:hidden;background:#fff;box-shadow:0 8px 22px rgba(16,24,40,.1)}.campaign-hero img{display:block;width:100%;height:auto}.campaign-hero::after{content:'';position:absolute;inset:-60% -80%;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.55) 49%,transparent 56%);animation:heroShine 5.5s ease-in-out infinite;pointer-events:none}.page-title,.section-title{margin:0 0 18px;color:#ffffff;font-size:1.35rem;font-weight:800;line-height:1.28;text-align:center}.card{margin:0 0 18px;padding:18px;border:1px solid rgba(0,0,0,.06);border-radius:var(--radius-lg);background:var(--app-card);box-shadow:var(--shadow-sm)}.content-box{font-size:14px;line-height:1.75}.content-box img{max-width:100%;height:auto;border-radius:var(--radius-md)}.hint{color:var(--app-muted);text-align:center}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:10px 16px;border:0;border-radius:14px;font-family:var(--app-font);font-size:14px;font-weight:700;line-height:1.25;text-align:center;white-space:normal;box-shadow:none}.btn-primary{color:#fff!important;background:linear-gradient(180deg,var(--sting-red),var(--sting-red-dark))!important;box-shadow:0 8px 16px rgba(120,0,0,.22)}.btn-primary:hover,.btn-primary:focus{filter:brightness(1.04)}.btn-line{color:#fff!important;background:#06c755!important}.btn-ghost{color:var(--sting-red)!important;background:#fff!important;border:1px solid #ffd6d6}.btn-block{width:100%}.form-group{min-width:0;margin-bottom:14px}.label,.form-label{display:block;margin:0 0 6px;color:#222;font-size:14px;font-weight:600}.input,.select,.textarea,.form-control,.form-select{width:100%;min-height:42px;padding:9px 12px;border:1px solid #dedede;border-radius:12px;outline:none;color:#151515!important;background:#fff!important;box-shadow:none;font-family:var(--app-font);font-size:14px;font-weight:400;line-height:1.35}.textarea{min-height:96px;resize:vertical}.input::placeholder,.textarea::placeholder,.form-control::placeholder{color:#9ca3af}.input:focus,.select:focus,.textarea:focus,.form-control:focus,.form-select:focus{border-color:var(--sting-red);box-shadow:0 0 0 3px rgba(180,0,0,.12)}.input[readonly],.form-control[readonly]{background:#f7f7f7!important;color:#555!important}.accept-box{display:grid;gap:10px;margin:10px 0 18px}.accept-row{display:grid;grid-template-columns:22px 1fr;gap:8px;align-items:flex-start;padding:12px;border:1px solid #eee;border-radius:14px;background:#fafafa;font-size:13px}.accept-row input{width:18px;height:18px;margin-top:1px;accent-color:var(--sting-red)}.link-btn{padding:0;border:0;background:none;color:var(--sting-red);font:inherit;font-weight:700;text-align:left;text-decoration:underline;cursor:pointer}.upload-box,.drop-zone{display:grid;place-items:center;min-height:118px;padding:18px;border:1px dashed #d0d5dd;border-radius:16px;background:#fff;text-align:center;color:#667085}.preview-list{display:grid;gap:10px;margin-top:12px}.preview-item{display:flex;gap:10px;align-items:center;padding:10px;border:1px solid #eee;border-radius:14px;background:#fff}.preview-item img{width:52px;height:52px;border-radius:12px;object-fit:cover}.table-wrap,.receipt-table-wrap{width:100%;overflow-x:auto;border-radius:16px;background:#fff;box-shadow:var(--shadow-sm)}.receipt-table,.table{width:100%;min-width:680px;border-collapse:collapse;margin:0;font-size:13px}.receipt-table th,.receipt-table td,.table th,.table td{padding:10px 12px;border-bottom:1px solid #eee;text-align:left;vertical-align:middle}.receipt-table th,.table th{background:linear-gradient(180deg,#fef2f2,#fff);color:#7a0000;font-weight:800}.badge{display:inline-flex;align-items:center;justify-content:center;min-height:24px;padding:4px 9px;border-radius:999px;font-size:12px;font-weight:700}.badge.pending,.badge.upload{color:#92400e;background:#fef3c7}.badge.approved{color:#065f46;background:#d1fae5}.badge.rejected{color:#991b1b;background:#fee2e2}.bottom-nav{position:fixed;right:0;bottom:0;left:0;z-index:1000;width:100%;max-width:500px;height:calc(var(--footer-h) + var(--safe-bottom));margin:0 auto;padding:0 16px var(--safe-bottom);border-radius:22px 22px 0 0;background:linear-gradient(180deg,#b40000 0%,#7a0000 100%);box-shadow:0 -10px 28px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:space-between}.bottom-nav-side{display:flex;align-items:stretch;justify-content:space-between;width:calc(50% - 40px);height:100%}.bottom-nav-item{position:relative;display:flex;flex:1 1 0;min-width:0;height:100%;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px 2px 6px;color:#fff!important;text-align:center;font-size:11px;font-weight:600;line-height:1.12}.bottom-nav-item span:last-child{display:-webkit-box;max-width:74px;min-height:24px;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical}.bottom-nav-icon,.bottom-nav-profile{display:grid;place-items:center;width:24px;height:24px;min-width:24px;min-height:24px;color:#fff}.bottom-nav-icon svg,.bottom-nav-profile svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}.bottom-nav-profile img{display:block;width:24px;height:24px;border:2px solid rgba(255,255,255,.95);border-radius:50%;object-fit:cover;background:#fff}.bottom-nav-item.active::before{content:'';position:absolute;top:0;left:50%;width:32px;height:3px;border-radius:99px;background:#fff;transform:translateX(-50%)}.bottom-nav-home-center{position:absolute;top:-22px;left:50%;z-index:2;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;transform:translateX(-50%);color:var(--sting-red-dark)!important}.bottom-home-circle{display:grid;place-items:center;width:64px;height:64px;border:4px solid var(--sting-red);border-radius:50%;background:#fff;box-shadow:0 10px 24px rgba(0,0,0,.28)}.bottom-home-circle svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}.bottom-nav-home-center.active .bottom-home-circle{box-shadow:0 0 0 4px rgba(255,210,77,.55),0 10px 24px rgba(0,0,0,.28)}.sting-home-hero{margin:-22px -16px 0;background:#fff}.sting-campaign-banner{display:block;width:100%;height:auto}.sting-home-space{min-height:36px}.profile-head{text-align:center}.profile-avatar{width:84px;height:84px;border:4px solid #fff;border-radius:50%;object-fit:cover;box-shadow:var(--shadow-md)}.profile-name{margin:10px 0 4px;font-size:1.25rem;font-weight:800}.profile-subtitle,.profile-note{margin:0;color:var(--app-muted)}.right-pill{display:inline-flex;align-items:center;justify-content:center;min-width:150px;margin:12px auto;padding:10px 16px;border-radius:999px;color:#fff;background:linear-gradient(180deg,var(--sting-red),var(--sting-red-dark));font-size:1.15rem;font-weight:800}.profile-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.meta-box{padding:10px;border:1px solid #eee;border-radius:14px;background:#fafafa;font-weight:700}.meta-box small{display:block;color:var(--app-muted);font-weight:500}.history-pager{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;margin:12px 0}.pager-btn,.pager-num{display:inline-flex;align-items:center;justify-content:center;min-width:34px;min-height:34px;padding:6px 10px;border:1px solid #eee;border-radius:10px;background:#fff;color:#222;font-weight:700}.pager-num.active{color:#fff;background:var(--sting-red);border-color:var(--sting-red)}.pager-btn.disabled{opacity:.45;pointer-events:none}.pager-note{text-align:center;color:var(--app-muted);font-size:12px}.campaign-status-page{display:grid;place-items:center;min-height:calc(100vh - 260px)}.status-card{width:100%;padding:22px;border-radius:24px;background:#fff;text-align:center;box-shadow:var(--shadow-md)}.status-icon{font-size:42px;line-height:1}.date-pill{display:inline-flex;margin:12px auto;padding:8px 12px;border-radius:999px;background:var(--sting-red-soft);color:var(--sting-red-dark);font-weight:700}.app-modal{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:18px}.app-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}.app-modal-card{position:relative;z-index:1;width:min(480px,100%);max-height:82vh;overflow:auto;padding:20px;border-radius:22px;background:#fff;box-shadow:var(--shadow-lg)}.modal-close{position:absolute;top:10px;right:12px;width:34px;height:34px;border:0;border-radius:50%;background:#f2f2f2;font-size:22px}.success-modal-card{text-align:center}.success-check{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 10px;border-radius:50%;background:#16a34a;color:#fff;font-size:32px;font-weight:800}.loading{position:fixed;inset:0;z-index:1300;display:grid;place-items:center;background:rgba(255,255,255,.72);backdrop-filter:blur(6px)}.loading-card{width:min(310px,90%);padding:22px;border-radius:22px;background:#fff;text-align:center;box-shadow:var(--shadow-lg)}.loader{width:38px;height:38px;margin:10px auto;border:4px solid #eee;border-top-color:var(--sting-red);border-radius:50%;animation:spin .8s linear infinite}.offline-bar{position:fixed;right:12px;bottom:calc(var(--footer-h) + 18px + var(--safe-bottom));left:12px;z-index:1400;max-width:500px;margin:auto;padding:10px 12px;border-radius:14px;background:#111827;color:#fff;text-align:center}.toast{position:fixed;right:12px;bottom:calc(var(--footer-h) + 18px + var(--safe-bottom));left:12px;z-index:1400;max-width:500px;margin:auto;padding:12px 14px;border-radius:14px;background:#111827;color:#fff;text-align:center;box-shadow:var(--shadow-md)}@keyframes spin{to{transform:rotate(360deg)}}@keyframes heroShine{0%,45%{transform:translateX(-45%) rotate(0)}80%,100%{transform:translateX(45%) rotate(0)}}@media(max-width:420px){.app-main{padding-right:12px;padding-left:12px}.bottom-nav{padding-right:10px;padding-left:10px}.bottom-nav-side{width:calc(50% - 36px)}.bottom-nav-item{font-size:10.5px}.bottom-nav-item span:last-child{max-width:64px}.card{padding:16px;border-radius:18px}.profile-meta{grid-template-columns:1fr}}@media(min-width:768px){.app-main{padding-right:24px;padding-left:24px}.card{padding:22px}.page-title,.section-title{font-size:1.55rem}} /* ========================================================= FOOTER SVG V4 - Bootstrap 5.3 + app.css เน€เธกเธ™เธนเธ„เธฃเธš 5 เธŠเนˆเธญเธ‡เน€เธ—เนˆเธฒเธเธฑเธ™ / SVG icons เธ—เธฑเน‰เธ‡เธซเธกเธ” / HOME เธเธฅเธฒเธ‡เธˆเธฃเธดเธ‡ ========================================================= */ :root{ --footer-h:104px; --footer-icon:34px; --footer-home:86px; --footer-bg:#8c231f; --footer-bg2:#7c1e1a; --safe-bottom:env(safe-area-inset-bottom,0px); } .app-main{ padding-bottom:calc(var(--footer-h) + 22px + var(--safe-bottom)) !important; } .bottom-nav.sting-bottom-nav.footer-svg-v4{ position:fixed !important; left:50% !important; right:auto !important; bottom:0 !important; z-index:9999 !important; width:min(100vw, var(--app-max, 768px)) !important; max-width:var(--app-max, 768px) !important; height:calc(var(--footer-h) + var(--safe-bottom)) !important; min-height:calc(var(--footer-h) + var(--safe-bottom)) !important; margin:0 !important; padding:0 8px var(--safe-bottom) !important; transform:translateX(-50%) !important; display:grid !important; grid-template-columns:repeat(5, minmax(0, 1fr)) !important; grid-template-rows:var(--footer-h) !important; align-items:stretch !important; justify-items:stretch !important; gap:0 !important; overflow:visible !important; border-radius:0 !important; background:linear-gradient(180deg,var(--footer-bg) 0%,var(--footer-bg2) 100%) !important; box-shadow:0 -10px 30px rgba(0,0,0,.18) !important; } .footer-svg-item{ position:relative !important; width:100% !important; min-width:0 !important; height:var(--footer-h) !important; min-height:var(--footer-h) !important; padding:18px 2px 10px !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:9px !important; color:#fff !important; text-align:center !important; text-decoration:none !important; font-family:var(--app-font,'Kanit',system-ui,-apple-system,'Segoe UI',sans-serif) !important; font-size:18px !important; font-weight:700 !important; line-height:1.12 !important; overflow:visible !important; -webkit-tap-highlight-color:transparent; } .footer-svg-v4 > .nav-receipt{grid-column:1 !important;grid-row:1 !important;} .footer-svg-v4 > .nav-condition{grid-column:2 !important;grid-row:1 !important;} .footer-svg-v4 > .nav-home{grid-column:3 !important;grid-row:1 !important;} .footer-svg-v4 > .nav-winner{grid-column:4 !important;grid-row:1 !important;} .footer-svg-v4 > .nav-history{grid-column:5 !important;grid-row:1 !important;} .footer-svg-icon{ width:var(--footer-icon) !important; height:var(--footer-icon) !important; min-width:var(--footer-icon) !important; min-height:var(--footer-icon) !important; display:grid !important; place-items:center !important; flex:0 0 var(--footer-icon) !important; color:#fff !important; } .footer-svg-icon svg{ width:100% !important; height:100% !important; display:block !important; fill:none !important; stroke:currentColor !important; stroke-width:4.5 !important; stroke-linecap:round !important; stroke-linejoin:round !important; } .footer-svg-text{ width:100% !important; max-width:100% !important; min-width:0 !important; min-height:40px !important; display:flex !important; align-items:flex-start !important; justify-content:center !important; padding:0 2px !important; color:#fff !important; text-align:center !important; white-space:normal !important; word-break:keep-all !important; overflow-wrap:anywhere !important; line-height:1.12 !important; } .footer-svg-home{ z-index:10 !important; padding-top:0 !important; justify-content:flex-start !important; gap:0 !important; } .footer-svg-home-circle{ position:relative !important; top:-31px !important; width:var(--footer-home) !important; height:var(--footer-home) !important; min-width:var(--footer-home) !important; min-height:var(--footer-home) !important; display:grid !important; place-items:center !important; flex:0 0 var(--footer-home) !important; color:#050505 !important; border-radius:50% !important; background:linear-gradient(180deg,#ffffff 0%,#d6d6d6 100%) !important; border:0 !important; box-shadow:0 9px 20px rgba(0,0,0,.28), inset 0 1px 2px rgba(255,255,255,.8) !important; } .footer-svg-home-circle svg{ width:48px !important; height:48px !important; display:block !important; fill:none !important; stroke:currentColor !important; stroke-width:4.6 !important; stroke-linecap:round !important; stroke-linejoin:round !important; } .footer-svg-home-text{ position:relative !important; top:-28px !important; min-height:18px !important; font-size:13px !important; font-weight:800 !important; letter-spacing:.2px !important; } .footer-svg-item.active:not(.footer-svg-home)::after{ content:'' !important; position:absolute !important; top:0 !important; left:50% !important; width:34px !important; height:3px !important; border-radius:999px !important; background:#fff !important; transform:translateX(-50%) !important; } @media(max-width:520px){ :root{--footer-h:92px;--footer-icon:25px;--footer-home:66px;} .bottom-nav.sting-bottom-nav.footer-svg-v4{padding-left:3px !important;padding-right:3px !important;} .footer-svg-item{font-size:12px !important;gap:6px !important;padding:13px 1px 8px !important;} .footer-svg-text{min-height:30px !important;padding:0 1px !important;} .footer-svg-home-circle{top:-24px !important;} .footer-svg-home-circle svg{width:36px !important;height:36px !important;} .footer-svg-home-text{top:-23px !important;font-size:10px !important;} } @media(max-width:360px){ :root{--footer-h:88px;--footer-icon:23px;--footer-home:60px;} .footer-svg-item{font-size:10.5px !important;gap:5px !important;} .footer-svg-text{min-height:30px !important;} .footer-svg-home-circle{top:-21px !important;} .footer-svg-home-circle svg{width:32px !important;height:32px !important;} .footer-svg-home-text{top:-21px !important;font-size:9.5px !important;} } /* ========================================================= USER SVG ICONS PATCH - เนƒเธŠเน‰เน„เธŸเธฅเนŒ SVG เธ—เธตเนˆเธญเธฑเธ›เน‚เธซเธฅเธ” + เธ›เธฃเธฐเธงเธฑเธ•เธดเธฃเนˆเธงเธกเธชเธ™เธธเธเน€เธ”เธดเธก ========================================================= */ .footer-svg-icon img, .footer-svg-home-circle img{ display:block !important; width:100% !important; height:100% !important; object-fit:contain !important; } .footer-svg-icon .footer-profile-img{ width:calc(var(--footer-icon) + 2px) !important; height:calc(var(--footer-icon) + 2px) !important; border-radius:50% !important; object-fit:cover !important; border:2px solid #fff !important; background:#fff !important; } .footer-svg-history svg{ width:100% !important; height:100% !important; fill:none !important; stroke:currentColor !important; stroke-width:4.5 !important; stroke-linecap:round !important; stroke-linejoin:round !important; } .footer-svg-home-circle img{ width:56% !important; height:56% !important; } .footer-svg-text{ overflow-wrap:normal !important; } /* ========================================================= FOOTER FINAL REAL FIX 2026 - Footer fixed เธŠเธดเธ”เธฅเนˆเธฒเธ‡เธชเธธเธ” - 5 เธŠเนˆเธญเธ‡เน€เธ—เนˆเธฒเธเธฑเธ™ - HOME เธญเธขเธนเนˆเธเธฅเธฒเธ‡เธˆเธฃเธดเธ‡เธ—เธฑเน‰เธ‡เธ‹เน‰เธฒเธข/เธ‚เธงเธฒ เนเธฅเธฐเธšเธ™/เธฅเนˆเธฒเธ‡เธ‚เธญเธ‡เธŠเนˆเธญเธ‡เธเธฅเธฒเธ‡ - เนƒเธŠเน‰ SVG เธ—เธตเนˆเธชเนˆเธ‡เธกเธฒ + เธ›เธฃเธฐเธงเธฑเธ•เธดเธฃเนˆเธงเธกเธชเธ™เธธเธเน€เธ”เธดเธก ========================================================= */ :root{ --footer-final-h:104px; --footer-final-icon:32px; --footer-final-home:86px; } /* ========================================================= BODY BACKGROUND FINAL - FIXED ========================================================= */ html, body{ margin:0 !important; min-height:100% !important; } body{ font-family:var(--app-font); font-size:14px; line-height:1.55; color:var(--app-text); --bs-body-bg:transparent !important; background-color:transparent !important; background-image:linear-gradient( 180deg, #db0000 0%, #b30000 18%, #8f0000 40%, #690000 65%, #430202 100% ) !important; background-attachment:fixed !important; background-repeat:no-repeat !important; background-size:cover !important; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; padding-bottom:calc(var(--footer-final-h) + var(--safe-bottom, 0px)) !important; } body::before{ display:none !important; background:none !important; } .app-main{ padding-bottom:calc(var(--footer-final-h) + 28px + var(--safe-bottom, 0px)) !important; } .bottom-nav.sting-bottom-nav.footer-svg-v4{ position:fixed !important; left:50% !important; right:auto !important; bottom:0 !important; transform:translateX(-50%) !important; z-index:99999 !important; width:min(100%, var(--app-max, 768px)) !important; max-width:var(--app-max, 768px) !important; height:calc(var(--footer-final-h) + var(--safe-bottom, 0px)) !important; min-height:calc(var(--footer-final-h) + var(--safe-bottom, 0px)) !important; margin:0 !important; padding:0 0 var(--safe-bottom, 0px) !important; border-radius:0 !important; overflow:visible !important; display:grid !important; grid-template-columns:repeat(5, minmax(0, 1fr)) !important; grid-template-rows:var(--footer-final-h) !important; align-items:stretch !important; justify-items:stretch !important; gap:0 !important; background:#8b211d !important; box-shadow:0 -12px 30px rgba(0,0,0,.22) !important; } .footer-svg-v4 > .nav-receipt{grid-column:1 !important;grid-row:1 !important;} .footer-svg-v4 > .nav-condition{grid-column:2 !important;grid-row:1 !important;} .footer-svg-v4 > .nav-home{grid-column:3 !important;grid-row:1 !important;} .footer-svg-v4 > .nav-winner{grid-column:4 !important;grid-row:1 !important;} .footer-svg-v4 > .nav-history{grid-column:5 !important;grid-row:1 !important;} .footer-svg-item{ position:relative !important; width:100% !important; min-width:0 !important; height:var(--footer-final-h) !important; min-height:var(--footer-final-h) !important; margin:0 !important; padding:16px 4px 12px !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:8px !important; color:#fff !important; text-align:center !important; text-decoration:none !important; font-family:var(--app-font,'Kanit',system-ui,-apple-system,'Segoe UI',sans-serif) !important; font-size:18px !important; font-weight:700 !important; line-height:1.12 !important; overflow:visible !important; -webkit-tap-highlight-color:transparent !important; } .footer-svg-icon{ width:var(--footer-final-icon) !important; height:var(--footer-final-icon) !important; min-width:var(--footer-final-icon) !important; min-height:var(--footer-final-icon) !important; flex:0 0 var(--footer-final-icon) !important; display:grid !important; place-items:center !important; } .footer-svg-icon img, .footer-svg-icon svg{ display:block !important; width:100% !important; height:100% !important; object-fit:contain !important; } .footer-svg-text{ width:100% !important; min-width:0 !important; min-height:auto !important; height:auto !important; margin:0 !important; padding:0 2px !important; display:block !important; color:#fff !important; text-align:center !important; line-height:1.12 !important; white-space:normal !important; word-break:keep-all !important; overflow-wrap:normal !important; } /* HOME: absolute center in slot 3, never push other menu */ .footer-svg-home{ position:relative !important; z-index:20 !important; display:block !important; padding:0 !important; height:var(--footer-final-h) !important; min-height:var(--footer-final-h) !important; overflow:visible !important; } .footer-svg-home-circle{ position:absolute !important; left:50% !important; top:50% !important; transform:translate(-50%, -50%) !important; width:var(--footer-final-home) !important; height:var(--footer-final-home) !important; min-width:var(--footer-final-home) !important; min-height:var(--footer-final-home) !important; display:grid !important; place-items:center !important; margin:0 !important; padding:0 !important; border-radius:50% !important; background:linear-gradient(180deg,#ffffff 0%,#d9d9d9 100%) !important; box-shadow:0 9px 22px rgba(0,0,0,.28), inset 0 1px 2px rgba(255,255,255,.9) !important; color:#111 !important; } .footer-svg-home-circle img, .footer-svg-home-circle svg{ display:block !important; width:52% !important; height:52% !important; object-fit:contain !important; } .footer-svg-home-text{ position:absolute !important; left:50% !important; top:58px !important; transform:translateX(-50%) !important; width:100% !important; min-height:auto !important; height:auto !important; margin:0 !important; padding:0 !important; display:block !important; font-size:15px !important; font-weight:800 !important; line-height:1 !important; letter-spacing:.2px !important; text-align:center !important; color:#fff !important; } .footer-svg-icon .footer-profile-img, .footer-profile-img{ display:block !important; width:var(--footer-final-icon) !important; height:var(--footer-final-icon) !important; min-width:var(--footer-final-icon) !important; min-height:var(--footer-final-icon) !important; border-radius:50% !important; object-fit:cover !important; border:2px solid #fff !important; background:#fff !important; } .footer-svg-item.active:not(.footer-svg-home)::after{ content:'' !important; position:absolute !important; top:0 !important; left:50% !important; width:34px !important; height:3px !important; border-radius:999px !important; background:#fff !important; transform:translateX(-50%) !important; } @media(max-width:520px){ :root{ --footer-final-h:82px; --footer-final-icon:25px; --footer-final-home:68px; } body{ padding-bottom:calc(var(--footer-final-h) + var(--safe-bottom, 0px)) !important; } .app-main{ padding-bottom:calc(var(--footer-final-h) + 20px + var(--safe-bottom, 0px)) !important; } .footer-svg-item{ padding:15px 1px 8px !important; gap:6px !important; font-size:12px !important; line-height:1.08 !important; } .footer-svg-text{ padding:0 1px !important; line-height:1.08 !important; } .footer-svg-home-circle{ top:0 !important; } .footer-svg-home-text{ top:51px !important; font-size:10.5px !important; } } @media(max-width:360px){ :root{ --footer-final-h:78px; --footer-final-icon:23px; --footer-final-home:62px; } .footer-svg-item{ font-size:10.5px !important; gap:5px !important; } .footer-svg-home-text{ top:47px !important; font-size:9.5px !important; } } /* ========================================================= FINAL SAFE OVERRIDE 2026 แก้เฉพาะ background body + footer ไม่ตัด CSS เดิม ไม่เปลี่ยน layout เดิม ========================================================= */ html, body{ margin:0 !important; min-height:100% !important; } body{ --bs-body-bg:transparent !important; background-color:transparent !important; background-image:linear-gradient( 180deg, #40b3ce 0%, #40b3ce 18%, #40b3ce 40%, #4eb6cf 65%, #4eb6cf 100% ) !important; background-attachment:fixed !important; background-repeat:no-repeat !important; background-size:cover !important; } body::before{ display:none !important; background:none !important; } .app-shell{ background:transparent !important; } .bottom-nav, .bottom-nav.sting-bottom-nav.footer-svg-v4{ background:linear-gradient( 180deg, #db0000 0%, #8f0000 45%, #430202 100% ) !important; } /* ========================================================= FOOTER CLEAN FINAL 2026 ========================================================= */ /* shell โปร่งใสให้เห็น gradient */ .app-shell{ background:transparent !important; box-shadow:0 0 35px rgba(0,0,0,.12) !important; } /* footer */ .bottom-nav, .bottom-nav.sting-bottom-nav.footer-svg-v4{ left:50% !important; right:auto !important; transform:translateX(-50%) !important; width:100% !important; max-width:768px !important; border-radius:22px 22px 0 0 !important; background:linear-gradient( 180deg, #db0000 0%, #8f0000 45%, #430202 100% ) !important; box-shadow:0 -12px 28px rgba(0,0,0,.28) !important; } /* menu */ .footer-svg-item, .bottom-nav-item{ justify-content:flex-end !important; gap:6px !important; padding-bottom:10px !important; font-size:11px !important; line-height:1.1 !important; } /* remove white active line */ .footer-svg-item.active::before, .footer-svg-item.active::after, .bottom-nav-item.active::before, .bottom-nav-item.active::after{ display:none !important; content:none !important; } /* icon */ .footer-svg-icon, .bottom-nav-icon{ width:24px !important; height:24px !important; } /* profile */ .footer-profile-img, .bottom-nav-profile img{ width:26px !important; height:26px !important; border-radius:50% !important; object-fit:cover !important; border:2px solid #fff !important; background:#fff !important; } /* home center */ .footer-svg-home-circle, .bottom-home-circle{ border-radius:50% !important; background:linear-gradient( 180deg, #ffffff 0%, #d8d8d8 100% ) !important; box-shadow: 0 0 0 4px rgba(255,255,255,.12), 0 10px 24px rgba(0,0,0,.30) !important; } /* mobile */ @media(max-width:520px){ .footer-svg-item, .bottom-nav-item{ font-size:10px !important; } .footer-svg-home-text{ display:none !important; } } /* ========================================================= FINAL SVG ICON + HOME 60x60 PREMIUM FIX ใช้ SVG ใหม่: submit.svg / tandc.svg / gift.svg / home.svg ========================================================= */ :root{ --footer-final-h:82px; --footer-home-size:60px; --footer-icon-size:24px; --footer-safe:env(safe-area-inset-bottom,0px); } body{ padding-bottom:calc(var(--footer-final-h) + var(--footer-safe)) !important; } .app-main{ padding-bottom:calc(var(--footer-final-h) + 22px + var(--footer-safe)) !important; } .bottom-nav.sting-bottom-nav.footer-svg-v4{ position:fixed !important; left:50% !important; right:auto !important; bottom:0 !important; transform:translateX(-50%) !important; width:100% !important; max-width:768px !important; height:calc(var(--footer-final-h) + var(--footer-safe)) !important; margin:0 !important; padding:0 8px var(--footer-safe) !important; display:grid !important; grid-template-columns:repeat(5,minmax(0,1fr)) !important; grid-template-rows:var(--footer-final-h) !important; align-items:end !important; justify-items:stretch !important; overflow:visible !important; border-radius:22px 22px 0 0 !important; background:linear-gradient(180deg,#007ea7 0%,#007ea7 45%,#034c63 100%) !important; box-shadow:0 -12px 30px rgba(0,0,0,.28) !important; z-index:99999 !important; } .footer-svg-v4 > .nav-receipt{grid-column:1 !important;grid-row:1 !important;} .footer-svg-v4 > .nav-condition{grid-column:2 !important;grid-row:1 !important;} .footer-svg-v4 > .nav-home{grid-column:3 !important;grid-row:1 !important;} .footer-svg-v4 > .nav-winner{grid-column:4 !important;grid-row:1 !important;} .footer-svg-v4 > .nav-history{grid-column:5 !important;grid-row:1 !important;} .footer-svg-item{ position:relative !important; width:100% !important; min-width:0 !important; height:var(--footer-final-h) !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:flex-end !important; gap:5px !important; padding:0 2px 8px !important; color:#fff !important; text-align:center !important; text-decoration:none !important; font-family:'Kanit',system-ui,-apple-system,'Segoe UI',sans-serif !important; font-size:11px !important; font-weight:700 !important; line-height:1.08 !important; overflow:visible !important; } .footer-svg-icon{ width:var(--footer-icon-size) !important; height:var(--footer-icon-size) !important; min-width:var(--footer-icon-size) !important; min-height:var(--footer-icon-size) !important; display:flex !important; align-items:center !important; justify-content:center !important; overflow:visible !important; } .footer-svg-icon img, .footer-svg-icon svg{ width:100% !important; height:100% !important; display:block !important; object-fit:contain !important; } .footer-svg-text{ display:flex !important; align-items:flex-start !important; justify-content:center !important; width:100% !important; max-width:100% !important; min-height:24px !important; color:#fff !important; text-align:center !important; line-height:1.08 !important; white-space:normal !important; word-break:keep-all !important; overflow:hidden !important; } .footer-svg-home, .nav-home{ position:relative !important; z-index:50 !important; height:var(--footer-final-h) !important; display:flex !important; align-items:flex-start !important; justify-content:center !important; padding:0 !important; overflow:visible !important; } .footer-svg-home .footer-svg-text, .footer-svg-home-text{ display:none !important; } .footer-svg-home-circle, .bottom-home-circle{ position:absolute !important; left:50% !important; top:50% !important; transform:translate(-50%,-38%) !important; width:var(--footer-home-size) !important; height:var(--footer-home-size) !important; min-width:var(--footer-home-size) !important; min-height:var(--footer-home-size) !important; max-width:var(--footer-home-size) !important; max-height:var(--footer-home-size) !important; margin:0 !important; padding:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important; border:2px solid rgba(67,193,222,1) !important; outline:2px solid rgba(62,183,212,1) !important; background:radial-gradient(circle at 35% 25%,#ffffff 0%,#f3f3f3 45%,#bfbfbf 100%) !important; box-shadow: 0 0 0 3px rgba(175,0,0,.55), 0 0 14px rgba(255,196,0,.55), 0 10px 22px rgba(0,0,0,.34), inset 0 2px 3px rgba(255,255,255,.9) !important; overflow:hidden !important; } .footer-svg-home-circle img, .footer-svg-home-circle svg, .bottom-home-circle img, .bottom-home-circle svg{ width:60px !important; height:60px !important; min-width:60px !important; min-height:60px !important; max-width:60px !important; max-height:60px !important; display:block !important; object-fit:contain !important; } .footer-profile-img, .bottom-nav-profile img{ width:26px !important; height:26px !important; border-radius:50% !important; object-fit:cover !important; border:2px solid #fff !important; background:#fff !important; } .footer-svg-item.active::before, .footer-svg-item.active::after, .bottom-nav-item.active::before, .bottom-nav-item.active::after{ content:none !important; display:none !important; } @media(max-width:520px){ :root{ --footer-final-h:68px; --footer-home-size:60px; --footer-icon-size:23px; } .bottom-nav.sting-bottom-nav.footer-svg-v4{ width:100vw !important; max-width:100vw !important; padding-left:4px !important; padding-right:4px !important; border-radius:18px 18px 0 0 !important; } .footer-svg-item{ font-size:10px !important; gap:4px !important; padding-bottom:7px !important; } .footer-svg-text{ min-height:2px !important; } .footer-svg-home-circle, .bottom-home-circle{ transform:translate(-50%,-36%) !important; } } /* ========================================================= RECEIPT FORM + UPLOAD UI PATCH ========================================================= */ .receipt-form-card{ width:100%; max-width:520px; margin:0 auto 24px; padding:18px; border-radius:24px; background:rgba(255,255,255,.96); box-shadow:0 14px 34px rgba(0,0,0,.18); } .form-group{ margin-bottom:14px; } .form-label{ display:block; margin-bottom:7px; color:#222; font-family:'Kanit',sans-serif; font-size:14px; font-weight:700; } .modern-input{ width:100%; min-height:44px; padding:10px 14px; border:1px solid #e5e7eb; border-radius:15px; background:#fff; color:#111 !important; font-family:'Kanit',sans-serif; font-size:14px; box-shadow:0 5px 14px rgba(0,0,0,.06); } .modern-input:focus{ border-color:#db0000; box-shadow:0 0 0 3px rgba(219,0,0,.12); outline:none; } .modern-upload-box{ margin:18px 0; padding:22px 14px; border:2px dashed #3eb7d4; border-radius:24px; background:linear-gradient(180deg,#fff,#ffffff); text-align:center; } .upload-icon{ width:58px; height:58px; margin:0 auto 10px; display:grid; place-items:center; border-radius:50%; background:linear-gradient(180deg,#43c1de,#40b3ce); color:#fff; font-size:28px; box-shadow:0 10px 22px rgba(139,0,0,.28); } .modern-upload-box h3{ margin:0; color:#333; font-size:17px; font-weight:800; } .modern-upload-box p{ margin:2px 0; color:#333; font-size:14px; font-weight:600; } .modern-upload-box small{ display:block; margin-bottom:14px; color:#667085; font-size:12px; } .modern-upload-btn{ width:100%; min-height:46px; border:0; border-radius:16px; background:linear-gradient(180deg,#43c1de,#43c1de 55%,#40b3ce); color:#fff; font-family:'Kanit',sans-serif; font-size:14px; font-weight:800; box-shadow:0 10px 20px rgba(139,0,0,.25); cursor:pointer; } .modern-upload-btn:active{ transform:scale(.985); } .hidden-file-input{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; } .upload-count-note{ display:inline-flex; align-items:center; justify-content:center; margin-top:12px; padding:7px 13px; border-radius:999px; background:#fff; color:#333; font-size:13px; font-weight:700; box-shadow:0 4px 12px rgba(0,0,0,.08); } .preview-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px; } .preview-grid .preview-item{ position:relative; padding:7px; border:1px solid #eee; border-radius:16px; background:#fff; } .preview-grid img{ width:100%; height:82px; border-radius:12px; object-fit:cover; } .btn-submit-receipt{ width:100%; min-height:48px; border:0; border-radius:18px; background:linear-gradient(180deg,#007ea7,#007ea7 55%,#06a9de); color:#fff; font-family:'Kanit',sans-serif; font-size:15px; font-weight:800; box-shadow:0 12px 24px rgba(139,0,0,.30); cursor:pointer; } @media(max-width:420px){ .receipt-form-card{ padding:15px; border-radius:20px; } .preview-grid{ grid-template-columns:repeat(2,1fr); } } /* ========================================================= ANDROID UPLOAD SHEET FIX ========================================================= */ .upload-sheet{ position:fixed !important; inset:0 !important; z-index:999999 !important; display:flex !important; align-items:flex-end !important; justify-content:center !important; padding:0 !important; } .upload-sheet.hidden{ display:none !important; } .upload-sheet-backdrop{ position:absolute !important; inset:0 !important; background:rgba(0,0,0,.58) !important; backdrop-filter:blur(3px); } .upload-sheet-card{ position:relative !important; z-index:2 !important; width:100% !important; max-width:520px !important; padding:20px 16px calc(18px + env(safe-area-inset-bottom,0px)) !important; border-radius:26px 26px 0 0 !important; background:#fff !important; box-shadow:0 -18px 40px rgba(0,0,0,.28) !important; font-family:var(--app-font,'Kanit',sans-serif) !important; } .upload-sheet-card h3{ margin:0 0 5px !important; color:#8b211d !important; font-size:17px !important; font-weight:800 !important; text-align:center !important; } .upload-sheet-card p{ margin:0 0 14px !important; color:#667085 !important; font-size:13px !important; text-align:center !important; } .upload-sheet-option{ width:100% !important; margin:0 0 10px !important; padding:13px 14px !important; border:1px solid #eee !important; border-radius:18px !important; background:#fff7f7 !important; color:#111 !important; display:grid !important; grid-template-columns:42px 1fr !important; gap:2px 10px !important; text-align:left !important; font-family:var(--app-font,'Kanit',sans-serif) !important; box-shadow:0 6px 16px rgba(0,0,0,.08) !important; } .upload-sheet-option span{ grid-row:1 / span 2 !important; display:grid !important; place-items:center !important; width:42px !important; height:42px !important; border-radius:14px !important; background:linear-gradient(180deg,#db0000,#8f0000) !important; color:#fff !important; font-size:24px !important; } .upload-sheet-option b{ font-size:14px !important; font-weight:800 !important; color:#111 !important; } .upload-sheet-option small{ font-size:12px !important; color:#667085 !important; } .upload-sheet-cancel{ width:100% !important; min-height:44px !important; margin-top:2px !important; border:0 !important; border-radius:16px !important; background:#8b211d !important; color:#fff !important; font-family:var(--app-font,'Kanit',sans-serif) !important; font-size:14px !important; font-weight:800 !important; } .hidden-file-input{ position:absolute !important; width:1px !important; height:1px !important; opacity:0 !important; pointer-events:none !important; } /* ========================================================= DATE INPUT FIX ========================================================= */ input[type="date"].modern-input, input[type="date"].form-control{ width:100% !important; height:46px !important; min-height:46px !important; padding:10px 14px !important; border:1px solid #e5e7eb !important; border-radius:15px !important; background:#fff !important; color:#111 !important; font-family:'Kanit',sans-serif !important; font-size:14px !important; font-weight:400 !important; line-height:1.2 !important; appearance:none !important; -webkit-appearance:none !important; box-shadow:0 5px 14px rgba(0,0,0,.06) !important; } /* icon calendar */ input[type="date"].modern-input::-webkit-calendar-picker-indicator{ opacity:.85; cursor:pointer; } /* remove inner spacing ios/android */ input[type="date"].modern-input::-webkit-date-and-time-value{ text-align:left; } /* focus */ input[type="date"].modern-input:focus{ border-color:#db0000 !important; box-shadow:0 0 0 3px rgba(219,0,0,.12) !important; outline:none !important; } .btna-accept { color: #fff !important; background: linear-gradient(180deg, #007ea7, #06a9de) !important; box-shadow: 0 8px 16px rgba(120, 0, 0, .22); } .btna { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 10px 16px; border: 0; border-radius: 14px; font-family: var(--app-font); font-size: 14px; font-weight: 700; line-height: 1.25; text-align: center; white-space: normal; box-shadow: none; } /* ========================================================= THANK YOU POPUP IMAGE FINAL - Register success: assets/img/thanks-register.png - Receipt success: assets/img/thanks-bill.png ========================================================= */ .thankyou-popup{ width:100% !important; text-align:center !important; } .thankyou-image{ display:block !important; width:100% !important; max-width:320px !important; height:auto !important; margin:0 auto 14px !important; border-radius:18px !important; object-fit:contain !important; box-shadow:0 10px 24px rgba(0,0,0,.12) !important; } .thankyou-text{ color:#333 !important; font-family:var(--app-font,'Kanit',sans-serif) !important; font-size:14px !important; font-weight:500 !important; line-height:1.7 !important; text-align:center !important; } .success-modal-card .success-check{ margin-bottom:12px !important; } .success-modal-card #successTitle{ margin-bottom:12px !important; font-weight:800 !important; } .success-modal-card #successMessage{ text-align:center !important; } @media(max-width:576px){ .thankyou-image{ max-width:270px !important; border-radius:16px !important; } .thankyou-text{ font-size:13px !important; line-height:1.65 !important; } }