:root {
      /* TW-DS-TOKENS (light) */
      --bg: #F5F7FA; --page-outer: #E4E9EF;
      --surface: #ffffff; --surface-2: #F5F7FA; --surface-3: #EEF2F7;
      --navy: #0B3A6E; --navy-text: #0B3A6E; --navy-text-strong: #082E58; --navy-text-soft: #1E4E86; --gold: #C4A35A;
      --green-text: #0E7A45;
      --tint-blue: #E7EEF6; --tint-green: #E5F4EC; --tint-amber: #fef7e0; --tint-red: #fce8e6;
      --st-blue: #186CF0; --st-blue-bg: #E8F1FE; --st-amber: #B7791F; --st-amber-bg: #FEF3E2;
      --st-green: #1A7F4B; --st-green-bg: #E7F6EE; --st-red: #C62828; --st-red-bg: #FDECEC;
      --st-cyan: #0E7490; --st-cyan-bg: #E6F6F9;
      --font-head: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
      --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
      --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Roboto Mono", monospace;
      --r-sm: 12px; --r-md: 14px; --r-lg: 16px;
      --brand-blue: #0B3A6E;
      --brand-blue-dark: #082E58;
      --brand-blue-soft: #E7EEF6;
      --brand-red: #e23b2f;
      --brand-yellow: #f5b800;
      --brand-green: #0E7A45;
      --ink: #122033;
      --ink-strong: #122033;
      --muted: #526277;
      --paper: #ffffff;
      --paper-soft: #F5F7FA;
      --line: #dde3ec;
      --blue: #0B3A6E;
      --blue-hover: #082E58;
      --nav-h: 3.5rem;
      --bottom-nav-h: 4.35rem;
      --safe-b: env(safe-area-inset-bottom, 0px);
      --app-max: 430px;
      --tap: 48px;
      --radius: 18px;
      --shadow: 0 12px 40px rgba(6,20,43,.08);
      --shadow-lg: 0 24px 60px rgba(6,20,43,.14);
      --logo-gradient: linear-gradient(90deg, #0B3A6E 0%, #5ad0a0 100%);
      --hero-glow: radial-gradient(ellipse 80% 55% at 85% 0%, rgba(11,58,110,.35), transparent 55%);
      --glass: rgba(255,255,255,.1);
      --ease-out: cubic-bezier(.22,1,.36,1);
    }
    * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
    html, body { height: 100%; overflow: hidden; }
    body {
      margin: 0;
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
      color: var(--ink);
      background: var(--surface-2);
      line-height: 1.5;
      letter-spacing: -.01em;
      -webkit-font-smoothing: antialiased;
    }
    h1, h2, h3, .hero-heading, .brand-logo, .btn-primary, .btn-secondary, .auth-link, .auth-tab, .filter-chip, .bottom-nav, .brand-mark, .screen-title {
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
      letter-spacing: -.03em;
      line-height: 1.2;
      color: var(--ink-strong);
    }
    button, select, a { font: inherit; }
    button:focus-visible, select:focus-visible, a:focus-visible {
      outline: 3px solid rgba(11,95,255,.32);
      outline-offset: 2px;
    }

    /* —— Phone frame —— */
    .tw-shell {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      width: min(100%, var(--app-max));
      max-width: var(--app-max);
      height: auto;
      min-width: 0;
      min-height: 0;
      margin-inline: auto;
      background: var(--paper-soft);
      display: flex;
      flex-direction: column;
      box-shadow: 0 0 0 1px rgba(6,20,43,.08), 0 32px 90px rgba(6,20,43,.28);
      overflow: hidden;
      overscroll-behavior: none;
    }
    @media (min-width: 480px) {
      body { background: var(--page-outer); }
      .tw-shell {
        border-radius: 0;
        box-shadow: none;
        border-left: 1px solid #a8bad3;
        border-right: 1px solid #a8bad3;
      }
    }
    @media (min-width: 900px) {
      body { justify-content: center; }
      .tw-shell { box-shadow: 0 0 0 1px rgba(6,20,43,.08), 0 28px 80px rgba(6,20,43,.18); }
    }

    .app-topbar {
      position: sticky;
      top: 0;
      z-index: 40;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .75rem;
      min-height: var(--nav-h);
      padding: .55rem 1rem;
      background: rgba(8,22,40,.92);
      
      border-bottom: 1px solid rgba(255,255,255,.06);
      box-shadow: inset 0 2px 0 #C4A35A;
      flex-shrink: 0;
    }
    .brand-logo {
      display: block; height: 1.85rem; width: auto;
      transition: transform .25s var(--ease-out), opacity .2s ease;
    }
    .app-topbar a:hover .brand-logo { transform: scale(1.03); opacity: .92; }
    .app-topbar-actions { display: flex; align-items: center; gap: .5rem; }
    .language-select {
      color: rgba(255,255,255,.92); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14);
      border-radius: .75rem; padding: .45rem .55rem; cursor: pointer; max-width: 7.5rem; font-size: .78rem;
      min-height: 40px;
    }
    .top-fb {
      display: inline-flex; align-items: center; justify-content: center;
      min-width: 40px; min-height: 40px; padding: 0 .55rem; border-radius: .75rem;
      background: rgba(255,255,255,.12); color: #fff; font-size: .72rem; font-weight: 800;
      text-decoration: none;
    }
    .language-select option { color: var(--ink); background: #fff; }

    .app-main {
      flex: 1;
      min-height: 0; /* allow flex child to scroll instead of growing shell */
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      padding-bottom: 1.5rem; /* nav ở position:relative trong luồng flex nên không che nội dung */
      scroll-behavior: smooth;
    }

    .app-screen { display: none; padding: 1rem 1rem 1.25rem; }
    .app-screen.is-active { display: block; opacity: 1; visibility: visible; }
    @keyframes fadeUp {
      from { transform: translateY(10px); }
      to { transform: none; }
    }
    @keyframes softFloat {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-5px); }
    }
    @keyframes sheen {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }
    @keyframes meshPulse {
      0%, 100% { opacity: .55; transform: scale(1); }
      50% { opacity: .9; transform: scale(1.06); }
    }
    @keyframes navDotIn {
      from { transform: translateX(-50%) scaleX(.4); opacity: 0; }
      to { transform: translateX(-50%) scaleX(1); opacity: 1; }
    }
    @keyframes balanceGlow {
      0%, 100% { text-shadow: 0 0 0 transparent; }
      50% { text-shadow: 0 0 18px rgba(11,58,110,.28); }
    }
    @keyframes cardShineMove {
      0% { transform: translateX(-120%) rotate(18deg); }
      100% { transform: translateX(220%) rotate(18deg); }
    }
    @keyframes chatBreathe {
      0%, 100% { transform: translateY(0) scale(1); box-shadow: 0 8px 20px rgba(11,58,110,.25); }
      50% { transform: translateY(-3px) scale(1.03); box-shadow: 0 12px 28px rgba(11,58,110,.35); }
    }

    /* —— Bottom nav —— */
    .bottom-nav {
      position: relative;
      flex-shrink: 0;
      z-index: 50;
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      height: calc(var(--bottom-nav-h) + var(--safe-b));
      padding: .4rem .3rem calc(.4rem + var(--safe-b));
      background: rgba(255,255,255,.92);
      border-top: 1px solid rgba(6,20,43,.05);
      
      box-shadow: 0 -10px 36px rgba(6,20,43,.06);
    }
    .bottom-nav button {
      appearance: none; border: 0; background: transparent; cursor: pointer;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: .12rem; min-height: var(--tap); color: var(--muted); font-size: .64rem; font-weight: 700;
      line-height: 1.05; text-align: center; padding: 0 1px; letter-spacing: -.02em;
      border-radius: 14px; position: relative; overflow: hidden;
      transition: color .22s ease, transform .18s ease;
    }
    .bottom-nav button:active { transform: scale(.94); }
    .bottom-nav button.active { color: var(--navy-text-strong); background: transparent; }
    .bottom-nav button.active::before {
      content: "";
      position: absolute;
      top: 0; left: 50%; transform: translateX(-50%);
      width: 20px; height: 3px; border-radius: 999px;
      background: var(--brand-blue);
      animation: navDotIn .35s var(--ease-out);
    }
    .bottom-nav button.active .nav-ico {
      transform: translateY(-1px) scale(1.08);
      transition: transform .25s cubic-bezier(.22,1,.36,1);
    }
    .bottom-nav button .nav-ico { width: 20px; height: 20px; }
    .bottom-nav button > span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .bottom-nav .nav-badge {
      position: absolute; top: 4px; right: calc(50% - 18px);
      min-width: 16px; height: 16px; padding: 0 4px;
      border-radius: 999px; background: var(--brand-red); color: #fff;
      font-size: 10px; font-weight: 800; line-height: 16px; text-align: center;
    }
    .nav-pill {
      position: absolute; z-index: 0; left: 0; top: 0;
      border-radius: 14px; background: var(--tint-blue);
      pointer-events: none;
      transition: transform .48s cubic-bezier(.22,1,.36,1), width .48s cubic-bezier(.22,1,.36,1), height .48s cubic-bezier(.22,1,.36,1);
    }
    .bottom-nav.has-pill button { z-index: 1; }
    .bottom-nav.has-pill button.active { background: transparent; }
    .bottom-nav.has-pill button.active::before { display: none; }
    @keyframes screenFromRight {
      from { transform: translateX(16px); }
      to { transform: none; }
    }
    @keyframes screenFromLeft {
      from { transform: translateX(-16px); }
      to { transform: none; }
    }
    @keyframes riseIn {
      from { opacity: 0; transform: translateY(16px) scale(.985); }
      to { opacity: 1; transform: none; }
    }
    @keyframes titleDrift {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: none; }
    }
    .app-screen.is-active.slide-next { animation: screenFromRight .46s cubic-bezier(.22,1,.36,1); }
    .app-screen.is-active.slide-prev { animation: screenFromLeft .46s cubic-bezier(.22,1,.36,1); }
    .app-screen.is-active .screen-title,
    .app-screen.is-active .acct-label {
      animation: titleDrift .5s cubic-bezier(.22,1,.36,1) both;
    }

    /* —— Touch / ripple —— */
    .btn-primary, .btn-secondary, .btn-outline, .auth-link, .filter-chip,
    .touch-btn, #kyc-submit, #cart-checkout, #order-submit, .add-cart-button,
    [data-open-auth], .bottom-nav button {
      position: relative;
      overflow: hidden;
    }
    .btn-primary, .btn-outline, .auth-link.auth-login, .auth-link.auth-signup,
    .touch-btn, #kyc-submit, #cart-checkout, button[type="submit"] {
      min-height: var(--tap);
    }
    .ripple-ink {
      position: absolute; border-radius: 50%; transform: scale(0);
      background: rgba(255,255,255,.35); pointer-events: none;
      animation: ripple .45s ease-out;
    }
    .btn-outline .ripple-ink, .auth-login .ripple-ink, .filter-chip .ripple-ink, .bottom-nav .ripple-ink {
      background: rgba(11,58,110,.18);
    }
    @keyframes ripple {
      to { transform: scale(2.6); opacity: 0; }
    }
    .btn-primary:active, .btn-outline:active, .touch-btn:active, .filter-chip:active {
      transform: scale(.98);
    }

    .btn-primary, .btn-secondary, .auth-link {
      display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
      border-radius: 1rem; font-weight: 700; text-decoration: none; cursor: pointer;
      transition: background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease, box-shadow .2s ease;
      width: 100%;
    }
    .btn-primary {
      padding: .95rem 1.2rem; color: var(--ink);
      background: #fff;
      box-shadow: 0 12px 32px rgba(0,0,0,.22); border: 0;
    }
    .btn-primary::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(105deg, transparent 34%, rgba(255,255,255,.42) 50%, transparent 66%);
      transform: translateX(-130%);
      pointer-events: none;
    }
    .btn-primary:active::after { animation: btnSheen .55s ease; }
    @keyframes btnSheen { to { transform: translateX(130%); } }
    .btn-primary:hover {
      filter: brightness(1.02);
      box-shadow: 0 16px 40px rgba(0,0,0,.28);
      transform: translateY(-1px);
    }
    .home-below .btn-primary,
    .gate-card .btn-primary,
    .app-screen:not(#home) .btn-primary,
    #auth-modal .btn-primary {
      color: #fff;
      background: linear-gradient(165deg, #1E4E86 0%, #0B3A6E 42%, #082E58 100%);
      box-shadow: 0 12px 28px rgba(8,46,88,.28);
    }
    .btn-outline {
      display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
      padding: .95rem 1.2rem; border-radius: 1rem; font-weight: 700;
      color: var(--navy-text); background: rgba(255,255,255,.72); border: 1.5px solid rgba(11,58,110,.28);
      cursor: pointer; text-decoration: none; width: 100%;
      transition: background .15s ease, transform .1s ease, border-color .15s ease;
    }
    .btn-outline:hover { background: var(--brand-blue-soft); border-color: var(--brand-blue); }
    .auth-link { padding: .75rem 1rem; font-size: .9rem; }
    .auth-login { color: var(--ink); border: 1px solid var(--line); background: var(--surface); }
    .auth-signup { color: #fff; background: var(--brand-blue); border: 0; }

    .cta-stack { display: flex; flex-direction: column; gap: .65rem; margin-top: 1.25rem; }
    .cta-stack.row { flex-direction: row; }
    .cta-stack.row > * { flex: 1; }

    /* Home — cinematic */
    #home.app-screen { padding: 0; }
    .home-hero {
      position: relative;
      overflow: hidden;
      min-height: 0;
      aspect-ratio: 3 / 4;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 1.5rem 1.2rem 1.6rem;
      border: 0;
      border-radius: 0;
      background: #06142b;
      box-shadow: none;
      color: #fff;
      animation: fadeUp .6s var(--ease-out) both;
    }
    .home-hero::before,
    .home-hero::after { display: none; }
    .home-hero .brand-mark {
      display: none;
      margin: 0; font-size: clamp(2.1rem, 8.2vw, 2.75rem); font-weight: 800; letter-spacing: -.05em;
      color: #fff;
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
      position: relative; z-index: 2;
      text-shadow: 0 12px 40px rgba(0,0,0,.35);
      animation: fadeUp .55s .05s both;
    }
    .home-hero .brand-mark::after {
      content: "";
      display: block;
      width: 42px; height: 3px; margin-top: .65rem;
      border-radius: 999px;
      background: linear-gradient(90deg, #1E4E86, #8ef0c0);
      animation: brandLine .8s .25s var(--ease-out) both;
    }
    @keyframes brandLine {
      from { width: 0; opacity: 0; }
      to { width: 42px; opacity: 1; }
    }
    .home-hero h1,
    .home-hero p.lead {
      position: absolute;
      width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
    }
    .home-hero .cta-stack { position: relative; z-index: 2; }
    .hero-wipe {
      appearance: none; border: 0; background: transparent;
      position: relative; z-index: 2;
      margin: 0 0 .7rem;
      min-height: 1.85rem;
      padding: 0; text-align: left; cursor: pointer;
    }
    .hero-wipe-text {
      display: inline-block; max-width: 100%;
      color: var(--ink); background: #fff;
      border-radius: 999px; padding: .4rem .85rem;
      font-size: .78rem; font-weight: 800; letter-spacing: -.01em;
      box-shadow: 0 10px 24px rgba(0,0,0,.2);
      clip-path: inset(0 100% 0 0 round 999px);
      animation: heroWipe 4.6s cubic-bezier(.65,.05,.36,1) infinite;
    }
    @keyframes heroWipe {
      0% { clip-path: inset(0 100% 0 0 round 999px); }
      18% { clip-path: inset(0 0 0 0 round 999px); }
      72% { clip-path: inset(0 0 0 0 round 999px); }
      88% { clip-path: inset(0 0 0 100% round 999px); }
      100% { clip-path: inset(0 100% 0 0 round 999px); }
    }
    .home-hero .btn-outline {
      color: #fff; border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.08);
      
    }
    .home-hero .btn-outline:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.55); }
    .home-chips { display: none !important; }
    .home-visual { display: none; }
    .home-visual--bleed {
      display: block;
      position: absolute;
      inset: 0;
      margin: 0;
      border: 0;
      border-radius: 0;
      background: #06142b;
      box-shadow: none;
      animation: none;
      z-index: 0;
      pointer-events: none;
      opacity: 1;
      overflow: hidden;
    }
    .home-visual--bleed img {
      display: block; width: 100%; height: 100%; object-fit: contain; object-position: center center;
      filter: none;
      animation: none;
      transform-origin: center center;
    }
    @keyframes heroKen {
      from { transform: scale(1.02); }
      to { transform: scale(1.1); }
    }
    .home-hero-fade {
      position: absolute; inset: 0; z-index: 1; pointer-events: none;
      background: linear-gradient(180deg, rgba(6,20,43,0) 0%, rgba(6,20,43,0) 58%, rgba(6,14,32,.9) 100%);
      overflow: hidden;
    }
    .home-hero-fade::after {
      content: "";
      position: absolute; top: -10%; bottom: -10%; left: -40%; width: 45%;
      background: linear-gradient(100deg, transparent, rgba(255,255,255,.16), transparent);
      animation: heroGlint 8s ease-in-out infinite;
      pointer-events: none;
    }
    @keyframes heroGlint {
      0%, 62% { transform: translateX(0); opacity: 0; }
      70% { opacity: 1; }
      100% { transform: translateX(280%); opacity: 0; }
    }
    .trust-row { display: none !important; }
    .home-below { padding: 1.15rem 1.1rem 1.35rem; }
    .twpay-stage { display: none !important; }
    .twpay-stage canvas { display: block; width: 100%; height: 100%; }
    .twpay-stage-back {
      position: fixed; inset: 0; z-index: 0; pointer-events: none;
    }
    .tw-shell { z-index: 1; }
    @media (max-width: 799px) { .twpay-stage-back { display: none; } }
    @media (prefers-reduced-motion: reduce) {
      .twpay-stage, .twpay-stage-back { display: none !important; }
    }
    .camp-home {
      margin-bottom: .9rem; border-radius: var(--radius); overflow: hidden;
      border: 1px solid rgba(255,255,255,.08);
      background:
        radial-gradient(ellipse 80% 80% at 100% 0%, rgba(91,140,255,.45), transparent 50%),
        linear-gradient(145deg, #0e1f3d 0%, #122a52 55%, #0b1a33 100%);
      color: #fff; padding: 1.1rem 1.1rem 1.15rem;
      box-shadow: var(--shadow-lg);
      animation: fadeUp .45s both;
      position: relative;
    }
    .camp-home.hidden { display: none !important; }
    .camp-home .eyebrow {
      display: inline-block; font-size: .65rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
      background: rgba(255,255,255,.12); border-radius: .5rem; padding: .28rem .6rem;
      color: rgba(255,255,255,.88);
    }
    .camp-home h3 { margin: .65rem 0 0; font-size: 1.02rem; font-weight: 800; color: #fff; letter-spacing: -.02em; }
    .camp-home p { margin: .4rem 0 0; font-size: .82rem; opacity: .88; line-height: 1.4; }
    .camp-home .btn-light {
      margin-top: .95rem; width: 100%; min-height: var(--tap); border: 0; border-radius: 1rem;
      background: #fff; color: var(--ink); font-weight: 800; cursor: pointer;
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
    }
    .oct-rail { margin: 0 0 .9rem; }
    .oct-rail-kicker {
      margin: 0 0 .55rem; font-size: .75rem; font-weight: 800; letter-spacing: .08em;
      text-transform: uppercase; color: var(--muted);
    }
    .oct-scroller {
      display: flex; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: .15rem;
    }
    .oct-scroller::-webkit-scrollbar { display: none; }
    .oct-card {
      flex: 0 0 calc(100% - 2.25rem); scroll-snap-align: start; background: var(--surface); border-radius: 16px;
      overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow);
    }
    .oct-card img {
      display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--surface-2);
    }
    .oct-card-body { padding: .9rem 1rem 1rem; }
    .oct-date { margin: 0; font-size: .8rem; font-weight: 800; color: var(--navy-text); }
    .oct-card h3 { margin: .25rem 0 0; font-size: 1.08rem; font-weight: 800; color: var(--ink); line-height: 1.3; }
    .oct-copy { margin: .35rem 0 0; font-size: .95rem; line-height: 1.4; color: var(--ink); }
    .oct-card button {
      margin-top: .8rem; width: 100%; min-height: 48px; border: 0; border-radius: 12px;
      background: #0B3A6E; color: #fff; font-weight: 800; font-size: 1rem; cursor: pointer;
    }
    .oct-dots { display: flex; justify-content: center; gap: .4rem; margin-top: .6rem; }
    .oct-dots button {
      width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: #dde3ec;
    }
    .oct-dots button.is-on { width: 18px; background: #0B3A6E; }
    .rx-how {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: .35rem;
      margin: 0 0 .85rem; padding: .75rem .55rem; border-radius: var(--radius); background: var(--surface); border: 0;
      box-shadow: var(--shadow);
      position: relative;
    }
    .rx-how .step {
      text-align: center; font-size: .62rem; font-weight: 700; color: var(--muted); line-height: 1.25;
    }
    .rx-how .step.is-on { color: var(--ink-strong); }
    .rx-how .step.is-done { color: var(--green-text); }
    .rx-how .num {
      width: 24px; height: 24px; margin: 0 auto .3rem; border-radius: 999px;
      display: flex; align-items: center; justify-content: center;
      background: var(--brand-blue-soft); color: var(--navy-text); font-size: .72rem; font-weight: 800;
    }
    .rx-how .step.is-on .num { background: var(--brand-blue); color: #fff; }
    .rx-how .step.is-done .num { background: var(--tint-green); color: var(--green-text); }
    .rx-quote-strip {
      display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .4rem;
      margin: 0 0 .75rem; padding: .7rem .75rem; border-radius: var(--radius);
      background: var(--surface); box-shadow: var(--shadow);
    }
    .rx-quote-strip.hidden { display: none !important; }
    .rx-quote-strip span { display: block; font-size: .62rem; font-weight: 700; color: var(--muted); }
    .rx-quote-strip strong { display: block; margin-top: .15rem; font-size: .82rem; font-weight: 800; color: var(--ink-strong); }
    .rx-method-hint { font-size: .72rem; color: var(--muted); margin: .15rem 0 .65rem; line-height: 1.4; }
    #rx-app.is-later .rx-dir,
    #rx-app.is-later .rx-voucher-box,
    #rx-app.is-later #rx-rate-board { display: none !important; }
    .camp-flash {
      margin: 0 0 .75rem; padding: .75rem .85rem; border-radius: 12px;
      border: 1px solid #ffd59a; background: linear-gradient(135deg, #fff8eb, #fff);
    }
    .camp-flash.hidden, .camp-flash.is-ended { display: none !important; }
    .camp-flash .row { display: flex; justify-content: space-between; gap: .5rem; align-items: flex-start; }
    .camp-flash strong { display: block; color: #b06000; font-size: .82rem; }
    .camp-flash p { margin: .25rem 0 0; font-size: .78rem; color: var(--muted); }
    .camp-flash .cd {
      font-variant-numeric: tabular-nums; font-weight: 800; font-size: .95rem; color: #f03c30;
      background: var(--surface); border: 1px solid #ffd59a; border-radius: 8px; padding: .35rem .5rem;
    }
    .camp-flash .cd.hidden, .camp-flash .slots.hidden, .camp-flash .code.hidden { display: none !important; }
    .camp-flash .meta { margin-top: .55rem; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
    .camp-flash .code {
      font-size: .75rem; font-weight: 800; letter-spacing: .06em; color: var(--navy-text);
      background: var(--brand-blue-soft); border-radius: .4rem; padding: .2rem .5rem;
    }
    .camp-flash .slots { font-size: .72rem; font-weight: 700; color: #b06000; }
    .camp-flash button {
      margin-top: .55rem; width: 100%; min-height: 44px; border: 0; border-radius: 999px;
      background: #f03c30; color: #fff; font-weight: 800; cursor: pointer;
    }
    .camp-kyc-badge {
      display: inline-flex; align-items: center; gap: .35rem; margin: .55rem 0 .25rem;
      font-size: .72rem; font-weight: 800; color: var(--green-text); background: var(--tint-green);
      border-radius: 999px; padding: .3rem .65rem;
    }
    .camp-kyc-badge.hidden { display: none !important; }

    .quick-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: .1rem;
    }
    .quick-card {
      display: flex; flex-direction: column; align-items: flex-start; gap: .45rem;
      padding: 1.05rem 1.05rem; border-radius: var(--radius);
      border: 1px solid rgba(6,20,43,.04);
      background: linear-gradient(165deg, #fff 0%, #f7f9fc 100%);
      text-decoration: none; color: inherit; cursor: pointer;
      min-height: 96px; text-align: left;
      box-shadow: var(--shadow);
      transition: transform .22s var(--ease-out), box-shadow .22s ease;
      animation: fadeUp .5s .2s both;
    }
    .quick-card:nth-child(2) { animation-delay: .28s; }
    .quick-card:nth-child(3) { grid-column: 1 / -1; animation-delay: .36s; }
    .quick-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-lg);
    }
    .quick-card:active { transform: scale(.98); }
    .quick-card strong { font-size: .92rem; font-weight: 800; color: var(--ink-strong); }
    .quick-card span { font-size: .74rem; color: var(--muted); line-height: 1.35; }
    .quick-card .qc-icon {
      width: 40px; height: 40px; border-radius: 12px;
      display: flex; align-items: center; justify-content: center;
      background: linear-gradient(145deg, #E7EEF6, #dce8ff); color: var(--navy-text-strong);
      transition: transform .25s var(--ease-out);
    }
    .quick-card:hover .qc-icon { transform: scale(1.06); }


    /* —— Remittance wizard —— */
    .rx-dir {
      display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: .85rem;
    }
    .rx-dir.is-one { grid-template-columns: 1fr; }
    .rx-dir button {
      appearance: none; border: 1.5px solid var(--line); background: var(--surface); border-radius: 16px;
      padding: 1rem .65rem; font-weight: 800; font-size: .84rem; color: var(--muted); cursor: pointer;
      min-height: var(--tap);
      transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
      box-shadow: 0 4px 14px rgba(6,20,43,.03);
    }
    .rx-dir button.active {
      border-color: transparent; background: linear-gradient(160deg, #E7EEF6 0%, #f4f7ff 100%);
      color: var(--navy-text-strong);
      box-shadow: 0 10px 24px rgba(8,46,88,.12);
      transform: translateY(-1px);
    }
    .rx-dir button:active { transform: scale(.98); }
    .rx-pay-section-title {
      padding: 0 1rem; margin: .35rem 0 .15rem; font-size: .72rem; font-weight: 800;
      letter-spacing: .02em; text-transform: uppercase; color: var(--muted);
    }
    .rx-account-ok { color: var(--green-text) !important; }
    .rx-account-bad { color: #c5221f !important; }
    .rx-cvs [data-cvs]:disabled { opacity: .55; pointer-events: none; }
    .rx-ccy-row {
      display: none !important;
    }
    .rx-rate-board {
      display: none !important;
    }
    .rx-rate-chip {
      appearance: none; border: 1px solid var(--line); background: var(--surface); border-radius: 12px;
      padding: .55rem .6rem; text-align: left; cursor: default;
    }
    .rx-rate-chip.active { border-color: var(--brand-blue); background: var(--tint-blue); }
    .rx-rate-chip-code { display: block; font-size: .72rem; font-weight: 800; color: var(--ink); }
    .rx-rate-chip-val { display: block; font-size: .68rem; color: var(--muted); margin-top: .15rem; }
    .rx-rate-updated { grid-column: 1 / -1; font-size: .65rem; color: var(--muted); margin: .1rem 0 0; }
    .rx-rate-auto {
      grid-column: 1 / -1; font-size: .65rem; font-weight: 700; color: var(--navy-text);
      margin: .05rem 0 0;
    }
    .rx-voucher-box {
      margin: 0 0 .75rem; padding: .75rem .85rem; border-radius: 12px;
      border: 1px solid #c8e6c9; background: linear-gradient(165deg, #f1faf3, #fff);
    }
    .rx-voucher-box .ttl { font-size: .78rem; font-weight: 800; color: var(--green-text); }
    .rx-voucher-box .sub { font-size: .68rem; color: var(--muted); margin-top: .2rem; }
    .voucher-list { margin-top: .55rem; display: flex; flex-direction: column; gap: .4rem; }
    .voucher-item {
      display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem;
      padding: .55rem .65rem; border-radius: 10px; border: 1px solid var(--line); background: var(--surface);
      font-size: .78rem;
    }
    .voucher-item.is-available { border-color: #a8d5a8; background: #f7fcf7; }
    .voucher-item.is-reserved { border-color: #f0c36d; background: #fffaf0; }
    .voucher-item.is-used { opacity: .72; }
    .voucher-item .amt { font-weight: 800; color: var(--green-text); white-space: nowrap; }
    .voucher-item.is-reserved .amt { color: #b06000; }
    .voucher-item.is-used .amt { color: var(--muted); text-decoration: line-through; }
    .voucher-item .meta { color: var(--muted); font-size: .68rem; margin-top: .1rem; }
    .voucher-item .badge {
      font-size: .62rem; font-weight: 800; padding: .12rem .4rem; border-radius: 999px;
      background: var(--tint-green); color: var(--green-text);
    }
    .voucher-item.is-reserved .badge { background: #fff3cd; color: #8a5a00; }
    .voucher-item.is-used .badge { background: var(--surface-2); color: var(--muted); }
    .voucher-empty { font-size: .75rem; color: var(--muted); margin-top: .35rem; }
    .rx-tw-bank-hit {
      margin-top: .45rem; padding: .55rem .7rem; border-radius: 10px;
      border: 1px solid #c8e6c9; background: #f1faf3; font-size: .82rem; font-weight: 700; color: var(--green-text);
      display: flex; align-items: center; gap: .55rem;
    }
    .rx-tw-bank-hit .rx-bank-logo { width: 28px; height: 28px; border-radius: 6px; }
    .rx-tw-bank-hit.is-miss {
      border-color: #f5c2c0; background: #fef7f6; color: #c5221f;
    }
    .rx-stk-pick { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: .85rem 0 .35rem; }
    .rx-stk-btn {
      border: 1.5px solid var(--line); background: var(--surface); border-radius: 14px;
      padding: .7rem .6rem; text-align: left; cursor: pointer; min-height: 76px;
      position: relative; overflow: hidden;
    }
    .rx-stk-btn .rx-stk-k { display: block; font-size: .68rem; font-weight: 800; color: #6b7a8d; letter-spacing: .04em; text-transform: uppercase; }
    .rx-stk-btn strong { display: block; margin-top: .2rem; font-size: .82rem; word-break: break-all; color: var(--ink-strong); }
    .rx-stk-btn em { display: block; margin-top: .15rem; font-style: normal; font-size: .68rem; color: #6b7a8d; font-weight: 600; }
    .rx-stk-btn.active { border-color: var(--brand-blue); background: var(--brand-blue-soft); box-shadow: 0 0 0 2px rgba(11,58,110,.16); }
    .rx-in-pay-qr { text-align: center; margin-top: .75rem; }
    .rx-in-pay-qr img {
      max-width: 220px; width: 100%; border-radius: 14px; border: 1px solid var(--line);
      background: #fff; padding: .5rem;
    }
    .rx-in-pay-meta { font-size: .82rem; margin-top: .65rem; text-align: left; }
    .rx-in-pay-meta p { margin: .25rem 0; }
    .rx-voucher-row {
      display: flex; align-items: flex-start; gap: .55rem;
      margin: .75rem 0; padding: .65rem .75rem; border-radius: 12px;
      border: 1px solid #c8e6c9; background: #f7fcf7; font-size: .85rem;
    }
    .rx-voucher-row input { margin-top: .2rem; }
    .rx-steps { display: none; }
    .rx-steps.is-on { display: block; animation: screenIn .28s ease; }
    .rx-methods {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin: .75rem 0 1rem;
    }
    .rx-methods button {
      appearance: none; border: 1px solid var(--line); background: var(--surface); border-radius: 12px;
      padding: .65rem .35rem; font-size: .68rem; font-weight: 700; color: var(--muted); cursor: pointer;
      display: flex; flex-direction: column; align-items: center; gap: .35rem; min-height: 72px;
    }
    .rx-methods button.active {
      border-color: var(--brand-blue); color: var(--navy-text); background: var(--brand-blue-soft);
    }
    .rx-methods .ico { width: 28px; height: 28px; color: inherit; }
    .rx-limit {
      background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: .85rem 1rem; margin-bottom: .75rem;
    }
    .rx-limit .lbl { font-size: .75rem; color: var(--muted); font-weight: 700; }
    .rx-limit .val { font-size: 1.35rem; font-weight: 800; color: var(--ink-strong); margin-top: .2rem; }
    .rx-limit .bar { height: 6px; border-radius: 99px; background: #e8eaed; margin-top: .55rem; overflow: hidden; }
    .rx-limit .bar > i { display: block; height: 100%; width: 35%; background: var(--brand-blue); border-radius: 99px; }
    .rx-field { margin-bottom: .75rem; }
    .rx-field label { display: block; font-size: .78rem; font-weight: 700; color: var(--muted); margin-bottom: .35rem; }
    .rx-field input, .rx-field select {
      width: 100%; min-height: var(--tap); border: 1.5px solid var(--line); border-radius: 999px;
      padding: .7rem 1rem; font-size: .95rem; font-weight: 600; background: var(--surface); outline: none;
    }
    .rx-field input:focus, .rx-field select:focus { border-color: var(--brand-blue); }
    .rx-row { display: flex; justify-content: space-between; gap: .75rem; font-size: .85rem; padding: .35rem 0; color: var(--muted); }
    .rx-row strong { color: var(--ink-strong); font-weight: 800; }
    .rx-total { font-size: 1.05rem; font-weight: 800; color: var(--navy-text); border-top: 1px dashed var(--line); margin-top: .35rem; padding-top: .55rem; }
    .rx-bank-list {
      border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
    }
    .rx-bank-list button {
      width: 100%; display: flex; align-items: center; gap: .75rem; padding: .65rem .85rem;
      border: 0; border-bottom: 1px solid #f0f2f5; background: var(--surface); cursor: pointer; text-align: left;
    }
    .rx-bank-list button:last-child { border-bottom: 0; }
    .rx-bank-list button.active { background: var(--brand-blue-soft); }
    .rx-bank-logo {
      width: 40px; height: 40px; border-radius: 8px; object-fit: contain; background: #fff;
      border: 1px solid #eef1f5; flex-shrink: 0; padding: 2px;
    }
    .rx-bank-logo.fallback {
      display: flex; align-items: center; justify-content: center;
      font-size: .6rem; font-weight: 800; color: #fff; background: #0B3A6E; border: 0; padding: 0;
    }
    .rx-bank-meta { min-width: 0; }
    .rx-bank-name { font-size: .88rem; font-weight: 700; color: var(--ink-strong); display: block; }
    .rx-bank-full { font-size: .68rem; color: var(--muted); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .rx-cvs {
      display: grid; grid-template-columns: repeat(2, 1fr); gap: .55rem; padding: 0 .85rem .85rem;
    }
    @media (min-width: 380px) {
      .rx-cvs { grid-template-columns: repeat(4, 1fr); }
    }
    .rx-cvs button {
      appearance: none; border: 1.5px solid var(--line); background: #fff; border-radius: 12px;
      padding: .55rem .4rem; cursor: pointer; color: var(--ink);
      min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem;
    }
    .rx-cvs button img { width: 100%; max-width: 100px; height: 36px; object-fit: contain; display: block; }
    .rx-cvs button.rx-cvs-bank {
      flex-direction: row; gap: .5rem; font-size: .78rem; font-weight: 800; color: var(--navy-text);
    }
    .rx-cvs button.rx-cvs-bank img { max-width: 72px; height: 32px; }
    .rx-cvs button.rx-cvs-bank .rx-wallet-pay-copy {
      display: flex; flex-direction: column; align-items: flex-start; gap: .12rem; text-align: left;
    }
    .rx-cvs button.rx-cvs-bank .rx-wallet-pay-copy small {
      font-size: .68rem; font-weight: 700; color: var(--muted); line-height: 1.25;
    }
    .rx-cvs button.rx-cvs-bank.is-short {
      border-color: #f3c6a5; background: #fff8f1; color: #b06000;
    }
    .rx-cvs button.rx-cvs-bank.is-short .rx-wallet-pay-copy small { color: #b06000; }
    .rx-cvs button.active { border-color: var(--brand-blue); background: var(--brand-blue-soft); box-shadow: 0 0 0 2px rgba(11,58,110,.15); }
    .rx-card-box { margin: 0 .85rem .85rem; padding: .85rem; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
    .rx-card-opt {
      display: flex; align-items: center; gap: .65rem; cursor: pointer;
    }
    .rx-card-opt input { width: 18px; height: 18px; accent-color: var(--brand-blue); }
    .rx-card-opt strong { display: block; font-size: .86rem; font-weight: 800; color: var(--ink-strong); }
    .rx-card-brands { margin-left: auto; display: flex; gap: .28rem; }
    .rx-card-brands i {
      width: 18px; height: 12px; border-radius: 3px; background: #d8dde6; display: block;
    }
    .rx-card-brands i:nth-child(1) { background: #1a1f71; }
    .rx-card-brands i:nth-child(2) { background: linear-gradient(90deg, #eb001b 50%, #f79e1b 50%); }
    .rx-card-brands i:nth-child(3) { background: #016fd0; }
    .rx-card-brands i:nth-child(4) { background: #000; }
    .rx-card-form { margin-top: .85rem; }
    .rx-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
    @media (max-width: 420px) { .rx-card-grid { grid-template-columns: 1fr; } }
    .rx-card-save {
      display: flex; align-items: flex-start; gap: .5rem; margin: .75rem 0 .35rem;
      font-size: .72rem; color: var(--muted); line-height: 1.4;
    }
    .rx-card-secure { font-size: .68rem; color: var(--muted); line-height: 1.4; margin: .35rem 0 .75rem; }
    .rx-selected-bank {
      display: flex; align-items: center; gap: .65rem; margin-bottom: .75rem;
      padding: .55rem .75rem; border-radius: 12px; border: 1px solid #b7d0fb; background: var(--tint-blue);
    }
    .rx-selected-bank img { width: 36px; height: 36px; object-fit: contain; border-radius: 6px; background: #fff; }
    .rx-ticket {
      background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
      border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
    }
    .rx-ticket-head {
      background: var(--brand-blue); color: #fff; padding: 1rem 1.1rem; text-align: center;
    }
    .rx-ticket-head .pin { font-size: 1.35rem; font-weight: 800; letter-spacing: .04em; margin-top: .35rem; }
    .rx-status {
      display: block; text-align: center; background: #f03c30; color: #fff; font-weight: 800;
      font-size: .85rem; padding: .55rem; letter-spacing: .04em;
    }
    .rx-status.paid { background: #0E7A45; }
    .rx-status.is-loading { background: #0B3A6E; }
    .rx-status.is-loading::before {
      content: "";
      display: inline-block;
      width: 14px; height: 14px;
      margin-right: .45rem;
      border: 2px solid rgba(255,255,255,.35);
      border-top-color: #fff;
      border-radius: 50%;
      vertical-align: -2px;
      animation: orderSpin .8s linear infinite;
    }
    .pay-notice {
      position: absolute;
      left: .75rem; right: .75rem;
      bottom: calc(var(--bottom-nav-h) + var(--safe-b) + 12px);
      z-index: 46;
      display: flex; align-items: center; justify-content: space-between; gap: .75rem;
      padding: .85rem 1rem;
      border-radius: 14px;
      background: var(--tint-green);
      color: var(--green-text);
      box-shadow: 0 8px 24px rgba(14,122,69,.16);
    }
    .pay-notice.hidden { display: none; }
    .pay-notice p { margin: 0; font-size: 1rem; font-weight: 800; line-height: 1.3; }
    .pay-notice button {
      min-height: 44px; padding: 0 1rem; border: 0; border-radius: 12px;
      background: #0B3A6E; color: #fff; font-weight: 800; font-size: 1rem;
    }
    .rx-recv-card {
      margin: .85rem; padding: .85rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2);
    }
    .rx-hist { margin-top: 1rem; }
    .rx-hist-item {
      display: flex; justify-content: space-between; gap: .75rem; padding: .75rem .85rem;
      background: var(--surface); border: 1px solid var(--line); border-radius: 12px; margin-bottom: .5rem;
    }
    .rx-hist-item .amt { font-weight: 800; color: var(--ink-strong); }
    .rx-hist-item .vnd { font-size: .8rem; color: var(--green-text); font-weight: 700; }
    .rx-hist-item .meta { font-size: .72rem; color: var(--muted); }
    .rx-hist-item.is-fresh { animation: fadeUp .42s cubic-bezier(.22,1,.36,1) both; }

    .deal-steps { margin-top: .45rem; }
    .deal-steps-track { height: 3px; border-radius: 99px; background: #e8eaed; overflow: hidden; margin-bottom: 6px; }
    .deal-steps-fill {
      height: 100%; width: var(--fill, 12%); background: #0B3A6E; border-radius: 99px;
      transform-origin: left center;
    }
    .deal-steps.is-fresh .deal-steps-fill { animation: stepFill .5s cubic-bezier(.22,1,.36,1); }
    @keyframes stepFill { from { transform: scaleX(.2); } to { transform: scaleX(1); } }
    .deal-steps-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
    .deal-step {
      border-radius: 8px; padding: 4px 2px; text-align: center; font-weight: 700; font-size: 10px;
      background: var(--surface-2); color: var(--muted);
      transition: background-color .35s ease, color .35s ease;
    }
    .deal-step.is-done { background: var(--tint-green); color: var(--green-text); }
    .deal-step.is-now { background: #0B3A6E; color: #fff; }
    .deal-steps.is-fresh .deal-step { animation: fadeUp .38s cubic-bezier(.22,1,.36,1) both; }
    .deal-steps.is-fresh .deal-step:nth-child(2) { animation-delay: 40ms; }
    .deal-steps.is-fresh .deal-step:nth-child(3) { animation-delay: 80ms; }
    .deal-steps.is-fresh .deal-step:nth-child(4) { animation-delay: 120ms; }
    .chat-bubble.is-pop { animation: chatPop .34s cubic-bezier(.22,1,.36,1) both; }
    @keyframes chatPop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
    #order-card-box:not(.hidden),
    #order-twd-box:not(.hidden),
    #order-twd-cvs:not(.hidden),
    #order-bank-box:not(.hidden),
    #order-deposit-box:not(.hidden) { animation: payPop .3s cubic-bezier(.22,1,.36,1); }
    @keyframes payPop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
    #order-modal label.rounded-xl { transition: border-color .22s ease, background-color .22s ease; }
    .order-card-in { animation: fadeUp .4s cubic-bezier(.22,1,.36,1) both; }
    @media (prefers-reduced-motion: reduce) {
      .deal-steps.is-fresh .deal-steps-fill,
      .deal-steps.is-fresh .deal-step,
      .chat-bubble.is-pop,
      .order-card-in,
      .rx-hist-item.is-fresh,
      #order-card-box:not(.hidden),
      #order-twd-box:not(.hidden),
      #order-twd-cvs:not(.hidden),
      #order-bank-box:not(.hidden),
      #order-deposit-box:not(.hidden) { animation: none !important; }
    }

    /* Exchange */
    .exchange-box {
      background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
      padding: 1.1rem; box-shadow: var(--shadow); margin-top: .85rem;
    }
    .exchange-field { margin-bottom: .85rem; }
    .exchange-field label {
      display: block; font-size: .75rem; font-weight: 700; color: var(--muted);
      margin-bottom: .35rem; text-transform: uppercase; letter-spacing: .04em;
    }
    .exchange-field input {
      width: 100%; min-height: var(--tap); border: 1.5px solid var(--line);
      border-radius: .75rem; padding: .75rem 1rem; font-size: 1.15rem; font-weight: 800;
      color: var(--ink-strong); background: var(--paper-soft); outline: none;
    }
    .exchange-field input:focus { border-color: var(--brand-blue); background: var(--surface); }
    .exchange-rate { font-size: .8rem; color: var(--muted); margin: .25rem 0 .75rem; }

    /* Shop */
    .screen-title {
      font-size: 1.28rem; font-weight: 800; letter-spacing: -.03em; margin: 0;
    }
    .screen-sub { margin: .35rem 0 0; font-size: .85rem; color: var(--muted); }
    .shop-tools { display: flex; align-items: stretch; gap: .5rem; margin-top: 1rem; }
    .shop-tools #search-form { margin-top: 0; flex: 1; min-width: 0; }
    .shop-cart-open {
      position: relative; flex: 0 0 48px; width: 48px; border-radius: .95rem;
      border: 1px solid var(--line); background: var(--surface); color: var(--navy-text); cursor: pointer;
    }
    .shop-cart-open .nav-badge { top: 4px; right: 2px; }
    #search-form {
      display: flex; margin-top: 1rem; border: 1px solid var(--line);
      border-radius: .95rem; overflow: hidden; background: var(--surface); min-height: var(--tap);
      box-shadow: 0 6px 18px rgba(11,31,58,.04);
    }
    #product-search {
      flex: 1; border: 0; padding: 0 1rem; font-size: .95rem; outline: none; min-width: 0;
    }
    #search-form button[type="submit"] {
      min-width: var(--tap); background: var(--brand-blue); color: #fff; border: 0; cursor: pointer;
    }
    .filter-row {
      display: flex; gap: .45rem; overflow-x: auto; padding: .85rem 0 .25rem;
      -webkit-overflow-scrolling: touch; scrollbar-width: none;
      mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent);
    }
    .filter-row::-webkit-scrollbar { display: none; }
    .filter-chip {
      flex: 0 0 auto; min-height: 40px; border-radius: .85rem; border: 1px solid var(--line);
      background: var(--surface); padding: .45rem .9rem; font-size: .8rem; font-weight: 700;
      color: var(--ink); cursor: pointer; white-space: nowrap;
      transition: background .2s ease, color .2s ease, transform .18s ease, box-shadow .2s ease;
    }
    .filter-chip:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(8,46,88,.12); }
    .filter-chip.active, .filter-chip:hover {
      background: var(--brand-blue) !important; color: #fff !important; border-color: var(--brand-blue) !important;
    }
    .product-grid-list {
      display: flex; flex-direction: column; gap: .75rem;
    }
    .shop-card, .product-grid-list > article, .guest-card {
      --rx: 0deg;
      --ry: 0deg;
      background: var(--surface); border: 0;
      border-radius: var(--radius);
      overflow: hidden; box-shadow: var(--shadow);
      transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
      transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s ease;
      animation: fadeUp .45s both;
    }
    .shop-card:hover, .product-grid-list > article:hover, .guest-card:hover,
    .shop-card:active, .product-grid-list > article:active, .guest-card:active {
      transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-4px);
      box-shadow: 0 18px 36px rgba(11,31,58,.12);
    }
    #rx-in-vn-pay:not(.hidden),
    #order-bank-box:not(.hidden),
    #success-qr-wrap:not(.hidden) {
      animation: qrReveal .48s var(--ease-out);
    }
    @keyframes qrReveal {
      from { opacity: 0; transform: translateY(12px) scale(.96); }
      to { opacity: 1; transform: none; }
    }
    #exchange.is-active .rx-dir,
    #exchange.is-active .rx-how {
      animation: riseIn .48s var(--ease-out) both;
    }
    #exchange.is-active .exchange-box {
      animation: riseIn .48s var(--ease-out) both, glassPulse 5.2s ease-in-out infinite;
      animation-delay: .06s, 0s;
    }
    .product-image { transition: transform .4s cubic-bezier(.22,1,.36,1); }
    .shop-card:hover .product-image, .product-grid-list > article:hover .product-image {
      transform: scale(1.04);
    }
    .product-grid-list > article:nth-child(1),
    .guest-card:nth-child(1) { animation-delay: .04s; }
    .product-grid-list > article:nth-child(2) { animation-delay: .08s; }
    .product-grid-list > article:nth-child(3) { animation-delay: .12s; }
    .product-grid-list > article:nth-child(4) { animation-delay: .16s; }
    .product-grid-list > article:nth-child(5) { animation-delay: .2s; }
    .product-grid-list > article:nth-child(6) { animation-delay: .24s; }
    #support.is-active .acct-head,
    #support.is-active .acct-body > section,
    #support.is-active .acct-body > .profile-card,
    #support.is-active .acct-body > .acct-logout,
    #support.is-active .acct-body > .acc {
      animation: riseIn .52s cubic-bezier(.22,1,.36,1) both;
    }
    #support.is-active .acct-body > :nth-child(2) { animation-delay: .06s; }
    #support.is-active .acct-body > :nth-child(3) { animation-delay: .1s; }
    #support.is-active .acct-body > :nth-child(4) { animation-delay: .14s; }
    #support.is-active .acct-body > :nth-child(5) { animation-delay: .18s; }
    #support.is-active .acct-body > :nth-child(6) { animation-delay: .22s; }
    #support.is-active .acct-body > :nth-child(7) { animation-delay: .26s; }
    #support.is-active .acct-body > :nth-child(8) { animation-delay: .3s; }
    .acct-menu .list-row { transition: background .2s ease, transform .22s cubic-bezier(.22,1,.36,1); }
    .acct-menu .list-row:hover { background: #f7faff; transform: translateX(3px); }
    .acct-menu .list-row:active { transform: scale(.985); }
    /* Force card stack over multi-col grids from old markup */
    #iphone-18-list, #iphone-17-list, #iphone-deal-list, #samsung-new-list, #android-new-list,
    #phone-used-list, #ipad-new-list, #ipad-used-list, #tablet-android-list, #wear-new-list,
    #mac-new-list, #laptop-win-list, #laptop-used-list,
    #guest-preview-grid {
      display: flex !important;
      flex-direction: column !important;
      gap: .75rem !important;
      grid-template-columns: none !important;
    }
    .price-block { margin-top: 1.25rem; }
    .price-block h3 {
      font-size: .8rem; font-weight: 800; text-transform: uppercase;
      letter-spacing: .06em; color: var(--muted); margin: 0 0 .65rem;
    }
    .price-twd { font-weight: 800; color: var(--navy-text); }
    .price-vnd { display: block; font-size: .85rem; color: var(--muted); }
    .price-blur { filter: blur(6px); user-select: none; }
    .price-orig {
      display: block; font-size: .82rem; color: #9aa0a6;
      text-decoration: line-through; font-weight: 600;
    }
    .price-save {
      display: inline-block; margin-top: .25rem; font-size: 11px; font-weight: 800;
      color: #c5221f; background: var(--tint-red); border-radius: .3rem; padding: .12rem .4rem;
    }
    .discount-badge {
      display: inline-block; border-radius: .35rem; padding: .15rem .45rem;
      font-size: .7rem; font-weight: 800; background: #f03c30; color: #fff;
    }

    /* Profile screen */
    .profile-card {
      background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
      padding: 1.1rem; margin-top: .85rem; box-shadow: var(--shadow);
    }
    .profile-actions { display: flex; flex-direction: column; gap: .55rem; margin-top: 1rem; }
    .list-row {
      display: flex; align-items: center; justify-content: space-between; gap: .75rem;
      min-height: var(--tap); padding: .65rem 0; border-bottom: 1px solid var(--line);
      background: transparent; border-left: 0; border-right: 0; border-top: 0;
      width: 100%; cursor: pointer; text-align: left; color: var(--ink); font-weight: 600;
    }
    .list-row:last-child { border-bottom: 0; }
    .list-row span.muted { color: var(--muted); font-weight: 500; font-size: .85rem; }

    #support.app-screen { padding: 0 0 1.35rem; background: var(--surface-2); }
    .acct-head {
      padding: 1.15rem 1.15rem 1.4rem;
      background: linear-gradient(140deg, #0B3A6E, #1E4E86);
      color: #fff;
      border-radius: 0 0 24px 24px;
    }
    .acct-head-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
    .acct-hello { margin: 0; font-size: .72rem; font-weight: 500; color: #E7EEF6; }
    .acct-head h1 { margin: .2rem 0 0; font-size: 1.15rem; font-weight: 800; color: #fff; letter-spacing: -.01em; }
    .acct-contact { margin: .25rem 0 0; font-size: .68rem; line-height: 1.35; color: #E7EEF6; }
    .acct-guest-sub { margin: .35rem 0 0; font-size: .75rem; line-height: 1.4; color: #E7EEF6; max-width: 16rem; }
    .acct-avatar {
      width: 44px; height: 44px; flex: 0 0 auto;
      display: grid; place-items: center;
      border: 2px solid rgba(255,255,255,.84);
      border-radius: 14px;
      background: #d9ebff; color: #216dd4;
    }
    .acct-kyc { margin: .7rem 0 0; }
    .acct-body { padding: 0 .9rem; }
    .acct-label {
      margin: 1rem .15rem .4rem;
      color: #7a8ba4; font-size: 10px; font-weight: 800; letter-spacing: .08em;
    }
    .acct-label-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
    .acct-link {
      border: 0; background: transparent; color: #1775e9;
      font-size: 10px; font-weight: 800; cursor: pointer; padding: 0;
    }
    .acct-card {
      overflow: hidden; border: 1px solid #e4ebf5; border-radius: 15px;
      background: var(--surface); box-shadow: 0 4px 12px rgba(30, 73, 128, .045);
    }
    .acct-voucher { padding: .9rem; }
    .acct-voucher-top { display: flex; align-items: flex-start; gap: .7rem; }
    .acct-ico, .acct-menu-ico {
      display: grid; place-items: center; flex: 0 0 auto;
      border-radius: 10px; background: #edf5ff; color: #1c74e3;
    }
    .acct-ico { width: 40px; height: 40px; border-radius: 12px; }
    .acct-menu-ico { width: 31px; height: 31px; }
    .acct-code-row {
      margin-top: .75rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem;
      border-radius: 10px; background: #f4f8fd; padding: .4rem .45rem .4rem .7rem;
    }
    .acct-menu .list-row { padding: .8rem .85rem; border-bottom: 1px solid #e4ebf5; margin: 0; }
    .acct-menu .list-row:last-child { border-bottom: 0; }
    .acct-row-main { display: flex; align-items: center; gap: .7rem; min-width: 0; flex: 1; }
    .acct-order {
      display: flex; align-items: center; gap: .6rem;
      padding: .65rem .75rem; border-top: 1px solid #edf1f6;
    }
    .acct-order:first-child { border-top: 0; }
    .acct-logout {
      margin-top: 1rem; width: 100%; border: 1px solid #ffb9c1;
      background: #fff7f8; color: #e45763; border-radius: 12px;
      padding: .7rem; font-weight: 800; font-size: .78rem; cursor: pointer;
    }
    .acct-logout:hover { background: #ffedf0; }
    .acct-foot { margin: .85rem 0 .15rem; text-align: center; font-size: 9px; color: #9aa7b8; }
    #support .acc { margin-left: 0; margin-right: 0; border-radius: 12px; }

    /* Wallet + 3D card carousel */
    .wallet-panel {
      margin-top: .85rem; border-radius: var(--radius);
      border: 0;
      background:
        radial-gradient(ellipse 70% 50% at 100% 0%, rgba(11,95,255,.16), transparent 55%),
        linear-gradient(145deg, #eef4ff 0%, #fff 55%, #f3f7fb 100%);
      padding: 1.1rem;
      box-shadow: var(--shadow);
      position: relative; overflow: hidden;
      animation: fadeUp .45s both;
    }
    .wallet-panel::before { display: none; }
    .wallet-balance-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; position: relative; z-index: 1; }
    .wallet-balance-amt {
      font-size: 1.65rem; font-weight: 900; color: var(--navy-text); letter-spacing: -.03em;
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
    }
    .wallet-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .75rem; position: relative; z-index: 1; }
    .wallet-btn {
      border: 0; border-radius: .75rem; padding: .58rem .9rem; font-size: .78rem; font-weight: 800; cursor: pointer;
      transition: transform .18s ease, box-shadow .2s ease;
    }
    .wallet-btn:active { transform: scale(.97); }
    .wallet-btn-primary {
      background: linear-gradient(135deg, #0B3A6E, #082E58); color: #fff;
      box-shadow: 0 6px 16px rgba(11,58,110,.28);
    }
    .wallet-btn-outline { background: var(--surface); color: var(--navy-text); border: 1px solid #c7dafc; }
    .wallet-cards-wrap { margin-top: .85rem; perspective: 900px; position: relative; z-index: 1; }
    .wallet-cards-track {
      display: flex; gap: .75rem; overflow-x: auto; padding: .35rem .15rem 1rem;
      scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    }
    .wallet-card {
      flex: 0 0 min(82%, 280px); scroll-snap-align: center; position: relative;
      min-height: 158px; border-radius: 1.05rem; padding: 1rem 1.1rem;
      color: #fff; transform-style: preserve-3d;
      transition: transform .22s ease, box-shadow .22s ease;
      box-shadow: 0 14px 34px rgba(11,58,110,.24);
      overflow: hidden;
      animation: fadeUp .5s both;
    }
    .wallet-card:hover { box-shadow: 0 18px 40px rgba(11,58,110,.3); }
    .wallet-card--visa { background: linear-gradient(135deg, #1a3a8f 0%, #0B3A6E 48%, #1E4E86 100%); }
    .wallet-card--mc { background: linear-gradient(135deg, #1a1a2e 0%, #3d3d5c 45%, #eb001b 100%); }
    .wallet-card--amex { background: linear-gradient(135deg, #006fcf 0%, #2e77bb 50%, #a8c5e2 100%); }
    .wallet-card--jcb { background: linear-gradient(135deg, #0b3d91 0%, #1a5cad 45%, #e61b23 100%); }
    .wallet-card--unionpay { background: linear-gradient(135deg, #e21836 0%, #00447c 55%, #007b84 100%); }
    .wallet-card--discover { background: linear-gradient(135deg, #4a2c0a 0%, #f76b1c 55%, #ffa64d 100%); }
    .wallet-card--apple { background: linear-gradient(135deg, #111 0%, #333 50%, #555 100%); }
    .wallet-pay-btn {
      display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
      border-radius: 14px; padding: 14px 16px; border: none; cursor: pointer;
      text-align: left; transition: transform .18s ease, box-shadow .2s ease, filter .2s ease;
    }
    .wallet-pay-btn:hover { filter: brightness(1.05); transform: translateY(-2px); }
    .wallet-pay-btn:active { transform: scale(.98); }
    .wallet-pay-name { font-size: 1.05rem; font-weight: 800; color: #fff; }
    .wallet-pay-sub { font-size: .72rem; font-weight: 600; color: rgba(255,255,255,.85); }
    .wallet-pay-momo { background: linear-gradient(135deg, #a50064 0%, #d82d8b 100%); box-shadow: 0 8px 20px rgba(165,0,100,.3); }
    .wallet-pay-zalopay { background: linear-gradient(135deg, #0033c9 0%, #0068ff 100%); box-shadow: 0 8px 20px rgba(0,104,255,.3); }
    .wallet-pay-bank { background: linear-gradient(135deg, #0f3d2e 0%, #1a7a4c 100%); box-shadow: 0 8px 20px rgba(26,122,76,.24); }
    .wallet-pay-cvs { background: linear-gradient(135deg, #082E58 0%, #0B3A6E 55%, #1E4E86 100%); box-shadow: 0 8px 20px rgba(11,58,110,.28); }
    .wallet-card-shine {
      position: absolute; top: -40%; left: 0; width: 45%; height: 180%;
      border-radius: inherit; pointer-events: none;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
      animation: cardShineMove 4.5s ease-in-out infinite;
      transform: rotate(18deg);
    }
    .wallet-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; position: relative; z-index: 1; }
    .wallet-card-brand { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; opacity: .95; }
    .wallet-card-default { font-size: .62rem; font-weight: 800; background: rgba(255,255,255,.22); padding: .15rem .45rem; border-radius: 999px; }
    .wallet-card-number { margin-top: 1.35rem; font-size: 1.05rem; font-weight: 800; letter-spacing: .12em; position: relative; z-index: 1; }
    .wallet-card-foot { margin-top: .85rem; display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 1; }
    .wallet-card-type { font-size: .68rem; opacity: .85; }
    .wallet-card-remove { border: 0; background: rgba(0,0,0,.25); color: #fff; width: 1.6rem; height: 1.6rem; border-radius: 999px; cursor: pointer; font-size: 1rem; line-height: 1; }
    .wallet-ledger { margin-top: .75rem; }
    .wallet-link-row { display: flex; gap: .45rem; flex-wrap: wrap; margin-top: .5rem; }
    .wallet-link-chip {
      border: 1px dashed #c7dafc; background: var(--surface); color: var(--navy-text); border-radius: 999px;
      padding: .35rem .65rem; font-size: .68rem; font-weight: 800; cursor: pointer;
    }

    /* Accordion legal */
    .acc {
      border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); margin-top: .65rem;
      overflow: hidden;
    }
    .acc > summary {
      list-style: none; cursor: pointer; min-height: var(--tap);
      display: flex; align-items: center; justify-content: space-between;
      padding: .85rem 1rem; font-weight: 800; font-size: .95rem;
    }
    .acc > summary::-webkit-details-marker { display: none; }
    .acc[open] > summary { border-bottom: 1px solid var(--line); }
    .acc .acc-body { padding: .85rem 1rem 1.1rem; font-size: .85rem; color: var(--muted); max-height: 50vh; overflow-y: auto; }

    /* —— Bottom sheets (modals) —— */
    .modal-layer {
      position: absolute !important;
      inset: 0 !important;
      z-index: 70;
      display: flex !important;
      align-items: flex-end !important;
      justify-content: center !important;
      padding: 0 !important;
      opacity: 0; pointer-events: none;
      transition: opacity .28s ease;
      /* sheet đóng nằm ở translateY(100%): phải cắt đi, nếu không .tw-shell thành vùng cuộn ngầm */
      overflow: hidden;
    }
    .modal-layer.open { opacity: 1; pointer-events: auto; }
    .modal-layer > .absolute.inset-0,
    .modal-layer > [data-close-modal],
    .modal-layer > [data-close-profile],
    .modal-layer > [data-close-order],
    .modal-layer > [data-close-cart],
    .modal-layer > [data-close-orders],
    .modal-layer > [data-close-order-success],
    .modal-layer > [data-close-auth] {
      position: absolute; inset: 0; background: rgba(0,0,0,.45) !important;
    }
    .modal-layer > .relative {
      position: relative;
      width: 100% !important;
      max-width: 100% !important;
      max-height: min(92dvh, 920px) !important;
      margin: 0 !important;
      border-radius: 22px 22px 0 0 !important;
      padding: 1.15rem 1.15rem calc(1.15rem + var(--safe-b)) !important;
      transform: translateY(100%);
      transition: transform .38s cubic-bezier(.22,1,.36,1);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      box-shadow: 0 -16px 48px rgba(15,40,80,.2);
    }
    .modal-layer.open > .relative { transform: translateY(0); }
    .sheet-handle {
      width: 36px; height: 4px; border-radius: 999px; background: #d0d5dd;
      margin: 0 auto .85rem;
    }
    .modal-price-wrap { margin-top: .75rem; }
    .apple-pay-sheet {
      border: 1px solid var(--line); border-radius: .85rem; overflow: hidden; background: #fbfbfd;
    }
    .apple-pay-sheet .ap-section { padding: .85rem 1rem; border-bottom: 1px solid var(--line); }
    .apple-pay-sheet .ap-section:last-child { border-bottom: 0; }
    .apple-pay-sheet .ap-label {
      font-size: .68rem; font-weight: 700; letter-spacing: .06em; color: #86868b;
      text-transform: uppercase; margin-bottom: .55rem;
    }
    .apple-pay-sheet .ap-row {
      display: flex; align-items: center; gap: .65rem; padding: .55rem 0; border-bottom: 1px solid #eee;
    }
    .apple-pay-sheet .ap-row:last-child { border-bottom: 0; }
    .apple-pay-sheet .ap-row label { min-width: 4.2rem; font-size: .82rem; color: #6e6e73; }
    .apple-pay-sheet .ap-row input {
      flex: 1; border: 0; background: transparent; outline: none; font-size: .95rem; color: #1d1d1f; min-width: 0;
      min-height: 44px;
    }
    .apple-pay-sheet .ap-card-brand {
      height: 1.35rem; min-width: 2.2rem; display: inline-flex; align-items: center; justify-content: center;
      font-size: .62rem; font-weight: 800; color: #fff; border-radius: .25rem; padding: 0 .35rem; background: #6e6e73;
    }
    .apple-pay-sheet .ap-card-brand.visa { background: #1a1f71; }
    .apple-pay-sheet .ap-card-brand.mastercard { background: #eb001b; }
    .apple-pay-sheet .ap-hint { font-size: .72rem; color: #86868b; margin-top: .45rem; line-height: 1.35; }
    .apple-pay-sheet .ap-expiry-wrap { display: flex; gap: .35rem; flex: 1; }
    .apple-pay-sheet .ap-expiry-wrap input { width: 2.6rem; flex: 0 0 auto; text-align: center; }

    body:not(.is-authed) .auth-only,
    body:not(.is-authed) #cart-button,
    body:not(.is-authed) #cart-button-mobile,
    body:not(.is-authed) #logout-button,
    body:not(.is-authed) #shop,
    body:not(.is-authed) #screen-shop-auth { display: none !important; }
    body.is-authed .guest-only { display: none !important; }
    body.is-authed #guest-preview { display: none !important; }

    .auth-form-field {
      width: 100%; border: 1px solid var(--line); border-radius: .9rem;
      padding: .85rem 1rem; font-size: .95rem; color: var(--ink); outline: none; background: var(--surface-2);
      min-height: var(--tap);
      transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
    }
    .auth-form-field:focus { border-color: var(--brand-blue); background: var(--surface); box-shadow: 0 0 0 3px rgba(11,95,255,.14); }
    .auth-tab {
      flex: 1; padding: .7rem 1rem; border-radius: .75rem; font-weight: 700;
      color: var(--muted); background: transparent; border: 0; cursor: pointer; min-height: 44px;
    }
    .auth-tab.active { background: var(--surface); color: var(--navy-text); box-shadow: 0 4px 14px rgba(11,31,58,.08); }
    #auth-tabs { background: #edf2f7 !important; }
    #auth-modal > .relative {
      border-radius: 24px 24px 0 0 !important;
      background:
        radial-gradient(ellipse 80% 40% at 0% 0%, rgba(11,58,110,.1), transparent 50%),
        #fff !important;
    }
    .btn-auth-submit {
      width: 100%;
      padding: .95rem 1.15rem;
      border: 0;
      border-radius: 1rem;
      font-weight: 800;
      color: #fff;
      background: linear-gradient(165deg, #1E4E86 0%, #0B3A6E 42%, #082E58 100%);
      box-shadow: 0 12px 28px rgba(8,46,88,.28);
      cursor: pointer;
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
    }
    .btn-auth-submit:hover { filter: brightness(1.04); }
    #auth-modal > .relative::before {
      content: "";
      position: absolute; left: 0; right: 0; top: 0; height: 3px;
      background: linear-gradient(90deg, #0B3A6E, #5ad0a0);
      border-radius: 24px 24px 0 0;
    }
    #auth-modal-title {
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
      letter-spacing: -.035em;
      color: var(--ink) !important;
    }

    .float-chat {
      position: absolute; right: 12px; bottom: calc(var(--bottom-nav-h) + var(--safe-b) + 12px);
      z-index: 45; display: flex; flex-direction: column; gap: .45rem;
    }
    .float-chat a {
      display: inline-flex; align-items: center; justify-content: center;
      width: 44px; height: 44px; border-radius: 999px; color: #fff; font-size: 10px; font-weight: 800;
      text-decoration: none; box-shadow: 0 8px 20px rgba(11,58,110,.25);
      transition: transform .2s ease;
      animation: chatBreathe 3.6s ease-in-out infinite;
    }
    .float-chat a:nth-child(2) { animation-delay: .4s; }
    .float-chat a:nth-child(3) { animation-delay: .8s; }
    .float-chat a:hover { transform: scale(1.08); }
    .float-chat a.facebook { background: #1877F2; }
    .float-chat a.line { background: #06C755; }
    .float-chat a.zalo { background: #0068FF; }
    .float-chat .chat-label { display: none; }
    .float-chat a.is-placeholder { display: none; }

    .toast {
      position: absolute; left: 50%; bottom: calc(var(--bottom-nav-h) + var(--safe-b) + 64px);
      transform: translateX(-50%) translateY(12px); z-index: 50;
      background: #3a4450; color: #fff; padding: .75rem 1.1rem; border-radius: 12px;
      font-size: .85rem; font-weight: 600; opacity: 0; pointer-events: none;
      transition: .25s ease; max-width: calc(100% - 2rem); text-align: center;
    }
    .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
    #auth-modal.open ~ .toast,
    .tw-shell:has(#auth-modal.open) .toast { display: none; }
    .auth-session-note {
      margin-top: .75rem; padding: .7rem .85rem; border-radius: 12px;
      background: var(--surface-2); color: var(--ink); font-size: .95rem; font-weight: 700; line-height: 1.4;
    }
    #auth-session-note.hidden { display: none !important; }

    .sr-only {
      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
    }
    .visually-hidden-controls {
      position: absolute; width: 0; height: 0; overflow: hidden; opacity: 0; pointer-events: none;
    }

    #kyc-shop-banner {
      border-radius: 10px; border: 1px solid #b7d0fb;
      background: var(--tint-blue); padding: .55rem .75rem; margin-bottom: .65rem; font-size: .78rem;
      display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .65rem;
    }
    #kyc-shop-banner.hidden, #kyc-shop-banner[hidden] { display: none !important; }
    #kyc-shop-banner p { margin: 0; }
    #kyc-shop-banner .kyc-banner-body { display: block; font-size: .78rem; color: var(--muted); margin-top: .25rem; }
    #kyc-shop-banner button { margin: 0 !important; }
    .gate-card {
      margin-top: 1rem; padding: 1.35rem 1.1rem; text-align: center;
      background: var(--surface); border: 0; border-radius: var(--radius);
      box-shadow: var(--shadow);
    }
    .gate-card h3 { margin: 0; font-size: 1.05rem; font-weight: 800; }
    .gate-card p { margin: .5rem 0 1rem; font-size: .88rem; color: var(--muted); }

    /* Hide obsolete web chrome leftovers if any */
    .site-nav, .desktop-nav, .mobile-menu, .nav-backdrop, .mobile-toggle,
    .hero-visual, .assurance-strip, .site-footer, .legal-shell.policy-full,
    .shop-how, .pay-logos, .hero-cta-row .btn-outline.hero-more { display: none !important; }
    .app-promo {
      margin: 0 0 .55rem; padding: .55rem .75rem; border-radius: 10px;
      border: 1px solid #b7d0fb;
      background: var(--tint-blue);
      display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .55rem;
    }
    .app-promo p { display: none; }
    .app-promo.hidden { display: none !important; }
    .app-promo strong { display: block; color: var(--navy-text); font-size: .88rem; }
    .app-promo p { margin: .25rem 0 0; font-size: .8rem; color: var(--muted); }
    .app-promo .promo-code {
      display: inline-block; margin-top: .45rem; font-size: .75rem; font-weight: 800;
      letter-spacing: .06em; color: var(--navy-text);
      background: var(--surface); border: 1px solid #b7d0fb; border-radius: .4rem; padding: .2rem .5rem;
    }
    #pay-card-option.hidden, #pay-cvs-pin-option.hidden, #pay-transfer-option.hidden, #pay-cash-option.hidden, #order-card-box.hidden { display: none !important; }
    #order-deliver-cvs-option.is-disabled { opacity: .55; cursor: not-allowed; background: var(--surface-2); }
    #order-deliver-cvs-option.is-disabled input { pointer-events: none; }
    .ck-panel { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); }
    .ck-store {
      display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem;
      padding: .7rem .9rem; background: #fafbfc; border-bottom: 1px solid #f0f2f5;
      font-size: .78rem; color: var(--muted);
    }
    .ck-store strong { color: var(--ink); font-size: .82rem; }
    .ck-store .ck-return { color: var(--green-text); font-weight: 700; }
    .ck-head, .ck-item {
      display: grid; grid-template-columns: minmax(0,1fr) 5.6rem 3.6rem 6.2rem;
      gap: .5rem; align-items: center;
    }
    .ck-head { padding: .45rem .9rem; font-size: .7rem; color: #8a94a0; }
    .ck-head span:not(:first-child), .ck-item .ck-num { text-align: right; }
    .ck-item { padding: .75rem .9rem; border-top: 1px solid #f0f2f5; }
    .ck-prod { display: flex; gap: .65rem; min-width: 0; align-items: center; }
    .ck-prod img, .ck-prod .ck-ph {
      width: 52px; height: 52px; border-radius: 8px; border: 1px solid #eee;
      background: #f4f6f8; object-fit: cover; flex-shrink: 0;
    }
    .ck-prod .ck-ph { display: grid; place-items: center; color: #9aa3ad; font-size: .7rem; }
    .ck-prod p { margin: 0; font-size: .82rem; font-weight: 700; line-height: 1.3; }
    .ck-prod small { display: block; margin-top: .15rem; font-size: .7rem; font-weight: 500; color: #8a94a0; }
    .ck-item .ck-sum { font-weight: 800; color: var(--navy-text); text-align: right; }
    .ck-row {
      display: flex; justify-content: space-between; gap: .75rem; align-items: flex-start;
      padding: .75rem .9rem; border: 1px solid var(--line); border-radius: 12px; font-size: .82rem; background: var(--surface);
    }
    .ck-row > span:first-child { color: var(--muted); flex-shrink: 0; }
    .ck-row > span:last-child, .ck-row > strong { text-align: right; }
    .ck-paybar {
      display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
      gap: .75rem; padding-top: .85rem; border-top: 1px solid var(--line);
    }
    .ck-paybar button[type="submit"] { min-width: 11rem; }
    .ck-step { display: none; }
    .ck-step.is-on { display: block; }
    .ck-back {
      min-height: 48px; border-radius: 12px; border: 1px solid var(--line);
      background: var(--surface); color: var(--ink); font-weight: 800; padding: 0 1rem; cursor: pointer;
    }
    .acct-contact { display: none !important; }
    @media (max-width: 560px) {
      .ck-head { display: none; }
      .ck-item { grid-template-columns: minmax(0,1fr) auto; }
      .ck-item .ck-num { display: none; }
      .ck-paybar button { width: 100%; }
    }

    .shop-card-media { position: relative; max-height: 11rem; }
    .shop-card .buy-button, .shop-card .add-cart-button { min-height: var(--tap); }
    .stock-badge {
      display: inline-block; border-radius: .35rem; padding: .15rem .45rem;
      font-size: .7rem; font-weight: 800; letter-spacing: .02em;
    }
    .stock-in { background: var(--tint-green); color: var(--green-text); }
    .stock-low { background: var(--tint-amber); color: #b06000; }
    .stock-out { background: var(--tint-red); color: #c5221f; }
    .stock-preorder { background: var(--tint-blue); color: var(--navy-text); }
    .box-badge {
      display: inline-block; border-radius: .35rem; padding: .15rem .45rem;
      font-size: .7rem; font-weight: 800; letter-spacing: .02em;
    }
    .box-sealed { background: var(--tint-green); color: var(--green-text); }
    .box-opened { background: #fff4e5; color: #b06000; }
    .box-used { background: var(--surface-2); color: var(--ink); }
    .cat-ribbon {
      position: absolute; top: 10px; left: 10px; z-index: 2;
      border-radius: .35rem; padding: .2rem .45rem;
      font-size: 11px; font-weight: 800; color: #fff;
    }
    .cat-ribbon.new { background: #0E7A45; }
    .cat-ribbon.used { background: #5f6368; }
    .shop-card.is-soldout .product-image { filter: grayscale(1); opacity: .55; }
    .soldout-stamp {
      position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
      z-index: 3; pointer-events: none;
    }
    .soldout-stamp span {
      background: rgba(32, 33, 36, .82); color: #fff; font-size: 13px; font-weight: 800;
      letter-spacing: .04em; text-transform: uppercase; padding: .45rem .85rem; border-radius: .4rem;
    }
    .cond-line { font-size: 12px; font-weight: 700; line-height: 1.35; }
    .cond-line.is-new { color: var(--green-text); }
    .cond-line.is-opened { color: #b06000; }
    .cond-line.is-used { color: var(--ink); }
    .inspect-meter {
      border-radius: .55rem; background: var(--surface); border: 1px solid var(--line); padding: .55rem .65rem;
    }
    .inspect-meter .label {
      display: flex; justify-content: space-between; gap: .5rem;
      font-size: .72rem; font-weight: 700; color: var(--muted); margin-bottom: .35rem;
    }
    .inspect-meter .label strong { color: var(--ink); font-size: .8rem; }
    .inspect-meter .track { height: 6px; border-radius: 999px; background: #e8eaed; overflow: hidden; }
    .inspect-meter .fill { height: 100%; border-radius: 999px; background: #0E7A45; }
    .inspect-meter .fill.warn { background: #fcc000; }
    .inspect-meter .fill.bad { background: #f03c30; }
    .inspect-mini { display: inline-flex; flex-wrap: wrap; gap: .35rem; margin-top: .35rem; }
    .inspect-mini span {
      font-size: 11px; font-weight: 800; border-radius: .3rem; padding: .12rem .4rem;
      background: var(--surface-2); color: var(--ink);
    }
    .inspect-mini span.pin { background: var(--tint-green); color: var(--green-text); }
    .inspect-mini span.cos { background: var(--tint-blue); color: var(--navy-text); }
    .price-row.hidden, .price-block.hidden { display: none !important; }
    html:not(.i18n-ready) .tw-shell { visibility: hidden; }

    /* —— Compact phone UI: one title, one key number, one next step —— */
    .app-screen { padding: .75rem .9rem 1rem; }
    .app-main { padding-bottom: 3.4rem; }
    .home-hero { padding: 1.05rem 1.05rem 1.1rem; }
    .home-hero .cta-stack { margin-top: .65rem; gap: .5rem; }
    .home-hero .hero-extra-cta, .float-chat { display: none !important; }
    .home-below { padding: .8rem .9rem .95rem; }
    .camp-home { margin-bottom: .65rem; padding: .8rem .85rem .85rem; }
    .camp-home h3 { margin: .4rem 0 0; font-size: .95rem; }
    .camp-home .btn-light { margin-top: .65rem; }
    .quick-grid { gap: .55rem; }
    .quick-card { padding: .75rem .8rem; min-height: 72px; gap: .28rem; }
    .quick-card span:not(.qc-icon) { display: none; }
    .quick-card .qc-icon { width: 36px; height: 36px; }
    .quick-card:nth-child(3) { min-height: 56px; flex-direction: row; align-items: center; }
    #exchange .screen-sub { display: none; }
    .rx-how { margin: .55rem 0 .6rem; padding: .5rem .35rem; }
    .rx-dir { margin-bottom: .6rem; }
    .rx-dir button { padding: .8rem .5rem; font-size: .86rem; }
    .rx-dir button span { display: none; }
    .exchange-box { padding: .85rem .85rem; margin-top: .6rem; }
    .rx-field { margin-bottom: .55rem; }
    .rx-limit { padding: .65rem .8rem; margin-bottom: .5rem; }
    .rx-limit .val { font-size: 1.2rem; }
    .rx-methods { margin: .4rem 0 .5rem; }
    .rx-method-hint { margin: 0 0 .4rem; }
    .rx-hist { margin-top: .7rem; }
    .rx-in-lead, .rx-method-title, #rx-pay-hint, .rx-pay-cvs-title,
    .rx-in-pay-hint, .rx-in-qr-label { display: none; }
    .gate-card { margin-top: .7rem; padding: 1rem .9rem; }
    .gate-card p { margin: .3rem 0 .75rem; }
    #shopping .screen-title { margin: .1rem 0 0; }
    .camp-flash { padding: .55rem .7rem; margin-bottom: .5rem; }
    .camp-kyc-badge { display: none !important; }
    .shop-tools { margin-top: .65rem; }
    #search-form { margin-top: 0; }
    .filter-row { padding: .5rem 0 .1rem; gap: .35rem; }
    .filter-chip { min-height: 44px; padding: .4rem .75rem; font-size: .78rem; }
    .price-block { margin-top: .9rem; }
    .price-block h3 { margin: 0 0 .4rem; }
    .product-grid-list,
    #iphone-18-list, #iphone-17-list, #iphone-deal-list, #samsung-new-list, #android-new-list,
    #phone-used-list, #ipad-new-list, #ipad-used-list, #tablet-android-list, #wear-new-list,
    #mac-new-list, #laptop-win-list, #laptop-used-list, #guest-preview-grid {
      gap: .55rem !important;
    }
    .shop-card-media { max-height: 9.25rem; }
    .shop-add-quiet {
      width: 100%; min-height: var(--tap); margin-top: .35rem;
      border: 0; background: transparent; cursor: pointer;
      color: var(--navy-text); font-weight: 700; font-size: .85rem;
    }
    .modal-layer > .relative { padding: .95rem .95rem calc(.95rem + var(--safe-b)) !important; }
    .sheet-handle { margin: 0 auto .5rem; }
    #auth-modal > .relative > p[data-i18n="authSubtitle"],
    #orders-modal > .relative > p[data-i18n="myOrdersSubtitle"],
    #order-modal > .relative > p[data-i18n="orderSubtitle"],
    #profile-modal > .relative > p[data-i18n="profileSubtitle"],
    .modal-kicker, .ck-store .ck-return,
    [data-i18n="promoCodeHint"], [data-i18n="orderBankContentHint"] { display: none; }
    #order-form label .text-xs {
      display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
    }
    .acct-head { padding: .9rem 1rem 1rem; }
    .acct-guest-sub { display: none; }
    .acct-label { margin: .7rem .1rem .25rem; }
    .acct-voucher { padding: .7rem; }
    .profile-card { padding: .85rem; margin-top: .6rem; }
    .cart-item-row {
      display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem;
      padding: .75rem 0; border-bottom: 1px solid var(--line);
    }
    .cart-item-row:last-child { border-bottom: 0; }
    .cart-qty-btn {
      min-width: 44px; min-height: 44px; border: 1px solid var(--line); background: var(--surface);
      border-radius: 12px; font-weight: 800; color: var(--ink); cursor: pointer;
    }
    .order-wait {
      display: flex; align-items: center; gap: .7rem;
      margin-top: .75rem; padding: .8rem .85rem;
      border-radius: 12px; background: var(--surface-2);
    }
    .order-spin {
      width: 22px; height: 22px; flex: 0 0 22px;
      border: 3px solid var(--line); border-top-color: #0B3A6E;
      border-radius: 50%; animation: orderSpin .8s linear infinite;
    }
    @keyframes orderSpin { to { transform: rotate(360deg); } }
    .order-wait p { margin: 0; font-weight: 700; color: var(--ink); font-size: .95rem; line-height: 1.35; }
    .order-wait.is-ready { display: block; background: var(--tint-green); }
    #rx-out-flow.hidden, #rx-in-vn.hidden { display: none !important; }
    .order-wait-label { margin: 0; font-size: .75rem; font-weight: 700; color: var(--muted); }
    .order-wait-value { margin: .2rem 0 0; font-size: 1.05rem; font-weight: 800; color: var(--green-text); word-break: break-word; }
    .pay-pin-card { display: block; width: 100%; max-width: 100%; margin-top: .45rem; border-radius: 8px; background: #fff; }
    .pay-slip { background: #fff; border-radius: 8px; padding: .35rem .35rem .5rem; }
    .pay-slip-logo { display: block; height: 32px; width: auto; margin: 0 auto .35rem; }
    .pay-slip .pay-slip-original { display: block; width: 100%; height: auto; margin-top: 0; border-radius: 0; }
    #cart-empty, #orders-empty { text-align: center; padding: 1.6rem .5rem 1.2rem; }
    #order-deliver-home-hint, #order-deliver-cvs-hint { -webkit-line-clamp: 2; }

    /* ==========================================================
       HIỆU ỨNG NỀN 3D — parallax hero, hạt sáng, neon chân trang
       Chỉ dùng transform + opacity để trình duyệt chạy trên GPU.
       --hero-p (0 → 1) do JS ghi bằng requestAnimationFrame.
       ========================================================== */
    .home-hero { --hero-p: 0; --tilt-x: 0deg; --tilt-y: 0deg; }

    /* Ảnh nền giữ nguyên, không dịch, không phóng — để không cắt ảnh trang chủ */
    .home-hero-fade {
      transform: translate3d(0, calc(var(--hero-p) * 22px), 0);
    }

    /* Lớp chiều sâu: quầng sáng + vòng neon trôi trên ảnh */
    .hero-depth {
      position: absolute; inset: 0; z-index: 1;
      pointer-events: none; overflow: hidden;
      perspective: 620px;
      transform: translate3d(0, calc(var(--hero-p) * -34px), 0);
      opacity: calc(1 - var(--hero-p) * .85);
    }
    .hero-depth span {
      position: absolute;
      border-radius: 999px;
      animation: heroOrbFloat 11s var(--ease-out) infinite;
    }
    .hero-depth .orb-a {
      left: -14%; top: 8%; width: 46%; aspect-ratio: 1;
      background: radial-gradient(circle at 34% 30%, rgba(93,164,255,.28), rgba(11,58,110,0) 68%);
    }
    .hero-depth .orb-b {
      right: -12%; top: 6%; width: 40%; aspect-ratio: 1;
      background: radial-gradient(circle at 60% 40%, rgba(226,59,47,.14), rgba(226,59,47,0) 66%);
      animation-delay: -3s;
    }
    @keyframes heroOrbFloat {
      0%, 100% { transform: translate3d(0, 0, 0); }
      50%      { transform: translate3d(0, -8px, 0); }
    }

    /* Nội dung hero trôi chậm hơn nền → cảm giác thị sai */
    .home-hero .hero-wipe,
    .home-hero .cta-stack {
      transform: translate3d(0, calc(var(--hero-p) * -12px), 0);
    }

    /* Nghiêng 3D nhẹ theo con trỏ — chỉ bật ở máy có chuột */
    .hero-tilt-on .home-hero .hero-depth {
      transform:
        translate3d(0, calc(var(--hero-p) * -34px), 0)
        rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
      transition: transform .18s ease-out;
    }

    /* —— Luồng thanh toán bảo mật: dải neon + hạt sáng ở chân trang —— */
    .pay-flow {
      position: absolute;
      left: 0; right: 0; top: -13px;
      height: 13px;
      overflow: hidden;
      pointer-events: none;
      z-index: 3;
    }
    .pay-flow::after {
      content: "";
      position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
      background: linear-gradient(90deg,
        rgba(11,58,110,0) 0%,
        #0B3A6E 16%,
        #3E8BD8 34%,
        #E23B2F 58%,
        #0B3A6E 80%,
        rgba(11,58,110,0) 100%);
      background-size: 240% 100%;
      animation: payNeonSlide 5.4s linear infinite;
    }
    .pay-flow i {
      position: absolute; bottom: 3px; left: 0;
      width: 3px; height: 3px; border-radius: 999px;
      background: #eaf4ff;
      box-shadow: 0 0 4px 1px rgba(11,58,110,.35);
      animation: payParticle 4.8s linear infinite;
    }
    .pay-flow i:nth-child(2) { animation-delay: -.8s; bottom: 6px; }
    .pay-flow i:nth-child(3) { animation-delay: -1.7s; bottom: 2px; }
    .pay-flow i:nth-child(4) { animation-delay: -2.6s; bottom: 7px; }
    @keyframes payNeonSlide {
      from { background-position: 120% 0; }
      to   { background-position: -120% 0; }
    }
    @keyframes payParticle {
      0%   { transform: translate3d(-8px, 0, 0); opacity: 0; }
      12%  { opacity: 1; }
      88%  { opacity: 1; }
      100% { transform: translate3d(100vw, 0, 0); opacity: 0; }
    }

    .fx-lite .hero-depth span { animation-duration: 6.5s; }
    @keyframes glassPulse {
      0%, 100% { box-shadow: 0 12px 28px rgba(11,58,110,.08), inset 0 1px 0 rgba(255,255,255,.9); }
      50% { box-shadow: 0 16px 34px rgba(11,58,110,.18), 0 0 22px rgba(11,58,110,.22), inset 0 1px 0 #fff; }
    }
    .oct-card,
    .exchange-box,
    .gate-card,
    .shop-card,
    .guest-card,
    .camp-flash,
    .twpay-stage,
    .camp-home {
      animation: glassPulse 5.2s ease-in-out infinite;
    }

    /* Kính mờ + viền sáng. Nền trang vẫn #F5F7FA, nút vẫn #0B3A6E. Không phủ ảnh hero. */
    @property --glow-angle {
      syntax: "<angle>";
      initial-value: 0deg;
      inherits: false;
    }
    @keyframes glowSpin { to { --glow-angle: 360deg; } }
    .exchange-box,
    .rx-how,
    .rx-quote-strip,
    .gate-card,
    .oct-card {
      background: rgba(255,255,255,.78);
      
      
      border: 1px solid rgba(255,255,255,.72);
      box-shadow: 0 12px 28px rgba(11,58,110,.08), inset 0 1px 0 rgba(255,255,255,.95);
    }
    .camp-flash {
      background: rgba(255,248,235,.84);
      
      
      box-shadow: 0 10px 24px rgba(176,96,0,.08), inset 0 1px 0 rgba(255,255,255,.9);
    }
    .camp-home {
      background:
        radial-gradient(ellipse 70% 80% at 100% 0%, rgba(120,170,255,.38), transparent 55%),
        rgba(14,31,61,.78);
      
      
      border: 1px solid rgba(255,255,255,.16);
      box-shadow: 0 16px 36px rgba(8,46,88,.28), inset 0 1px 0 rgba(255,255,255,.22);
    }
    .twpay-stage {
      border: 1px solid rgba(255,255,255,.14);
      box-shadow: 0 14px 32px rgba(8,46,88,.24), inset 0 1px 0 rgba(255,255,255,.18);
    }
    .camp-home::after,
    .twpay-stage::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 1px;
      background: conic-gradient(from var(--glow-angle), transparent 0deg, rgba(255,255,255,.8) 36deg, transparent 80deg, rgba(90,208,160,.7) 170deg, transparent 220deg, rgba(186,214,255,.75) 300deg, transparent 360deg);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      mask-composite: exclude;
      pointer-events: none;
      z-index: 2;
      animation: glowSpin 10s linear infinite;
    }
    .shop-card, .product-grid-list > article, .guest-card {
      border: 1px solid rgba(255,255,255,.85);
      box-shadow: 0 12px 28px rgba(11,58,110,.08), inset 0 1px 0 rgba(255,255,255,.95);
    }
    .shop-card:hover, .product-grid-list > article:hover, .guest-card:hover,
    .shop-card:active, .product-grid-list > article:active, .guest-card:active {
      box-shadow: 0 18px 34px rgba(11,58,110,.14), 0 0 18px rgba(11,58,110,.12);
    }
    .bottom-nav {
      background: rgba(245,247,250,.7);
      border-top: 1px solid rgba(255,255,255,.8);
      box-shadow: 0 -10px 28px rgba(11,58,110,.08), inset 0 1px 0 rgba(255,255,255,.92);
    }
    .nav-pill {
      background: rgba(231,238,246,.92);
      box-shadow: 0 0 16px rgba(11,58,110,.16), inset 0 1px 0 rgba(255,255,255,.85);
    }
    .home-below .btn-primary,
    .gate-card .btn-primary,
    .app-screen:not(#home) .btn-primary,
    #auth-modal .btn-primary,
    .btn-auth-submit,
    .oct-card button {
      box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 10px 22px rgba(8,46,88,.26), 0 0 16px rgba(11,58,110,.2);
    }
    #auth-modal > .relative {
      background:
        radial-gradient(ellipse 80% 40% at 0% 0%, rgba(11,58,110,.14), transparent 52%),
        rgba(255,255,255,.88) !important;
      
      
      border: 1px solid rgba(255,255,255,.6);
      box-shadow: 0 -16px 40px rgba(8,46,88,.16), inset 0 1px 0 rgba(255,255,255,.85);
    }
    #search-form {
      background: rgba(255,255,255,.82);
      
      
      border: 1px solid rgba(255,255,255,.75);
      box-shadow: 0 8px 20px rgba(11,58,110,.06), inset 0 1px 0 #fff;
    }

    @media (prefers-reduced-motion: reduce) {
      .hero-depth, .hero-depth span, .pay-flow::after, .pay-flow i {
        animation: none !important; transition: none !important;
      }
      .pay-flow i { display: none; }
      .home-hero-fade, .hero-depth,
      .home-hero .hero-wipe, .home-hero .cta-stack { transform: none !important; }
    }

    @media (prefers-reduced-motion: reduce) {
      .app-screen, .modal-layer, .modal-layer > .relative, .ripple-ink,
      .home-hero, .home-hero::before, .home-hero::after, .home-visual, .home-visual--bleed img,
      .trust-row span, .camp-home, .quick-card, .wallet-panel, .wallet-panel::before,
      .wallet-balance-amt, .wallet-card, .wallet-card-shine, .float-chat a,
      .btn-primary, .btn-primary::after, .shop-card, .product-grid-list > article, .guest-card, .product-image, .filter-chip,
      .home-hero .brand-mark::after, .home-hero-fade::after, .nav-pill, .screen-title, .acct-label, .hero-wipe-text,
      #support.is-active .acct-head, #support.is-active .acct-body > section, #support.is-active .acct-body > .acc,
      .app-screen.is-active.slide-next, .app-screen.is-active.slide-prev,
      #rx-in-vn-pay, #order-bank-box, #success-qr-wrap, #exchange.is-active .rx-dir,
      #exchange.is-active .exchange-box, #exchange.is-active .rx-how {
        animation: none !important; transition: none !important;
      }
      .home-visual--bleed img { transform: none !important; }
      .camp-home::after, .twpay-stage::after,
      .oct-card, .exchange-box, .gate-card, .shop-card, .guest-card, .camp-flash, .twpay-stage, .camp-home {
        animation: none !important;
      }
      .hero-wipe-text { clip-path: none !important; }
    }

    /* Bản web: từ 1024px. Dưới mức này giữ nguyên giao diện điện thoại. */
    @media (min-width: 1024px) {
      body { background: var(--surface-2); }
      .tw-shell {
        width: 100%;
        max-width: none;
        border: 0;
        box-shadow: none;
        background: var(--surface-2);
      }
      .app-topbar { order: 1; padding-inline: max(1.25rem, calc((100% - 1120px) / 2)); }
      .language-select { max-width: 11rem; font-size: .85rem; }
      .bottom-nav {
        order: 2;
        height: auto;
        display: flex;
        justify-content: center;
        gap: .15rem;
        padding: .35rem max(1rem, calc((100% - 1120px) / 2));
        background: var(--surface);
        border-top: 0;
        border-bottom: 1px solid var(--line);
        box-shadow: none;
      }
      .bottom-nav .pay-flow { display: block; top: auto; bottom: 0; }
      .bottom-nav button {
        flex-direction: row;
        flex: 0 1 auto;
        width: auto;
        gap: .4rem;
        min-height: 46px;
        padding: .35rem .9rem;
        font-size: .92rem;
        letter-spacing: 0;
      }
      .bottom-nav button > span { overflow: visible; text-overflow: clip; }
      .app-main { order: 3; padding-bottom: 1.25rem; }
      #home.app-screen.is-active {
        display: grid;
        grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
        gap: 1.5rem;
        align-items: start;
        max-width: 1120px;
        margin: 1.25rem auto 1.5rem;
        padding: 0 1.25rem;
      }
      .home-hero {
        aspect-ratio: 3 / 4;
        height: auto;
        border-radius: 18px;
      }
      .home-visual--bleed img { object-fit: contain; object-position: center center; }
      .home-below { padding: 0; }
      .quick-grid { grid-template-columns: 1fr; }
      .quick-card:nth-child(3) { grid-column: auto; min-height: 72px; }
      .quick-card span:not(.qc-icon) { display: block; }
      .camp-home .btn-light { width: auto; min-width: 220px; padding-inline: 1.25rem; }
      #exchange.app-screen,
      #support.app-screen {
        max-width: 760px;
        margin-inline: auto;
        padding: 1.35rem 1.25rem 2rem;
      }
      #exchange .screen-sub { display: block; }
      #shopping.app-screen {
        max-width: 1120px;
        margin-inline: auto;
        padding: 1.35rem 1.25rem 2rem;
      }
      #iphone-18-list, #iphone-17-list, #iphone-deal-list, #samsung-new-list, #android-new-list,
      #phone-used-list, #ipad-new-list, #ipad-used-list, #tablet-android-list, #wear-new-list,
      #mac-new-list, #laptop-win-list, #laptop-used-list, #guest-preview-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        flex-direction: unset !important;
        gap: .85rem !important;
      }
      .shop-card-media { max-height: 11rem; }
      .float-chat { bottom: 18px; right: 18px; }
      .modal-layer.open {
        align-items: center !important;
        justify-content: center !important;
        padding: 1.5rem !important;
      }
      .modal-layer.open > .relative {
        width: min(640px, 100%) !important;
        max-width: 640px !important;
        max-height: min(84vh, 860px) !important;
        border-radius: 22px !important;
      }
    }
    @media (min-width: 1280px) {
      #iphone-18-list, #iphone-17-list, #iphone-deal-list, #samsung-new-list, #android-new-list,
      #phone-used-list, #ipad-new-list, #ipad-used-list, #tablet-android-list, #wear-new-list,
      #mac-new-list, #laptop-win-list, #laptop-used-list, #guest-preview-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      }
    }

  
    /* ===== TW-DS dark mode (GĐ1) — data-theme set by head script (light | dark, system resolved) ===== */
    :root[data-theme="dark"] {
      color-scheme: dark;
      --bg: #0F1620; --page-outer: #0A0F16; --paper: #161F2B; --paper-soft: #0F1620;
      --surface: #161F2B; --surface-2: #121A24; --surface-3: #1C2838;
      --ink: #E7EDF5; --ink-strong: #F2F6FB; --muted: #93A2B4; --line: #26303E;
      --navy-text: #6BA8FF; --navy-text-strong: #8FC0FF; --navy-text-soft: #8FC0FF; --gold: #D4B878; --green-text: #5BD494;
      --brand-blue-soft: #12233A;
      --tint-blue: #12233A; --tint-green: #0F2C1E; --tint-amber: #3A2A12; --tint-red: #3A1414;
      --st-blue: #6BA8FF; --st-blue-bg: #0E2648; --st-amber: #F0B65C; --st-amber-bg: #3A2A12;
      --st-green: #5BD494; --st-green-bg: #0F2C1E; --st-red: #FF8A8A; --st-red-bg: #3A1414;
      --st-cyan: #67E8F9; --st-cyan-bg: #0C2E34;
      --shadow: 0 12px 40px rgba(0,0,0,.35); --shadow-lg: 0 24px 60px rgba(0,0,0,.5);
    }
    :root[data-theme="dark"] body { background: var(--bg); color: var(--ink); }
    :root[data-theme="dark"] img { color-scheme: normal; }
    :root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { color: var(--ink); }
    :root[data-theme="dark"] ::placeholder { color: #6B7A8C; }
    /* barcode / QR / store logos stay white in both themes */
    :root[data-theme="dark"] .pay-pin-card, :root[data-theme="dark"] .pay-slip,
    :root[data-theme="dark"] .pay-slip img, :root[data-theme="dark"] .pay-pin-card img { background: #fff !important; color: #000; }
    .theme-toggle {
      display: inline-flex; align-items: center; justify-content: center;
      min-width: 40px; min-height: 40px; border-radius: .75rem; border: 0; cursor: pointer;
      background: rgba(255,255,255,.12); color: #fff; font-size: 1rem; line-height: 1;
    }

    .font-mono, code, kbd { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif; }

    /* TW-DS Home (GĐ1): 3-up service grid + recent orders */
    #home .quick-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: .6rem; margin: .2rem 0 .2rem; }
    #home .quick-card, #home .quick-card:nth-child(3) {
      grid-column: auto; flex-direction: column; align-items: center; justify-content: center; text-align: center;
      min-height: 88px; padding: .8rem .4rem; gap: .4rem; border-radius: var(--r-lg); border: 1px solid var(--line);
    }
    #home .quick-card strong { font-size: .8rem; line-height: 1.2; }
    #home .quick-card .qc-icon { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; }
    .home-recent { margin-top: .9rem; }
    .home-recent .acct-label { margin-top: 0; }

    /* TW-DS Settings (GĐ1) */
    .acct-settings { padding: .25rem .25rem; }
    .set-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; min-height: 52px; padding: .45rem .6rem; }
    .set-row + .set-row { border-top: 1px solid var(--line); }
    .set-seg { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); flex-shrink: 0; }
    .set-seg button { min-height: 34px; padding: 0 .6rem; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-size: .76rem; font-weight: 700; cursor: pointer; }
    .set-seg button.is-on { background: var(--surface); color: var(--navy-text); box-shadow: 0 1px 3px rgba(6,20,43,.12); }
    :root[data-theme="dark"] .set-seg button.is-on { background: #12528F; color: #fff; }
    .set-select { min-height: 40px; max-width: 46%; padding: 0 .55rem; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: .82rem; }
    /* TW-DS Order success (GĐ1) */
    #order-success-title::before {
      content: "\2713"; display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: .65rem;
      border-radius: 999px; background: var(--st-green-bg); color: var(--st-green); font-size: 1.45rem; font-weight: 800;
    }
    :root[data-theme="dark"] #order-success-title { color: var(--st-green) !important; }
    #success-order-id { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif; letter-spacing: .02em; }

    /* TW-DS GĐ2/GĐ3: shared form + modal polish (styling only) */
    body { font-variant-numeric: tabular-nums; }
    .auth-form-field { min-height: 48px; border-radius: 12px; }
    .auth-form-field:focus { outline: none; border-color: var(--navy-text); box-shadow: 0 0 0 3px rgba(11,58,110,.14); }
    :root[data-theme="dark"] .auth-form-field { background: var(--surface-2); border-color: var(--line); color: var(--ink); }
    :root[data-theme="dark"] .auth-form-field:focus { border-color: #6BA8FF; box-shadow: 0 0 0 3px rgba(107,168,255,.18); }
    #otp-code, #forgot-otp { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif; font-size: 1.35rem; letter-spacing: .45em; text-align: center; }
    #forgot-otp:placeholder-shown { font-family: inherit; font-size: .95rem; letter-spacing: normal; text-align: left; }
    .pw-wrap { position: relative; }
    .pw-wrap .auth-form-field { padding-right: 3rem; }
    .pw-eye { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); width: 40px; height: 40px;
      border: 0; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
    .pw-eye:hover { background: var(--surface-2); }
    .pw-wrap > input.hidden + .pw-eye { display: none; }
    input[type="file"].auth-form-field { padding: .45rem .5rem; font-size: .82rem; color: var(--muted); }
    input[type="file"]::file-selector-button {
      margin-right: .6rem; min-height: 36px; padding: 0 .85rem; border: 0; border-radius: 10px; cursor: pointer;
      background: var(--tint-blue); color: var(--navy-text); font-weight: 700; font-family: inherit;
    }
    #kyc-arc-preview, #kyc-cccd-preview { border-radius: 12px; }
    .cart-item-row { gap: .75rem; }
    .cart-qty-btn { border-radius: 10px; }
    #orders-list > * { border-radius: var(--r-md); }
    :root[data-theme="dark"] #cart-modal .btn-primary { background: var(--surface-3); color: var(--ink); box-shadow: none; }
    :root[data-theme="dark"] #order-card-box { background: var(--surface) !important; border-color: var(--line) !important; }
    :root[data-theme="dark"] div:has(> #modal-product-image) { background: #fff !important; }
    :root[data-theme="dark"] .modal-layer > .bg-black\/55 { background: rgba(0,0,0,.7); }

    /* ===== L1: CVS Payment card layout ===== */
    .rx-pay { padding: .9rem; border-radius: var(--r-lg); }
    .rx-pay-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
    .rx-pay-band { display: inline-flex; align-items: center; gap: .45rem; min-height: 32px; padding: 0 .75rem; border-radius: 999px;
      font-size: .78rem; font-weight: 800; background: var(--st-cyan-bg); color: var(--st-cyan); }
    .rx-pay-band i { width: 8px; height: 8px; border-radius: 99px; background: currentColor; }
    .rx-pay.tone-wait .rx-pay-band i { animation: rxPulse 1.2s ease-in-out infinite; }
    @keyframes rxPulse { 50% { opacity: .3; } }
    .rx-pay.tone-ready .rx-pay-band { background: var(--st-blue-bg); color: var(--st-blue); }
    .rx-pay.tone-paid .rx-pay-band { background: var(--st-amber-bg); color: var(--st-amber); }
    .rx-pay.tone-done .rx-pay-band { background: var(--st-green-bg); color: var(--st-green); }
    .rx-pay.tone-fail .rx-pay-band { background: var(--st-red-bg); color: var(--st-red); }
    .rx-pay-code { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif; font-size: .76rem; }
    .rx-pay-amount { margin: .8rem 0 .2rem; }
    .rx-pay-eyebrow { font-size: .66rem; font-weight: 700; letter-spacing: .08em; color: var(--muted); }
    .rx-pay .amt { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif; font-size: 1.85rem; font-weight: 800; line-height: 1.15; color: var(--ink); letter-spacing: -.02em; }
    .rx-pay .vnd { font-size: .85rem; font-weight: 600; color: var(--muted); }
    .rx-pay-when { margin-top: .2rem; font-size: .7rem; }
    .rx-pay-card { margin-top: .8rem; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
    .rx-pay-card-hd { display: flex; align-items: center; justify-content: space-between; padding: .6rem .85rem; background: #0B3A6E; color: #fff; font-weight: 800; font-size: .88rem; }
    .rx-pay-card-hd em { font-style: normal; font-size: .7rem; font-weight: 800; padding: .15rem .55rem; border-radius: 99px; background: rgba(255,255,255,.16); }
    .rx-pay-card-bd { padding: .75rem; }
    .rx-pay-card-bd .order-wait { margin: 0; }
    .rx-pay-card .order-wait.is-ready { padding: 0; background: transparent; border: 0; box-shadow: none; }
    .rx-pay-card .order-wait.is-ready > .order-wait-label { display: none; }
    .rx-pay-card.has-slip { border: 0; background: transparent; }
    .rx-pay-card.has-slip .rx-pay-card-bd { padding: 0; }
    /* pay-notice: show under the top bar so it never covers content or the sticky CTA */
    .pay-notice { top: calc(var(--nav-h) + 8px); bottom: auto; padding: .55rem .6rem .55rem .9rem; animation: payNoticeIn .3s ease both, payNoticeOut .35s ease 7s forwards; }
    .pay-notice p { font-size: .88rem; }
    .pay-notice button { min-height: 38px; }
    @keyframes payNoticeIn { from { opacity: 0; transform: translateY(-8px); } }
    @keyframes payNoticeOut { to { opacity: 0; transform: translateY(-8px); visibility: hidden; pointer-events: none; } }
    .rx-pay-hint, .rx-pay-sub { margin: .65rem 0 0; padding: .6rem .7rem; border: 1px dashed var(--line); border-radius: 12px; font-size: .76rem; color: var(--muted); line-height: 1.4; }
    .rx-pay .deal-steps { margin-top: .85rem; }
    .rx-pay-info { margin-top: .7rem; border-top: 1px solid var(--line); padding-top: .55rem; }
    .rx-pay-info summary { cursor: pointer; font-size: .78rem; font-weight: 700; color: var(--navy-text); list-style: none; }
    .rx-pay-info summary::-webkit-details-marker { display: none; }
    .rx-pay-info summary::after { content: " ▾"; }
    .rx-pay-info[open] summary::after { content: " ▴"; }
    :root[data-theme="dark"] .rx-pay-card-hd { background: #0B3A6E; }

    /* ===== L1: Exchange step-1 layout (input card / swap / chips / summary / sticky CTA) ===== */
    #rx-out-flow [data-rx-step="1"] .exchange-box { padding: 1rem; border-radius: var(--r-lg); }
    #rx-out-flow [data-rx-step="1"] .rx-field label { font-size: .75rem; font-weight: 700; color: var(--muted); }
    #rx-amount, #rx-receive { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif; font-weight: 800; min-height: 60px; letter-spacing: -.02em; }
    #rx-amount { font-size: 1.7rem !important; }
    #rx-receive { font-size: 1.15rem !important; }
    #rx-receive { color: var(--navy-text); }
    .rx-swap-row { position: relative; display: flex; align-items: center; justify-content: center; margin: .15rem 0 .35rem; }
    .rx-swap-row::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--line); }
    .rx-swap { position: relative; width: 40px; height: 40px; border-radius: 99px; border: 0; background: #0B3A6E; color: #fff; font-size: 1.05rem; font-weight: 800; cursor: pointer; box-shadow: 0 6px 16px rgba(11,58,110,.25); }
    :root[data-theme="dark"] .rx-swap { background: #12528F; }
    .rx-chips-lbl { margin: .25rem 0 .4rem; font-size: .75rem; font-weight: 700; color: var(--muted); }
    .rx-chips { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .45rem; }
    .rx-chips button { min-height: 38px; border-radius: 999px; border: 1px solid var(--line); background: var(--tint-blue); color: var(--navy-text); font-size: .8rem; font-weight: 800; cursor: pointer; }
    .rx-chips button.is-on { background: #0B3A6E; color: #fff; border-color: #0B3A6E; }
    #rx-out-flow [data-rx-step="1"] .exchange-rate { margin: .8rem 0 .2rem; font-size: .8rem; }
    #rx-out-flow [data-rx-step="1"] .rx-row { padding: .5rem 0; }
    #rx-out-flow [data-rx-step="1"] .rx-row.rx-total { border-top: 1px solid var(--line); margin-top: .2rem; padding-top: .7rem; }
    #rx-out-flow [data-rx-step="1"] .rx-row.rx-total strong { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif; font-size: 1.15rem; color: var(--navy-text); }
    #rx-out-flow .rx-steps .cta-stack { position: sticky; bottom: 0; z-index: 5; margin: 1rem -1rem -1rem !important; padding: .75rem 1rem 1rem;
      background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -10px 18px rgba(6,20,43,.06); border-radius: 0 0 var(--r-lg) var(--r-lg); }
    #rx-out-flow .rx-steps .cta-stack .btn-primary { min-height: 52px; }

    /* ===== L2: Orders layout ===== */
    .ord-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 1rem; padding: 4px; border-radius: 12px; background: var(--surface-3); }
    .ord-tabs button { min-height: 38px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-weight: 800; font-size: .85rem; cursor: pointer; }
    .ord-tabs button.is-on { background: var(--surface); color: var(--navy-text); box-shadow: 0 1px 3px rgba(6,20,43,.12); }
    .ord-filter { display: flex; gap: .4rem; margin-top: .7rem; overflow-x: auto; }
    .ord-filter button { flex-shrink: 0; min-height: 34px; padding: 0 .8rem; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: .78rem; font-weight: 700; cursor: pointer; }
    .ord-filter button.is-on { background: #0B3A6E; border-color: #0B3A6E; color: #fff; }
    .ord-group { margin: 1rem 0 .1rem; font-size: .72rem; font-weight: 700; color: var(--muted); letter-spacing: .02em; }
    #orders-list .ord-group:first-child { margin-top: 0; }
    .ord-card { border-color: var(--line) !important; border-radius: var(--r-lg) !important; padding: .9rem !important; background: var(--surface); }
    .ord-id { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif; font-size: .85rem; }
    .ord-chip.tone-wait { background: var(--st-amber-bg) !important; color: var(--st-amber) !important; }
    .ord-chip.tone-proc { background: var(--st-cyan-bg) !important; color: var(--st-cyan) !important; }
    .ord-chip.tone-ship { background: var(--st-blue-bg) !important; color: var(--st-blue) !important; }
    .ord-chip.tone-done { background: var(--st-green-bg) !important; color: var(--st-green) !important; }
    .ord-chip.tone-fail { background: var(--st-red-bg) !important; color: var(--st-red) !important; }
    .ord-rx { margin-top: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2); font-size: .85rem; color: var(--muted); }
    .ord-rx .btn-primary { margin-top: .75rem; min-height: 48px; }
    #orders-empty { text-align: center; }
    #orders-empty::before { content: "\1F9FE"; display: block; font-size: 2rem; margin-bottom: .4rem; }
    .ord-empty-cta { display: none; gap: .5rem; margin-top: .9rem; }
    #orders-empty:not(.hidden) + .ord-empty-cta { display: grid; grid-template-columns: 1fr 1fr; }
    .ord-empty-cta .btn-primary, .ord-empty-cta .btn-outline { min-height: 46px; padding: .6rem; }

    /* ===== L2: Shopping grid (2 columns) ===== */
    #product-grid .product-grid-list, body #guest-preview-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: .7rem !important; flex-direction: initial; }
    .product-grid-list > :not(article):not(.shop-card) { grid-column: 1 / -1; }
    .shop-card { display: flex; flex-direction: column; border-radius: var(--r-lg) !important; }
    .shop-card > button { flex: 1; }
    .shop-card .shop-card-media { height: auto !important; max-height: none !important; aspect-ratio: 1 / 1; padding: .6rem !important; background: #fff; }
    .shop-card .px-3\.5 { padding-left: .65rem !important; padding-right: .65rem !important; }
    .shop-card .cond-line, .shop-card .inspect-mini, .shop-card .price-vnd, .shop-card .price-save { display: none !important; }
    .shop-card h3 { font-size: .86rem !important; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .shop-card h3 + p { font-size: .72rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .shop-card .price-twd { font-size: 1rem !important; }
    .shop-card .price-orig { font-size: .72rem; }
    .shop-card .buy-button { min-height: 40px !important; padding: .5rem !important; font-size: .82rem; border-radius: 12px; }
    .shop-card .add-cart-button { width: 100%; min-height: 34px; font-size: .76rem; }
    .shop-card .cat-ribbon, .shop-card .discount-badge, .shop-card .stock-badge { font-size: .62rem; }
    @media (min-width: 640px) { #product-grid .product-grid-list { grid-template-columns: repeat(3, minmax(0,1fr)) !important; } }

    /* ===== L2: Product detail ===== */
    .pd-options { margin-top: .9rem; display: grid; gap: .7rem; }
    .pd-opt > p, .pd-spec-title { margin: 0 0 .35rem; font-size: .8rem; font-weight: 800; color: var(--ink); }
    .pd-spec-title { margin-top: 1rem; }
    .pd-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
    .pd-chips span { min-height: 34px; display: inline-flex; align-items: center; padding: 0 .75rem; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font-size: .8rem; font-weight: 600; color: var(--ink); }
    .pd-chips span:first-child { border-color: var(--navy-text); background: var(--tint-blue); color: var(--navy-text); }
    .pd-trust { margin: .9rem 0 0; padding: .7rem .8rem; list-style: none; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); display: grid; gap: .4rem; }
    .pd-trust li { position: relative; padding-left: 1.4rem; font-size: .8rem; font-weight: 600; color: var(--ink); }
    .pd-trust li::before { content: "\2713"; position: absolute; left: 0; color: var(--st-green); font-weight: 800; }
    #product-modal dl > div:has(#modal-product-colors), #product-modal dl > div:has(#modal-product-spec) { display: none; }
    .pd-actions { position: sticky; bottom: calc(-.95rem - var(--safe-b)); z-index: 6; flex-direction: row !important; margin: 1.1rem -.95rem calc(-.95rem - var(--safe-b)) !important; padding: .75rem .95rem calc(.85rem + var(--safe-b)); background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -8px 20px rgba(6,20,43,.06); }
    .pd-actions #modal-add-cart { flex: 0 0 40%; }
    .pd-actions #modal-buy { flex: 1; }

    /* ===== L2: Cart ===== */
    .cart-thumb { flex: 0 0 56px; height: 56px; border-radius: 12px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; }
    .cart-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
    .cart-item-row { align-items: flex-start; padding: .8rem 0; }
    #cart-footer { position: sticky; bottom: calc(-.95rem - var(--safe-b)); margin: 1rem -.95rem calc(-.95rem - var(--safe-b)) !important; padding: .85rem .95rem calc(.95rem + var(--safe-b)) !important; background: var(--surface); box-shadow: 0 -8px 20px rgba(6,20,43,.06); }
    #cart-total { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif; font-size: 1.15rem; }
    .cart-deposit-note { margin: 0; padding: .55rem .7rem; border-radius: 10px; background: var(--st-amber-bg); color: var(--st-amber); font-size: .75rem; font-weight: 600; }
    #cart-checkout { min-height: 52px; border-radius: 14px; }

    /* ===== L2: Checkout ===== */
    .ck-stepbar { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; margin: 1rem 0 0; padding: 0; list-style: none; }
    .ck-stepbar li { display: flex; align-items: center; gap: .4rem; padding-top: .55rem; border-top: 3px solid var(--line); font-size: .74rem; font-weight: 700; color: var(--muted); }
    .ck-stepbar b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 99px; background: var(--surface-3); font-size: .7rem; }
    .ck-stepbar li.is-on, .ck-stepbar li.is-done { border-top-color: #0B3A6E; color: var(--navy-text); }
    .ck-stepbar li.is-on b { background: #0B3A6E; color: #fff; }
    .ck-stepbar li.is-done b { background: var(--st-green-bg); color: var(--st-green); }
    :root[data-theme="dark"] .ck-stepbar li.is-on, :root[data-theme="dark"] .ck-stepbar li.is-done { border-top-color: #6BA8FF; }
    .ck-paybar { position: sticky; bottom: calc(-.95rem - var(--safe-b)); z-index: 6; margin: 1rem -.95rem calc(-.95rem - var(--safe-b)) !important; padding: .8rem .95rem calc(.9rem + var(--safe-b)) !important; background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -8px 20px rgba(6,20,43,.06); }
    #order-grand-total { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif; }
    #order-step-next { min-height: 50px; border-radius: 14px; }
    #order-deposit-box { border-radius: var(--r-lg) !important; }

    /* ===== L3: Home layout ===== */
    .home-below { display: flex; flex-direction: column; }
    .home-below > .home-rate { order: 1; }
    .home-below > .quick-grid { order: 2; }
    .home-below > .home-kyc { order: 3; }
    .home-below > .oct-rail { order: 4; }
    .home-below > .camp-home { order: 5; }
    .home-below > .home-recent { order: 6; }
    .home-rate { margin: 0 0 .8rem; padding: 1rem; border-radius: var(--r-lg); color: #fff;
      background: linear-gradient(135deg, #0B3A6E 0%, #12528F 100%); box-shadow: 0 12px 28px rgba(11,58,110,.25); }
    :root[data-theme="dark"] .home-rate { background: linear-gradient(135deg, #0B3A6E 0%, #0A2A4D 100%); }
    .home-rate-eyebrow { margin: 0; font-size: .72rem; font-weight: 700; color: #C7D6EA; letter-spacing: .04em; }
    .home-rate-val { margin: .2rem 0 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif; font-size: 1.55rem; font-weight: 800; color: #fff; }
    .home-rate-val b { font-weight: 800; }
    .home-rate-note { margin: .1rem 0 .75rem; font-size: .72rem; color: #C7D6EA; }
    .home-rate-cta { width: 100%; min-height: 46px; border: 0; border-radius: 14px; background: #fff; color: #0B3A6E; font-weight: 800; cursor: pointer; }
    .home-kyc { display: flex; align-items: center; gap: .75rem; margin: .8rem 0 0; padding: .8rem .9rem; border-radius: var(--r-lg);
      background: var(--st-amber-bg); border: 1px solid rgba(183,121,31,.25); }
    .home-kyc.hidden { display: none; }
    .home-kyc > div { flex: 1; min-width: 0; }
    .home-kyc-t { margin: 0; font-weight: 800; font-size: .86rem; color: var(--st-amber); }
    .home-kyc-b { margin: .15rem 0 0; font-size: .76rem; color: var(--muted); }
    .home-kyc button { flex-shrink: 0; min-height: 40px; padding: 0 .9rem; border: 0; border-radius: 12px; background: var(--st-amber); color: #fff; font-weight: 800; cursor: pointer; }
    :root[data-theme="dark"] .home-kyc button { color: #1b1206; }
    .home-below > .oct-rail { margin-top: .9rem; }

    /* ===== L3: Auth ===== */
    .ph-wrap { display: flex; gap: .4rem; }
    .ph-cc { flex: 0 0 auto; min-height: 48px; padding: 0 .4rem; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: .85rem; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif; }
    .ph-wrap .auth-form-field { flex: 1; min-width: 0; }
    #otp-code { min-height: 56px; padding-left: .9rem; letter-spacing: 1.05em; text-indent: .35em;
      background-image: repeating-linear-gradient(90deg, transparent 0 calc((100% - 1.8rem) / 6 * 1 - 6px), var(--line) 0 calc((100% - 1.8rem) / 6 * 1 - 4px), transparent 0 calc((100% - 1.8rem) / 6));
      background-position: .9rem 85%; background-size: calc(100% - 1.8rem) 2px; background-repeat: no-repeat; }
    #otp-resend[data-cd]::after { content: " (" attr(data-cd) "s)"; }
    #otp-resend:disabled { opacity: .6; cursor: not-allowed; }

    /* ===== L3: Order success ===== */
    #order-success-modal > .relative { text-align: left; }
    #order-success-done { background: var(--surface) !important; color: var(--navy-text) !important; border: 1px solid var(--line) !important; }
    #order-success-view { min-height: 50px; border-radius: 14px; }
    #success-deposit-amt { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif; font-size: 1.15rem; }
    /* TW-DS dark: auto overrides (generated) */
    :root[data-theme="dark"] .bottom-nav { background-color: var(--surface); }
    :root[data-theme="dark"] .btn-outline { background-color: var(--surface); }
    :root[data-theme="dark"] .home-hero .btn-outline:hover { border-color: var(--line); }
    :root[data-theme="dark"] .oct-dots button { background-color: var(--surface-2); }
    :root[data-theme="dark"] .camp-flash { border-color: var(--line); }
    :root[data-theme="dark"] .camp-flash strong { color: #F0B65C; }
    :root[data-theme="dark"] .camp-flash .cd { color: #FF8A8A; border-color: var(--line); }
    :root[data-theme="dark"] .camp-flash .slots { color: #F0B65C; }
    :root[data-theme="dark"] .rx-account-bad { color: #FF8A8A; }
    :root[data-theme="dark"] .rx-voucher-box { border-color: var(--line); }
    :root[data-theme="dark"] .voucher-item.is-available { border-color: var(--line); background-color: var(--surface-2); }
    :root[data-theme="dark"] .voucher-item.is-reserved { background-color: var(--surface-2); }
    :root[data-theme="dark"] .voucher-item.is-reserved .amt { color: #F0B65C; }
    :root[data-theme="dark"] .voucher-item.is-reserved .badge { background-color: var(--surface-2); color: #F0B65C; }
    :root[data-theme="dark"] .rx-tw-bank-hit { border-color: var(--line); background-color: var(--surface-2); }
    :root[data-theme="dark"] .rx-tw-bank-hit.is-miss { border-color: var(--line); background-color: var(--surface-2); color: #FF8A8A; }
    :root[data-theme="dark"] .rx-stk-btn .rx-stk-k { color: var(--muted); }
    :root[data-theme="dark"] .rx-stk-btn em { color: var(--muted); }
    :root[data-theme="dark"] .rx-voucher-row { border-color: var(--line); background-color: var(--surface-2); }
    :root[data-theme="dark"] .rx-limit .bar { background-color: var(--surface-2); }
    :root[data-theme="dark"] .rx-bank-list button { border-color: var(--line); }
    :root[data-theme="dark"] .rx-cvs button.rx-cvs-bank.is-short { border-color: var(--line); background-color: var(--surface-2); color: #F0B65C; }
    :root[data-theme="dark"] .rx-cvs button.rx-cvs-bank.is-short .rx-wallet-pay-copy small { color: #F0B65C; }
    :root[data-theme="dark"] .rx-status.is-loading::before { border-color: var(--line); }
    :root[data-theme="dark"] .deal-steps-track { background-color: var(--surface-2); }
    :root[data-theme="dark"] .acct-menu .list-row:hover { background-color: var(--surface-2); }
    :root[data-theme="dark"] .price-orig { color: var(--muted); }
    :root[data-theme="dark"] .price-save { color: #FF8A8A; }
    :root[data-theme="dark"] .acct-avatar { border-color: var(--line); background-color: var(--surface-2); color: #8FC0FF; }
    :root[data-theme="dark"] .acct-label { color: var(--muted); }
    :root[data-theme="dark"] .acct-link { color: #8FC0FF; }
    :root[data-theme="dark"] .acct-card { border-color: var(--line); }
    :root[data-theme="dark"] .acct-ico, :root[data-theme="dark"] .acct-menu-ico { background-color: var(--surface-2); color: #8FC0FF; }
    :root[data-theme="dark"] .acct-code-row { background-color: var(--surface-2); }
    :root[data-theme="dark"] .acct-menu .list-row { border-color: var(--line); }
    :root[data-theme="dark"] .acct-order { border-color: var(--line); }
    :root[data-theme="dark"] .acct-logout { border-color: var(--line); background-color: var(--surface-2); }
    :root[data-theme="dark"] .acct-logout:hover { background-color: var(--surface-2); }
    :root[data-theme="dark"] .acct-foot { color: var(--muted); }
    :root[data-theme="dark"] .wallet-btn-outline { border-color: var(--line); }
    :root[data-theme="dark"] .wallet-link-chip { border-color: var(--line); }
    :root[data-theme="dark"] .apple-pay-sheet { background-color: var(--surface-2); }
    :root[data-theme="dark"] .apple-pay-sheet .ap-label { color: var(--muted); }
    :root[data-theme="dark"] .apple-pay-sheet .ap-row { border-color: var(--line); }
    :root[data-theme="dark"] .apple-pay-sheet .ap-row label { color: var(--muted); }
    :root[data-theme="dark"] .apple-pay-sheet .ap-row input { color: var(--ink); }
    :root[data-theme="dark"] .apple-pay-sheet .ap-hint { color: var(--muted); }
    :root[data-theme="dark"] #auth-tabs { background-color: var(--surface-2); }
    :root[data-theme="dark"] #kyc-shop-banner { border-color: var(--line); }
    :root[data-theme="dark"] .app-promo { border-color: var(--line); }
    :root[data-theme="dark"] .app-promo .promo-code { border-color: var(--line); }
    :root[data-theme="dark"] .ck-store { background-color: var(--surface-2); border-color: var(--line); }
    :root[data-theme="dark"] .ck-head { color: var(--muted); }
    :root[data-theme="dark"] .ck-item { border-color: var(--line); }
    :root[data-theme="dark"] .ck-prod img, :root[data-theme="dark"] .ck-prod .ck-ph { border-color: var(--line); background-color: var(--surface-2); }
    :root[data-theme="dark"] .ck-prod .ck-ph { color: var(--muted); }
    :root[data-theme="dark"] .ck-prod small { color: var(--muted); }
    :root[data-theme="dark"] .stock-low { color: #F0B65C; }
    :root[data-theme="dark"] .stock-out { color: #FF8A8A; }
    :root[data-theme="dark"] .box-opened { background-color: var(--surface-2); color: #F0B65C; }
    :root[data-theme="dark"] .cond-line.is-opened { color: #F0B65C; }
    :root[data-theme="dark"] .inspect-meter .track { background-color: var(--surface-2); }
    :root[data-theme="dark"] .pay-flow i { background-color: var(--surface-2); }
    :root[data-theme="dark"] .exchange-box, :root[data-theme="dark"] .rx-how, :root[data-theme="dark"] .rx-quote-strip, :root[data-theme="dark"] .gate-card, :root[data-theme="dark"] .oct-card { background-color: var(--surface); border-color: var(--line); }
    :root[data-theme="dark"] .camp-flash { background-color: var(--surface-2); }
    :root[data-theme="dark"] .shop-card, :root[data-theme="dark"] .product-grid-list > article, :root[data-theme="dark"] .guest-card { border-color: var(--line); }
    :root[data-theme="dark"] .bottom-nav { background-color: var(--surface-2); border-color: var(--line); }
    :root[data-theme="dark"] .nav-pill { background-color: var(--surface-2); }
    :root[data-theme="dark"] #auth-modal > .relative { border-color: var(--line); }
    :root[data-theme="dark"] #search-form { background-color: var(--surface); border-color: var(--line); }
    /* TW-DS dark: component overrides (glass, gradients, tints) */
    :root[data-theme="dark"] .btn-primary,
    :root[data-theme="dark"] .hero-wipe-text,
    :root[data-theme="dark"] .camp-home .btn-light { color: #122033; }
    :root[data-theme="dark"] .home-below .btn-primary,
    :root[data-theme="dark"] .gate-card .btn-primary,
    :root[data-theme="dark"] .app-screen:not(#home) .btn-primary,
    :root[data-theme="dark"] #auth-modal .btn-primary { color: #fff; }
    :root[data-theme="dark"] .btn-outline { background: rgba(22,31,43,.72); color: var(--ink); border-color: var(--line); }
    :root[data-theme="dark"] .exchange-box,
    :root[data-theme="dark"] .rx-how,
    :root[data-theme="dark"] .rx-quote-strip,
    :root[data-theme="dark"] .gate-card,
    :root[data-theme="dark"] .oct-card {
      background: rgba(22,31,43,.86); border-color: rgba(255,255,255,.06);
      box-shadow: 0 12px 28px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
    }
    :root[data-theme="dark"] .bottom-nav { background: rgba(15,22,32,.94); border-color: var(--line); }
    :root[data-theme="dark"] .nav-pill { background: rgba(18,35,58,.92); }
    :root[data-theme="dark"] #search-form { background: rgba(22,31,43,.86); }
    :root[data-theme="dark"] .camp-flash { background: linear-gradient(135deg, #2a2112, #161F2B); }
    :root[data-theme="dark"] .quick-card { background: linear-gradient(165deg, #1C2838 0%, #161F2B 100%); border-color: var(--line); }
    :root[data-theme="dark"] .quick-card .qc-icon,
    :root[data-theme="dark"] .acct-ico, :root[data-theme="dark"] .acct-menu-ico,
    :root[data-theme="dark"] .pay-flow i { background: #12233A; color: #6BA8FF; }
    :root[data-theme="dark"] .acct-avatar { background: #12233A; }
    :root[data-theme="dark"] .rx-dir button.active { background: linear-gradient(160deg, #12233A 0%, #0E2648 100%); color: var(--ink); }
    :root[data-theme="dark"] .rx-voucher-box { background: linear-gradient(165deg, #0F2C1E, #161F2B); }
    :root[data-theme="dark"] .voucher-item.is-available,
    :root[data-theme="dark"] .rx-voucher-row,
    :root[data-theme="dark"] .rx-tw-bank-hit { background: #0F2C1E; }
    :root[data-theme="dark"] .voucher-item.is-reserved,
    :root[data-theme="dark"] .rx-cvs button.rx-cvs-bank.is-short,
    :root[data-theme="dark"] .box-opened { background: #2a2112; }
    :root[data-theme="dark"] .voucher-item.is-reserved .badge { background: #3A2A12; color: #F0B65C; }
    :root[data-theme="dark"] .rx-tw-bank-hit.is-miss,
    :root[data-theme="dark"] .acct-logout { background: #2a1517; }
    :root[data-theme="dark"] .acct-logout:hover { background: #3A1414; }
    :root[data-theme="dark"] .rx-ticket { background: linear-gradient(180deg, #161F2B 0%, #121A24 100%); }
    :root[data-theme="dark"] .acct-menu .list-row:hover { background: var(--surface-3); }
    :root[data-theme="dark"] .acct-code-row,
    :root[data-theme="dark"] .ck-store,
    :root[data-theme="dark"] .apple-pay-sheet { background: var(--surface-2); }
    :root[data-theme="dark"] .ck-prod img, :root[data-theme="dark"] .ck-prod .ck-ph { background: #fff; }
    :root[data-theme="dark"] .oct-dots button,
    :root[data-theme="dark"] .rx-limit .bar,
    :root[data-theme="dark"] .deal-steps-track,
    :root[data-theme="dark"] .inspect-meter .track,
    :root[data-theme="dark"] .rx-card-brands i { background: #2B3646; }
    :root[data-theme="dark"] #auth-tabs { background: #1C2838 !important; }
    :root[data-theme="dark"] #auth-modal > .relative {
      background: radial-gradient(ellipse 80% 40% at 0% 0%, rgba(107,168,255,.10), transparent 52%), #161F2B !important;
    }
    :root[data-theme="dark"] .wallet-panel { background: linear-gradient(165deg, #161F2B, #121A24); }
    :root[data-theme="dark"] .language-select option { color: #E7EDF5; background: #161F2B; }
    /* product photos and store/bank logos keep a white tile for legibility */
    :root[data-theme="dark"] #modal-product-image, :root[data-theme="dark"] .product-image { background: #fff; }

    /* TW-DS dark: Tailwind utility overrides (generated) */
    :root[data-theme="dark"] .bg-\[\#E5F4EC\]{background-color:var(--tint-green)!important}
    :root[data-theme="dark"] .bg-\[\#E5F4EC\]\/40{background-color:var(--tint-green)!important}
    :root[data-theme="dark"] .bg-\[\#E5F4EC\]\/50{background-color:var(--tint-green)!important}
    :root[data-theme="dark"] .bg-\[\#E5F4EC\]\/60{background-color:var(--tint-green)!important}
    :root[data-theme="dark"] .bg-\[\#E7EEF6\]{background-color:var(--tint-blue)!important}
    :root[data-theme="dark"] .bg-\[\#e6f4ea\]{background-color:var(--surface-2)!important}
    :root[data-theme="dark"] .bg-\[\#e8f1fe\]{background-color:var(--surface-2)!important}
    :root[data-theme="dark"] .bg-\[\#f1f3f4\]{background-color:var(--surface-2)!important}
    :root[data-theme="dark"] .bg-\[\#f8f9fa\]{background-color:var(--surface)!important}
    :root[data-theme="dark"] .bg-\[\#f8fafc\]{background-color:var(--surface)!important}
    :root[data-theme="dark"] .bg-\[\#fce8e6\]{background-color:var(--tint-red)!important}
    :root[data-theme="dark"] .bg-\[\#fef7e0\]{background-color:var(--tint-amber)!important}
    :root[data-theme="dark"] .bg-\[\#fff8e8\]{background-color:var(--surface)!important}
    :root[data-theme="dark"] .bg-green-100{background-color:var(--tint-green)!important}
    :root[data-theme="dark"] .bg-slate-100{background-color:var(--surface-2)!important}
    :root[data-theme="dark"] .bg-white{background-color:var(--surface)!important}
    :root[data-theme="dark"] .border-\[\#E5F4EC\]{border-color:var(--line)!important}
    :root[data-theme="dark"] .border-\[\#E7EEF6\]{border-color:var(--line)!important}
    :root[data-theme="dark"] .border-\[\#dadce0\]{border-color:var(--line)!important}
    :root[data-theme="dark"] .border-\[\#e4eaf2\]{border-color:var(--line)!important}
    :root[data-theme="dark"] .border-\[\#e8eaed\]{border-color:var(--line)!important}
    :root[data-theme="dark"] .border-\[\#eef1f4\]{border-color:var(--line)!important}
    :root[data-theme="dark"] .border-\[\#f4d48a\]{border-color:var(--line)!important}
    :root[data-theme="dark"] .border-slate-100{border-color:var(--line)!important}
    :root[data-theme="dark"] .border-slate-300{border-color:var(--line)!important}
    :root[data-theme="dark"] .has-\[\:checked\]\:bg-\[\#E5F4EC\]:has(:checked){background-color:var(--tint-green)!important}
    :root[data-theme="dark"] .has-\[\:checked\]\:bg-\[\#E5F4EC\]\/50:has(:checked){background-color:var(--tint-green)!important}
    :root[data-theme="dark"] .has-\[\:checked\]\:bg-\[\#E7EEF6\]:has(:checked){background-color:var(--tint-blue)!important}
    :root[data-theme="dark"] .has-\[\:checked\]\:bg-\[\#E7EEF6\]\/40:has(:checked){background-color:var(--tint-blue)!important}
    :root[data-theme="dark"] .has-\[\:checked\]\:border-\[\#0B3A6E\]:has(:checked){border-color:var(--navy-text)!important}
    :root[data-theme="dark"] .hover\:bg-\[\#f8f9fa\]:hover{background-color:var(--surface)!important}
    :root[data-theme="dark"] .hover\:bg-slate-100:hover{background-color:var(--surface-3)!important}
    :root[data-theme="dark"] .ring-\[\#e8eaed\]{--tw-ring-color:var(--line)!important}
    :root[data-theme="dark"] .text-\[\#0B3A6E\]{color:var(--navy-text)!important}
    :root[data-theme="dark"] .text-\[\#0E7A45\]{color:var(--green-text)!important}
    :root[data-theme="dark"] .text-\[\#122033\]{color:var(--ink)!important}
    :root[data-theme="dark"] .text-\[\#137333\]{color:var(--muted)!important}
    :root[data-theme="dark"] .text-\[\#174ea6\]{color:var(--muted)!important}
    :root[data-theme="dark"] .text-\[\#183152\]{color:var(--ink)!important}
    :root[data-theme="dark"] .text-\[\#186cf0\]{color:var(--muted)!important}
    :root[data-theme="dark"] .text-\[\#1e8e3e\]{color:var(--muted)!important}
    :root[data-theme="dark"] .text-\[\#202124\]{color:var(--ink)!important}
    :root[data-theme="dark"] .text-\[\#2c3540\]{color:var(--ink)!important}
    :root[data-theme="dark"] .text-\[\#30a854\]{color:var(--muted)!important}
    :root[data-theme="dark"] .text-\[\#31506f\]{color:var(--muted)!important}
    :root[data-theme="dark"] .text-\[\#3a4450\]{color:var(--muted)!important}
    :root[data-theme="dark"] .text-\[\#5a6a7a\]{color:var(--muted)!important}
    :root[data-theme="dark"] .text-\[\#73829a\]{color:var(--muted)!important}
    :root[data-theme="dark"] .text-\[\#8090a6\]{color:var(--muted)!important}
    :root[data-theme="dark"] .text-\[\#8594a9\]{color:var(--muted)!important}
    :root[data-theme="dark"] .text-\[\#8795a9\]{color:var(--muted)!important}
    :root[data-theme="dark"] .text-\[\#9ba9bb\]{color:var(--muted)!important}
    :root[data-theme="dark"] .text-\[\#b06000\]{color:#F0B65C!important}
    :root[data-theme="dark"] .text-\[\#c5221f\]{color:#FF8A8A!important}
    :root[data-theme="dark"] .text-\[\#f03c30\]{color:#FF8A8A!important}
    :root[data-theme="dark"] .text-slate-600{color:var(--muted)!important}

/* 1.28.4: tắt toàn bộ hiệu ứng chuyển động cho mọi thiết bị — áp dụng vĩnh viễn chế độ
   'giảm chuyển động' có sẵn của theme (trước chỉ bật khi điện thoại bật Reduce motion). */

      .twpay-stage, .twpay-stage-back { display: none !important; }
    

      .deal-steps.is-fresh .deal-steps-fill,
      .deal-steps.is-fresh .deal-step,
      .chat-bubble.is-pop,
      .order-card-in,
      .rx-hist-item.is-fresh,
      #order-card-box:not(.hidden),
      #order-twd-box:not(.hidden),
      #order-twd-cvs:not(.hidden),
      #order-bank-box:not(.hidden),
      #order-deposit-box:not(.hidden) { animation: none !important; }
    

      .hero-depth, .hero-depth span, .pay-flow::after, .pay-flow i {
        animation: none !important; transition: none !important;
      }
      .pay-flow i { display: none; }
      .home-hero-fade, .hero-depth,
      .home-hero .hero-wipe, .home-hero .cta-stack { transform: none !important; }
    

      .app-screen, .modal-layer, .modal-layer > .relative, .ripple-ink,
      .home-hero, .home-hero::before, .home-hero::after, .home-visual, .home-visual--bleed img,
      .trust-row span, .camp-home, .quick-card, .wallet-panel, .wallet-panel::before,
      .wallet-balance-amt, .wallet-card, .wallet-card-shine, .float-chat a,
      .btn-primary, .btn-primary::after, .shop-card, .product-grid-list > article, .guest-card, .product-image, .filter-chip,
      .home-hero .brand-mark::after, .home-hero-fade::after, .nav-pill, .screen-title, .acct-label, .hero-wipe-text,
      #support.is-active .acct-head, #support.is-active .acct-body > section, #support.is-active .acct-body > .acc,
      .app-screen.is-active.slide-next, .app-screen.is-active.slide-prev,
      #rx-in-vn-pay, #order-bank-box, #success-qr-wrap, #exchange.is-active .rx-dir,
      #exchange.is-active .exchange-box, #exchange.is-active .rx-how {
        animation: none !important; transition: none !important;
      }
      .home-visual--bleed img { transform: none !important; }
      .camp-home::after, .twpay-stage::after,
      .oct-card, .exchange-box, .gate-card, .shop-card, .guest-card, .camp-flash, .twpay-stage, .camp-home {
        animation: none !important;
      }
      .hero-wipe-text { clip-path: none !important; }

/* 1.28.5: đã bỏ kính mờ (backdrop-filter) khỏi các khối — nền phía sau là màu phẳng nên nhìn không đổi. */

/* 1.28.6: modal chưa mở không được dàn trang / vẽ (trình duyệt bỏ qua nội dung tới khi mở) */
.modal-layer:not(.open):not(#product-modal) { content-visibility: hidden; } /* 1.28.7: modal sản phẩm luôn được vẽ để ảnh hiển thị chắc chắn */

/* 1.29.0: font hệ thống — không tải font ngoài */
html, body, button, input, select, textarea { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif; }

/* ===== 1.29.1 Trang chủ tĩnh (mobile first, không hiệu ứng) ===== */
.hx-hero { position: relative; margin: 0; padding: 0; min-height: 0 !important; background: var(--surface-2, #eef2f7); }
.hx-hero > * { display: none; }
.hx-hero img#home-hero-img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.hx-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 16px 4px; }
.hx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 14px; font-weight: 700; font-size: 15px; border: 1.5px solid var(--navy, #0B3A6E); }
.hx-btn-primary { background: var(--navy, #0B3A6E); color: #fff; }
.hx-btn-outline { background: var(--surface, #fff); color: var(--navy-text, #0B3A6E); }
.hx-signup { display: block; margin: 8px 16px 0; text-align: center; font-weight: 600; color: var(--navy-text, #0B3A6E); text-decoration: underline; }
#home .home-kyc, #home .home-rate { margin: 14px 16px 0; }
.hx-sec { margin: 22px 16px 0; }
.hx-sec h2 { font-size: 17px; font-weight: 800; color: var(--ink-strong, #142033); margin: 0 0 10px; }
.hx-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.hx-more { font-size: 14px; font-weight: 600; color: var(--navy-text, #0B3A6E); background: none; border: 0; padding: 6px 0; }
.hx-feat { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hx-item { display: flex; flex-direction: column; text-align: left; background: var(--surface, #fff); border: 1px solid var(--line, #E3E9F2); border-radius: 14px; padding: 10px; color: var(--ink, #142033); }
.hx-item img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: 10px; }
.hx-item b { margin-top: 8px; font-size: 13px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hx-item span { margin-top: 4px; font-size: 12px; color: var(--muted, #5B6B7F); }
.hx-why { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hx-why li { display: flex; gap: 8px; align-items: flex-start; background: var(--surface, #fff); border: 1px solid var(--line, #E3E9F2); border-radius: 14px; padding: 12px; font-size: 13px; font-weight: 600; color: var(--ink, #142033); }
.hx-why svg { flex: none; color: var(--navy-text, #0B3A6E); }
#home .camp-home { margin: 0 0 10px; }
.hx-news { display: grid; gap: 10px; }
.hx-news .oct-card { width: auto !important; min-width: 0 !important; max-width: none !important; flex: none !important; scroll-snap-align: none !important; margin: 0 !important; transform: none !important; }
.hx-news .oct-card img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
#home .home-recent { margin: 22px 16px 0; }
.hx-foot { margin: 28px 0 0; padding: 20px 16px 28px; border-top: 1px solid var(--line, #E3E9F2); text-align: center; color: var(--muted, #5B6B7F); font-size: 13px; }
.hx-foot-brand { font-weight: 800; color: var(--ink-strong, #142033); margin: 0 0 8px; }
.hx-foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; }
.hx-foot-links button { background: none; border: 0; padding: 6px 0; color: var(--navy-text, #0B3A6E); font-weight: 600; font-size: 13px; }
.hx-foot-copy { margin: 10px 0 0; }

/* ===== 1.30.2 Compact home: first screen usable without scrolling (UI only) ===== */
#home.hx-compact .hx-hero, #home.hx-compact #home-hero-img { display: none !important; }
#home.hx-compact .hx-cta { padding: 12px 16px 0; gap: 8px; }
#home.hx-compact .hx-btn { min-height: 52px; font-size: 15px; }
#home.hx-compact .hx-signup { margin: 6px 16px 0; font-size: 14px; }
/* compact rate card: one pair (NT$ -> default currency), value + CTA on one row */
#home.hx-compact .home-rate { margin: 10px 16px 0; padding: 10px 12px; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "eb cta" "val cta" "note cta"; align-items: center; column-gap: 10px; border-radius: 14px; }
#home.hx-compact .home-rate-eyebrow { grid-area: eb; font-size: .68rem; }
#home.hx-compact .home-rate-val { grid-area: val; margin: 0; font-size: 1.2rem; line-height: 1.25; }
#home.hx-compact .home-rate-note { grid-area: note; margin: 0; font-size: .66rem; }
#home.hx-compact .home-rate-cta { grid-area: cta; width: auto; min-height: 40px; padding: 0 14px; border-radius: 12px; font-size: .85rem; white-space: nowrap; }
#home.hx-compact .home-kyc { margin: 10px 16px 0; padding: .6rem .75rem; }
/* products: fewer cards, smaller tiles */
#home.hx-compact .hx-sec { margin-top: 16px; }
#home.hx-compact .hx-sec h2 { font-size: 16px; margin-bottom: 8px; }
#home.hx-compact .hx-feat { grid-template-columns: 1fr 1fr; gap: 8px; }
#home.hx-compact .hx-feat > .hx-item:nth-child(n+3) { display: none; }
#home.hx-compact .hx-item { padding: 8px; flex-direction: row; align-items: center; gap: 8px; }
#home.hx-compact .hx-item img { width: 56px; height: 56px; flex: none; aspect-ratio: 1; }
#home.hx-compact .hx-item b { margin-top: 0; font-size: 12.5px; }
#home.hx-compact .hx-item span { display: none; }
/* why-us: tighter chips */
#home.hx-compact .hx-why { gap: 8px; }
#home.hx-compact .hx-why li { padding: 8px 10px; font-size: 12.5px; }
/* news: compact rows instead of big 16:9 images */
#home.hx-compact .hx-news { gap: 8px; }
#home.hx-compact .hx-news .oct-card { display: flex !important; flex-direction: row !important; align-items: stretch; overflow: hidden; }
#home.hx-compact .hx-news .oct-card img { width: 96px !important; height: auto !important; aspect-ratio: 1 !important; flex: none; object-fit: cover; }
#home.hx-compact .hx-news .oct-card-body { padding: 8px 10px !important; min-width: 0; }
#home.hx-compact .hx-news .oct-copy { display: none; }
#home.hx-compact .hx-news .oct-card h3 { font-size: 14px; margin: 2px 0 6px; }
@media (min-width: 700px) {
  #home.hx-compact .hx-feat { grid-template-columns: repeat(4, 1fr); }
  #home.hx-compact .hx-feat > .hx-item:nth-child(n+3) { display: flex; }
}
/* wallet shortcuts never shown as a primary entry on home / bottom nav / quick nav */
#home [data-tab="wallet"], #home .wallet-shortcut, #home [data-open-wallet], #home .quick-wallet,
.bottom-nav [data-tab="wallet"], .bottom-nav .wallet-shortcut, .quick-nav [data-tab="wallet"] { display: none !important; }

/* ===== 1.31.0 Homepage UI ===== */
/* Presentation only. Hooks used by the inline script in index.php:
   .hp-in (--d) · .hp-scr.is-on/.is-out · .hp-dots i.is-on · .hp-fc.is-hl · [data-hp-reveal].is-in
   .hp-rate.hp-sync · .hp-hint.is-on · #hp-phone.is-drag/.has-glare · html.hp-js / html.hp-lite · --hp-rm probe.
   Animations use transform + opacity only (except the tiny KYC check stroke). */

/* ---------- 0. Tokens + shell ---------- */
#home.hp {
  --hp-rm: 0;
  --hp-navy: #0B3A6E;
  --hp-navy-2: #082E58;
  --hp-navy-3: #061F3D;
  --hp-gold: #C4A35A;
  --hp-gold-2: #E6C77A;
  --hp-gold-3: #F4DFA6;
  --hp-ink: var(--ink, #122033);
  --hp-muted: var(--muted, #526277);
  --hp-line: var(--line, #dde3ec);
  --hp-card: var(--surface, #fff);
  --hp-ease: cubic-bezier(.22,1,.36,1);
  --hp-spring: cubic-bezier(.34,1.56,.64,1);
  --hp-gutter: 16px;
  --hp-pw: 212px;           /* phone width  (fixed → no CLS) */
  --hp-ph: 436px;           /* phone height (fixed → no CLS) */
  --hp-fs: 12px;            /* mockup base font */
  --hp-shadow: 0 1px 2px rgba(6,20,43,.04), 0 10px 28px rgba(11,58,110,.08);
  --hp-shadow-lg: 0 2px 6px rgba(6,20,43,.06), 0 22px 48px rgba(11,58,110,.16);
  position: relative;
  padding: 0;
  overflow-x: hidden;
  overflow-x: clip;
  background: var(--surface-2, #F5F7FA);
}
@media (prefers-reduced-motion: reduce) { #home.hp { --hp-rm: 1; } }
#home.hp .home-recent { display: none !important; }
#home.hp h1, #home.hp h2, #home.hp h3 { text-wrap: balance; }
#home.hp button { font-family: inherit; -webkit-tap-highlight-color: transparent; }
#home.hp :focus-visible { outline: 3px solid var(--hp-gold-2); outline-offset: 2px; border-radius: 12px; }
/* no heavy legacy loops on the new home (box-shadow / conic repaint loops) */
#home.hp .oct-card, #home.hp .camp-home { animation: none; }
#home.hp .camp-home::after { animation: none; opacity: .55; }

/* ---------- 1. Keyframes ---------- */
@keyframes hp-rise { from { opacity: 0; transform: translate3d(0,16px,0); } to { opacity: 1; transform: none; } }
@keyframes hp-pop-in { from { opacity: 0; transform: translate3d(0,8px,0) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes hp-float { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,-10px,0); } }
@keyframes hp-bob { 0%,100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes hp-drift-a { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-24px,18px,0) scale(1.08); } }
@keyframes hp-drift-b { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(22px,-16px,0) scale(1.1); } }
@keyframes hp-streak { 0% { transform: translate3d(-120%,0,0) rotate(-24deg); opacity: 0; } 15% { opacity: .9; } 45%,100% { transform: translate3d(320%,0,0) rotate(-24deg); opacity: 0; } }
@keyframes hp-glow { 0%,100% { opacity: .35; } 50% { opacity: .95; } }
@keyframes hp-ping { 0% { transform: scale(1); opacity: .7; } 80%,100% { transform: scale(2.6); opacity: 0; } }
@keyframes hp-sweep { from { transform: translate3d(-110%,0,0) skewX(-18deg); opacity: 1; } to { transform: translate3d(260%,0,0) skewX(-18deg); opacity: 0; } }
@keyframes hp-num { 0% { transform: scale(1); } 35% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes hp-nudge { 0%,100% { transform: translate3d(0,0,0); } 30% { transform: translate3d(-6px,0,0); } 60% { transform: translate3d(6px,0,0); } }

/* ---------- 2. Hero ---------- */
#home.hp .hp-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 26px var(--hp-gutter) 46px;
  color: #fff;
  text-align: center;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(30,78,134,.65) 0%, transparent 60%),
    linear-gradient(165deg, #0B3A6E 0%, #082E58 52%, #061F3D 100%);
  border-radius: 0 0 28px 28px;
}
#home.hp .hp-hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
#home.hp .hp-hero-bg::before { /* fine dot grid, faded */
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.2px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 55%, transparent 90%);
          mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 55%, transparent 90%);
}
#home.hp .hp-orb { position: absolute; display: block; border-radius: 50%; will-change: transform; }
#home.hp .hp-orb-a {
  width: 340px; height: 340px; top: -120px; right: -120px;
  background: radial-gradient(circle, rgba(230,199,122,.38) 0%, rgba(196,163,90,.12) 40%, transparent 70%);
  animation: hp-drift-a 16s ease-in-out infinite;
}
#home.hp .hp-orb-b {
  width: 380px; height: 380px; bottom: -160px; left: -150px;
  background: radial-gradient(circle, rgba(90,150,255,.36) 0%, rgba(24,108,240,.1) 42%, transparent 70%);
  animation: hp-drift-b 19s ease-in-out infinite;
}
#home.hp .hp-streak {
  position: absolute; top: 22%; left: 0; width: 38%; height: 2px; display: block;
  background: linear-gradient(90deg, transparent, rgba(244,223,166,.9), transparent);
  animation: hp-streak 7s 1.6s var(--hp-ease) infinite;
  opacity: 0;
}
#home.hp .hp-hero-copy { position: relative; z-index: 2; max-width: 34rem; margin: 0 auto; }

#home.hp .hp-in { animation: hp-rise .75s var(--hp-ease) both; animation-delay: calc(var(--d, 0) * 85ms + 60ms); }
#home.hp .hp-title { margin: 0; font-family: var(--font-head); font-weight: 800; letter-spacing: -.035em; line-height: 1.08; }
#home.hp .hp-title-a { display: block; font-size: clamp(1.62rem, 7.3vw, 2.05rem); color: #fff; }
#home.hp .hp-title-b {
  display: block; margin-top: .14em; font-size: clamp(1.62rem, 7.3vw, 2.05rem);
  color: var(--hp-gold-2);
  background: linear-gradient(92deg, #F4DFA6 0%, #E6C77A 45%, #C4A35A 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
#home.hp .hp-sub { margin: 10px auto 0; max-width: 26rem; font-size: .95rem; line-height: 1.45; color: #C7D6EA; text-wrap: pretty; }

/* trust chips */
#home.hp .hp-chips {
  list-style: none; margin: 16px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 7px;
}
#home.hp .hp-chips li {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 5px 11px 5px 9px;
  font-size: .78rem; font-weight: 650; line-height: 1.2; color: #EAF1FA;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: hp-pop-in .55s var(--hp-ease) both;
  animation-delay: calc(var(--c, 0) * 70ms + 280ms);
}
#home.hp .hp-chips li svg, #home.hp .hp-chips li i { flex: none; width: 15px; height: 15px; color: var(--hp-gold-2); }

/* CTA */
#home.hp .hp-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 20px 0 0; padding: 0; }
#home.hp .hp-cta .hx-btn {
  position: relative; isolation: isolate;
  min-height: 52px; padding: 0 14px; gap: 8px;
  font-size: .96rem; font-weight: 800; letter-spacing: -.01em;
  border-radius: 16px; cursor: pointer;
  transition: transform .25s var(--hp-ease), opacity .2s;
}
#home.hp .hp-cta .hx-btn:active { transform: scale(.97); }
#home.hp .hp-cta .hx-btn svg { flex: none; }
#home.hp .hp-btn-main {
  color: var(--hp-navy-2);
  border: 0;
  background: linear-gradient(135deg, #F4DFA6 0%, #E6C77A 42%, #C4A35A 100%);
  box-shadow: 0 10px 24px -8px rgba(230,199,122,.6), inset 0 1px 0 rgba(255,255,255,.55);
}
#home.hp .hp-btn-main::after { /* soft glow: opacity only */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  box-shadow: 0 0 22px 2px rgba(230,199,122,.55);
  opacity: .35; pointer-events: none;
  animation: hp-glow 3.2s ease-in-out 1.4s infinite;
}
#home.hp .hp-cta .hx-btn-outline {
  color: #fff;
  background: rgba(255,255,255,.07);
  border: 1.5px solid rgba(255,255,255,.38);
}
@media (hover: hover) {
  #home.hp .hp-cta .hx-btn:hover { transform: translate3d(0,-2px,0); }
  #home.hp .hp-cta .hx-btn-outline:hover { background: rgba(255,255,255,.13); }
}
#home.hp .hx-signup {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; margin: 6px auto 0; padding: 0 12px;
  font-size: .9rem; font-weight: 700; color: var(--hp-gold-3);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(244,223,166,.5);
}

/* ---------- 3. Phone mockup ---------- */
#home.hp .hp-stage {
  position: relative; z-index: 1;
  margin: 26px auto 0;
  max-width: 420px;
  /* stage height is fixed by the phone + dots + hint rows → stable layout */
}
#home.hp .hp-phone-float {
  position: relative; z-index: 1;
  width: var(--hp-pw); height: var(--hp-ph); margin: 0 auto;
  animation: hp-float 6s ease-in-out 1.2s infinite;
  will-change: transform;
}
#home.hp .hp-phone {
  position: relative;
  width: var(--hp-pw); height: var(--hp-ph);
  border-radius: 40px;
  background: linear-gradient(150deg, #2A3B55 0%, #121D2E 38%, #0A1220 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,.14),
    inset 0 0 0 4px #0A1220,
    0 2px 0 1px rgba(0,0,0,.25),
    0 36px 70px -18px rgba(0,0,0,.6),
    0 18px 40px -20px rgba(230,199,122,.25);
  touch-action: pan-y;               /* horizontal drags reach the swipe handler; vertical page scroll still works */
  -webkit-user-select: none; user-select: none;
  cursor: grab;
  transform-origin: 50% 100%;
  transition: transform .45s var(--hp-spring);
  font-size: var(--hp-fs);
}
#home.hp .hp-phone.is-drag { cursor: grabbing; transition: none; }
#home.hp .hp-phone::before, #home.hp .hp-phone::after { /* side buttons */
  content: ""; position: absolute; width: 3px; border-radius: 2px; background: #1E2C42;
}
#home.hp .hp-phone::before { left: -2px; top: 104px; height: 44px; box-shadow: 0 56px 0 #1E2C42; }
#home.hp .hp-phone::after { right: -2px; top: 132px; height: 64px; }
#home.hp .hp-island {
  position: absolute; z-index: 5; top: 17px; left: 50%;
  width: 72px; height: 21px; margin-left: -36px;
  border-radius: 12px; background: #04070C;
  box-shadow: inset -14px 0 0 -8px rgba(40,60,90,.0), inset 0 0 0 1px rgba(255,255,255,.04);
}
#home.hp .hp-island::after { content: ""; position: absolute; right: 9px; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #2C4A78, #070B12 70%); }
#home.hp .hp-status {
  position: absolute; z-index: 4; top: 19px; left: 30px; right: 26px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: .9em; line-height: 1; color: var(--hp-ink);
  pointer-events: none;
}
#home.hp .hp-status b { font-weight: 750; letter-spacing: -.01em; }
#home.hp .hp-status-r { display: inline-flex; align-items: center; gap: 4px; font-size: .78em; font-weight: 750; }
#home.hp .hp-bars { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 9px; }
#home.hp .hp-bars i { display: block; width: 2.5px; border-radius: 1px; background: var(--hp-ink); }
#home.hp .hp-bars i:nth-child(1) { height: 3px; } #home.hp .hp-bars i:nth-child(2) { height: 5px; }
#home.hp .hp-bars i:nth-child(3) { height: 7px; } #home.hp .hp-bars i:nth-child(4) { height: 9px; }
#home.hp .hp-batt { position: relative; display: inline-block; width: 19px; height: 9.5px; padding: 1.5px; border: 1.2px solid rgba(18,32,51,.55); border-radius: 3px; }
#home.hp .hp-batt::after { content: ""; position: absolute; right: -3.5px; top: 2.2px; width: 1.8px; height: 3.5px; border-radius: 0 1px 1px 0; background: rgba(18,32,51,.55); }
#home.hp .hp-batt i { display: block; width: 78%; height: 100%; border-radius: 1.5px; background: var(--hp-ink); }

#home.hp .hp-screens {
  position: absolute; inset: 9px; z-index: 1; overflow: hidden;
  border-radius: 32px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F3F6FA 100%);
  transition: transform .5s var(--hp-spring);
  will-change: transform;
}
#home.hp .hp-phone.is-drag .hp-screens { transition: none; }
#home.hp .hp-glass, #home.hp .hp-glare { position: absolute; inset: 9px; z-index: 3; border-radius: 32px; pointer-events: none; overflow: hidden; }
#home.hp .hp-glass { background: linear-gradient(118deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 26%, rgba(255,255,255,0) 72%, rgba(255,255,255,.12) 100%); opacity: .55; }
#home.hp .hp-glare i {
  position: absolute; left: 50%; top: 50%; width: 220px; height: 220px; margin: -110px 0 0 -110px; display: block;
  border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 62%);
  opacity: 0; transition: opacity .35s;
}
#home.hp .hp-phone.has-glare:hover .hp-glare i { opacity: .45; }

/* screens */
#home.hp .hp-scr {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; gap: .75em;
  padding: 3.9em 1.15em 1.2em;
  text-align: left; color: var(--hp-ink);
  opacity: 0; visibility: hidden;
  transform: translate3d(28px,0,0) scale(.985);
  transition: opacity .42s ease, transform .6s var(--hp-ease), visibility 0s linear .6s;
}
#home.hp .hp-scr.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .45s ease .06s, transform .6s var(--hp-ease), visibility 0s; }
#home.hp .hp-scr.is-out { opacity: 0; transform: translate3d(-28px,0,0) scale(.985); }
#home.hp .hp-s-in { opacity: 0; transform: translate3d(0,10px,0); transition: opacity .35s ease, transform .5s var(--hp-ease); }
#home.hp .hp-scr.is-on .hp-s-in { opacity: 1; transform: none; transition-delay: calc(var(--s, 0) * 75ms + 140ms); }
#home.hp .hp-s-h { margin: 0; font-size: 1.32em; font-weight: 800; letter-spacing: -.02em; color: var(--hp-navy-2); }
#home.hp .hp-s-card {
  position: relative; overflow: hidden;
  padding: 1em 1.05em; border-radius: 1.25em;
  background: var(--hp-card); border: 1px solid #E6ECF3; box-shadow: 0 6px 16px rgba(11,58,110,.08);
}
#home.hp [data-hp-scr="0"] .hp-s-card {
  color: #fff; border: 0;
  background: radial-gradient(90% 120% at 100% 0%, rgba(230,199,122,.35), transparent 55%), linear-gradient(140deg, #12528F 0%, #0B3A6E 55%, #082E58 100%);
  box-shadow: 0 12px 24px -8px rgba(11,58,110,.55);
}
#home.hp .hp-s-k { display: block; font-size: .85em; font-weight: 800; letter-spacing: .08em; color: var(--hp-gold-2); }
#home.hp .hp-s-big { display: block; margin-top: .15em; font-size: 2.05em; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
#home.hp .hp-s-sm { display: block; margin-top: .3em; font-size: .85em; color: rgba(255,255,255,.78); font-variant-numeric: tabular-nums; }
#home.hp .hp-s-pair {
  display: flex; align-items: center; justify-content: space-between; gap: .5em;
  padding: .55em .7em; border-radius: 1em; background: #EEF3F9; font-weight: 800; color: var(--hp-navy);
}
#home.hp .hp-s-pair span { flex: 1; text-align: center; padding: .35em 0; border-radius: .7em; background: #fff; box-shadow: 0 1px 3px rgba(11,58,110,.08); }
#home.hp .hp-s-pair svg { flex: none; color: var(--hp-gold); }
#home.hp .hp-s-btn {
  display: grid; place-items: center; min-height: 3.1em; border-radius: 1em;
  font-weight: 800; color: #fff; background: linear-gradient(135deg, #12528F, #0B3A6E);
  box-shadow: 0 8px 16px -8px rgba(11,58,110,.6);
}
#home.hp .hp-s-rate { margin: 0; font-size: .92em; color: var(--hp-muted); text-align: center; }
#home.hp .hp-s-rate b { color: var(--hp-navy); font-variant-numeric: tabular-nums; }
#home.hp .hp-s-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; }
#home.hp .hp-s-prod {
  display: flex; flex-direction: column; align-items: flex-start; gap: .25em;
  padding: .8em .7em; border-radius: 1.1em;
  background: #fff; border: 1px solid #E6ECF3; box-shadow: 0 4px 12px rgba(11,58,110,.06);
}
#home.hp .hp-s-prod svg { width: 2.1em; height: 2.1em; padding: .45em; margin-bottom: .2em; border-radius: .7em; color: var(--hp-navy); background: #EEF3F9; box-sizing: border-box; }
#home.hp .hp-s-prod b { font-size: .95em; font-weight: 750; line-height: 1.2; color: var(--hp-ink); }
#home.hp .hp-s-prod span { font-size: .85em; font-weight: 800; color: #8A6A1F; }
#home.hp .hp-s-row { display: flex; align-items: center; justify-content: space-between; gap: .5em; font-size: 1em; }
#home.hp .hp-s-row b { font-weight: 800; color: var(--hp-navy-2); font-variant-numeric: tabular-nums; }
#home.hp .hp-s-tag { padding: .25em .6em; border-radius: 999px; font-size: .8em; font-weight: 800; color: #8A5A08; background: #FEF3E2; }
#home.hp .hp-s-bar { margin-top: .8em; height: .5em; border-radius: 999px; background: #E7EDF5; overflow: hidden; }
#home.hp .hp-s-bar i {
  display: block; height: 100%; width: 100%; border-radius: inherit;
  background: linear-gradient(90deg, #0B3A6E, #186CF0 70%, #E6C77A);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 1.1s var(--hp-ease);
}
#home.hp .hp-scr.is-on .hp-s-bar i { transform: scaleX(.66); transition-delay: .45s; }
#home.hp .hp-s-tl { list-style: none; margin: .2em 0 0; padding: .3em .2em; display: flex; flex-direction: column; gap: 0; }
#home.hp .hp-s-tl li { position: relative; display: flex; align-items: center; gap: .75em; padding: .6em 0; font-weight: 700; color: var(--hp-muted); }
#home.hp .hp-s-tl li:not(:last-child)::before { content: ""; position: absolute; left: .42em; top: 1.75em; height: 1.4em; width: 2px; border-radius: 2px; background: #DCE4EE; }
#home.hp .hp-s-tl li.is-done:not(:last-child)::before { background: #1A7F4B; }
#home.hp .hp-s-tl i { position: relative; flex: none; width: 1em; height: 1em; border-radius: 50%; border: 2px solid #C9D4E2; background: #fff; }
#home.hp .hp-s-tl .is-done { color: var(--hp-ink); }
#home.hp .hp-s-tl .is-done i { border-color: #1A7F4B; background: #1A7F4B; box-shadow: inset 0 0 0 2px #fff; }
#home.hp .hp-s-tl .is-now { color: var(--hp-navy); }
#home.hp .hp-s-tl .is-now i { border-color: var(--hp-navy); background: var(--hp-navy); }
#home.hp .hp-s-tl .is-now i::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; background: rgba(11,58,110,.35); animation: hp-ping 1.8s ease-out infinite; }
#home.hp .hp-s-me { display: flex; align-items: center; gap: .75em; padding: .2em 0 .3em; }
#home.hp .hp-s-me b { font-size: 1.3em; font-weight: 800; color: var(--hp-navy-2); }
#home.hp .hp-s-av {
  display: grid; place-items: center; width: 3.4em; height: 3.4em; border-radius: 50%;
  font-weight: 800; color: var(--hp-navy-2);
  background: linear-gradient(135deg, #F4DFA6, #C4A35A); box-shadow: 0 0 0 3px #fff, 0 6px 14px rgba(196,163,90,.45);
}
#home.hp .hp-s-list { display: flex; flex-direction: column; overflow: hidden; border-radius: 1.15em; background: #fff; border: 1px solid #E6ECF3; box-shadow: 0 4px 12px rgba(11,58,110,.06); }
#home.hp .hp-s-li { display: flex; align-items: center; justify-content: space-between; gap: .5em; min-height: 3.3em; padding: .55em .95em; font-weight: 700; }
#home.hp .hp-s-li + .hp-s-li { border-top: 1px solid #EEF2F7; }
#home.hp .hp-s-mut { font-size: .88em; font-weight: 700; color: var(--hp-muted); white-space: nowrap; }
#home.hp .hp-s-ok { display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; background: #1A7F4B; box-shadow: 0 4px 10px rgba(26,127,75,.35); }
#home.hp .hp-s-ok svg { width: 1.1em; height: 1.1em; }
#home.hp .hp-s-ok path { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset .6s var(--hp-ease); }
#home.hp .hp-scr.is-on .hp-s-ok path { stroke-dashoffset: 0; transition-delay: .55s; }

/* dots + hint */
#home.hp .hp-dots { position: relative; z-index: 2; display: flex; justify-content: center; gap: 0; margin: 14px 0 0; height: 28px; }
#home.hp .hp-dots i { position: relative; display: block; width: 26px; height: 28px; cursor: pointer; }
#home.hp .hp-dots i::before {
  content: ""; position: absolute; left: 4px; right: 4px; top: 11px; height: 6px; border-radius: 999px;
  background: rgba(255,255,255,.4);
  transform: scaleX(.34); opacity: .8;
  transition: transform .45s var(--hp-ease), opacity .3s, background-color .3s;
}
#home.hp .hp-dots i.is-on::before { transform: scaleX(1); opacity: 1; background: var(--hp-gold-2); }
#home.hp .hp-hint {
  margin: 2px 0 0; height: 18px; font-size: .78rem; font-weight: 700; line-height: 18px; letter-spacing: .02em;
  color: rgba(234,241,250,.85); opacity: 0; transition: opacity .4s;
}
#home.hp .hp-hint.is-on { opacity: 1; animation: hp-nudge 1.4s ease-in-out .3s 2; }

/* ---------- 4. Floating cards ---------- */
#home.hp .hp-fcs { position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: var(--hp-ph); pointer-events: none; }
#home.hp .hp-fc {
  position: absolute; isolation: isolate;
  display: inline-flex; align-items: center; gap: 7px;
  max-width: 150px; padding: 7px 11px 7px 7px;
  font-size: .76rem; font-weight: 750; line-height: 1.15; color: var(--hp-navy-2);
  white-space: nowrap;
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 14px;
  box-shadow: 0 12px 26px -10px rgba(2,10,24,.55), 0 2px 6px rgba(2,10,24,.12);
  animation: hp-bob 5.5s ease-in-out infinite;
  transition: transform .45s var(--hp-spring), color .3s, background-color .3s;
}
#home.hp .hp-fc span { overflow: hidden; text-overflow: ellipsis; }
#home.hp .hp-fc svg, #home.hp .hp-fc > i {
  flex: none; width: 26px; height: 26px; padding: 5px; box-sizing: border-box; border-radius: 9px;
  color: var(--hp-navy); background: #EEF3F9; transition: background-color .3s, color .3s;
}
#home.hp .hp-fc::after { /* highlight glow (opacity only) */
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit;
  box-shadow: 0 0 0 2px var(--hp-gold-2), 0 10px 30px -4px rgba(230,199,122,.75);
  opacity: 0; transition: opacity .35s;
}
#home.hp .hp-fc.is-hl { transform: scale(1.08); background: #fff; }
#home.hp .hp-fc.is-hl::after { opacity: 1; }
#home.hp .hp-fc.is-hl svg, #home.hp .hp-fc.is-hl > i { color: var(--hp-navy-2); background: linear-gradient(135deg, #F4DFA6, #E6C77A); }
/* Card tops stay below the mockup's status bar + dynamic island (≈ 9px bezel + 38px) at every width:
   max(64px, 15%) leaves ≥ 17px clearance even at the -7px bob peak and the 1.08 highlight scale. */
#home.hp .hp-fc-0 { left: 0; top: max(64px, 15%); animation-delay: 0s; }
#home.hp .hp-fc-1 { right: 0; top: 34%; animation-delay: -1.4s; }
#home.hp .hp-fc-2 { left: 0; top: 58%; animation-delay: -2.8s; }
#home.hp .hp-fc-3 { right: 0; top: 80%; animation-delay: -4.1s; }

/* ---------- 5. Exchange rate ---------- */
#home.hp .hp-rate {
  position: relative; z-index: 2; overflow: hidden; isolation: isolate;
  margin: -26px var(--hp-gutter) 0; padding: 16px 16px 14px;
  border-radius: 22px; color: #fff;
  background:
    radial-gradient(70% 120% at 100% 0%, rgba(230,199,122,.22), transparent 60%),
    linear-gradient(140deg, #12528F 0%, #0B3A6E 48%, #082E58 100%);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 18px 40px -14px rgba(8,46,88,.55), inset 0 1px 0 rgba(255,255,255,.12);
}
#home.hp .hp-rate::before { /* sync sweep */
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; z-index: -1;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
  transform: translate3d(-110%,0,0) skewX(-18deg); opacity: 0; pointer-events: none;
}
#home.hp .hp-rate.hp-sync::before { animation: hp-sweep 1s var(--hp-ease) .1s; }
#home.hp .hp-rate.hp-sync .home-rate-val b { animation: hp-num .6s var(--hp-ease) .15s; }
#home.hp .hp-rate-top { display: flex; align-items: center; gap: 10px; }
#home.hp .hp-rate-ico {
  display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 11px;
  color: var(--hp-navy-2); background: linear-gradient(135deg, #F4DFA6, #C4A35A);
}
#home.hp .hp-rate .home-rate-eyebrow { flex: 1; margin: 0; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #C7D6EA; }
#home.hp .hp-live { position: relative; flex: none; width: 9px; height: 9px; border-radius: 50%; background: #3DDC97; box-shadow: 0 0 0 3px rgba(61,220,151,.18); }
#home.hp .hp-live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #3DDC97; animation: hp-ping 2s ease-out infinite; }
#home.hp .hp-rate .home-rate-val {
  margin: 10px 0 0; font-size: clamp(1.45rem, 6.6vw, 1.85rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.15; color: #fff;
  font-variant-numeric: tabular-nums;
}
#home.hp .hp-rate .home-rate-val b { display: inline-block; color: var(--hp-gold-2); transform-origin: 50% 70%; }
#home.hp .hp-rate .home-rate-val #home-rate-unit { font-size: .62em; font-weight: 700; color: #C7D6EA; }
#home.hp .hp-rate .home-rate-note { margin: 4px 0 0; font-size: .8rem; color: #C7D6EA; }
#home.hp .hp-rate-upd { margin: 2px 0 12px; font-size: .74rem; color: rgba(199,214,234,.85); }
#home.hp .hp-rate-upd time { font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
#home.hp .hp-rate .home-rate-cta {
  width: 100%; min-height: 48px; border: 0; border-radius: 14px; cursor: pointer;
  font-size: .96rem; font-weight: 800; color: var(--hp-navy-2); background: #fff;
  box-shadow: 0 8px 18px -10px rgba(0,0,0,.45);
  transition: transform .25s var(--hp-ease);
}
#home.hp .hp-rate .home-rate-cta:active { transform: scale(.98); }

/* ---------- 6. Quick actions ---------- */
#home.hp .hp-quick { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; margin: 14px var(--hp-gutter) 0; }
#home.hp .hp-qa {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  min-height: 86px; min-width: 0; padding: 12px 4px 10px;
  border: 1px solid var(--hp-line); border-radius: 18px; cursor: pointer;
  color: var(--hp-ink); background: var(--hp-card); box-shadow: var(--hp-shadow);
  transition: transform .25s var(--hp-ease), box-shadow .25s;
}
#home.hp .hp-qa:active { transform: scale(.96); }
@media (hover: hover) { #home.hp .hp-qa:hover { transform: translate3d(0,-3px,0); } }
#home.hp .hp-qa-ico {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px;
  color: var(--hp-navy); background: linear-gradient(145deg, #EEF3F9, #E1EAF5);
  box-shadow: inset 0 1px 0 #fff;
}
#home.hp .hp-qa:first-child .hp-qa-ico { color: var(--hp-navy-2); background: linear-gradient(135deg, #F4DFA6, #E6C77A); }
#home.hp .hp-qa b { max-width: 100%; font-size: .78rem; font-weight: 750; line-height: 1.2; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 7. Sections (shared) ---------- */
#home.hp .hx-sec { margin: 26px var(--hp-gutter) 0; }
#home.hp .hx-sec h2, #home.hp .hx-head h2 {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 12px; font-size: 1.12rem; font-weight: 800; letter-spacing: -.02em; color: var(--hp-ink);
}
#home.hp .hx-sec h2::before { content: ""; flex: none; width: 4px; height: 18px; border-radius: 4px; background: linear-gradient(180deg, #E6C77A, #C4A35A); }
#home.hp .hx-head { align-items: center; margin: 0 0 12px; }
#home.hp .hx-head h2 { margin: 0; }
#home.hp .hx-more { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; font-size: .88rem; font-weight: 750; color: var(--navy-text, #0B3A6E); cursor: pointer; }

/* scroll reveal (only once JS is running, so no-JS still shows everything) */
.hp-js #home.hp [data-hp-reveal] { opacity: 0; transform: translate3d(0,22px,0); transition: opacity .6s ease, transform .75s var(--hp-ease); }
.hp-js #home.hp [data-hp-reveal].is-in { opacity: 1; transform: none; }
.hp-js #home.hp .hp-rate[data-hp-reveal] { transform: translate3d(0,12px,0); }
.hp-js #home.hp .hp-rate[data-hp-reveal].is-in { transform: none; }

/* ---------- 8. Promotions ---------- */
#home.hp .hp-promos .home-kyc { margin: 0 0 12px; padding: 12px 12px 12px 14px; border-radius: 18px; border: 1px solid #F3DDB5; background: var(--st-amber-bg, #FEF3E2); }
#home.hp .hp-promos .home-kyc.hidden { display: none; }
#home.hp .hp-promos .home-kyc button { min-height: 44px; padding: 0 16px; border-radius: 12px; }
:root:not([data-theme="dark"]) #home.hp .hp-promos .home-kyc-t { color: #8A5A08; }            /* 5.4:1 on #FEF3E2 (was 3.3:1) */
:root:not([data-theme="dark"]) #home.hp .hp-promos .home-kyc button { background: #8A5A08; }   /* white text 6.3:1 */
#home.hp .hp-promo-row {
  display: flex; gap: 12px;
  margin: 0 calc(var(--hp-gutter) * -1); padding: 2px var(--hp-gutter) 14px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--hp-gutter);
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
#home.hp .hp-promo-row::-webkit-scrollbar { display: none; }
#home.hp .hp-promo {
  flex: 0 0 min(82%, 300px); min-width: 0; margin: 0; scroll-snap-align: start;
  display: flex; flex-direction: column;
  border-radius: 20px; overflow: hidden;
}
#home.hp .hp-promo.hidden { display: none !important; }
#home.hp .camp-home.hp-promo {
  justify-content: space-between; padding: 18px 16px 16px;
  background:
    radial-gradient(80% 90% at 100% 0%, rgba(230,199,122,.32), transparent 60%),
    linear-gradient(150deg, #12528F 0%, #0B3A6E 50%, #061F3D 100%);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 16px 34px -14px rgba(8,46,88,.55);
}
#home.hp .camp-home.hp-promo .eyebrow { align-self: flex-start; color: var(--hp-navy-2); background: linear-gradient(135deg, #F4DFA6, #E6C77A); }
#home.hp .camp-home.hp-promo h3 { margin: 12px 0 0; font-size: 1.12rem; line-height: 1.3; }
#home.hp .camp-home.hp-promo .btn-light { margin-top: 16px; min-height: 48px; border-radius: 14px; color: var(--hp-navy-2); }
#home.hp .oct-card.hp-promo { background: var(--hp-card); border: 1px solid var(--hp-line); box-shadow: var(--hp-shadow); }
#home.hp .oct-card.hp-promo img { aspect-ratio: 16 / 9; height: auto; object-fit: cover; }
#home.hp .oct-card.hp-promo .oct-card-body { display: flex; flex-direction: column; flex: 1; padding: 12px 14px 14px; }
#home.hp .oct-card.hp-promo .oct-date { display: inline-block; align-self: flex-start; padding: 3px 9px; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .04em; color: #7A5A12; background: #FBF1DA; }
#home.hp .oct-card.hp-promo h3 { margin-top: 8px; font-size: 1rem; }
#home.hp .oct-card.hp-promo .oct-copy { flex: 1; font-size: .86rem; color: var(--hp-muted); }
#home.hp .oct-card.hp-promo button { margin-top: 12px; min-height: 46px; border-radius: 13px; font-size: .92rem; background: linear-gradient(135deg, #12528F, #0B3A6E); }

/* ---------- 9. Featured ---------- */
#home.hp .hp-feat .hx-feat { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; min-height: 120px; }
#home.hp .hp-feat .hx-item {
  position: relative; min-width: 0; padding: 10px 10px 12px; gap: 0;
  border: 1px solid var(--hp-line); border-radius: 18px; cursor: pointer;
  background: var(--hp-card); box-shadow: var(--hp-shadow);
  transition: transform .3s var(--hp-ease);
}
@media (hover: hover) { #home.hp .hp-feat .hx-item:hover { transform: translate3d(0,-3px,0); } }
#home.hp .hp-feat .hx-item:active { transform: scale(.98); }
#home.hp .hp-feat .hx-item img { width: 100%; aspect-ratio: 1; height: auto; object-fit: contain; border-radius: 13px; background: linear-gradient(180deg, #fff, #F3F6FA); padding: 6px; box-sizing: border-box; }
#home.hp .hp-feat .hx-item b { margin-top: 9px; font-size: .86rem; font-weight: 750; color: var(--hp-ink); }
#home.hp .hp-feat .hx-item span { display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; font-size: .76rem; font-weight: 750; color: var(--navy-text, #0B3A6E); }
#home.hp .hp-feat .hx-item span::after { content: "→"; transition: transform .25s var(--hp-ease); }
@media (hover: hover) { #home.hp .hp-feat .hx-item:hover span::after { transform: translate3d(3px,0,0); } }

/* ---------- 10. How it works ---------- */
#home.hp .hp-steps { list-style: none; margin: 0; padding: 4px 16px; counter-reset: hpstep; border: 1px solid var(--hp-line); border-radius: 20px; background: var(--hp-card); box-shadow: var(--hp-shadow); }
#home.hp .hp-steps li { position: relative; counter-increment: hpstep; display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; }
#home.hp .hp-steps li:not(:last-child)::after { content: ""; position: absolute; left: 21px; top: 60px; bottom: -6px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, rgba(196,163,90,.7), rgba(196,163,90,.12)); }
#home.hp .hp-step-ico {
  position: relative; flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px;
  color: var(--hp-gold-2); background: linear-gradient(145deg, #12528F, #0B3A6E); box-shadow: 0 8px 18px -8px rgba(11,58,110,.6);
}
#home.hp .hp-step-ico::after {
  content: counter(hpstep); position: absolute; top: -6px; right: -6px;
  display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%;
  font-size: .68rem; font-weight: 800; line-height: 1; color: var(--hp-navy-2);
  background: linear-gradient(135deg, #F4DFA6, #E6C77A); box-shadow: 0 0 0 2px var(--hp-card);
}
#home.hp .hp-steps b { display: block; padding-top: 2px; font-size: .95rem; font-weight: 800; color: var(--hp-ink); }
#home.hp .hp-steps p { margin: 2px 0 0; font-size: .84rem; line-height: 1.4; color: var(--hp-muted); }
#home.hp .hp-steps li + li { border-top: 1px dashed #E6ECF3; }

/* ---------- 11. Footer ---------- */
#home.hp .hp-foot {
  margin: 30px 0 0; padding: 22px var(--hp-gutter) 26px;
  text-align: center; font-size: .82rem; color: #C7D6EA;
  border-top: 0; border-radius: 26px 26px 0 0;
  background: linear-gradient(170deg, #0B3A6E 0%, #061F3D 100%);
}
#home.hp .hp-foot .hx-foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 6px; }
#home.hp .hp-foot .hx-foot-links a, #home.hp .hp-foot .hx-foot-links button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px;
  border: 0; border-radius: 12px; background: none; cursor: pointer;
  font-size: .86rem; font-weight: 700; color: #EAF1FA; text-decoration: none;
  transition: background-color .2s;
}
#home.hp .hp-foot .hx-foot-links a svg { color: var(--hp-gold-2); }
@media (hover: hover) { #home.hp .hp-foot .hx-foot-links a:hover, #home.hp .hp-foot .hx-foot-links button:hover { background: rgba(255,255,255,.08); } }
#home.hp .hp-foot .hx-foot-copy { margin: 10px 0 0; font-size: .78rem; color: rgba(199,214,234,.8); }

/* ---------- 12. Dark theme ---------- */
:root[data-theme="dark"] #home.hp { --hp-ink: var(--ink); --hp-muted: var(--muted); }
:root[data-theme="dark"] #home.hp .hp-qa-ico { color: #8FC0FF; background: var(--surface-2); box-shadow: none; }
:root[data-theme="dark"] #home.hp .hp-qa:first-child .hp-qa-ico { color: #082E58; background: linear-gradient(135deg, #F4DFA6, #E6C77A); }
:root[data-theme="dark"] #home.hp .hp-feat .hx-item img { background: #fff; }
:root[data-theme="dark"] #home.hp .hp-feat .hx-item span, :root[data-theme="dark"] #home.hp .hx-more { color: #8FC0FF; }
:root[data-theme="dark"] #home.hp .oct-card.hp-promo .oct-date { color: #F0D79A; background: rgba(230,199,122,.14); }
:root[data-theme="dark"] #home.hp .hp-steps li + li { border-top-color: var(--line); }
:root[data-theme="dark"] #home.hp .hp-promos .home-kyc { border-color: rgba(240,182,92,.35); background: rgba(240,182,92,.1); }

/* ---------- 13. Responsive ---------- */
/* ≥ 390 phones: a touch more room for the mockup */
@media (min-width: 390px) {
  #home.hp { --hp-pw: 218px; --hp-ph: 448px; }
}
/* 375–389 */
@media (max-width: 389px) {
  #home.hp { --hp-pw: 200px; --hp-ph: 412px; --hp-fs: 11.4px; }
  #home.hp .hp-fc { max-width: 128px; padding: 6px 9px 6px 6px; font-size: .72rem; gap: 6px; }
  #home.hp .hp-fc-0, #home.hp .hp-fc-2 { left: -6px; }
  #home.hp .hp-fc-1, #home.hp .hp-fc-3 { right: -6px; }
  #home.hp .hp-island { width: 62px; margin-left: -31px; }
  #home.hp .hp-status { left: 26px; right: 22px; }
  #home.hp .hp-status-r { font-size: 0; gap: 4px; } /* hides the "5G" label on narrow mockups (no overlap with the island) */
  #home.hp .hp-fc svg, #home.hp .hp-fc > i { width: 23px; height: 23px; padding: 4.5px; }
}
/* < 375 (320 / 360): floating cards drop BELOW the phone as a horizontal row */
@media (max-width: 374px) {
  #home.hp { --hp-gutter: 14px; --hp-pw: 196px; --hp-ph: 402px; --hp-fs: 11.2px; }
  #home.hp .hp-hero { padding-top: 22px; }
  #home.hp .hp-title-a, #home.hp .hp-title-b { font-size: 1.55rem; }
  #home.hp .hp-sub { font-size: .9rem; }
  #home.hp .hp-chips { gap: 6px; }
  #home.hp .hp-chips li { font-size: .74rem; padding: 4px 10px 4px 8px; }
  #home.hp .hp-cta .hx-btn { font-size: .9rem; padding: 0 8px; gap: 6px; }
  #home.hp .hp-fcs {
    position: static; height: auto; pointer-events: auto;
    display: flex; gap: 8px;
    margin: 4px calc(var(--hp-gutter) * -1) -8px; padding: 10px var(--hp-gutter) 16px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  #home.hp .hp-fcs::-webkit-scrollbar { display: none; }
  #home.hp .hp-fc { position: relative; inset: auto; flex: none; max-width: none; scroll-snap-align: start; animation: none; }
  #home.hp .hp-fc { box-shadow: 0 6px 14px -8px rgba(2,10,24,.6); }
  #home.hp .hp-fc.is-hl { transform: none; } /* glow ring only: no scale inside the clipped scroll row */
  #home.hp .hp-fc::after { box-shadow: 0 0 0 2px var(--hp-gold-2), 0 4px 14px -4px rgba(230,199,122,.7); }
  #home.hp .hp-quick { gap: 6px; }
  #home.hp .hp-qa { min-height: 80px; border-radius: 16px; }
  #home.hp .hp-qa-ico { width: 40px; height: 40px; border-radius: 12px; }
  #home.hp .hp-qa b { font-size: .72rem; }
}
@media (max-width: 339px) {
  #home.hp { --hp-pw: 186px; --hp-ph: 384px; --hp-fs: 10.6px; }
  #home.hp .hp-title-a, #home.hp .hp-title-b { font-size: 1.42rem; }
  #home.hp .hp-cta { grid-template-columns: 1fr; }
  #home.hp .hp-qa b { font-size: .68rem; }
}

/* Desktop / web layout (shell becomes full width ≥1024) */
@media (min-width: 1024px) {
  #home.hp.app-screen.is-active { display: block; max-width: none; margin: 0; padding: 0; }
  #home.hp {
    --hp-gutter: max(24px, calc((100% - 1120px) / 2));
    --hp-pw: 262px; --hp-ph: 540px; --hp-fs: 13.6px;
  }
  #home.hp .hp-hero {
    display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; gap: 40px;
    padding: 56px var(--hp-gutter) 92px; text-align: left; border-radius: 0 0 40px 40px;
  }
  #home.hp .hp-hero-copy { margin: 0; max-width: 560px; }
  #home.hp .hp-title-a, #home.hp .hp-title-b { font-size: clamp(2.6rem, 3.6vw, 3.5rem); }
  #home.hp .hp-sub { margin: 16px 0 0; font-size: 1.12rem; max-width: 30rem; }
  #home.hp .hp-chips { justify-content: flex-start; margin-top: 22px; gap: 8px; }
  #home.hp .hp-chips li { font-size: .86rem; min-height: 36px; padding: 6px 14px 6px 11px; }
  #home.hp .hp-cta { display: flex; gap: 12px; margin-top: 30px; }
  #home.hp .hp-cta .hx-btn { min-height: 56px; padding: 0 26px; font-size: 1.02rem; }
  #home.hp .hx-signup { margin: 10px 0 0; }
  #home.hp .hp-stage { margin: 0 auto; width: 100%; max-width: 520px; }
  #home.hp .hp-fc { max-width: 170px; padding: 9px 14px 9px 9px; font-size: .86rem; border-radius: 16px; }
  #home.hp .hp-fc svg, #home.hp .hp-fc > i { width: 30px; height: 30px; padding: 6px; border-radius: 10px; }
  #home.hp .hp-fc-0 { left: 2%; } #home.hp .hp-fc-1 { right: 0; }
  #home.hp .hp-fc-2 { left: 0; } #home.hp .hp-fc-3 { right: 3%; }
  #home.hp .hp-phone::before { top: 130px; } #home.hp .hp-phone::after { top: 160px; height: 80px; }
  #home.hp .hp-island { top: 19px; width: 86px; height: 25px; margin-left: -43px; }
  #home.hp .hp-status { top: 23px; left: 36px; right: 32px; }

  #home.hp .hp-rate {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "top cta" "val cta" "note cta" "upd cta";
    column-gap: 28px; align-items: center;
    margin-top: -48px; padding: 22px 26px; border-radius: 26px;
  }
  #home.hp .hp-rate-top { grid-area: top; }
  #home.hp .hp-rate .home-rate-val { grid-area: val; font-size: 2.2rem; }
  #home.hp .hp-rate .home-rate-note { grid-area: note; }
  #home.hp .hp-rate-upd { grid-area: upd; margin-bottom: 0; }
  #home.hp .hp-rate .home-rate-cta { grid-area: cta; width: auto; min-width: 220px; min-height: 54px; padding: 0 28px; }
  #home.hp .hp-quick { gap: 14px; margin-top: 18px; }
  #home.hp .hp-qa { flex-direction: row; justify-content: flex-start; gap: 14px; min-height: 76px; padding: 14px 18px; border-radius: 20px; }
  #home.hp .hp-qa-ico { width: 48px; height: 48px; }
  #home.hp .hp-qa b { font-size: .98rem; text-align: left; }
  #home.hp .hx-sec { margin-top: 40px; }
  #home.hp .hx-sec h2, #home.hp .hx-head h2 { font-size: 1.4rem; }
  #home.hp .hp-promo-row { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; margin: 0; padding: 0 0 4px; overflow: visible; }
  #home.hp .hp-promo { flex: none; }
  #home.hp .hp-feat .hx-feat { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
  #home.hp .hp-steps { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0; padding: 10px; }
  #home.hp .hp-steps li { flex-direction: column; gap: 14px; padding: 18px 18px 20px; }
  #home.hp .hp-steps li + li { border-top: 0; border-left: 1px dashed #E6ECF3; }
  #home.hp .hp-steps li:not(:last-child)::after { left: 74px; right: 18px; top: 40px; bottom: auto; width: auto; height: 2px; background: linear-gradient(90deg, rgba(196,163,90,.7), rgba(196,163,90,.08)); }
  #home.hp .hp-foot { margin-top: 56px; padding: 30px var(--hp-gutter) 34px; border-radius: 0; }
}
@media (min-width: 1280px) {
  #home.hp { --hp-pw: 276px; --hp-ph: 568px; --hp-fs: 14.2px; }
}

/* ---------- 14. Motion preferences + low-power ---------- */
@media (prefers-reduced-motion: reduce) {
  #home.hp *, #home.hp *::before, #home.hp *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  #home.hp .hp-in, #home.hp .hp-chips li, #home.hp .hp-s-in, .hp-js #home.hp [data-hp-reveal] { opacity: 1 !important; transform: none !important; }
  #home.hp .hp-streak, #home.hp .hp-glare { display: none; }
}
.hp-lite #home.hp .hp-orb, .hp-lite #home.hp .hp-streak, .hp-lite #home.hp .hp-phone-float,
.hp-lite #home.hp .hp-fc, .hp-lite #home.hp .hp-btn-main::after, .hp-lite #home.hp .hp-live::after,
.hp-lite #home.hp .hp-s-tl .is-now i::after { animation: none !important; }
.hp-lite #home.hp .hp-streak, .hp-lite #home.hp .hp-glare, .hp-lite #home.hp .hp-hero-bg::before { display: none; }
.hp-lite #home.hp .hp-chips li { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255,255,255,.1); }
.hp-lite #home.hp .hp-phone-float, .hp-lite #home.hp .hp-orb { will-change: auto; }
/* ===== /1.31.0 Homepage UI ===== */

/* ===== 1.31.1 Country display + legal (presentation only) ===== */
.acc .acc-body .legal-updated { font-size: .74rem; color: var(--muted); margin: 0 0 .5rem; }
.acc .acc-body .legal-h { margin: 1rem 0 .3rem; font-size: .86rem; font-weight: 700; color: var(--ink); line-height: 1.35; }
.acc .acc-body .legal-list { margin: .35rem 0 0; padding-left: 1.1rem; list-style: disc; }
.acc .acc-body .legal-list li { margin: .25rem 0; }
.acc .acc-body .legal-toc { margin: .7rem 0 .2rem; padding: .55rem .75rem; list-style: none; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: .78rem; columns: 2; column-gap: 1rem; }
.acc .acc-body .legal-toc li { margin: .12rem 0; break-inside: avoid; }
@media (max-width: 359px) { .acc .acc-body .legal-toc { columns: 1; } }
.acc .acc-body.faq-body .legal-h:first-child { margin-top: 0; }
.set-row.set-row-end { justify-content: flex-end; min-height: 48px; }
.cty-reset { min-height: 44px; padding: 0 .9rem; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: .8rem; font-weight: 600; }
.cty-reset:focus-visible, .cty-opt:focus-visible, .cty-later:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.cty-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-end; justify-content: center; }
.cty-modal[hidden] { display: none; }
.cty-backdrop { position: absolute; inset: 0; background: rgba(8, 20, 40, .55); }
.cty-sheet { position: relative; width: min(100%, 440px); max-height: calc(100dvh - 24px); overflow-y: auto; margin: 0 auto; padding: 1.25rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px)); border-radius: 20px 20px 0 0; background: var(--paper, #fff); color: var(--ink); box-shadow: 0 -10px 40px rgba(0, 0, 0, .25); }
@media (min-width: 600px) { .cty-modal { align-items: center; } .cty-sheet { border-radius: 20px; } }
.cty-title { margin: 0; font-size: 1.15rem; font-weight: 800; }
.cty-sub { margin: .35rem 0 .9rem; font-size: .85rem; color: var(--muted); line-height: 1.45; }
.cty-list { display: grid; gap: .5rem; }
.cty-opt { display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 52px; padding: .55rem .85rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); font-size: .95rem; font-weight: 600; text-align: left; cursor: pointer; }
.cty-opt:hover { border-color: #2563eb; }
.cty-flag { font-size: 1.45rem; line-height: 1; }
.cty-name { flex: 1; }
.cty-ccy { font-size: .78rem; font-weight: 700; color: var(--muted); letter-spacing: .04em; }
.cty-later { display: block; width: 100%; min-height: 44px; margin-top: .6rem; border: 0; background: transparent; color: var(--muted); font-size: .88rem; font-weight: 600; cursor: pointer; }

/* ===== P0 1.31.3 — checkout inline errors, notification bell, "Tôi đã thanh toán", timeline ===== */
#order-form .ck-field-err { margin: .3rem 0 0; font-size: .78rem; font-weight: 700; color: #c5221f; line-height: 1.35; }
#order-form [aria-invalid="true"] { border-color: #d93025 !important; box-shadow: 0 0 0 3px rgba(217,48,37,.14); }
#order-form input[type="radio"][aria-invalid="true"], #order-form input[type="checkbox"][aria-invalid="true"] { outline: 2px solid #d93025; outline-offset: 2px; }
.ntf-bell { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; border: 0; background: transparent; color: inherit; cursor: pointer; }
.ntf-bell:hover { background: rgba(255,255,255,.08); }
.ntf-bell:focus-visible { outline: 2px solid #4C8DDB; outline-offset: 2px; }
.ntf-bell svg { width: 22px; height: 22px; }
.ntf-badge { position: absolute; top: 3px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: #d93025; color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; }
.ntf-panel { position: fixed; z-index: 90; top: 60px; right: max(8px, calc((100vw - 1120px) / 2)); width: min(400px, calc(100vw - 16px)); max-height: min(560px, 80vh); overflow: auto; background: #fff; color: #122033; border-radius: 16px; box-shadow: 0 18px 50px rgba(8,22,40,.28); border: 1px solid #e8eaed; }
.ntf-panel[hidden] { display: none; }
.ntf-hd { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .75rem 1rem; background: #fff; border-bottom: 1px solid #e8eaed; }
.ntf-hd strong { font-size: 1rem; }
.ntf-hd button { border: 0; background: none; color: #0B3A6E; font-weight: 700; font-size: .8rem; cursor: pointer; min-height: 36px; }
.ntf-item { display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid #f1f3f4; background: #fff; padding: .7rem 1rem; cursor: pointer; color: inherit; }
.ntf-item.is-unread { background: #F2F6FB; }
.ntf-item.is-unread .ntf-t::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: .4rem; border-radius: 99px; background: #186cf0; vertical-align: middle; }
.ntf-t { font-weight: 800; font-size: .9rem; }
.ntf-b { margin-top: .15rem; font-size: .82rem; color: #3a4450; }
.ntf-w { margin-top: .2rem; font-size: .72rem; color: #5a6a7a; }
.ntf-empty { padding: 2rem 1rem; text-align: center; color: #5a6a7a; font-size: .88rem; }
@media (max-width: 640px) { .ntf-panel { top: 0; right: 0; width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0; } }
.tp-paid-box { margin-top: .6rem; padding: .7rem; border-radius: 12px; border: 1px solid #cfe0f7; background: #F2F6FB; }
.tp-paid-box p { margin: 0 0 .4rem; font-size: .8rem; color: #3a4450; }
.tp-paid-btn { width: 100%; min-height: 44px; border: 0; border-radius: 10px; background: #0B3A6E; color: #fff; font-weight: 800; cursor: pointer; }
.tp-paid-btn[disabled] { opacity: .6; cursor: wait; }
.tp-paid-file { display: block; margin: .4rem 0; font-size: .75rem; }
.tp-paid-done { margin-top: .6rem; padding: .6rem .7rem; border-radius: 12px; background: #E8F1FE; color: #174EA6; font-size: .82rem; font-weight: 700; }
.tp-timeline { margin: .5rem 0 0; padding: 0 0 0 1rem; border-left: 2px solid #e8eaed; list-style: none; font-size: .75rem; color: #3a4450; }
.tp-timeline li { position: relative; margin: 0 0 .3rem; }
.tp-timeline li::before { content: ""; position: absolute; left: -1.33rem; top: .35rem; width: 8px; height: 8px; border-radius: 99px; background: #0B3A6E; }
.tp-timeline time { color: #5a6a7a; margin-right: .3rem; }
/* P0 1.31.3 — refinements for pay-notify.js markup */
.ntf-bell { font-size: 18px; line-height: 1; }
.ntf-item > span { display: block; }
.ntf-hd .ntf-all { margin-left: auto; }
.ntf-hd .ntf-x { min-width: 36px; font-size: 1rem; color: #5a6a7a; }
.tp-paid-box.is-done { background: #E8F1FE; border-color: #c6dafc; }
.tp-paid-box.is-done .tp-paid-done, .tp-paid-box.is-rejected .tp-paid-done { margin: 0 0 .2rem; padding: 0; background: none; }
.tp-paid-box.is-rejected { background: #FCE8E6; border-color: #f5c2bd; }
.tp-paid-box.is-rejected .tp-paid-done { color: #c5221f; }
.tp-paid-sub { margin: 0; font-size: .78rem; color: #3a4450; }
.tp-paid-q { font-weight: 700; color: #122033 !important; }
.tp-paid-file span { display: block; margin-bottom: .25rem; color: #3a4450; font-weight: 600; }
.tp-paid-file input { max-width: 100%; font-size: .78rem; }
.tp-paid-err { margin: 0 0 .4rem !important; color: #c5221f !important; font-weight: 700; }
.tp-paid-err.hidden { display: none; }
details.tp-timeline { border-left: 0; padding: 0; margin-top: .6rem; }
details.tp-timeline summary { cursor: pointer; font-weight: 800; color: #0B3A6E; font-size: .78rem; min-height: 32px; display: flex; align-items: center; }
details.tp-timeline ol { margin: .3rem 0 0; padding: 0 0 0 1rem; border-left: 2px solid #e8eaed; list-style: none; }
details.tp-timeline li { position: relative; margin: 0 0 .35rem; }
details.tp-timeline li::before { content: ""; position: absolute; left: -1.33rem; top: .35rem; width: 8px; height: 8px; border-radius: 99px; background: #0B3A6E; }
details.tp-timeline li em { display: block; font-style: normal; color: #c5221f; }
:root[data-theme="dark"] .ntf-panel, :root[data-theme="dark"] .ntf-hd, :root[data-theme="dark"] .ntf-item { background: #111a24; color: #e8eef5; border-color: #24303d; }
:root[data-theme="dark"] .ntf-item.is-unread { background: #16263a; }
:root[data-theme="dark"] .ntf-b, :root[data-theme="dark"] .ntf-w { color: #aeb9c6; }
:root[data-theme="dark"] .tp-paid-box { background: #13202f; border-color: #2c3a49; }
:root[data-theme="dark"] .tp-paid-box p, :root[data-theme="dark"] .tp-paid-q, :root[data-theme="dark"] .tp-paid-file span { color: #d7dde4 !important; }

/* ===== 1.31.4 — 5-row exchange breakdown (pay → fee → converted → rate → recipient gets).
   Hierarchy (owner, locked): "Recipient gets" is the largest number; amount paid second; rows 2–4 small. ===== */
.rx-legacy[hidden], #home.hp .hp-rate .hp-rate-legacy { display: none !important; }
.twq { display: flex; flex-direction: column; margin: .8rem 0 0; }
.twq-r { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; column-gap: .6rem; padding: .18rem 0; }
.twq-i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 99px; font-size: .7rem; font-weight: 800; line-height: 1;
  background: var(--tint-blue, #E8F0FE); color: var(--navy-text, #0B3A6E); }
.twq-l { min-width: 0; font-size: .82rem; font-weight: 600; line-height: 1.25; color: var(--muted, #5a6a7a); }
.twq-v { font-size: .92rem; font-weight: 800; text-align: right; white-space: nowrap; color: var(--ink-strong, #122033);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif; font-variant-numeric: tabular-nums; }
.twq-sub { display: block; font-size: .72rem; font-weight: 600; color: var(--muted, #5a6a7a); }
.twq-ar { width: 22px; text-align: center; font-size: .72rem; line-height: .9; color: var(--muted, #5a6a7a); opacity: .65; }
.twq-pay .twq-l { font-weight: 800; color: var(--ink-strong, #122033); }
.twq-pay .twq-v { font-size: 1.3rem; letter-spacing: -.01em; }
.twq-fee .twq-v { color: #c5221f; }
.twq-recv { grid-template-columns: 22px minmax(0, 1fr); grid-template-areas: "i l" "v v"; row-gap: .1rem; margin-top: .25rem; padding: .7rem .85rem .85rem;
  border-radius: 16px; background: #E6F4EA; border: 1px solid #CEEAD6; }
.twq-recv .twq-i { grid-area: i; background: #0E7A45; color: #fff; }
.twq-recv .twq-l { grid-area: l; font-size: .86rem; font-weight: 800; color: #137333; }
.twq-recv .twq-v { grid-area: v; text-align: left; white-space: normal; overflow-wrap: anywhere; color: #0E7A45;
  font-size: clamp(2.1rem, 10vw, 2.7rem); line-height: 1.08; letter-spacing: -.03em; }
.twq-u { font-size: .5em; font-weight: 800; letter-spacing: 0; margin-left: .1em; }
.twq-note { margin: .5rem 0 0; font-size: .72rem; line-height: 1.35; color: var(--muted, #5a6a7a); }
.twq-warn { margin: .45rem 0 0; font-size: .78rem; font-weight: 700; color: #c5221f; }
.twq.is-low .twq-recv { opacity: .55; }
/* compact (confirm steps) */
.twq.is-compact { margin-top: 0; }
.twq.is-compact .twq-pay .twq-v { font-size: 1.05rem; }
.twq.is-compact .twq-recv { padding: .5rem .7rem .6rem; }
.twq.is-compact .twq-recv .twq-v { font-size: 1.7rem; }
#rx-quote-strip:not(.hidden) { display: block; padding: .75rem .9rem; }
.rx-ticket-bd { margin-top: .6rem; }
#rx-out-flow [data-rx-step="1"] .rx-rate-meta { margin: .5rem 0 .2rem; }
#rx-amount { font-size: 1.6rem !important; } /* amount paid = 2nd largest; recipient row ≥ 2.1rem */
:root[data-theme="dark"] .twq-recv { background: rgba(61,220,151,.1); border-color: rgba(61,220,151,.3); }
:root[data-theme="dark"] .twq-recv .twq-l, :root[data-theme="dark"] .twq-recv .twq-v { color: #6EE7A8; }
/* homepage rate card → calculator (dark card) */
#home.hp .hp-calc { margin: 12px 0 0; }
#home.hp .hp-calc-lbl { display: block; font-size: .78rem; font-weight: 700; color: #C7D6EA; }
#home.hp .hp-calc-in { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 0 14px; min-height: 54px; border-radius: 14px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); }
#home.hp .hp-calc-in:focus-within { border-color: #F4DFA6; box-shadow: 0 0 0 3px rgba(244,223,166,.25); }
#home.hp .hp-calc-in span { font-size: 1rem; font-weight: 800; color: #C7D6EA; }
#home.hp .hp-calc-in input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: #fff; font-size: 1.35rem; font-weight: 800;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif; font-variant-numeric: tabular-nums; }
#home.hp .twq-dark .twq-i { background: rgba(255,255,255,.14); color: #fff; }
#home.hp .twq-dark .twq-l { color: #C7D6EA; }
#home.hp .twq-dark .twq-v { color: #fff; }
#home.hp .twq-dark .twq-fee .twq-v { color: #FFB4AB; }
#home.hp .twq-dark .twq-ar, #home.hp .twq-dark .twq-note, #home.hp .twq-dark .twq-sub { color: #C7D6EA; }
#home.hp .twq-dark .twq-warn { color: #FFB4AB; }
#home.hp .twq-dark .twq-recv { background: rgba(255,255,255,.08); border-color: rgba(244,223,166,.45); }
#home.hp .twq-dark .twq-recv .twq-i { background: #F4DFA6; color: #0B3A6E; }
#home.hp .twq-dark .twq-recv .twq-l { color: #F4DFA6; }
#home.hp .twq-dark .twq-recv .twq-v { color: #fff; font-size: clamp(2.3rem, 11vw, 2.9rem); }
#home.hp .twq-dark .twq-note { display: none; } /* the card's own note line says the same */
#home.hp .hp-rate .home-rate-note { margin-top: 10px; }
@media (min-width: 1024px) {
  #home.hp .hp-rate {
    grid-template-columns: minmax(0, 600px) minmax(0, 1fr); grid-template-rows: auto 1fr auto auto auto;
    grid-template-areas: "top top" "calc ." "calc note" "calc upd" "calc cta"; column-gap: 48px; align-items: end;
  }
  #home.hp .hp-calc { grid-area: calc; }
  #home.hp .hp-rate .home-rate-note, #home.hp .hp-rate-upd { justify-self: end; text-align: right; }
  #home.hp .hp-rate .home-rate-cta { justify-self: end; margin-top: 12px; }
  #home.hp .twq-dark .twq-recv .twq-v { font-size: 3.4rem; }
  .twq-recv .twq-v { font-size: 2.8rem; }
}
/* amount paid = 2nd largest number on the homepage (above the decorative hero mockup figure) */
#home.hp .twq-dark .twq-pay .twq-v { font-size: 1.65rem; }
@media (min-width: 1024px) { #home.hp .twq-dark .twq-pay .twq-v { font-size: 1.95rem; } }
/* exchange history cards sit under the calculator: keep their amounts below the calculator's amount paid */
#rx-history .rx-pay .amt { font-size: 1.4rem; }
/* mobile: keep row 5 (recipient gets) above the sticky CTA on a 390×844 screen */
@media (max-width: 640px) {
  .twq { margin-top: .55rem; }
  .twq-r { padding: .06rem 0; }
  .twq-ar { font-size: .6rem; line-height: .62; }
  .twq-l { font-size: .8rem; }
  .twq-pay .twq-v { font-size: 1.2rem; }
  .twq-recv { padding: .55rem .8rem .7rem; }
  .rx-dir.is-one ~ #rx-out-flow .rx-swap-row { display: none; } /* one direction only (id/fil/th/zh/en): nothing to swap */
  #rx-out-flow [data-rx-step="1"] .rx-chips-lbl { display: none; }
  #rx-out-flow [data-rx-step="1"] .rx-chips { margin-top: .5rem; }
  #rx-out-flow [data-rx-step="1"] .rx-swap-row { margin: .1rem 0 0; }
  #rx-out-flow [data-rx-step="1"] .rx-limit { padding-top: .55rem; padding-bottom: .55rem; }
  #rx-out-flow [data-rx-step="1"] .rx-limit .val { font-size: 1.1rem; margin-top: 0; }
  #rx-out-flow [data-rx-step="1"] .rx-limit .bar { margin-top: .35rem; }
  #rx-amount { min-height: 54px; }
}
/* step 1: calculator first, monthly limit under it (row 5 must be visible on first view) */
#rx-out-flow [data-rx-step="1"].is-on { display: flex; flex-direction: column; }
#rx-out-flow [data-rx-step="1"] > .exchange-box { order: 0; }
#rx-out-flow [data-rx-step="1"] > .rx-limit { order: 1; margin: .75rem 0 0; }
#rx-out-flow [data-rx-step="1"] > .rx-hist { order: 2; }
.rx-dir.is-one ~ #rx-out-flow .rx-swap-row { display: none; }
@media (min-width: 1024px) {
  #rx-out-flow [data-rx-step="1"] .cta-stack { position: static; box-shadow: none; }
}
@media (max-width: 640px) { #rx-out-flow [data-rx-step="1"] .rx-swap-row { display: none; } } /* same action as the direction tabs above */
/* reset the legacy 3-cell strip styles for the breakdown inside it */
#rx-quote-strip .twq span { display: inline; margin: 0; font-size: inherit; font-weight: inherit; color: inherit; }
#rx-quote-strip .twq .twq-i { display: grid; font-size: .7rem; font-weight: 800; color: var(--navy-text, #0B3A6E); }
#rx-quote-strip .twq .twq-recv .twq-i { color: #fff; }
#rx-quote-strip .twq .twq-l { display: block; font-size: .8rem; font-weight: 600; color: var(--muted, #5a6a7a); }
#rx-quote-strip .twq .twq-pay .twq-l { font-weight: 800; color: var(--ink-strong, #122033); }
#rx-quote-strip .twq .twq-recv .twq-l { font-size: .86rem; font-weight: 800; color: #137333; }
#rx-quote-strip .twq .twq-u { font-size: .5em; font-weight: 800; margin-left: .1em; }

/* ===== 1.31.4 Home: recent orders (signed-in only; .auth-only hides it for guests) ===== */
#home.hp .hp-recent { margin: 14px var(--hp-gutter) 0; }
#home.hp .hp-recent-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 2px 8px; }
#home.hp .hp-recent-hd h2 { margin: 0; font-family: var(--font-head); font-size: 1.12rem; font-weight: 800; color: var(--hp-navy-2, #0B3A6E); }
#home.hp .hp-recent-all { border: 0; background: none; padding: 6px 2px; font-size: .86rem; font-weight: 800; color: #186cf0; cursor: pointer; }
#home.hp .hp-recent-list { display: grid; gap: 10px; }
#home.hp .hp-recent-msg { margin: 0; padding: 14px 16px; border-radius: 16px; background: #fff; border: 1px solid #E6ECF3; font-size: .88rem; color: #5a6a7a; }
#home.hp .hp-recent-empty { padding: 16px; border-radius: 18px; background: #fff; border: 1px dashed #C9D6E6; }
#home.hp .hp-recent-empty p { margin: 0 0 12px; font-size: .92rem; line-height: 1.45; color: #31445c; }
#home.hp .hp-ro { position: relative; padding: 14px 14px 12px; border-radius: 18px; background: #fff; border: 1px solid #E6ECF3; box-shadow: 0 6px 18px -12px rgba(11,58,110,.35); }
#home.hp .hp-ro.is-attn { border: 2px solid #F29900; background: linear-gradient(180deg, #FFF8E6 0%, #fff 70%); box-shadow: 0 10px 24px -14px rgba(242,153,0,.6); }
#home.hp .hp-ro-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
#home.hp .hp-ro-code { font-size: .78rem; font-weight: 800; letter-spacing: .02em; color: #5a6a7a; font-variant-numeric: tabular-nums; }
#home.hp .hp-ro-st { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: .78rem; font-weight: 800; line-height: 1.25; color: #0B3A6E; background: #E8F0FE; }
#home.hp .hp-ro-st i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
#home.hp .tone-need .hp-ro-st { color: #8A4B00; background: #FEEFC3; }
#home.hp .tone-need .hp-ro-st i { animation: hp-ping 1.6s ease-out infinite; }
#home.hp .tone-done .hp-ro-st { color: #137333; background: #E6F4EA; }
#home.hp .tone-go .hp-ro-st { color: #0E5C8A; background: #E1F2FB; }
#home.hp .tone-off .hp-ro-st { color: #5f6368; background: #F1F3F4; }
#home.hp .hp-ro-mid { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 8px; }
#home.hp .hp-ro-amt { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif; font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; color: #122033; font-variant-numeric: tabular-nums; }
#home.hp .hp-ro-mid > span { font-size: .84rem; color: #5a6a7a; }
#home.hp .hp-ro-pay b { color: #8A4B00; font-weight: 800; }
#home.hp .hp-ro-who { margin: 4px 0 0; font-size: .82rem; color: #31445c; overflow-wrap: anywhere; }
#home.hp .hp-recent-btn { display: block; width: 100%; min-height: 44px; margin-top: 10px; border-radius: 12px; border: 1px solid #C9D6E6; background: #fff; color: #0B3A6E; font-size: .9rem; font-weight: 800; cursor: pointer; }
#home.hp .hp-recent-btn.is-primary, #home.hp .hp-recent-empty .hp-recent-btn { border: 0; color: #fff; background: linear-gradient(135deg, #12528F, #0B3A6E); }
@media (min-width: 1024px) {
  #home.hp .hp-recent { margin-top: 22px; }
  #home.hp .hp-recent-list { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
  #home.hp .hp-ro { display: flex; flex-direction: column; }
  #home.hp .hp-ro .hp-recent-btn { margin-top: auto; }
  #home.hp .hp-ro-who { margin-bottom: 10px; }
}
:root[data-theme="dark"] #home.hp .hp-ro, :root[data-theme="dark"] #home.hp .hp-recent-msg, :root[data-theme="dark"] #home.hp .hp-recent-empty { background: #111a24; border-color: #24303d; }
:root[data-theme="dark"] #home.hp .hp-ro-amt, :root[data-theme="dark"] #home.hp .hp-recent-empty p, :root[data-theme="dark"] #home.hp .hp-ro-who { color: #e8eef5; }
:root[data-theme="dark"] #home.hp .hp-ro.is-attn { background: #2a2210; border-color: #F29900; }

/* rate time: server time only; pending state when missing/stale */
#home.hp .hp-rate-upd time.is-pending { font-weight: 600; color: #F4DFA6; }

/* ===== 1.31.4 hero mockup screens (wallet removed) ===== */
#home.hp .hp-s-h2 { font-size: 1.12em; line-height: 1.22; }
#home.hp .hp-s-quote { padding: .75em .8em; }
#home.hp .twq-mini .twq { margin: 0; }
#home.hp .twq-mini .twq-r { grid-template-columns: 1.5em minmax(0,1fr) auto; column-gap: .45em; padding: .08em 0; }
#home.hp .twq-mini .twq-i { width: 1.45em; height: 1.45em; font-size: .78em; }
#home.hp .twq-mini .twq-l { font-size: .82em; }
#home.hp .twq-mini .twq-v { font-size: .86em; }
#home.hp .twq-mini .twq-pay .twq-v { font-size: 1em; }
#home.hp .twq-mini .twq-ar { width: 1.5em; font-size: .7em; line-height: .7; }
#home.hp .twq-mini .twq-recv { margin-top: .3em; padding: .5em .6em .6em; border-radius: .9em; }
#home.hp .twq-mini .twq-recv .twq-l { font-size: .85em; }
#home.hp .twq-mini .twq-recv .twq-v { font-size: 2.05em; line-height: 1.05; }
#home.hp .twq-mini .twq-warn, #home.hp .twq-mini .twq-note { display: none; }
#home.hp .hp-s-ctys { list-style: none; margin: 0; padding: 0; }
#home.hp .hp-s-ctys .hp-s-li { min-height: 2.8em; }
#home.hp .hp-s-ctys .hp-s-li > span:first-child { display: inline-flex; align-items: center; gap: .45em; }
#home.hp .hp-s-ctys .hp-s-li i { font-style: normal; font-size: 1.25em; }
#home.hp .hp-s-ctys .hp-s-li.is-me { background: #FFF6DE; color: var(--hp-navy-2); }
#home.hp .hp-s-ctys .hp-s-li.is-me .hp-s-mut { color: #8A6A1F; }
#home.hp .hp-s-cvs { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; }
#home.hp .hp-s-cvs span { display: grid; place-items: center; min-height: 3.6em; padding: .5em; border-radius: 1em; background: #fff; border: 1px solid #E6ECF3; box-shadow: 0 4px 12px rgba(11,58,110,.06); }
#home.hp .hp-s-cvs img { width: 100%; height: auto; max-height: 2.2em; object-fit: contain; }
#home.hp [data-hp-scr="0"] .hp-s-card.hp-s-quote { color: var(--hp-ink); background: #fff; border: 1px solid #E6ECF3; box-shadow: 0 6px 16px rgba(11,58,110,.08); }
/* phones: the mock screens now carry real numbers — keep the floating badges from covering them */
@media (max-width: 767px) { #home.hp .hp-fcs { display: none; } }

/* ===== 1.33.0: single contextual promo slot (no carousel) + v2 header logo ===== */
.app-topbar .brand-logo.v2 { height: 1.6rem; width: auto; max-width: 44vw; object-fit: contain; object-position: left center; }
#home.hp .hp-promos-v2 .home-kyc { display: none !important; } /* the slot carries the verify offer */
#home.hp .hp-pslot:empty { min-height: 132px; border-radius: 18px; background: rgba(120,140,170,.08); }
#home.hp .hp-pr { height: 132px; box-sizing: border-box; overflow: hidden; background: #fff; border-radius: 18px; box-shadow: 0 6px 20px rgba(11,40,90,.08); padding: 16px; display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; position: relative; border: 1px solid rgba(11,40,90,.06); }
#home.hp .hp-pr::after { content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%; background: var(--pr-tint); opacity: .55; pointer-events: none; }
#home.hp .hp-pr.b { --pr-tint: #E9F1FF; --pr-cta: #1557D6; }
#home.hp .hp-pr.g { --pr-tint: #E6F6EA; --pr-cta: #15803D; }
#home.hp .hp-pr-ic { width: 44px; height: 44px; border-radius: 14px; background: var(--pr-tint); display: grid; place-items: center; font-size: 22px; position: relative; z-index: 1; }
#home.hp .hp-pr-tx { position: relative; z-index: 1; display: flex; flex-direction: column; min-width: 0; }
#home.hp .hp-pr-m { margin: 0; font-size: 15.5px; font-weight: 800; line-height: 1.3; color: #0B1F3A; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html:lang(th) #home.hp .hp-pr-m { line-height: 1.45; font-size: 15px; }
#home.hp .hp-pr-s { margin: 3px 0 0; font-size: 13px; color: #5B6B84; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#home.hp .hp-pr-c { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 999px; background: var(--pr-cta); color: #fff; font-size: 13.5px; font-weight: 700; white-space: nowrap; border: 0; cursor: pointer; }
#home.hp .hp-pr-c::after { content: "→"; }
#home.hp .hp-pall { margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 44px; border-radius: 14px; color: #1557D6; font-weight: 700; font-size: 14px; background: transparent; border: 1.5px solid #D6E2FB; cursor: pointer; }
#home.hp .hp-pall::after { content: "→"; }
#home.hp .hp-pall[aria-expanded="true"]::after { content: "↑"; }
#home.hp .hp-promo-list { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 12px 0 0; padding: 0; overflow: visible; scroll-snap-type: none; }
#home.hp .hp-promo-list[hidden] { display: none; }
#home.hp .hp-promo-list .hp-promo { flex: none; width: auto; }
@media (min-width: 900px) { #home.hp .hp-promo-list { grid-template-columns: repeat(2, minmax(0,1fr)); } #home.hp .hp-pr { max-width: 560px; } }
:root[data-theme="dark"] #home.hp .hp-pr { background: var(--card, #13233b); border-color: rgba(255,255,255,.08); }
:root[data-theme="dark"] #home.hp .hp-pr.b { --pr-tint: rgba(91,140,255,.18); }
:root[data-theme="dark"] #home.hp .hp-pr.g { --pr-tint: rgba(34,197,94,.16); }
:root[data-theme="dark"] #home.hp .hp-pr-m { color: var(--ink, #eef3fb); }
:root[data-theme="dark"] #home.hp .hp-pr-s { color: var(--muted, #a9b6c9); }
:root[data-theme="dark"] #home.hp .hp-pall { color: #9cc0ff; border-color: rgba(156,192,255,.3); }