/* Mobile/tablet presentation follows smartback-rn. Desktop remains unchanged. */
.app-order-card { display:none; }
@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(36px + env(safe-area-inset-top))!important; }
  .mob-app-bottom-nav,.mobile-bottom-nav,.bottom-nav {
    position:fixed!important; left:0!important; right:0!important; bottom:0!important; width:100%!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-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 { position:absolute; top:calc(-1 * max(env(safe-area-inset-top), 56px)); left:0; right:0; height:calc(210px + max(env(safe-area-inset-top), 56px)); border-radius:0 0 24px 24px; background:#026E4D url('/assets/header-green.png') center/cover no-repeat; z-index:0; }
  .app-home-header { padding:calc(32px + env(safe-area-inset-top)) 20px 0; color:#fff; }
  .app-home-header h1 { margin:0 0 16px; font-size:20px; line-height:1.4; font-weight:700; letter-spacing:0.2px; }
  .app-home-balance-row { display:flex; justify-content:space-between; align-items:center; gap:12px; }
  .app-home-balance-row #mobRankBadge { display:inline-flex!important; background:rgba(0,0,0,0.25); border-radius:20px; padding:6px 14px; font-size:13px; color:#fff; text-decoration:none; align-items:center; gap:0; line-height:1; font-weight:600; }
  .app-home-balance-row #mobWalletPill { display:flex; align-items:center; gap:6px; background:#fff; color:#000; border-radius:20px; padding:6px 14px; font-size:15px; font-weight:700; cursor:pointer; }
  #mobAuthBtns button { background:white; border:0; border-radius:20px; padding:8px 14px; color:#026E4D; font-weight:700; }
  .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); }
  body[data-view="wallet"] .vi-header { font-size:19px; padding:calc(40px + env(safe-area-inset-top)) 20px 24px; position:relative; }
  body[data-view="wallet"] .vi-card-top { gap:8px; margin-bottom:17px; }
  body[data-view="wallet"] .vi-card-top img { width:24px; height:24px; border-radius:7px; padding:2px; }
  body[data-view="wallet"] .vi-card-top span { font-size:15px; }
  body[data-view="wallet"] .vi-balance-row { gap:8px; justify-content:space-between; align-items:center; margin:0 0 12px; padding-bottom:9px; border-bottom:1px solid rgba(255,255,255,.32); }
  body[data-view="wallet"] .vi-balance-label { font-size:12px; letter-spacing:0; white-space:nowrap; }
  body[data-view="wallet"] .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:18px; padding:calc(28px + env(safe-area-inset-top)) 56px 24px; position:relative; }
  .vi-header a { position:absolute; z-index:2; left:12px; top:0!important; bottom:0!important; margin:auto 0!important; transform:none!important; display:grid; place-items:center; width:48px; height:48px; border-radius:50%; color:#fff!important; text-decoration:none; font-size:0; line-height:1; }
  .vi-header a svg { display:block; width:27px; height:27px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
  .vi-header > span { display:block; width:100%; text-align:center; }
  .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:16px; background:#fff; border:1px solid #e4ebe6; border-radius:16px; padding:16px; box-shadow:0 2px 4px #0000000a; --status-bg:#fef7e0; --status-color:#e37400; }
  .app-order-card.done { --status-bg:#e6f4ea; --status-color:#116b43; }
  .app-order-card.cancel { --status-bg:#fce8e6; --status-color:#c5221f; }
  .app-order-extra { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:2px 0 10px; padding:10px 0; border-top:1px solid #edf1ee; border-bottom:1px solid #edf1ee; }
  .app-order-extra > div { min-width:0; }
  .app-order-extra > div + div { padding-left:10px; border-left:1px solid #edf1ee; }
  .app-order-extra span,.app-order-extra strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .app-order-extra span { color:#809087; font-size:10px; }
  .app-order-extra strong { margin-top:4px; color:#203e32; font-size:13px; font-weight:750; }
  .app-order-extra .refund strong { color:#08734b; }
  .app-order-top { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:12px; color:#666; padding-bottom:12px; border-bottom:1px solid #f0f0f0; overflow-wrap:anywhere; }
  .app-order-badge { display:inline-flex; align-items:center; gap:6px; background:var(--status-bg); color:var(--status-color); padding:5px 10px; border-radius:20px; font-size:11px; font-weight:700; }
  .app-order-product { display:flex; align-items:center; gap:12px; padding:14px 0; color:#333; text-decoration:none; border-bottom:1px solid #f0f0f0; }
  .app-order-product img { width:60px; height:60px; object-fit:cover; border-radius:8px; flex-shrink:0; }
  .app-order-product div { min-width:0; }
  .app-order-product small { color:#116b43; font-size:11px; font-weight:800; }
  .app-order-product h3 { font-size:14px; font-weight:500; margin:4px 0 0; line-height:1.4; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
  .app-order-status,.app-order-date { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:12px; }
  .app-order-status .app-order-badge { font-size:13px; }
  .app-order-badge i { font-style:normal; font-size:17px; }
  .app-order-status a { color:#116b43; font-size:12px; font-weight:600; text-decoration:none; padding:8px 0 8px 8px; }
  .app-order-date { color:#999; font-size:12px; padding-top:2px; }
  .app-order-date button { width:40px; height:36px; border:0; background:none; color:#999; cursor:pointer; }
  .app-order-date svg { width:20px; height:20px; }
  #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; width:100%!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; top:50%!important; right:0!important; transform:translateY(-50%)!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 */
.shop-tabs {
    margin: 28px 20px 0 !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;
    overflow-x: auto !important;
    position: relative !important;
    z-index: 10 !important;
    gap: 10px !important;
}
.shop-tab {
    flex: 1 !important;
    padding: 10px 4px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 26px !important;
    background: #fff !important;
    border: 1.5px solid #0e5b3c !important;
    color: #333 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    min-width: max-content !important;
    display: flex !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}
.shop-tab.active {
    background: #0e5b3c !important;
    color: #fff !important;
    border-color: #0e5b3c !important;
}
.shop-tab-icon {
    display: none !important;
}
.shop-tab span {
    font-weight: 600 !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 --- */
/* The user requested to keep the Account Overview header green like in the app */
.mobile-app-profile > div:first-child {
    background: #1a5c3a url('/assets/header-green.png') center / cover no-repeat !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;
    min-height:calc(112px + max(env(safe-area-inset-top), 44px))!important;
    margin-top:calc(0px - max(env(safe-area-inset-top), 44px))!important;
    padding:calc(12px + max(env(safe-area-inset-top), 44px)) 56px 12px!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;
    top:50%!important;
    transform:translateY(-50%)!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;
    min-height:calc(112px + max(env(safe-area-inset-top), 44px))!important;
    height:auto!important;
    margin-top:calc(0px - max(env(safe-area-inset-top), 44px))!important;
    padding:calc(12px + max(env(safe-area-inset-top), 44px)) 56px 12px!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 {
    min-height:calc(112px + max(env(safe-area-inset-top), 44px))!important;
    margin-top:calc(0px - max(env(safe-area-inset-top), 44px))!important;
    padding:calc(12px + max(env(safe-area-inset-top), 44px)) 16px 12px!important;
  }

  body:not([data-view="home"]) .mobile-layout > .shop-mob-header .shop-heading-copy {
    display:flex!important;
    width:100%!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;
    width:100%!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;
    top:50%!important;
    transform:translateY(-50%)!important;
    color:#fff!important;
  }

  /* The wallet title is separate from the account profile header. */
  body[data-view="wallet"]:not(:has(.mobile-app-profile)) .vi-header {
    box-sizing:border-box!important;
    display:grid!important;
    grid-template-columns:48px minmax(0,1fr) 48px!important;
    align-items:center!important;
    justify-content:stretch!important;
    min-height:calc(112px + max(env(safe-area-inset-top), 44px))!important;
    margin-top:calc(0px - max(env(safe-area-inset-top), 44px))!important;
    padding:calc(12px + max(env(safe-area-inset-top), 44px)) 56px 12px!important;
    position:relative!important;
    background:#026e4d!important;
    color:#fff!important;
    text-align:center!important;
    font-size:20px!important;
  }

  body[data-view="wallet"]:not(:has(.mobile-app-profile)) .vi-header > a {
    position:static!important;
    grid-column:1!important;
    grid-row:1!important;
    justify-self:center!important;
    align-self:center!important;
    margin:0!important;
  }

  body[data-view="wallet"]:not(:has(.mobile-app-profile)) .vi-header > span {
    grid-column:2!important;
    grid-row:1!important;
    align-self:center!important;
  }

  body[data-view="faq"] .faq-mobile-header {
    position:relative!important;
    min-height:calc(112px + max(env(safe-area-inset-top), 44px))!important;
    margin-top:calc(0px - max(env(safe-area-inset-top), 44px))!important;
    padding:calc(12px + max(env(safe-area-inset-top), 44px)) 56px 12px!important;
    justify-content:center!important;
    background:#026e4d!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;
    min-height:calc(112px + max(env(safe-area-inset-top), 44px))!important;
    margin-top:calc(0px - max(env(safe-area-inset-top), 44px))!important;
    padding:calc(12px + max(env(safe-area-inset-top), 44px)) 56px 12px!important;
    justify-content:center!important;
    background:#026e4d!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:calc(112px + max(env(safe-area-inset-top), 44px))!important;
    min-height:calc(112px + max(env(safe-area-inset-top), 44px))!important;
    top:calc(0px - max(env(safe-area-inset-top), 44px))!important;
    padding:calc(12px + max(env(safe-area-inset-top), 44px)) 56px 12px!important;
    justify-content:center!important;
    background:#026e4d!important;
  }
  body[data-view="tro-giup"] .mobile-profile-header h2 { flex:1; text-align:center!important; }
  body[data-view="tro-giup"] .chat-messages { top:112px!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-green-header,
  .shop-mob-header,
  .mobile-profile-header,
  .mob-drawer-header,
  body > header[style*="header-green"],
  .mobile-app-profile > div:first-child,
  body:has(.profile-avatar-section) .header,
  body[data-view="wallet"]:not(:has(.mobile-app-profile)) .vi-header {
    background:linear-gradient(106.71deg, #007A53 3.53%, #026E4D 15.74%, #036649 24.33%, #055A43 37.44%, #084C3D 51.45%, #0F2027 97.55%)!important;
    background-image:linear-gradient(106.71deg, #007A53 3.53%, #026E4D 15.74%, #036649 24.33%, #055A43 37.44%, #084C3D 51.45%, #0F2027 97.55%)!important;
  }
  body[data-view="wallet"] .mobile-app-profile > div:first-child {
    padding-top:calc(48px + env(safe-area-inset-top))!important;
    border-radius:0 0 20px 20px!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;
    width:100%!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;
    top:50%!important;
    right:0!important;
    transform:translateY(-50%)!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[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[data-view="wallet"]:not(:has(.mobile-app-profile)) .vi-header,
  body:has(.profile-avatar-section) .header {
    box-sizing:border-box!important;
    height:calc(96px + max(env(safe-area-inset-top), 44px))!important;
    min-height:calc(96px + max(env(safe-area-inset-top), 44px))!important;
    max-height:calc(96px + max(env(safe-area-inset-top), 44px))!important;
    margin-top:calc(0px - max(env(safe-area-inset-top), 44px))!important;
    padding-top:calc(8px + max(env(safe-area-inset-top), 44px))!important;
    padding-bottom:8px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:hidden!important;
    background:linear-gradient(106.71deg, #007A53 3.53%, #026E4D 15.74%, #036649 24.33%, #055A43 37.44%, #084C3D 51.45%, #0F2027 97.55%)!important;
    background-image:linear-gradient(106.71deg, #007A53 3.53%, #026E4D 15.74%, #036649 24.33%, #055A43 37.44%, #084C3D 51.45%, #0F2027 97.55%)!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 {
    padding-left:56px!important;
    padding-right:56px!important;
  }
  body:not([data-view="home"]):not([data-view="wallet"]) .gt-header .gt-header-title {
    width:100%!important;
    margin:0!important;
    text-align:center!important;
  }
  body:not([data-view="home"]):not([data-view="wallet"]) .gt-header .gt-back-btn {
    position:absolute!important;
    left:12px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
  }
  body[data-view="tro-giup"] .mobile-profile-header { top:calc(0px - max(env(safe-area-inset-top), 44px))!important; }
  body[data-view="tro-giup"] .chat-messages { top:96px!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;
    width:100%!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:calc(96px + max(env(safe-area-inset-top), 44px))!important;
    min-height:calc(96px + max(env(safe-area-inset-top), 44px))!important;
    max-height:calc(96px + max(env(safe-area-inset-top), 44px))!important;
    margin-top:calc(0px - max(env(safe-area-inset-top), 44px))!important;
    padding:calc(8px + max(env(safe-area-inset-top), 44px)) 12px 8px!important;
    display:grid!important;
    grid-template-columns:48px minmax(0,1fr) 48px!important;
    align-items:center!important;
    justify-content:stretch!important;
    position:relative!important;
    overflow:hidden!important;
    background:linear-gradient(106.71deg, #007A53 3.53%, #026E4D 15.74%, #036649 24.33%, #055A43 37.44%, #084C3D 51.45%, #0F2027 97.55%)!important;
    background-image:linear-gradient(106.71deg, #007A53 3.53%, #026E4D 15.74%, #036649 24.33%, #055A43 37.44%, #084C3D 51.45%, #0F2027 97.55%)!important;
    color:#fff!important;
  }
  body:not([data-view="home"]) .mob-drawer .mob-drawer-header h4 {
    grid-column:2!important;
    grid-row:1!important;
    width:auto!important;
    margin:0!important;
    padding:0!important;
    color:#fff!important;
    text-align:center!important;
    font-size:20px!important;
    line-height:1.25!important;
    font-weight:750!important;
  }
  body:not([data-view="home"]) .mob-drawer .mob-drawer-header .mob-drawer-close {
    position:static!important;
    grid-column:1!important;
    grid-row:1!important;
    justify-self:center!important;
    align-self:center!important;
    width:44px!important;
    height:44px!important;
    padding:0!important;
    line-height:1!important;
    display:grid!important;
    place-items:center!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;
  }
}