:root{ --line: #e5e7eb; --page-x: 16px; @media (max-width:420px){ --page-x: 12px; } --gap-x: 16px; --gap-y: 16px; @media (max-width:420px){ --gap-x: 12px; --gap-y: 12px; } --icon: 29px; --card-r: 16px; --settings-pad-x: 10px; --list-inner-x: 6px; --hist-col-gap: 12px; --track-right-vpad: 1px; --trk-text-vpad: 10px; } .ex-link{ color:#000; } a{ color:inherit; } html{ zoom:100%; } .hide-tabbar{ display:none !important; } .hide{ display:none; } .header{ background-color:#F64747; } .button_on,.button_off{ border-color:#F64747; color:#F64747; } .page .item-inner{ font-size:16px; } i.icon[class^="icon-"], i.icon[class*=" icon-"]{ width:var(--icon); height:var(--icon); border-radius:5px; background-size:contain; background-position:center; background-repeat:no-repeat; } i.icon.icon-item{background-image:url(../images/icon-item.png)} i.icon.icon-track{background-image:url(../images/icon-track.png)} i.icon.icon-noti{background-image:url(../images/icon-noti.png)} i.icon.icon-intransit{background-image:url(../images/icon-intransit.png)} i.icon.icon-barcode{background-image:url(../images/icon-barcode.png)} i.icon.icon-delivered{background-image:url(../images/icon-delivered.png)} i.icon.icon-weight{background-image:url(../images/icon-weight.png)} i.icon.icon-EMS{background-image:url(../images/icon-EMS.png)} i.icon.icon-eCo{background-image:url(../images/icon-eCo.png)} i.icon.icon-Kerry{background-image:url(../images/icon-Kerry.png)} i.icon.icon-DHL{background-image:url(../images/icon-DHL.png)} i.icon.icon-FLASH{background-image:url(../images/icon-FLASH.png)} i.icon.icon-ninjavan{background-image:url(../images/icon-ninjavan.png)} i.icon.icon-SCG{background-image:url(../images/icon-SCG.png)} i.icon.icon-JnT{background-image:url(../images/icon-JnT.png)} i.icon.icon-BES{background-image:url(../images/icon-BES.png)} i.icon.icon-CJL{background-image:url(../images/icon-CJL.png)} i.icon.icon-APH{background-image:url(../images/icon-APH.png)} i.icon.icon-LEL{background-image:url(../images/icon-LEL.png)} i.icon.icon-NIM{background-image:url(../images/icon-NIM.png)} i.icon.icon-SPX{background-image:url(../images/icon-SPX.png)} i.icon.icon-SPD{background-image:url(../images/icon-SPD.png)} i.icon.icon-POP{background-image:url(../images/icon-POP.png)} i.icon.icon-INT{background-image:url(../images/icon-INT.png)} i.icon.icon-BEE{background-image:url(../images/icon-BEE.png)} i.icon.icon-TNT{background-image:url(../images/icon-TNT.png)} i.icon.icon-TPL{background-image:url(../images/icon-TPL.png)} i.icon.icon-FED{background-image:url(../images/icon-FED.png)} i.icon.icon-BSX{background-image:url(../images/icon-BSX.png)} i.icon.icon-NCA{background-image:url(../images/icon-NCA.png)} i.icon.icon-ITT{background-image:url(../images/icon-ITT.png)} i.icon.icon-YUS{background-image:url(../images/icon-YUS.png)} i.icon.icon-UPS{background-image:url(../images/icon-UPS.png)} i.icon.icon-SHJ{background-image:url(../images/icon-SHJ.png)} i.icon.icon-THP{background-image:url(../images/icon-THP.png)} i.icon.icon-JWD{background-image:url(../images/icon-JWD.png)} i.icon.icon-PLX{background-image:url(../images/icon-PLX.png)} i.icon.icon-ARAM{background-image:url(../images/icon-ARAM.png)} i.icon.icon-SENIT{background-image:url(../images/icon-SENIT.png)} i.icon.icon-ACOM{background-image:url(../images/icon-ACOM.png)} i.icon.icon-DBS{background-image:url(../images/icon-DBS.png)} i.icon.icon-NTC{background-image:url(../images/icon-NTC.png)} i.icon.icon-MKS{background-image:url(../images/icon-MKS.png)} i.icon.icon-FUZE{background-image:url(../images/icon-FUZE.png)} i.icon.icon-RTT{background-image:url(../images/icon-RTT.png)} i.icon.icon-UPU{background-image:url(../images/icon-UPU.png)} i.icon.icon-ZTO{background-image:url(../images/icon-ZTO.png)} i.icon.icon-CAIN{background-image:url(../images/icon-CAIN.png)} i.icon.icon-WEX{background-image:url(../images/icon-WEX.png)} i.icon.icon-IEMS{background-image:url(../images/icon-IEMS.png)} i.icon.icon-XPS{background-image:url(../images/icon-XPS.png)} i.icon.icon-BID{background-image:url(../images/icon-BID.png)} i.icon.icon-APC{background-image:url(../images/icon-APC.png)} i.icon.icon-YWE{background-image:url(../images/icon-YWE.png)} i.icon.icon-Shopee{background-image:url(../images/icon-Shopee.png)} i.icon.icon-Lazada{background-image:url(../images/icon-Lazada.png)} i.icon.icon-zoom{background-image:url(../images/icon-zoom.png)} i.icon.icon-info{background-image:url(../images/icon-info.png)} i.icon.icon-Clock{background-image:url(../images/icon-Clock.png)} i.icon.icon-R{background-image:url(../images/icon-R.png)} i.icon.icon-P{background-image:url(../images/icon-P.png)} i.icon.icon-C{background-image:url(../images/icon-C.png)} i.icon.icon-D{background-image:url(../images/icon-D.png)} i.icon.icon-L{background-image:url(../images/icon-L.png)} i.icon.icon-V{background-image:url(../images/icon-V.png)} i.icon.icon-copy{background-image:url(../images/icon-copy.png)} i.icon.icon-trader{background-image:url(../images/icon-trader.png)} i.icon.icon-name{background-image:url(../images/icon-name.png)} i.icon.icon-share{background-image:url(../images/icon-share.png)} i.icon.icon-facebook{background-image:url(../images/icon-facebook.png)} i.icon.icon-Google{background-image:url(../images/icon-Google.png)} i.icon.icon-line{background-image:url(../images/icon-line.png)} i.icon.icon-th{background-image:url(../images/icon-th.png)} i.icon.icon-en{background-image:url(../images/icon-en.png)} i.icon.icon-font_size_en{background-image:url(../images/icon-font_size_en.png)} i.icon.icon-font_size_th{background-image:url(../images/icon-font_size_th.png)} i.icon.icon-setting{background-image:url(../images/icon-setting.png)} i.icon.icon-action{background-image:url(../images/icon-action.png)} i.icon.icon-sort{background-image:url(../images/icon-sort.png)} i.icon.icon-null{background-image:url(../images/icon-null.png)} i.icon.icon-bin{background-image:url(../images/icon-bin.png)} i.icon.icon-revoke{background-image:url(../images/icon-revoke.png)} i.icon.icon-logout{background-image:url(../images/icon-logout.png)} i.icon.icon-no{background-image:url(../images/icon-no.png)} i.icon.icon-dark_mode{background-image:url(../images/icon-dark_mode.png)} i.icon.icon-copy_large{background-image:url(../images/icon-copy_large.png)} i.icon.icon-A{background-image:url(../images/icon-A.png)} i.icon.icon-B{background-image:url(../images/icon-B.png)} i.icon.icon-C{background-image:url(../images/icon-C.png)} i.icon.icon-D{background-image:url(../images/icon-D.png)} i.icon.icon-E{background-image:url(../images/icon-E.png)} i.icon.icon-F{background-image:url(../images/icon-F.png)} i.icon.icon-G{background-image:url(../images/icon-G.png)} i.icon.icon-H{background-image:url(../images/icon-H.png)} i.icon.icon-I{background-image:url(../images/icon-I.png)} i.icon.icon-J{background-image:url(../images/icon-J.png)} i.icon.icon-K{background-image:url(../images/icon-K.png)} i.icon.icon-L{background-image:url(../images/icon-L.png)} i.icon.icon-M{background-image:url(../images/icon-M.png)} i.icon.icon-N{background-image:url(../images/icon-N.png)} i.icon.icon-O{background-image:url(../images/icon-O.png)} i.icon.icon-P{background-image:url(../images/icon-P.png)} i.icon.icon-Q{background-image:url(../images/icon-Q.png)} i.icon.icon-R{background-image:url(../images/icon-R.png)} i.icon.icon-S{background-image:url(../images/icon-S.png)} i.icon.icon-T{background-image:url(../images/icon-T.png)} i.icon.icon-U{background-image:url(../images/icon-U.png)} i.icon.icon-V{background-image:url(../images/icon-V.png)} i.icon.icon-W{background-image:url(../images/icon-W.png)} i.icon.icon-X{background-image:url(../images/icon-X.png)} i.icon.icon-Y{background-image:url(../images/icon-Y.png)} i.icon.icon-Z{background-image:url(../images/icon-Z.png)} .water_loading{ background-color:#F64747; position:relative; overflow:hidden; } .water_loading:before{ content:''; position:absolute; width:900px; height:900px; top:-200px; border-radius:45%; background:#efeff4; animation: wave 5s linear infinite; } @keyframes wave{ 0%{ transform:rotate(0) } 100%{ transform:rotate(360deg) } } .css-loading_micro,.css-loading_mini,.css-loading{ text-align:center; color:#F64747; font-weight:bold;} .css-loading_mini{ font-size:1.5em; height:1.0em; margin:40px auto; } .css-loading{ font-size:2.5em; height:1.0em; margin:200px auto; } .css-loading_micro span,.css-loading_mini span,.css-loading span{ position:relative; display:inline-block; text-transform:uppercase; animation: flip 2s infinite; animation-delay: calc(.2s*var(--i)); } @keyframes flip{ 0%,80%{ transform:rotateY(360deg) } } .css-img-boder{ margin-top:1.5em; border-radius:5px; } div[class*="col-"]{ background:#fff; text-align:center; color:#000; border:1px solid #ddd; padding:5px; } .row{ margin-bottom:15px; } .cssload-loader{ width:124px; height:124px; line-height:124px; margin:41px auto; position:relative; box-sizing:border-box; text-align:center; z-index:0; text-transform:uppercase; } .cssload-loader:before,.cssload-loader:after{ opacity:0; box-sizing:border-box; content:"\0020"; position:absolute; top:0; left:0; width:100%; height:100%; border-radius:82px; border:4px solid rgb(255,0,0); box-shadow:0 0 41px rgb(255,0,0), inset 0 0 41px rgb(255,0,0); } .cssload-loader:after{ z-index:1; animation: cssload-gogoloader 2.3s infinite 1.15s; } .cssload-loader:before{ z-index:2; animation: cssload-gogoloader 2.3s infinite; } @keyframes cssload-gogoloader{ 0%{ transform:scale(0); opacity:0 } 50%{ opacity:1 } 100%{ transform:scale(1); opacity:0 } } .list-block,.list-block ul{ background:#fff !important; } .list-block:before,.list-block:after{ background:transparent !important; } .list-block ul:before,.list-block ul:after{ display:none !important; } .list-block{ border:1px solid var(--line); border-top:0 !important; border-bottom:0 !important; border-radius:var(--card-r); box-shadow:0 8px 24px rgba(0,0,0,.08); overflow:hidden; box-sizing:border-box; margin-left: var(--page-x) !important; margin-right: var(--page-x) !important; margin-top:16px; max-width: calc(100% - (var(--page-x) * 2)); } .list-block > ul{ padding:8px; } .list-block .item-inner{ position:relative; } .list-block .item-inner::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--line); } .list-block .item-content{ padding-left:8px; } .list-block .item-media{ margin-right:8px; } .page-content{ padding-left:0; padding-right:0; } .page-content .card,.page-content .list-block{ margin-left:var(--gap-x) !important; margin-right:var(--gap-x) !important; margin-bottom:0 !important; } .page-content > :first-child{ margin-top:var(--gap-y) !important; } .page-content .card:not(:first-child),.page-content .list-block:not(:first-child){ margin-top:var(--gap-y) !important; } .page-content .card:last-child,.page-content .list-block:last-child{ margin-bottom:var(--gap-y) !important; } :root{ --toolbar-h:56px; } .page-content{ padding-bottom: calc(var(--gap-y) + var(--toolbar-h) + env(safe-area-inset-bottom,0px)) !important; } #page-content_load,#popup-fake_loader{ margin-top:15em !important; } .page.no-navbar .page-content{ padding-top: calc(var(--gap-y) + env(safe-area-inset-top,0)) !important; } .list-block > ul{ padding-left: var(--list-inner-x) !important; padding-right: var(--list-inner-x) !important; } .list-block .item-content{ padding-left: var(--settings-pad-x,14px) !important; display:flex; align-items:center; } .list-block .item-media + .item-inner{ margin-left:14px !important; } .media-list .item-media + .item-inner{ margin-left:10px !important; } .list-block .item-inner{ padding-left:0 !important; } .list-block .item-media{ margin-right:0 !important; width:auto !important; min-width:0 !important; } .list-block .item-media i.icon{ display:block; width:var(--icon); height:var(--icon); min-width:var(--icon); background-size:contain; background-repeat:no-repeat; background-position:center; } #track_page .list-block .item-content{ display:flex; } #track_page .list-block .item-content > .item-inner:nth-child(1 of .item-inner):nth-last-child(2 of .item-inner){ flex:0 0 30%; max-width:30%; min-width:0; } #track_page .list-block .item-content > .item-inner:nth-child(2 of .item-inner):nth-last-child(1 of .item-inner){ flex:0 0 70%; max-width:70%; min-width:0; margin-left:8px; } #track_page #track_list .list-block li > .item-content{ display:flex; align-items:center; gap:0; } #track_page #track_list .list-block li > .item-content > .item-media{ margin-right:10px !important; } #track_page #track_list .list-block li > .item-content > .item-inner:first-child{ flex:0 0 auto; min-width:max-content; } #track_page #track_list .list-block li > .item-content > .item-inner + .item-inner{ flex:1 1 auto; min-width:0; margin-left:12px; } #track_page #track_list .list-block li > .item-content > .item-media + .item-inner{ margin-left:0 !important; } #track_page .list-block > ul > li > .item-content > .item-inner:only-child{ flex:1 1 100%; width:100% !important; max-width:100%; min-width:0 !important; white-space:normal !important; overflow-wrap:anywhere; word-break:break-word; } #track_page .list-block li > .item-content > .item-inner::after, #track_page .list-block li > a > .item-content > .item-inner::after{ display:none !important; } #track_page .list-block li > .item-content, #track_page .list-block li > a > .item-content{ position:relative; } #track_page .list-block li:not(:last-child) > .item-content::after, #track_page .list-block li:not(:last-child) > a > .item-content::after{ content:""; position:absolute; left: var(--settings-pad-x,14px); right: var(--settings-pad-x,14px); bottom:0; height:1px; background:var(--line); } #track_page .list-block li:has(> .item-content > .item-media) > .item-content::after, #track_page .list-block li:has(> a > .item-content > .item-media) > a > .item-content::after{ left: calc(var(--settings-pad-x,14px) + var(--icon) + 10px); } #track_page #track_list .list-block li > .item-content > .item-inner:nth-child(1 of .item-inner):nth-last-child(2 of .item-inner){ flex:0 0 auto !important; min-width:max-content !important; align-self:flex-start !important; } #track_page #track_list .list-block li > .item-content > .item-inner:nth-child(2 of .item-inner):nth-last-child(1 of .item-inner){ flex:1 1 auto !important; min-width:0 !important; margin-left:var(--hist-col-gap) !important; align-self:flex-start !important; } #track_page #track_list .list-block li > .item-content > .item-inner:nth-child(1 of .item-inner):nth-last-child(2 of .item-inner) .item-input{ white-space:nowrap !important; line-height:1.45 !important; } #track_page #track_list .list-block li > .item-content > .item-inner:nth-child(2 of .item-inner):nth-last-child(1 of .item-inner) .item-input{ line-height:1.45 !important; overflow-wrap:anywhere; word-break:break-word; } #track_page #track_list .list-block li > .item-content:has(> .item-inner + .item-inner){ align-items:flex-start !important; } #track_page #track_list .list-block li > .item-content:has(> .item-media + .item-inner:only-child){ align-items:flex-start !important; } #track_page #track_list .list-block li > .item-content:has(> .item-media + .item-inner:only-child) > .item-media > i.icon{ position:relative !important; top:-2px !important; } #track_page #track_list .list-block > ul > li > .item-content > .item-inner + .item-inner > .item-input{ padding-top:var(--track-right-vpad) !important; padding-bottom:var(--track-right-vpad) !important; margin-top:0 !important; margin-bottom:0 !important; line-height:1.45 !important; } #track_page #track_list .list-block > ul > li > .item-content > .item-inner:only-child > .item-input{ padding-top:var(--trk-text-vpad) !important; padding-bottom:var(--trk-text-vpad) !important; line-height:1.45 !important; min-width:0 !important; overflow-wrap:anywhere; } #track_page #track_list .list-block > ul > li > .item-content > .item-inner:only-child > .item-input#track_save_button{ padding-top:0 !important; padding-bottom:0 !important; } @supports(selector(:has(*))){ #track_page #track_list .list-block > ul > li > .item-content :has(> .item-inner:only-child > .item-input:not(#track_save_button)){ padding-top:var(--trk-text-vpad) !important; padding-bottom:var(--trk-text-vpad) !important; align-items:flex-start !important; } #track_page #track_list .list-block > ul > li > .item-content :has(> .item-inner:only-child > .item-input:not(#track_save_button)) > .item-inner:only-child > .item-input{ padding-top:0 !important; padding-bottom:0 !important; } } .page-content .card > .card-header{ border-radius: var(--card-r) var(--card-r) 0 0 !important; background:#fff; padding:10px 14px; border-bottom:1px solid var(--line); } .page-content .card > .card-content{ border-radius: 0 0 var(--card-r) var(--card-r) !important; background:#fff; } .page-content .card > .card-content > .card-content-inner{ padding:12px 14px; } /* ===== Center the loader safely on mobile/desktop ===== */ .css-loading{ position: fixed !important; /* ยึดกับ viewport ตรง ๆ */ top: 20%; left: 50%; transform: translate(-50%, -50%); /* จัดกลางแท้ ๆ */ z-index: 9999; /* ให้อยู่เหนือคอนเทนต์อื่น */ margin: 0 !important; /* กัน margin เดิมพาเลื่อนขึ้น */ max-width: 90vw; /* กันหลุดจอกรณีข้อความยาว */ pointer-events: none; /* ไม่บังการทัชปุ่มอื่น (ถ้าโปร่ง) */ } /* ถ้ามี wrapper ที่คุมความสูงไว้ — บังคับให้ viewport รองรับเต็ม */ html, body{ height: 100%; } /* ให้ track_maps / show_barcode มุมมน + ตัดมุมลูกให้ตาม */ #track_maps, #show_barcode { border-radius: 14px; overflow: hidden; /* สำคัญ: ตัดให้ลูกไม่ล้นมุม */ } /* ถ้า element ข้างในเป็น หรือ