/* ============================================================ ALAIDEE GLOBAL MOBILE FOOTER V2 MOBILE ONLY ============================================================ */ @media (max-width:767.98px){ /* ------------------------------------------------------- MAIN FOOTER ------------------------------------------------------- */ .alaidee-mobile-footer-compact{ display:block !important; width:100% !important; margin:0 !important; padding:14px 10px 4px !important; background:#f6f8fb !important; border-top:1px solid #e8edf3 !important; box-sizing:border-box !important; } .alaidee-mf-inner{ width:100% !important; max-width:520px !important; margin:0 auto !important; padding:0 !important; box-sizing:border-box !important; } /* ------------------------------------------------------- HEADING ------------------------------------------------------- */ .alaidee-mf-heading{ margin:0 0 10px !important; padding:0 2px !important; text-align:left !important; } .alaidee-mf-heading strong{ display:block !important; margin:0 0 2px !important; color:#172033 !important; font-size:16px !important; line-height:1.25 !important; font-weight:800 !important; } .alaidee-mf-heading span{ display:block !important; color:#748094 !important; font-size:10.5px !important; line-height:1.35 !important; font-weight:500 !important; } /* ------------------------------------------------------- SERVICE GRID ------------------------------------------------------- */ .alaidee-mf-services{ display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:7px !important; margin:0 0 9px !important; padding:0 !important; } .alaidee-mf-service{ position:relative !important; display:grid !important; grid-template-columns:32px minmax(0,1fr) 8px !important; align-items:center !important; gap:7px !important; min-width:0 !important; min-height:55px !important; margin:0 !important; padding:7px 7px !important; background:#fff !important; border:1px solid #e5eaf0 !important; border-radius:11px !important; box-shadow: 0 2px 7px rgba(15,23,42,.035) !important; color:#172033 !important; text-decoration:none !important; box-sizing:border-box !important; -webkit-tap-highlight-color:transparent; } .alaidee-mf-service:active{ transform:scale(.985); } .alaidee-mf-icon{ width:32px !important; height:32px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:9px !important; background:#fff8d9 !important; color:#a97800 !important; } .alaidee-mf-icon svg{ display:block !important; width:18px !important; height:18px !important; fill:none !important; stroke:currentColor !important; stroke-width:1.8 !important; stroke-linecap:round !important; stroke-linejoin:round !important; } .alaidee-mf-service-copy{ min-width:0 !important; } .alaidee-mf-service-copy strong{ display:block !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; color:#172033 !important; font-size:11px !important; line-height:1.2 !important; font-weight:800 !important; } .alaidee-mf-service-copy small{ display:block !important; margin-top:2px !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; color:#7a8597 !important; font-size:8.5px !important; line-height:1.2 !important; font-weight:500 !important; } .alaidee-mf-chevron{ color:#aab2bf !important; font-size:17px !important; line-height:1 !important; font-weight:500 !important; } /* ------------------------------------------------------- PHONE + LINE ------------------------------------------------------- */ .alaidee-mf-contact{ vertical-align:top !important; width:calc(50% - 3.5px) !important; min-height:47px !important; margin:0 !important; padding:6px 7px !important; grid-template-columns:30px minmax(0,1fr) 7px !important; align-items:center !important; gap:6px !important; background:#fff !important; border:1px solid #e5eaf0 !important; border-radius:11px !important; box-shadow:none !important; text-decoration:none !important; box-sizing:border-box !important; } .alaidee-mf-phone{ display:inline-grid !important; margin-right:7px !important; } .alaidee-mf-line{ display:inline-grid !important; } .alaidee-mf-contact-icon, .alaidee-mf-line-logo{ width:30px !important; height:30px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:9px !important; } .alaidee-mf-contact-icon{ background:#eef5ff !important; color:#1769d2 !important; } .alaidee-mf-contact-icon svg{ width:17px !important; height:17px !important; fill:none !important; stroke:currentColor !important; stroke-width:1.8 !important; stroke-linecap:round !important; stroke-linejoin:round !important; } .alaidee-mf-line-logo{ background:#20c659 !important; color:#fff !important; font-family:Arial,sans-serif !important; font-size:8px !important; line-height:1 !important; font-weight:900 !important; } .alaidee-mf-contact-copy{ min-width:0 !important; text-align:left !important; } .alaidee-mf-contact-copy small{ display:block !important; color:#8791a1 !important; font-size:8.5px !important; line-height:1.1 !important; font-weight:500 !important; } .alaidee-mf-contact-copy strong{ display:block !important; margin-top:2px !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; color:#172033 !important; font-size:10.5px !important; line-height:1.15 !important; font-weight:800 !important; } .alaidee-mf-contact-arrow{ color:#adb5c1 !important; font-size:16px !important; line-height:1 !important; } /* ------------------------------------------------------- LEGAL LINKS ------------------------------------------------------- */ .alaidee-mf-links{ display:flex !important; align-items:center !important; justify-content:center !important; flex-wrap:wrap !important; gap:4px !important; margin:10px 0 0 !important; padding:8px 0 0 !important; border-top:1px solid #e4e8ee !important; color:#a1a9b5 !important; } .alaidee-mf-links a{ color:#697487 !important; font-size:9px !important; line-height:1.3 !important; font-weight:500 !important; text-decoration:none !important; } /* ------------------------------------------------------- COPYRIGHT ------------------------------------------------------- */ .alaidee-mf-copyright{ margin:5px 0 0 !important; padding:0 !important; color:#9aa3b1 !important; font-size:8.5px !important; line-height:1.3 !important; font-weight:500 !important; text-align:center !important; } /* ------------------------------------------------------- KEEP EXISTING BOTTOM NAV SEPARATE ------------------------------------------------------- */ .alaidee-mobile-nav{ border-top: 1px solid rgba(15,23,42,.09) !important; } } /* DESKTOP SAFETY */ @media (min-width:768px){ .alaidee-mobile-footer-compact{ display:none !important; } } /* ============================================================ ALAIDEE GLOBAL MOBILE FOOTER V2 EXACT HOMEPAGE V2 FINAL CASCADE MASTER = CURRENT HOMEPAGE V2 ============================================================ */ /* ========================================================== HOMEPAGE V2 SERVICE FOOTER - CONTACT ROW + EMPTY SPACE FIX ========================================================== */ @media (max-width:767.98px){ /* * CONTACT * Force PHONE + LINE into one row. */ .alaidee-mf-contact{ width: calc(50% - 4px) !important; min-height: 43px !important; margin: 0 !important; padding: 5px 6px !important; vertical-align: top !important; } .alaidee-mf-phone{ display:inline-grid !important; margin-right: 4px !important; } .alaidee-mf-line{ display:inline-grid !important; margin-left: 0 !important; } /* * Remove whitespace created by normal inline elements. * Inner becomes zero-font only around inline contact cards; * children restore their own sizes. */ .alaidee-mf-inner{ font-size: 0 !important; } .alaidee-mf-heading, .alaidee-mf-services, .alaidee-mf-links, .alaidee-mf-copyright{ font-size: initial !important; } /* * CONTACT TYPOGRAPHY */ .alaidee-mf-contact-copy small{ font-size: 6.5px !important; } .alaidee-mf-contact-copy strong{ font-size: 8px !important; } /* * LEGAL AREA */ .alaidee-mf-links{ margin-top: 8px !important; padding-top: 7px !important; font-size: 7px !important; } .alaidee-mf-copyright{ margin-top: 4px !important; font-size: 6.5px !important; } /* * MAIN FOOTER * * Bottom navigation is fixed, * therefore only reserve enough room for it. */ .alaidee-mobile-footer-compact{ min-height: 0 !important; padding: 13px 7px 66px !important; } } /* ========================================================== SMALL MOBILE ========================================================== */ @media (max-width:390px){ .alaidee-mf-contact{ width: calc(50% - 3px) !important; } .alaidee-mf-phone{ margin-right: 3px !important; } .alaidee-mf-contact-copy strong{ font-size: 7.5px !important; } } /* ========================================================== HOMEPAGE V2 SERVICE / FOOTER / BOTTOM NAV COMPACT V3 ========================================================== */ @media (max-width:767.98px){ /* ====================================================== SERVICE SECTION ====================================================== */ .alaidee-mobile-footer-compact{ min-height:0 !important; margin:0 !important; /* * IMPORTANT: * Do not reserve 60-70px here anymore. * Bottom navigation is its own element. */ padding: 11px 7px 7px !important; background: #f6f7f9 !important; } /* ====================================================== CENTER SECTION TITLE ====================================================== */ .alaidee-mf-heading{ margin: 0 0 7px !important; padding:0 !important; text-align: center !important; } .alaidee-mf-heading strong{ display:block !important; margin:0 !important; font-size: 14px !important; line-height: 1.15 !important; font-weight: 800 !important; text-align: center !important; } .alaidee-mf-heading span{ display:block !important; margin-top: 2px !important; font-size: 7px !important; line-height: 1.25 !important; text-align: center !important; } /* ====================================================== SERVICES tighter vertical rhythm ====================================================== */ .alaidee-mf-services{ gap: 5px !important; margin: 0 0 5px !important; } .alaidee-mf-service{ min-height: 49px !important; padding: 5px 7px !important; } /* ====================================================== CONTACT ROW ====================================================== */ .alaidee-mf-contact{ min-height: 41px !important; padding: 5px 6px !important; } /* ====================================================== FOOTER LINKS ====================================================== */ .alaidee-mf-links{ margin: 6px 0 0 !important; padding: 6px 0 0 !important; gap: 2px 5px !important; border-top: 1px solid #e0e3e8 !important; font-size: 6.5px !important; line-height: 1.2 !important; } /* ====================================================== COPYRIGHT ====================================================== */ .alaidee-mf-copyright{ margin: 3px 0 0 !important; padding: 0 0 2px !important; color: #9ba1ab !important; font-size: 6px !important; line-height: 1.1 !important; text-align: center !important; } /* ====================================================== BOTTOM NAV Keep clean white. Add Alaidee yellow identity subtly. ====================================================== */ .alaidee-mobile-nav{ background: #ffffff !important; border-top: 2px solid #f2cf23 !important; box-shadow: 0 -3px 12px rgba(23,32,51,.06) !important; } /* * Don't make the whole bar yellow. * Use yellow only for active Alaidee navigation state. */ .alaidee-mobile-nav-item.is-active .alaidee-mobile-nav-icon{ color: #d5a900 !important; } .alaidee-mobile-nav-item.is-active .alaidee-mobile-nav-label{ color: #b58d00 !important; font-weight: 800 !important; } /* * LINE remains LINE green. */ .alaidee-mobile-nav-line .alaidee-line-icon{ color: #ffffff !important; } } /* ========================================================== SMALL MOBILE ========================================================== */ @media (max-width:390px){ .alaidee-mobile-footer-compact{ padding: 10px 6px 6px !important; } .alaidee-mf-heading{ margin-bottom: 6px !important; } .alaidee-mf-services{ gap: 4px !important; margin-bottom: 4px !important; } .alaidee-mf-service{ min-height: 47px !important; } .alaidee-mf-contact{ min-height: 40px !important; } } /* HOMEPAGE V2 - BOTTOM NAV YELLOW LINE 1PX */ @media (max-width:767.98px){ .alaidee-mobile-nav{ border-top: 1px solid #f2cf23 !important; } } /* ========================================================== HOMEPAGE V2 - BOTTOM NAV LINE POSITION keep 2px, move visual boundary lower ========================================================== */ @media (max-width:767.98px){ /* ลดพื้นที่ก่อนถึง bottom nav ลงอีก */ .alaidee-mobile-footer-compact{ padding-bottom:0 !important; } .alaidee-mf-copyright{ padding-bottom:0 !important; margin-bottom:0 !important; } /* คืนเส้นเหลืองความหนาเดิม */ .alaidee-mobile-nav{ border-top: 2px solid #f2cf23 !important; } } /* ========================================================== HOMEPAGE V2 - BOTTOM NAV COMPACT HEIGHT ========================================================== */ @media (max-width:767.98px){ .alaidee-mobile-nav{ /* เส้นเหลืองคงเดิม */ border-top:2px solid #f2cf23 !important; /* ลดความสูงด้านบนของเมนู */ padding-top:3px !important; } .alaidee-mobile-nav-item{ padding-top:2px !important; } } /* ============================================================ ALAIDEE FOOTER V2 ALL CUSTOMER PAGES - FINAL NORMALIZATION ============================================================ */ @media (max-width:767.98px){ body.alaidee-footer-v2-mode{ padding-bottom: calc( 68px + env(safe-area-inset-bottom, 0px) ) !important; } body.alaidee-footer-v2-mode .alaidee-mobile-footer-compact{ margin-bottom:0 !important; padding-bottom:0 !important; } body.alaidee-footer-v2-mode .alaidee-mf-copyright{ margin-bottom:0 !important; padding-bottom:0 !important; } body.alaidee-footer-v2-mode .alaidee-mobile-nav{ position:fixed !important; left:0 !important; right:0 !important; bottom:0 !important; z-index:9998 !important; } } /* ========================================================== ALAIDEE MOBILE FOOTER HOMEPAGE V2 MASTER FINAL SYNC Generated from current Homepage V2 final footer appearance. Mobile customer pages only. ========================================================== */ .alaidee-mobile-footer-compact{ margin:0 !important; padding: 14px 7px 78px !important; background: #f6f7f9 !important; color:#172033 !important; border-top: 1px solid #e8ebf0; } .alaidee-mf-inner{ width:100% !important; max-width:none !important; margin:0 auto !important; } /* ====================================================== HEADING ====================================================== */ .alaidee-mf-heading{ margin: 0 2px 9px !important; text-align:left !important; } .alaidee-mf-heading strong{ display:block !important; margin:0 !important; color:#172033 !important; font-size:14px !important; line-height:1.25 !important; font-weight:800 !important; } .alaidee-mf-heading span{ display:block !important; margin-top:2px !important; color:#7a8290 !important; font-size:8px !important; line-height:1.3 !important; } /* ====================================================== 4 SERVICE CARDS ====================================================== */ .alaidee-mf-services{ display:grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap:6px !important; margin: 0 0 7px !important; } .alaidee-mf-service{ min-height:52px !important; display:grid !important; grid-template-columns: 29px minmax(0,1fr) 7px !important; align-items:center !important; gap:6px !important; padding: 6px 7px !important; border: 1px solid #e4e7ec !important; border-radius: 9px !important; background: #ffffff !important; box-shadow: 0 1px 4px rgba(23,32,51,.035) !important; color:#172033 !important; text-decoration:none !important; } .alaidee-mf-service:active{ transform: scale(.985); } /* ====================================================== SERVICE ICONS ====================================================== */ .alaidee-mf-icon{ width:29px !important; height:29px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius: 8px !important; } .alaidee-mf-icon svg{ width:16px !important; height:16px !important; stroke-width: 1.8 !important; } .alaidee-mf-service-copy{ min-width:0; } .alaidee-mf-service-copy strong{ display:block !important; margin:0 !important; color:#172033 !important; font-size:8.5px !important; line-height:1.2 !important; font-weight:800 !important; white-space:nowrap; } .alaidee-mf-service-copy small{ display:block !important; margin-top:1px !important; color:#89909c !important; font-size:6.5px !important; line-height:1.2 !important; white-space:nowrap; } .alaidee-mf-chevron{ color:#aeb4be !important; font-size:15px !important; line-height:1 !important; text-align:right; } /* ====================================================== CONTACTS PHONE + LINE ON SAME ROW ====================================================== */ .alaidee-mf-contact{ width: calc(50% - 3px) !important; min-height: 45px !important; display:inline-grid !important; grid-template-columns: 27px minmax(0,1fr) 6px !important; align-items:center !important; gap:5px !important; margin: 0 !important; padding: 6px !important; vertical-align:top !important; box-sizing:border-box !important; border: 1px solid #e4e7ec !important; border-radius: 9px !important; background: #ffffff !important; box-shadow: 0 1px 4px rgba(23,32,51,.03) !important; color:#172033 !important; } .alaidee-mf-phone{ margin-right: 2px !important; } .alaidee-mf-line{ margin-left: 2px !important; } .alaidee-mf-contact-icon, .alaidee-mf-line-logo{ width:27px !important; height:27px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius: 8px !important; } .alaidee-mf-contact-icon{ color:#365fc7 !important; background: #edf3ff !important; } .alaidee-mf-contact-icon svg{ width:15px !important; height:15px !important; } .alaidee-mf-line-logo{ background: #06c755 !important; color:#ffffff !important; font-size:6.5px !important; font-weight:900 !important; } .alaidee-mf-contact-copy{ min-width:0 !important; } .alaidee-mf-contact-copy small{ display:block !important; margin:0 !important; color:#8a919d !important; font-size:6.5px !important; line-height:1.1 !important; } .alaidee-mf-contact-copy strong{ display:block !important; margin-top:2px !important; color:#172033 !important; font-size:8.5px !important; line-height:1.15 !important; font-weight:800 !important; white-space:nowrap; } .alaidee-mf-contact-arrow{ color:#adb3bd !important; font-size:14px !important; } /* ====================================================== LEGAL LINKS ====================================================== */ .alaidee-mf-links{ display:flex !important; align-items:center !important; justify-content:center !important; flex-wrap:wrap !important; gap: 3px 5px !important; margin: 10px 0 0 !important; padding: 8px 0 0 !important; border-top: 1px solid #e1e4e9 !important; font-size: 7px !important; } .alaidee-mf-links a{ color:#727986 !important; text-decoration:none !important; } .alaidee-mf-links span{ color:#c3c7ce !important; } .alaidee-mf-copyright{ margin-top: 4px !important; color:#9a9fa8 !important; font-size: 6.5px !important; text-align:center !important; } /* ========================================================== ALAIDEE MOBILE FOOTER BOTTOM NAV CLEARANCE FINAL Keep the complete footer above the fixed mobile navigation. ========================================================== */ @media (max-width: 767.98px) { /* * The bottom navigation is fixed and therefore does not * consume document flow. Reserve its height on BODY, * not inside the visible footer. */ body.alaidee-footer-v2-mode { padding-bottom: calc( 72px + env(safe-area-inset-bottom, 0px) ) !important; } /* * Footer itself must remain completely in normal flow. */ body.alaidee-footer-v2-mode .alaidee-mobile-footer-compact { position: relative !important; z-index: 1 !important; margin-bottom: 0 !important; padding-bottom: 12px !important; overflow: visible !important; } /* * Make sure the final legal/copyright area remains * visible before the fixed navigation begins. */ body.alaidee-footer-v2-mode .alaidee-mf-copyright { display: block !important; margin-bottom: 0 !important; padding-bottom: 0 !important; } /* * Bottom navigation remains fixed at viewport bottom. */ body.alaidee-footer-v2-mode .alaidee-mobile-nav { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 9998 !important; margin: 0 !important; } } /* ========================================================== ALAIDEE MOBILE FOOTER REAL DOCUMENT-FLOW CLEARANCE V1 Bottom nav = fixed 64px. Reserve real scrollable space AFTER footer content so LINE / legal links / copyright can move fully above nav. ========================================================== */ @media (max-width: 767.98px) { body.alaidee-footer-v2-mode .alaidee-mobile-footer-compact { padding-bottom: calc( 84px + env(safe-area-inset-bottom, 0px) ) !important; box-sizing: border-box !important; overflow: visible !important; } body.alaidee-footer-v2-mode .alaidee-mf-copyright { display: block !important; visibility: visible !important; opacity: 1 !important; margin-bottom: 0 !important; } body.alaidee-footer-v2-mode .alaidee-mobile-nav { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 9998 !important; } } /* ========================================================== ALAIDEE MOBILE FOOTER REAL FLOW ROOT FIX V1 Footer parent must contain .alaidee-mf-inner. ========================================================== */ @media (max-width: 767.98px) { body.alaidee-footer-v2-mode .alaidee-mobile-footer-compact { display: block !important; position: relative !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; box-sizing: border-box !important; margin: 0 !important; /* * Bottom navigation has its own fixed layer. * Keep real clearance inside the footer flow. */ padding-bottom: calc( 78px + env(safe-area-inset-bottom, 0px) ) !important; } body.alaidee-footer-v2-mode .alaidee-mf-inner { display: block !important; position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; float: none !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin-left: auto !important; margin-right: auto !important; transform: none !important; box-sizing: border-box !important; } body.alaidee-footer-v2-mode .alaidee-mf-links, body.alaidee-footer-v2-mode .alaidee-mf-copyright { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; } body.alaidee-footer-v2-mode .alaidee-mobile-nav { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 9998 !important; } }