/* Mobile/tablet presentation follows smartback-rn. Desktop remains unchanged. */
.app-order-card { display:none; }

.app-home-banner { display:none!important; }
.app-home-new-header { display:flex!important; justify-content:space-between!important; align-items:center!important; padding:calc(16px + env(safe-area-inset-top)) 16px 8px!important; background:transparent!important; width:100%!important; box-sizing:border-box!important; }
.app-home-header-left { display:flex!important; flex-direction:column!important; gap:4px!important; }
.app-home-brand-row { display:flex!important; align-items:center!important; gap:8px!important; }
.app-home-logo-img { width:24px!important; height:24px!important; max-width:24px!important; max-height:24px!important; border-radius:50%!important; object-fit:cover!important; box-shadow:0 1px 4px rgba(0,0,0,0.1)!important; display:inline-block!important; }
.app-home-brand-text { font-size:18px!important; font-weight:800!important; color:#087653!important; letter-spacing:-0.3px!important; line-height:1!important; }
.app-home-greeting { font-size:19px!important; font-weight:700!important; color:#111827!important; line-height:1.25!important; margin:0!important; }
.app-home-header-right { display:flex!important; align-items:center!important; }
.app-home-wallet-pill { display:flex!important; align-items:center!important; gap:6px!important; background:#ffffff!important; border-radius:999px!important; padding:7px 14px!important; box-shadow:0 2px 10px rgba(0,0,0,0.06)!important; border:1px solid #e2e8f0!important; cursor:pointer!important; text-decoration:none!important; }
.app-home-wallet-pill:active { transform:scale(0.97)!important; }
.wallet-icon-svg { flex-shrink:0!important; }
.wallet-bal-text { font-size:14.5px!important; font-weight:700!important; color:#0f172a!important; white-space:nowrap!important; }
.app-home-login-pill { background:#087653!important; color:#fff!important; border:none!important; border-radius:999px!important; padding:7px 15px!important; font-size:13px!important; font-weight:600!important; cursor:pointer!important; box-shadow:0 2px 8px rgba(8,118,83,0.25)!important; }

/* Banner Slider Container */
.app-home-banner-container { margin:8px auto 0!important; width:calc(100% - 32px)!important; max-width:400px!important; aspect-ratio:400/200!important; border-radius:16px!important; overflow:hidden!important; position:relative!important; box-shadow:0 4px 16px rgba(0,0,0,0.07)!important; background:#007A53!important; touch-action:pan-y!important; user-select:none!important; }
.app-home-slider-wrap { display:flex!important; width:100%!important; height:100%!important; transition:transform 0.4s ease-in-out!important; }
.banner-slide-item { flex:0 0 100%!important; width:100%!important; height:100%!important; position:relative!important; cursor:pointer!important; text-decoration:none!important; display:block!important; }
.banner-slide-item img { width:100%!important; height:100%!important; object-fit:fill!important; display:block!important; }
.banner-dots-indicators { position:absolute!important; bottom:8px!important; left:50%!important; transform:translateX(-50%)!important; display:flex!important; gap:5px!important; z-index:5!important; pointer-events:none!important; }
.banner-dot { width:6px!important; height:6px!important; border-radius:3px!important; background:rgba(255,255,255,0.45)!important; transition:all 0.25s ease!important; cursor:pointer!important; pointer-events:auto!important; }
.banner-dot.active { width:18px!important; background:#ffffff!important; box-shadow:0 1px 3px rgba(0,0,0,0.3)!important; }

/* Fallback Banner */
.fallback-banner-inner { padding:20px 24px!important; height:100%!important; display:flex!important; flex-direction:column!important; justify-content:center!important; color:#fff!important; box-sizing:border-box!important; }
.fb-tag { font-size:11px!important; font-weight:700!important; letter-spacing:0.5px!important; color:#a7f3d0!important; margin-bottom:4px!important; }
.fb-title { font-size:17px!important; font-weight:800!important; color:#ffffff!important; margin-bottom:4px!important; letter-spacing:-0.2px!important; }
.fb-desc { font-size:12px!important; color:rgba(255,255,255,0.85)!important; font-weight:500!important; }

@media (max-width:1024px) {
  .modern-hero { display:none!important; }
  body { --primary:#026E4D; --bg:#f2f7f5; background:#f2f7f5; margin:0; padding:0; }
  .mobile-layout { width:100%; max-width:900px; min-height:100dvh; padding-bottom:calc(80px + env(safe-area-inset-bottom))!important; }
  
  .mobile-layout *, .mob-drawer * { box-sizing:border-box; }
  .mobile-layout input,.mobile-layout textarea,.mobile-layout select { min-width:0; max-width:100%; }
  .mobile-layout img { max-width:100%; }
  .mobile-layout h1,.mobile-layout h2,.mobile-layout h3 { overflow-wrap:break-word; }
  .mobile-green-header,.shop-mob-header,.mobile-profile-header,.mob-drawer-header,
  body > header[style*="header-green"],
  .mobile-app-profile > div:first-child { background:#026E4D!important; background-image:none!important; }
  .mobile-green-header::before,.shop-mob-header::before,.mobile-profile-header::before { display:none!important; }
  .mobile-green-header,.shop-mob-header,.mobile-profile-header { padding-top:calc(32px + env(safe-area-inset-top))!important; }
  .mobile-app-profile > div:first-child { padding-top:calc(18px + env(safe-area-inset-top))!important; padding-bottom:38px!important; }
  .mob-app-bottom-nav,.mobile-bottom-nav,.bottom-nav {
    position:fixed!important; left:0!important; right:0!important; bottom:0!important; 
    display:flex!important; flex-direction:row!important; align-items:center!important; justify-content:space-around!important;
    border-radius:0!important; border-top:1px solid #e6ede9; box-shadow:0 -1px 4px #00000006!important;
    padding:10px 4px calc(10px + env(safe-area-inset-bottom))!important;
    z-index:1000!important; background:#fff!important;
  }
  .mob-drawer-bottom-nav, .mob-auto-bottom-nav { z-index:10002!important; }
  .mob-tx-filter-btn { background: #fff; color: #555; border: 1px solid #e4ebe6; }
  .mob-tx-filter-btn.active { background: #026e4d !important; color: #fff !important; border-color: #026e4d !important; }
  .mob-app-bottom-nav > div,.mobile-bottom-nav > div,.bottom-nav > div { display:flex!important; flex:1 1 0!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; min-width:0; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="file"]):not([type="range"]),
  textarea, select { font-size:16px!important; }
  .mob-app-nav-item { color:#80959e; font-size:10px; font-weight:500; gap:4px; min-height:44px; }
  .mob-app-nav-item.active,.mob-app-nav-item.active .sb-icon { color:#026E4D!important; }
  .mob-app-nav-icon { font-size:24px; }
  .mob-app-bottom-nav svg { stroke-width:1.6; }
  .mob-app-bottom-nav > div { min-height:44px; justify-content:center; }
  .mob-drawer-bg,.mob-drawer,.shop-tab-content,.mobile-layout .view { transition:none!important; animation:none!important; }
  .shop-tab-content:not(.active) { display: none !important; }
  .mob-drawer-body { padding:16px; padding-bottom:calc(90px + env(safe-area-inset-bottom)); }
  .mob-drawer-header { padding-top:calc(24px + env(safe-area-inset-top))!important; min-height:86px; }
  body[data-view="home"] { overflow-x:hidden; }
  body[data-view="home"] .mobile-layout { overflow:visible!important; }
  .app-home-banner { display:none!important; }
  .app-home-new-header { display:flex; justify-content:space-between; align-items:center; padding:calc(16px + env(safe-area-inset-top)) 16px 8px; background:transparent; }
  .app-home-header-left { display:flex; flex-direction:column; gap:4px; }
  .app-home-brand-row { display:flex; align-items:center; gap:8px; }
  .app-home-logo-img { width:24px; height:24px; border-radius:50%; object-fit:cover; box-shadow:0 1px 4px rgba(0,0,0,0.1); }
  .app-home-brand-text { font-size:18px; font-weight:800; color:#087653; letter-spacing:-0.3px; }
  .app-home-greeting { font-size:19px; font-weight:700; color:#111827; line-height:1.25; }
  .app-home-header-right { display:flex; align-items:center; }
  .app-home-wallet-pill { display:flex; align-items:center; gap:6px; background:#ffffff; border-radius:999px; padding:7px 14px; box-shadow:0 2px 10px rgba(0,0,0,0.06); border:1px solid #e2e8f0; cursor:pointer; transition:transform 0.15s ease; }
  .app-home-wallet-pill:active { transform:scale(0.97); }
  .wallet-icon-svg { flex-shrink:0; }
  .wallet-bal-text { font-size:14.5px; font-weight:700; color:#0f172a; white-space:nowrap; }
  .app-home-login-pill { background:#087653; color:#fff; border:none; border-radius:999px; padding:7px 15px; font-size:13px; font-weight:600; cursor:pointer; box-shadow:0 2px 8px rgba(8,118,83,0.25); }

  /* Banner Slider Container */
  .app-home-banner-container { margin:8px auto 0!important; width:calc(100% - 32px)!important; max-width:400px!important; aspect-ratio:400/200!important; border-radius:16px!important; overflow:hidden!important; position:relative!important; box-shadow:0 4px 16px rgba(0,0,0,0.07)!important; background:#007A53!important; touch-action:pan-y!important; user-select:none!important; }
  .app-home-slider-wrap { display:flex; width:100%; height:100%; transition:transform 0.4s ease-in-out; }
  .banner-slide-item { flex:0 0 100%!important; width:100%!important; height:100%!important; position:relative!important; cursor:pointer!important; text-decoration:none!important; display:block!important; }
  .banner-slide-item img { width:100%!important; height:100%!important; object-fit:fill!important; display:block!important; }
  .banner-dots-indicators { position:absolute; bottom:8px; left:50%; transform:translateX(-50%); display:flex; gap:5px; z-index:5; pointer-events:none; }
  .banner-dot { width:6px; height:6px; border-radius:3px; background:rgba(255,255,255,0.45); transition:all 0.25s ease; }
  .banner-dot.active { width:18px; background:#ffffff; box-shadow:0 1px 3px rgba(0,0,0,0.3); }

  /* Fallback Banner */
  .fallback-banner-inner { padding:20px 24px; height:100%; display:flex; flex-direction:column; justify-content:center; color:#fff; box-sizing:border-box; }
  .fb-tag { font-size:11px; font-weight:700; letter-spacing:0.5px; color:#a7f3d0; margin-bottom:4px; }
  .fb-title { font-size:17px; font-weight:800; color:#ffffff; margin-bottom:4px; letter-spacing:-0.2px; }
  .fb-desc { font-size:12px; color:rgba(255,255,255,0.85); font-weight:500; }
  .app-quick-tile { width:48px!important; height:48px!important; border-radius:13px!important; }
  .app-quick-icon { width:48px!important; height:48px!important; transform:none!important; }
  .mcard .tx-time { margin-top:6px; color:#8b9892; font-size:10px; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .mcard .desc, .mcard .sub { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .mcard .desc { font-size:12px; }
  .mcard .sub { font-size:11px; line-height:1.4; }
  .app-guide { display:flex; position:relative; background:#f0f8f4; border-radius:14px; padding:16px 0; margin-bottom:18px; }
  .app-guide-step { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:8px; z-index:1; font-size:12px; font-weight:600; color:#829b8f; }
  .step-0 > span { animation:guide-label-first 4.725s linear infinite; }
  .step-1 > span { animation:guide-label-second 4.725s linear infinite; }
  .step-2 > span { animation:guide-label-third 4.725s linear infinite; }
  .app-guide-icon { width:52px; height:52px; border-radius:17px; background:#e1efe7; display:grid; place-items:center; }
  .app-guide-icon img { width:25px; height:25px; object-fit:contain; opacity:.55; }
  .app-guide-track { position:absolute; top:41px; height:3px; left:16.6667%; right:16.6667%; background:#d6e8df; overflow:hidden; }
  .app-guide-track i { display:block; height:100%; width:100%; background:#026E4D; transform:scaleX(0); transform-origin:left; animation:guide-line 4.725s linear infinite; }
  .step-0 .app-guide-icon { animation:guide-first 4.725s linear infinite; }
  .step-1 .app-guide-icon { animation:guide-second 4.725s linear infinite; }
  .step-2 .app-guide-icon { animation:guide-third 4.725s linear infinite; }
  .app-guide-step img { filter:brightness(0) saturate(100%) invert(59%) sepia(17%) saturate(568%) hue-rotate(99deg); }
  .step-0 img { animation:guide-icon-first 4.725s linear infinite; }
  .step-1 img { animation:guide-icon-second 4.725s linear infinite; }
  .step-2 img { animation:guide-icon-third 4.725s linear infinite; }
  body[data-view="wallet"] { background:#edf3ef; }
  body[data-view="wallet"] .vi-card { background:#0e5b3c url('/assets/wallet-bg.png?v=8') center/100% 100% no-repeat; border-radius:18px; padding:20px; min-height:196px; margin:16px 24px 16px; box-shadow:0 6px 16px rgba(14,91,60,.16); }
  .vi-balance-amount.vi-balance-amount { font-size:28px; line-height:1.2; white-space:nowrap; }
  body[data-view="wallet"] .vi-balance-amount span { font-size:22px; }
  body[data-view="wallet"] .app-wallet-totals { margin-top:1px; }
  body[data-view="wallet"] .vi-row { font-size:13px; line-height:1.5; margin-bottom:6px; color:rgba(255,255,255,.82); }
  body[data-view="wallet"] .vi-actions { gap:9px; margin:0 24px 16px; padding:0; }
  body[data-view="wallet"] .vi-actions .btn { min-height:44px; height:44px; padding:9px 12px!important; font-size:14px!important; }
  body[data-view="wallet"] .vi-actions .btn:first-child { background:#009f70; }
  body[data-view="wallet"] .vi-btn-white { color:#161616; }
  body[data-view="wallet"] .vi-message { text-align:left; padding:0 22px; font-size:12px; line-height:1.5; color:#438c78; }
  .vi-header { font-size:20px; padding:0!important; height:64px!important; min-height:64px!important; max-height:64px!important; display:flex!important; align-items:center!important; justify-content:center!important; position:sticky!important; top:0!important; z-index:100!important; background:#026E4D!important; background-image:none!important; color:#ffffff!important; border-bottom:none!important; box-shadow:none!important; }
  .vi-header a, .vi-header button, .vi-header .vi-back-btn { position:absolute!important; left:14px!important; top:0!important; bottom:0!important; width:44px!important; height:64px!important; display:flex!important; align-items:center!important; justify-content:center!important; font-size:24px!important; font-weight:400!important; color:#fff!important; text-decoration:none!important; cursor:pointer!important; z-index:10!important; margin:0!important; padding:0!important; }
  .vi-header > span, .vi-header > h1 { display:flex!important; align-items:center!important; justify-content:center!important; height:64px!important; width:100%!important; text-align:center!important; font-size:20px!important; font-weight:750!important; color:#ffffff!important; margin:0!important; padding:0 60px!important; box-sizing:border-box!important; }
  .vi-balance-amount { font-size:32px; }
  .app-wallet-totals { margin-top:24px; }
  .vi-row { text-transform:none; font-size:13px; }
  .vi-actions .btn { border-radius:30px; min-height:52px; }
  .vi-message { font-size:12px; color:#116b43; }
  .app-order-desktop { display:none; }
  .app-order-card { display:block; margin-bottom:12px; background:#fff; border:1px solid #eef2ef; border-radius:14px; padding:12px 14px; box-shadow:0 2px 8px rgba(0,0,0,0.03); }
  .app-order-card.compact .app-order-top { display:flex; align-items:center; justify-content:space-between; gap:8px; padding-bottom:8px; border-bottom:none; font-size:12px; }
  .app-order-id-wrap { display:inline-flex; align-items:center; gap:6px; color:#6b7280; font-size:12px; font-weight:400; }
  .app-order-copy-btn { border:none; background:transparent; padding:0; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:#888; }
  .app-order-copy-btn:hover { color:#111; }
  .app-order-badge { display:inline-flex; align-items:center; justify-content:center; padding:3px 10px; border-radius:12px; font-size:11px; font-weight:700; white-space:nowrap; }
  .app-order-badge.done { background:#e2f2e9; color:#1a824e; }
  .app-order-badge.pending { background:#fbf0d8; color:#b07817; }
  .app-order-badge.cancel { background:#fce8e6; color:#d93025; }
  .app-order-main { display:flex; gap:12px; align-items:flex-start; margin-top:2px; }
  .app-order-thumb { width:68px; height:68px; border-radius:10px; object-fit:cover; flex-shrink:0; background:#f5f7f6; }
  .app-order-details { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
  .app-order-title { font-size:13px; font-weight:600; color:#111827; margin:0 0 2px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .app-order-platform { display:inline-block; font-size:10px; font-weight:700; color:#fff; padding:1px 6px; border-radius:6px; margin-right:4px; vertical-align:middle; line-height:1.4; }
  .app-order-platform.platform-shopee { background:#ee4d2d; }
  .app-order-platform.platform-tiktok { background:#111827; }
  .app-order-platform.platform-lazada { background:#0f146d; }
  .app-order-row { display:flex; justify-content:space-between; align-items:center; font-size:12px; line-height:1.4; }
  .app-order-row-label { color:#6b7280; font-size:12px; }
  .app-order-row-val { color:#374151; font-size:12.5px; font-weight:500; }
  .app-order-row.refund-row { margin-top:1px; }
  .refund-val { font-size:13px; font-weight:700; }
  .refund-val.done { color:#1a824e; }
  .refund-val.pending { color:#d97706; }
  .refund-val.cancel { color:#dc2626; }
  #mobNotifList .notif-item { margin-bottom:0!important; border-radius:12px!important; box-shadow:0 1px 3px #0000000a!important; }
  body[data-view="notifications"] .mobile-layout > .mobile-green-header { padding:calc(12px + max(env(safe-area-inset-top), 44px)) 16px 12px!important; }
  body[data-view="notifications"] .mobile-layout > .mobile-green-header .app-notification-heading { position:relative!important; display:flex!important; align-items:center!important; justify-content:center!important;  min-height:40px; text-align:center!important; }
  body[data-view="notifications"] .mobile-layout > .mobile-green-header .app-notification-heading h2 { flex:none!important; width:auto!important; margin:0!important; white-space:nowrap!important; }
  body[data-view="notifications"] .mobile-layout > .mobile-green-header .app-notification-heading button { position:absolute!important;  right:0!important;  white-space:nowrap!important; flex-shrink:0; color:#fff; background:#ffffff33; border:0; border-radius:6px; padding:7px 9px; font-size:12px; line-height:1.2; font-weight:600; cursor:pointer; }
  .notif-tabs { border-radius:30px!important; }
  .notif-tab { border-radius:26px!important; }
  #mobOrderTabsSub { display:flex; gap:4px; justify-content:space-between; }
  #mobOrderTabsSub .tab { flex:1; white-space:nowrap; padding:10px 4px; font-size:12px; border-radius:20px; }
  .shop-bal-pill { display:none!important; }
  .shop-mob-header { border-radius:0 0 30px 30px; }
  body[data-view="home"] > .public-footer { display:none; }
}

body[data-view="products"] .create-desktop-side { min-width:0; }
body[data-view="products"] .how-section-label { margin:0 0 8px 10px; color:#9aa8a1; font-size:11px; line-height:1.4; }
body[data-view="products"] .how-to-card {
  padding:18px 16px!important;
  border:1px solid #e3eae6!important;
  border-radius:16px!important;
  background:#fff!important;
  box-shadow:0 5px 14px rgba(20,47,36,.08)!important;
}
body[data-view="products"] .how-to-card h3 {
  width:max-content;
  max-width:100%;
  margin:0 auto 2px!important;
  color:#087653!important;
  font-size:16px!important;
  line-height:1.35;
  font-weight:800!important;
  text-align:center;
  text-decoration-line:underline;
  text-decoration-color:#168362;
  text-decoration-thickness:2px;
  text-underline-offset:4px;
}
body[data-view="products"] .how-to-card .how-subtitle { margin:0 0 10px; color:#4f5b55; font-size:10px; font-style:italic; text-align:center; }
body[data-view="products"] .how-condition-list { display:grid; gap:9px; margin:0; padding:0; list-style:none; }
body[data-view="products"] .how-condition-list li { display:flex; align-items:center; gap:10px; min-width:0; padding:8px 9px; border-radius:11px; background:#edf3ef; }
body[data-view="products"] .how-condition-list li > span { display:grid; flex:0 0 18px; width:18px; height:18px; place-items:center; border-radius:50%; background:#087653; color:#fff; font-size:10px; font-weight:800; }
body[data-view="products"] .how-condition-list p { min-width:0; margin:0; color:#28342e; font-size:11px; line-height:1.3; }

@media (max-width:1024px) {
  body[data-view="products"] .how-to-card { padding:17px 15px!important; }
  body[data-view="products"] .how-to-card h3 { font-size:15px!important; }
  body[data-view="products"] .how-condition-list { gap:9px; }
  body[data-view="products"] .how-condition-list p { font-size:11px; }
}
@media (min-width:600px) and (max-width:1024px) {
  .mobile-layout { width:min(100%,900px); }
  .mobile-layout > #mobMainContent > div:last-child > div:last-child { padding-left:24px!important; padding-right:24px!important; }
  .mob-app-bottom-nav,.mobile-bottom-nav,.bottom-nav { left:50%!important; right:auto!important; width:min(100%,900px)!important; transform:translateX(-50%); }
  :is(#mobOrdersCards,#mobDrawerOrdersCards) { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
  :is(#mobOrdersCards,#mobDrawerOrdersCards) .app-order-card { margin:0; }
  :is(#mobOrdersCards,#mobDrawerOrdersCards) > div:not(.app-order-desktop) { grid-column:1/-1; }
  .app-guide-icon { width:56px; height:56px; }
  .app-guide-track { top:43px; }
}
@keyframes guide-line { 0%,9.5%{transform:scaleX(0);opacity:1} 73%,93.6%{transform:scaleX(1);opacity:1} 100%{transform:scaleX(1);opacity:0} }
@keyframes guide-first { 0%,7%{background:#e1efe7;transform:scale(1)} 10.8%{background:#026E4D;transform:scale(1.16)} 15%{transform:scale(.98)} 17%,93.6%{background:#026E4D;transform:scale(1)} 100%{background:#e1efe7} }
@keyframes guide-second { 0%,38.7%{background:#e1efe7;transform:scale(1)} 42.5%{background:#026E4D;transform:scale(1.16)} 46.7%{transform:scale(.98)} 49%,93.6%{background:#026E4D;transform:scale(1)} 100%{background:#e1efe7} }
@keyframes guide-third { 0%,70.5%{background:#e1efe7;transform:scale(1)} 74.3%{background:#026E4D;transform:scale(1.16)} 78.4%{transform:scale(.98)} 80.6%,93.6%{background:#026E4D;transform:scale(1)} 100%{background:#e1efe7} }
@keyframes guide-icon-first { 0%,7%,100%{filter:brightness(.6);opacity:.55} 10.8%,93.6%{filter:brightness(1);opacity:1} }
@keyframes guide-icon-second { 0%,38.7%,100%{filter:brightness(.6);opacity:.55} 42.5%,93.6%{filter:brightness(1);opacity:1} }
@keyframes guide-icon-third { 0%,70.5%,100%{filter:brightness(.6);opacity:.55} 74.3%,93.6%{filter:brightness(1);opacity:1} }
@keyframes guide-label-first { 0%,7%,100%{color:#829b8f} 10.8%,93.6%{color:#026E4D} }
@keyframes guide-label-second { 0%,38.7%,100%{color:#829b8f} 42.5%,93.6%{color:#026E4D} }
@keyframes guide-label-third { 0%,70.5%,100%{color:#829b8f} 74.3%,93.6%{color:#026E4D} }

/* Explicitly requested continuous guide playback, including device reduced-motion mode. */
.app-guide-details > summary { list-style:none; cursor:pointer; }
.app-guide-details > summary::-webkit-details-marker { display:none; }
.app-guide-details > summary:focus-visible { outline:2px solid #026E4D; outline-offset:5px; border-radius:8px; }
.app-guide-toggle { display:flex; align-items:center; justify-content:center; gap:6px; text-align:center; font-size:12px; font-weight:600; color:#026E4D; margin:-6px 0 0; }
.app-guide-chevron { flex-shrink:0; transition:transform .18s ease; }
.app-guide-details[open] .app-guide-toggle { margin-bottom:16px; }

.app-guide-label-close { display:none; }
.app-guide-details[open] .app-guide-label-open { display:none; }
.app-guide-details[open] .app-guide-label-close { display:inline; }
.app-guide-details[open] .app-guide-chevron { transform:rotate(180deg); }
.loyalty-page { max-width:620px; margin:0 auto; color:#111; }
.loyalty-greeting { text-align:center; font-size:14px; line-height:1.4; margin:0 0 12px; }
.loyalty-card { background-color:#026E4D; background-size:cover; background-position:center; border:2px solid #16b8ed; border-radius:16px; padding:20px; color:white; min-height:180px; }
.loyalty-brand { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700; margin-bottom:28px; }
.loyalty-brand img { width:28px; height:28px; padding:3px; background:white; border-radius:5px; }
.loyalty-card h2 { text-transform:uppercase; font-size:28px; margin:0 0 6px; color:white; }
.loyalty-card p { margin:0; font-size:15px; }
.loyalty-progress { padding:12px 16px; margin:8px 0; background:white; border-radius:12px; font-size:12px; }
.loyalty-progress p { margin:0 0 6px; }
.loyalty-progress > div { display:flex; justify-content:space-between; gap:12px; line-height:1.6; }
.loyalty-progress b { color:#e00000; font-weight:500; }
.loyalty-benefits { padding:14px 12px; background:white; border-radius:12px; }
.loyalty-benefits h3 { margin:0 0 10px; text-align:center; font-size:17px; color:#111; }
.loyalty-benefits table { width:100%; border-collapse:collapse; font-size:15px; color:#777; }
.loyalty-benefits th { font-weight:400; }
.loyalty-benefits td,.loyalty-benefits th { padding:10px 4px; border-bottom:1px solid #e7ece9; text-align:left; }
.loyalty-benefits td:last-child,.loyalty-benefits th:last-child { text-align:right; }
.loyalty-benefits td:last-child { color:#026E4D; }
.loyalty-benefits p { font-size:10px; line-height:1.4; color:#35997e; text-align:center; margin:10px 0 4px; }

/* Update Shop Header to match App */
.shop-mob-header {
    background: #026e4d !important;
    padding: calc(40px + env(safe-area-inset-top)) 0 14px !important;
    border-bottom: none !important;
    border-radius: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}
.shop-mob-header .shop-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin: 0 !important;
    text-align: center !important;
}
.shop-mob-header .shop-eyebrow, 
.shop-mob-header .shop-subtitle,
.shop-mob-header .shop-bal-pill {
    display: none !important;
}

/* Update Shop Tabs to match App (như tab trạng thái hoàn tiền) */
.shop-tabs {
    margin: 16px 16px 20px !important;
    max-width: none !important;
    width: auto !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    box-shadow: none !important;
    position: relative !important;
    z-index: 10 !important;
    gap: 10px !important;
}
.shop-tab {
    flex: 1 1 0 !important;
    padding: 10px 14px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: #fff !important;
    border: 1px solid #dce5e0 !important;
    color: #666 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    min-width: 0 !important;
    display: flex !important;
    white-space: nowrap !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02) !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}
.shop-tab.active {
    background: #026E4D !important;
    color: #fff !important;
    border-color: #026E4D !important;
    box-shadow: 0 2px 8px rgba(2, 110, 77, 0.2) !important;
}
.shop-tab-icon {
    display: none !important;
}
.shop-tab span {
    font-weight: 700 !important;
    font-size: 14px !important;
}

/* --- ALL PAGE HEADERS GREEN (like challenges page) --- */
/* Except homepage (index.html) and account (taikhoan.html) which keep their own style */
.mobile-green-header, 
.mobile-profile-header, 
.mob-drawer-header,
body > header[style*="header-green"],
.mobile-app-profile > div:first-child {
    background: #026e4d !important;
    background-image: none !important;
    border-bottom: none !important;
    color: #fff !important;
    border-radius: 0 !important;
}

/* Force text and icons inside these headers to be white */
.mobile-green-header *, 
.mobile-profile-header *, 
.mob-drawer-header *,
body > header[style*="header-green"] *,
.mobile-app-profile > div:first-child * {
    color: #fff !important;
}

/* Specific fix for page titles inside these headers */
.mobile-green-header h1, .mobile-green-header h2, .mobile-green-header h3,
.mobile-profile-header h1, .mobile-profile-header h2, .mobile-profile-header h3,
.mob-drawer-header h1, .mob-drawer-header h2, .mob-drawer-header h3 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #fff !important;
}

/* Fix back buttons inside headers */
.mobile-green-header a, .mobile-green-header button,
.mobile-profile-header a, .mobile-profile-header button,
.mob-drawer-header a, .mob-drawer-header button {
    color: #fff !important;
}

/* Override the inline styles on the body > header tags using important */
body > header[style*="header-green"] {
    background: #026e4d !important;
    background-image: none !important;
    color: #fff !important;
}

/* Fix the FAQ page header (hoi-dap.html) */
.faq-page-head, .faq-mobile-header, .support-mobile-header, .detail-mobile-header {
    background: #026e4d !important;
    background-image: none !important;
    border-bottom: none !important;
    color: #fff !important;
    border-radius: 0 !important;
}
.faq-page-head *, .faq-mobile-header *, .support-mobile-header *, .detail-mobile-header * {
    color: #fff !important;
}

/* Additional overrides for Leaderboard and generic cards that are headers */
.rank-hero, .page-header {
    background: #026e4d !important;
    background-image: none !important;
    color: #fff !important;
    border-radius: 0 !important;
    border-bottom: none !important;
}
.rank-hero *, .page-header * {
    color: #fff !important;
}
.rank-hero h1, .rank-hero h2, .page-header h1, .page-header h2 {
    font-size: 20px !important;
    font-weight: 700 !important;
}

/* Override the Auth page background curves to green */
div[style*="border-bottom-left-radius: 24px"][style*="header-green.png"] {
    background: #026e4d !important;
    background-image: none !important;
    border-radius: 0 !important;
}

/* Also override any generic header-green divs if they are acting as headers (like in vi.html) */
div[style*="header-green.png"] {
    color: #fff !important;
}

div[style*="header-green.png"] h1, 
div[style*="header-green.png"] h2, 
div[style*="header-green.png"] h3,
div[style*="header-green.png"] span,
div[style*="header-green.png"] a {
    color: #fff !important;
}

/* Keep .balcard green! Re-override the color for balcard so it doesn't get messed up */
.balcard {
    background-color: #0e5b3c !important;
    color: #fff !important;
}
.balcard *, .balcard span, .balcard b, .balcard a {
    color: #fff !important;
}

/* --- RESTORE ACCOUNT PROFILE HEADER TO GREEN --- */
/* Match exactly the gradient of the home page banner (.app-home-banner) */
.mobile-app-profile > div:first-child {
    background: linear-gradient(106.71deg, #007A53 3.53%, #026E4D 15.74%, #036649 24.33%, #055A43 37.44%, #084C3D 51.45%, #0F2027 97.55%) !important;
    border-bottom: none !important;
    color: #fff !important;
    border-radius: 0 !important; /* Keep original shape */
}

/* Restore the text color inside this specific green header */
.mobile-app-profile > div:first-child * {
    color: #fff !important;
}

/* The settings gear icon has a background that should remain translucent */
.mobile-app-profile > div:first-child div[onclick] {
    background: rgba(255, 255, 255, 0.12) !important;
}

/* Re-override any specific badges */
#mobAppTierBadgeInline {
    color: #fff !important;
    background: rgba(255,255,255,0.15) !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
}

/* Keep the support chat as a real flex column in the responsive app view. */
@media (max-width:1024px) {
  body.is-app .support-mobile-layout {
    display:flex !important;
    position:fixed;
    inset:0;
    flex-direction:column;
    width:100%;
    max-width:none;
    height:100dvh;
    min-height:0;
    margin:0;
    padding:0 !important;
    overflow:hidden;
  }
  body.is-app .support-mobile-layout .support-messages {
    display:flex;
    flex:1 1 0%;
    min-height:0;
    overflow-x:hidden;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    touch-action:pan-y;
  }
  body.is-app .support-mobile-layout .support-composer {
    display:flex;
    flex:0 0 auto;
    position:relative;
    z-index:5;
  }
}

/* Consistent mobile page headers. Homepage and the account profile retain
   their own layouts; chat keeps its fixed composer and scrollable messages. */
@media (max-width:1024px) {
  body:not([data-view="wallet"]) > .gt-header {
    box-sizing:border-box!important;
    height:64px!important;
    min-height:64px!important;
    max-height:64px!important;
    margin-top:0!important;
    padding:0 56px!important;
    justify-content:center!important;
    text-align:center!important;
    background:#026E4D!important;
    color:#fff!important;
  }
  body:not([data-view="wallet"]) > .gt-header .gt-header-title {
    flex:1!important;
    margin:0!important;
    color:#fff!important;
    font-size:20px!important;
    font-weight:750!important;
    line-height:1.25!important;
  }
  body:not([data-view="wallet"]) > .gt-header .gt-back-btn {
    position:absolute!important;
    left:12px!important;
    
    
    color:#fff!important;
  }
  body:not([data-view="wallet"]) > .gt-content { margin-top:0!important; }

  body:not([data-view="home"]) .mobile-layout > .shop-mob-header,
  body:not([data-view="home"]) .mobile-layout > .mobile-green-header,
  body:not([data-view="home"]) .mobile-layout > .mobile-profile-header,
  body:not([data-view="home"]) .mob-drawer-header,
  body:not([data-view="home"]) .mobile-layout > .detail-mobile-header,
  body[data-view="order-detail"] .order-mobile-header,
  body:not([data-view="home"]) > header[style*="header-green"] {
    position:relative!important;
    inset:auto!important;
    z-index:1!important;
    box-sizing:border-box!important;
    height:64px!important;
    min-height:64px!important;
    max-height:64px!important;
    margin-top:0!important;
    padding:0 56px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    border-radius:0!important;
    background:#026E4D!important;
    background-image:none!important;
    color:#fff!important;
  }

  body[data-view="order-detail"] .order-mobile-header { z-index:30!important; }
  body[data-view="order-detail"] .order-mobile-header > a {
    z-index:4!important;
    display:grid!important;
    width:44px!important;
    height:44px!important;
    pointer-events:auto!important;
  }
  body[data-view="order-detail"] .order-mobile-header h1 { pointer-events:none!important; }

  body:not([data-view="home"]) .mob-drawer-header {
    height:64px!important;
    min-height:64px!important;
    max-height:64px!important;
    margin-top:0!important;
    padding:0 16px!important;
  }

  body:not([data-view="home"]) .mobile-layout > .shop-mob-header .shop-heading-copy {
    display:flex!important;
    
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
  }
  body:not([data-view="home"]) .mobile-layout > .shop-mob-header .shop-title,
  body:not([data-view="home"]) .mobile-layout > .mobile-green-header h1,
  body:not([data-view="home"]) .mobile-layout > .mobile-green-header h2,
  body:not([data-view="home"]) .mobile-layout > .detail-mobile-header h1,
  body:not([data-view="home"]) .mobile-layout > .detail-mobile-header h2,
  body[data-view="order-detail"] .order-mobile-header h1,
  body:not([data-view="home"]) > header[style*="header-green"] h1 {
    flex:1 1 auto!important;
    
    margin:0!important;
    padding:0!important;
    text-align:center!important;
    color:#fff!important;
    font-size:20px!important;
    line-height:1.25!important;
    font-weight:750!important;
  }

  body[data-view="news"] .shop-mob-header,
  body[data-view="products"] .shop-mob-header,
  body[data-view="order-detail"] .order-mobile-header,
  body:not([data-view="home"]) > header[style*="header-green"] {
    position:relative!important;
    top:auto!important;
  }

  body[data-view="order-detail"] .order-mobile-header > a,
  body[data-view="order-detail"] .order-mobile-header > span,
  body:not([data-view="home"]) .mobile-layout > .mobile-green-header > a,
  body:not([data-view="home"]) .mobile-layout > .detail-mobile-header > a {
    position:absolute!important;
    left:12px!important;
    
    
    color:#fff!important;
  }

  /* The wallet title is separate from the account profile header. */
  

  

  

  body[data-view="faq"] .faq-mobile-header {
    position:relative!important;
    height:64px!important;
    min-height:64px!important;
    max-height:64px!important;
    margin-top:0!important;
    padding:0 56px!important;
    justify-content:center!important;
    background:#026E4D!important;
    background-image:none!important;
  }
  body[data-view="faq"] .faq-mobile-header h1 { width:100%; text-align:center; font-size:20px!important; }
  body[data-view="faq"] .faq-mobile-header .faq-mobile-back { position:absolute!important; left:12px!important; }
  body[data-view="faq"] .faq-mobile-header .faq-mobile-spacer { display:none!important; }

  body[data-view="support"] .support-mobile-layout {
    padding:0 0 env(safe-area-inset-bottom)!important;
  }
  body[data-view="support"] .support-mobile-header {
    box-sizing:border-box!important;
    height:64px!important;
    min-height:64px!important;
    max-height:64px!important;
    margin-top:0!important;
    padding:0 56px!important;
    justify-content:center!important;
    background:#026E4D!important;
    background-image:none!important;
  }
  body[data-view="support"] .support-mobile-header h1 { flex:1; text-align:center!important; font-size:20px!important; }
  body[data-view="support"] .support-mobile-header button { position:absolute; left:12px; }

  /* Keep the customer-support chat usable while centering its fixed header. */
  body[data-view="tro-giup"] .mobile-profile-header {
    box-sizing:border-box!important;
    height:64px!important;
    min-height:64px!important;
    max-height:64px!important;
    top:0!important;
    margin-top:0!important;
    padding:0 56px!important;
    justify-content:center!important;
    background:#026E4D!important;
    background-image:none!important;
  }
  body[data-view="tro-giup"] .mobile-profile-header h2 { flex:1; text-align:center!important; }
  body[data-view="tro-giup"] .chat-messages { top:64px!important; }

  body:not([data-view="home"]) > header[style*="header-green"] > div:first-child {
    position:absolute!important;
    left:12px!important;
    margin:0!important;
  }

}

/* Final mobile header overrides: keep the supplied gradient and right-edge notice action. */
@media (max-width:1024px) {
  .mobile-app-profile > div:first-child,
  body[data-view="wallet"] .mobile-app-profile > div:first-child {
    padding-top: calc(18px + env(safe-area-inset-top)) !important;
    padding-bottom: 38px !important;
    border-radius: 0 !important;
  }
  .mobile-app-profile > div:first-child div[onclick*="ho-so.html"] {
    top: calc(16px + env(safe-area-inset-top)) !important;
  }
  body[data-view="notifications"] .mobile-layout > .mobile-green-header .app-notification-heading {
    position:relative!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    
    min-height:40px;
    text-align:center!important;
  }
  body[data-view="notifications"] .mobile-layout > .mobile-green-header .app-notification-heading h2 {
    flex:none!important;
    width:auto!important;
    margin:0!important;
    white-space:nowrap!important;
  }
  body[data-view="notifications"] .mobile-layout > .mobile-green-header .app-notification-heading button {
    position:absolute!important;
    
    right:0!important;
    
    white-space:nowrap!important;
  }
}

/* Shared compact height for mobile page title headers (home and account excluded). */
@media (max-width:1024px) {
  body:not([data-view="home"]):not([data-view="wallet"]) .mobile-layout > .shop-mob-header,
  body:not([data-view="home"]):not([data-view="wallet"]) .mobile-layout > .mobile-green-header,
  body:not([data-view="home"]):not([data-view="wallet"]) .mobile-layout > .mobile-profile-header,
  body:not([data-view="home"]):not([data-view="wallet"]) .mobile-layout > .detail-mobile-header,
  body:not([data-view="home"]):not([data-view="wallet"]) .mobile-green-header,
  body:not([data-view="home"]):not([data-view="wallet"]) .mobile-profile-header,
  body:not([data-view="home"]):not([data-view="wallet"]) .detail-mobile-header,
  body:not([data-view="home"]):not([data-view="wallet"]) .shop-mob-header,
  body[data-view="order-detail"] .order-mobile-header,
  body[data-view="faq"] .faq-mobile-header,
  body[data-view="support"] .support-mobile-header,
  body[data-view="tro-giup"] .mobile-profile-header,
  body:not([data-view="home"]):not([data-view="wallet"]) > header[style*="header-green"],
  body:not([data-view="home"]):not([data-view="wallet"]) .gt-header,
  body:has(.profile-avatar-section) .header {
    box-sizing:border-box!important;
    height:64px!important;
    min-height:64px!important;
    max-height:64px!important;
    margin-top:0!important;
    padding-top:0!important;
    padding-bottom:0!important;
    padding-left:56px!important;
    padding-right:56px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:hidden!important;
    background:#026E4D!important;
    background-image:none!important;
    color:#fff!important;
  }

  body:not([data-view="home"]):not([data-view="wallet"]) .mobile-layout > .shop-mob-header,
  body:not([data-view="home"]):not([data-view="wallet"]) .mobile-layout > .mobile-green-header,
  body:not([data-view="home"]):not([data-view="wallet"]) .mobile-layout > .mobile-profile-header,
  body:not([data-view="home"]):not([data-view="wallet"]) .mobile-layout > .detail-mobile-header,
  body[data-view="order-detail"] .order-mobile-header,
  body[data-view="faq"] .faq-mobile-header,
  body[data-view="support"] .support-mobile-header {
    padding-left:56px!important;
    padding-right:56px!important;
  }

  
  body:not([data-view="home"]):not([data-view="wallet"]) .gt-header .gt-back-btn {
    position:absolute!important;
    left:12px!important;
    
    
  }
  body[data-view="tro-giup"] .mobile-profile-header { top:0!important; }
  body[data-view="tro-giup"] .chat-messages { top:64px!important; }
  body[data-view="notifications"] .mobile-layout > .mobile-green-header { padding-left:16px!important; padding-right:16px!important; }
}

/* Keep the notification action at the true right edge without crowding its centered title. */
@media (max-width:1024px) {
  body[data-view="notifications"]:not([data-view="home"]):not([data-view="wallet"]) .mobile-layout > .mobile-green-header {
    padding-left:12px!important;
    padding-right:12px!important;
  }
  body[data-view="notifications"]:not([data-view="home"]):not([data-view="wallet"]) .mobile-layout > .mobile-green-header .app-notification-heading {
    box-sizing:border-box!important;
    
  }
  body[data-view="notifications"]:not([data-view="home"]):not([data-view="wallet"]) .mobile-layout > .mobile-green-header .app-notification-heading button {
    right:0!important;
  }
}

/* Keep the refund-history drawer header aligned with the shared mobile headers. */
@media (max-width:1024px) {
  body:not([data-view="home"]) .mob-drawer .mob-drawer-header {
    box-sizing:border-box!important;
    height:64px!important;
    min-height:64px!important;
    max-height:64px!important;
    margin-top:0!important;
    padding:0 56px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    position:relative!important;
    overflow:hidden!important;
    background:#026E4D!important;
    background-image:none!important;
    color:#fff!important;
  }
  body:not([data-view="home"]) .mob-drawer .mob-drawer-header h4,
  .mob-drawer-header h4 {
    position: absolute !important;
    left: 56px !important;
    right: 56px !important;
    width: calc(100% - 112px) !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 64px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 20px !important;
    line-height: 1.25 !important;
    font-weight: 750 !important;
    color: #fff !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  body:not([data-view="home"]) .mob-drawer .mob-drawer-header .mob-drawer-close {
    position:absolute!important;
    left:14px!important;
    top:0!important;
    bottom:0!important;
    width:44px!important;
    height:64px!important;
    padding:0!important;
    line-height:1!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:24px!important;
    color:#fff!important;
    background:transparent!important;
    border:none!important;
    transform:none!important;
    z-index:2!important;
  }
  body:not([data-view="home"]) .mob-drawer .mob-drawer-header::after { display:none!important; }
  body:has(.profile-avatar-section) .header {
    position:relative!important;
    top:auto!important;
    z-index:1!important;
  }
}











/* ===== 2026-10-05: Surgical iOS Status Bar & Alignment Fix ===== */
@media (max-width: 1024px) {
  /* 1. Global iOS Status Bar Fix */
  /* This prevents the white/gray Safari status bar by tinting html green, while keeping body gray */
  html { background-color: #f2f7f5 !important; }
  html:has(body[data-view="wallet"]) { background-color: #ffffff !important; }
  html:has(body[data-view="chi-tiet"]) { background-color: #ffffff !important; }
  body { background-color: #f2f7f5 !important; background-image: none !important; }
  html:has(body[data-view="home"]) { background-color: #007A53 !important; }

  /* 2. Fix Header Alignment (Only for single-line headers with back arrows) */
  html body .mobile-green-header,
  html body .mobile-profile-header, 
  html body .order-mobile-header, 
  html body .faq-mobile-header, 
  html body .support-mobile-header {
    box-sizing: border-box !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: row !important;
    background: #026E4D !important;
    background-image: none !important;
    z-index: 50 !important;
  }

  /* 3. Fix Back Arrows Alignment (Only for the above headers) */
  html body .mobile-green-header > a, html body .mobile-green-header > button,
  html body .mobile-profile-header > a, html body .mobile-profile-header > button,
  html body .order-mobile-header > a, html body .order-mobile-header > button,
  html body .faq-mobile-header > a, html body .faq-mobile-header > button,
  html body .faq-mobile-header > .faq-mobile-back,
  html body .support-mobile-header > a, html body .support-mobile-header > button,
  html body .header .back-btn,
  html body body:has(.profile-avatar-section) .header .back-btn,
  html body .mob-drawer-header .mob-drawer-close,
  html body .mob-drawer-close {
    position: absolute !important;
    left: 14px !important;
    right: auto !important;
    top: 0 !important; 
    bottom: 0 !important;
    height: 64px !important; 
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    font-size: 24px !important;
    line-height: 1 !important;
    z-index: 60 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    transform: none !important;
  }

  /* 4. Fix Text Centering (Only for the above headers) */
  html:root body .mobile-green-header > h1, html:root body .mobile-green-header > h2,
  html:root body .mobile-profile-header > h1, html:root body .mobile-profile-header > h2,
  html:root body .order-mobile-header > h1, html:root body .order-mobile-header > h2, html:root body .order-mobile-header > span,
  html:root body .faq-mobile-header > h1, html:root body .faq-mobile-header > h2,
  html:root body .support-mobile-header > h1, html:root body .support-mobile-header > h2,
  html:root body .mob-drawer-header > h4,
  html:root body .mob-drawer-header h4 {
    position: absolute !important;
    left: 56px !important;
    right: 56px !important;
    width: calc(100% - 112px) !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 64px !important; 
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #fff !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transform: none !important;
    z-index: 55 !important;
    flex: none !important;
  }

  /* Ensure Home Page header h1 stays in place and does not jump or overlap */
  body[data-view="home"] .app-home-header h1,
  .app-home-header h1 {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    display: block !important;
    text-align: left !important;
    font-size: 20px !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px !important;
    color: #fff !important;
    transform: none !important;
    z-index: 1 !important;
  }

  /* Reset any inline padding applied to profile headers */
  html:root body .mobile-profile-header {
      padding: 0 !important;
  }
}
/* ===== END ===== */

/* ===== 2026-10-05: Fix Thong Bao button ===== */
@media (max-width: 1024px) {
  html body[data-view="notifications"] .mobile-green-header .app-notification-heading {
      width: 100% !important;
      position: relative !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
  }
  html body[data-view="notifications"] .mobile-green-header .app-notification-heading button {
      position: absolute !important;
      right: 0 !important;
  }
}
/* ===== END ===== */

/* ===== 2026-10-07: Unified Mobile Back Arrow (Matching Model in Trạng thái hoàn tiền) ===== */
@media (max-width: 1024px) {
  html:root body .order-mobile-header > a,
  html:root body .faq-mobile-header > a,
  html:root body .faq-mobile-header > button,
  html:root body .faq-mobile-header > .faq-mobile-back,
  html:root body .support-mobile-header > a,
  html:root body .support-mobile-header > button,
  html:root body:not([data-view="home"]):not([data-view="wallet"]) .gt-header .gt-back-btn,
  html:root body .gt-header > .gt-back-btn,
  html:root body .gt-header .gt-back-btn,
  html:root body .header .back-btn,
  html:root body .back-btn,
  html:root body .mobile-profile-header > a {
    position: absolute !important;
    left: 14px !important;
    right: auto !important;
    width: 44px !important;
    height: 64px !important;
    top: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    line-height: 1 !important;
    color: #fff !important;
    text-decoration: none !important;
    border: none !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    z-index: 60 !important;
    transform: none !important;
  }

  html:root body .challenge-shell > header > a,
  html:root body .challenge-shell > header.mobile-green-header > a {
    position: absolute !important;
    left: 14px !important;
    right: auto !important;
    width: 44px !important;
    height: 64px !important;
    top: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    line-height: 1 !important;
    color: #fff !important;
    text-decoration: none !important;
    border: none !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    z-index: 60 !important;
    transform: none !important;
  }
}

/* Trang con dạng drawer (Trạng thái hoàn tiền, v.v.): phủ kín 100dvh với thanh trạng thái trắng */
@media (max-width:1024px) {
  .mob-drawer-bg {
    box-sizing: border-box !important;
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    background: #ffffff !important;
    border-top: none !important;
    z-index: 2500 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    overscroll-behavior: contain !important;
    overscroll-behavior-y: contain !important;
  }
  .mob-drawer {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    transform: translateY(0) !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    overscroll-behavior: contain !important;
    overscroll-behavior-y: contain !important;
  }
  .mob-drawer-body {
    overscroll-behavior: contain !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* ===== Wallet Header: White, prominent with soft shadow & crisp border (No arrow, centered title) ===== */
@media (max-width: 1024px) {
  html:has(body[data-view="wallet"]) {
    background-color: #ffffff !important;
  }

  html body[data-view="wallet"] .vi-header,
  html:root body .vi-header,
  .vi-header {
    box-sizing: border-box !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    background: #026E4D !important;
    background-image: none !important;
    color: #ffffff !important;
    border-radius: 0 !important;
    border-bottom: none !important;
    box-shadow: none !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  html body[data-view="wallet"] .vi-header > a,
  html body[data-view="wallet"] .vi-header > button,
  html body[data-view="wallet"] .vi-header .vi-back-btn,
  html:root body .vi-header > a,
  html:root body .vi-header > button,
  html:root body .vi-header .vi-back-btn,
  .vi-header > a,
  .vi-header > button,
  .vi-header .vi-back-btn {
    position: absolute !important;
    left: 14px !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 64px !important;
    width: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    color: #ffffff !important;
    text-decoration: none !important;
    cursor: pointer !important;
    z-index: 10 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body[data-view="wallet"] .vi-header > span,
  html body[data-view="wallet"] .vi-header > h1,
  html:root body .vi-header > span,
  html:root body .vi-header > h1,
  .vi-header > span,
  .vi-header > h1 {
    position: static !important;
    width: 100% !important;
    height: 64px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 20px !important;
    font-weight: 750 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    color: #ffffff !important;
    margin: 0 !important;
    padding: 0 60px !important;
    box-sizing: border-box !important;
    transform: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* ===== Product Detail Header: Green background with back arrow and centered white title ===== */
@media (max-width: 1024px) {
  body[data-view="chi-tiet"] .detail-mobile-header,
  html body .detail-mobile-header,
  .detail-mobile-header {
    box-sizing: border-box !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    background: #026E4D !important;
    background-image: none !important;
    color: #ffffff !important;
    border-radius: 0 !important;
    border-bottom: none !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
    position: relative !important;
    z-index: 100 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 56px !important;
    margin: 0 !important;
  }

  body[data-view="chi-tiet"] .detail-mobile-header > a.detail-back-arrow,
  html body .detail-mobile-header > a.detail-back-arrow,
  .detail-mobile-header > a.detail-back-arrow {
    display: flex !important;
    position: absolute !important;
    left: 14px !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 44px !important;
    height: 64px !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 26px !important;
    font-weight: 400 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    color: #ffffff !important;
    z-index: 101 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  body[data-view="chi-tiet"] .detail-mobile-header > a:not(.detail-back-arrow),
  body[data-view="chi-tiet"] .detail-mobile-header > button,
  html body .detail-mobile-header > a:not(.detail-back-arrow),
  html body .detail-mobile-header > button {
    display: none !important;
  }

  body[data-view="chi-tiet"] .detail-mobile-header > h1,
  body[data-view="chi-tiet"] .detail-mobile-header > h2,
  html body .detail-mobile-header > h1,
  html body .detail-mobile-header > h2,
  .detail-mobile-header > h2 {
    position: static !important;
    width: 100% !important;
    height: 64px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 20px !important;
    font-weight: 750 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    color: #ffffff !important;
    margin: 0 !important;
    padding: 0 16px !important;
    transform: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* Link History Pin & Trash Action Buttons */
.sb-link-actions-top {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  flex-shrink: 0 !important;
}
.btn-pin-link, .btn-del-link {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid #e2e8f0 !important;
  background: #f8fafc !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: all 0.15s ease !important;
  -webkit-tap-highlight-color: transparent !important;
}
.btn-pin-link.pinned {
  background: #fef3c7 !important;
  border-color: #fde68a !important;
  color: #d97706 !important;
}
.btn-pin-link:hover {
  background: #fef9c3 !important;
  border-color: #fde047 !important;
  color: #b45309 !important;
}
.btn-del-link:hover, .btn-del-link:active {
  background: #fee2e2 !important;
  border-color: #fca5a5 !important;
  color: #ef4444 !important;
}

/* ===== Professional Confirmation Modal ===== */
.sb-confirm-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  background: rgba(15, 23, 42, 0.55) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  animation: sbFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.sb-confirm-dialog {
  background: #ffffff !important;
  border-radius: 20px !important;
  width: 100% !important;
  max-width: 340px !important;
  padding: 24px 20px !important;
  text-align: center !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.22) !important;
  animation: sbPopIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-sizing: border-box !important;
}
.sb-confirm-icon-wrap {
  width: 54px !important;
  height: 54px !important;
  border-radius: 50% !important;
  margin: 0 auto 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.sb-confirm-icon-wrap.danger {
  background: #fee2e2 !important;
  color: #ef4444 !important;
}
.sb-confirm-icon-wrap.warning {
  background: #fef3c7 !important;
  color: #d97706 !important;
}
.sb-confirm-icon-wrap.primary {
  background: #e8f5e9 !important;
  color: #0e5b3c !important;
}
.sb-confirm-title {
  margin: 0 0 8px !important;
  font-size: 17px !important;
  font-weight: 750 !important;
  color: #0f172a !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
  line-height: 1.3 !important;
}
.sb-confirm-desc {
  margin: 0 0 22px !important;
  font-size: 13.5px !important;
  color: #64748b !important;
  line-height: 1.5 !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
}
.sb-confirm-actions {
  display: flex !important;
  gap: 10px !important;
}
.sb-confirm-btn-cancel {
  flex: 1 !important;
  padding: 11px 0 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  background: #f8fafc !important;
  color: #475569 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  font-family: inherit !important;
}
.sb-confirm-btn-cancel:active {
  background: #f1f5f9 !important;
}
.sb-confirm-btn-confirm {
  flex: 1 !important;
  padding: 11px 0 !important;
  border: none !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  font-family: inherit !important;
}
.sb-confirm-btn-confirm.danger {
  background: #ef4444 !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
}
.sb-confirm-btn-confirm.danger:active {
  background: #dc2626 !important;
}
.sb-confirm-btn-confirm.primary {
  background: #0e5b3c !important;
  box-shadow: 0 4px 12px rgba(14, 91, 60, 0.3) !important;
}
.sb-confirm-btn-confirm.primary:active {
  background: #09472e !important;
}

@keyframes sbFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes sbPopIn {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

/* ===== Professional Modern Toast ===== */
#toast, .toast {
  position: fixed !important;
  bottom: 84px !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(20px) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: 999999 !important;
  background: #0f172a !important;
  color: #ffffff !important;
  padding: 11px 22px !important;
  border-radius: 50px !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  max-width: 90vw !important;
  white-space: nowrap !important;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
#toast.show, .toast.show {
  transform: translateX(-50%) translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
@media (min-width: 1025px) {
  #toast, .toast {
    bottom: 36px !important;
  }
}

/* ===== Referral Page Layout: Curved green header underneath, card overlapping on top, code centered ===== */
@media (max-width: 1024px) {
  body[data-view="referral"] .gt-header,
  .gt-header {
    background: #026E4D !important;
    background-image: none !important;
    color: #fff !important;
    padding: calc(16px + env(safe-area-inset-top, 0px)) 16px 44px !important;
    border-radius: 0 0 20px 20px !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 96px !important;
    max-height: none !important;
    z-index: 1 !important;
  }

  body[data-view="referral"] .gt-content,
  .gt-content {
    margin-top: -30px !important;
    padding: 0 16px 24px !important;
    position: relative !important;
    z-index: 10 !important;
  }

  .gt-code-box {
    border: 1px solid var(--primary) !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 8px !important;
  }

  .gt-code {
    flex: 1 !important;
    text-align: center !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    color: var(--primary) !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .gt-copy-btn {
    flex-shrink: 0 !important;
  }
}

/* ===== Trang con dạng drawer (Lịch sử giao dịch, Khách hàng thân thiết, Đổi mật khẩu, Chăm sóc khách hàng, Trạng thái hoàn tiền...) =====
   Safari tô vùng giờ/pin theo phần tử position:fixed chạm mép trên (header xanh). Khi mở trang con, trang gốc đã bị khóa cuộn
   (html.has-mob-drawer, overflow:hidden) nên chuyển lớp phủ sang position:absolute: nhìn y hệt, nhưng Safari không tô xanh vùng giờ/pin,
   mà dùng màu nền trang (nhạt) như các trang khác (vd. Mua sắm). */
@media (max-width: 1024px) {
  html.has-mob-drawer:root, html.has-mob-drawer:root body.has-mob-drawer { background:#f2f7f5 !important; background-color:#f2f7f5 !important; }
  html.has-mob-drawer .mob-drawer-bg,
  html.preload-mob-drawer .mob-drawer-bg {
    position:absolute !important; top:0 !important; left:0 !important; right:0 !important; bottom:auto !important;
    width:100% !important; height:100dvh !important;
  }
  /* Phủ thêm 1px xanh phía trên header để không hở vạch sáng mỏng sát mép trên */
  body:not([data-view="home"]) .mob-drawer-header { box-shadow: 0 -1px 0 0 #026E4D !important; }
}

/* Trang Chăm sóc khách hàng (hoi-dap.html): lớp phủ position:fixed làm Safari tô xanh vùng giờ/pin theo header.
   Chuyển sang absolute (trang không cuộn vì html/body overflow:hidden) để vùng giờ/pin dùng màu nền nhạt như các trang khác. */
@media (max-width: 1024px) {
  html:root:has(.support-mobile-layout), html:root:has(.support-mobile-layout) body { overflow:hidden !important; height:100% !important; background:#f2f7f5 !important; }
  html:root body .support-mobile-layout.support-mobile-layout {
    position:absolute !important; top:0 !important; left:0 !important; right:0 !important; bottom:auto !important;
    width:100% !important; height:100dvh !important;
  }
}