/* ============================================================
   YehShip HOME (dashboard kiểu app) — prefix .hm-
   ============================================================ */
.hm{background:#F4F7FC}
body.hm .app{background:#F4F7FC}

/* Top bar */
.hm-bar{display:flex;align-items:center;justify-content:space-between;padding:14px 18px 6px}
.hm-bar__menu,.hm-bar__bell{width:40px;height:40px;display:flex;align-items:center;justify-content:center;color:#0A2540;background:none;border:none;position:relative}
.hm-bar__badge{position:absolute;top:6px;right:6px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:#EF4444;color:#fff;font-size:9.5px;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid #F4F7FC}

/* Location + greeting */
.hm-loc{display:inline-flex;align-items:center;gap:5px;padding:0 18px;color:#1E63D8;font-weight:700;font-size:12.5px}
.hm-greet{padding:5px 18px 0}
.hm-greet__h{font-size:18px;font-weight:800;color:#0A2540;letter-spacing:-.2px}
.hm-greet__s{font-size:12.5px;color:#64748B;margin-top:2px}

/* 3 action cards — canh giữa, gọn đẹp */
.hm-acts{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;padding:16px 18px 0}
.hm-act{border-radius:18px;padding:16px 10px 14px;color:#fff;position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  box-shadow:0 12px 24px -12px rgba(2,30,64,.42);transition:transform .12s}
.hm-act:active{transform:translateY(1px) scale(.98)}
.hm-act::after{content:"";position:absolute;top:-34%;left:50%;transform:translateX(-50%);width:110px;height:110px;border-radius:50%;background:radial-gradient(rgba(255,255,255,.28),transparent 68%)}
.hm-act--blue{background:linear-gradient(160deg,#3B82F6,#1D4ED8 72%,#1E40AF)}
.hm-act--teal{background:linear-gradient(160deg,#22D3EE,#0E9BB4 72%,#0E7490)}
.hm-act--violet{background:linear-gradient(160deg,#A78BFA,#7C3AED 72%,#6D28D9)}
.hm-act__ico{width:48px;height:48px;border-radius:15px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;color:#fff;position:relative;backdrop-filter:blur(4px);box-shadow:0 6px 14px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.3)}
.hm-act__t{font-weight:800;font-size:13.5px;margin-top:11px;position:relative;letter-spacing:-.1px}
.hm-act__s{font-size:10px;color:rgba(255,255,255,.88);margin-top:4px;line-height:1.4;position:relative}

/* Promo banner (2.5:1) */
.hm-banner{margin:16px 18px 0;border-radius:16px;overflow:hidden;display:block;position:relative;aspect-ratio:2.5/1;
  background:linear-gradient(120deg,#0A2540,#1E63D8);box-shadow:0 12px 26px -12px rgba(2,30,64,.45)}
.hm-banner img.hm-banner__img{width:100%;height:100%;object-fit:cover;display:block}
.hm-banner__promo{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0 18px;color:#fff}
.hm-banner__promo b{font-size:15px;font-weight:800;letter-spacing:-.2px}
.hm-banner__promo span{font-size:11.5px;color:#C7DCF5;margin-top:4px;max-width:62%;line-height:1.4}
.hm-banner__promo i{margin-top:9px;font-style:normal;font-size:11px;font-weight:800;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.25);padding:5px 11px;border-radius:999px;align-self:flex-start}
.hm-banner__mascot{position:absolute;right:6px;bottom:-4px;width:96px;height:auto;filter:drop-shadow(0 8px 14px rgba(0,0,0,.3))}

/* AI banner */
.hm-ai{margin:18px 18px 0;border-radius:18px;padding:15px;background:linear-gradient(120deg,#E3EEFF,#EFF5FF);border:1px solid #DCEAFE;position:relative;overflow:hidden}
.hm-ai__t{font-size:14px;font-weight:800;color:#1E63D8;max-width:200px}
.hm-ai__s{font-size:11.5px;color:#5B6B82;margin:5px 0 11px;max-width:190px}
.hm-ai__btn{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,#2E6FF0,#0284C7);color:#fff;font-weight:700;font-size:12px;padding:9px 15px;border-radius:10px;box-shadow:0 6px 14px rgba(46,111,240,.3);transition:transform .12s}
.hm-ai__btn:active{transform:scale(.97)}
.hm-ai{min-height:120px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.hm-ai__btn{align-self:flex-start;width:auto}
.hm-ai__bot{position:absolute;right:2px;bottom:-4px;width:124px;height:auto;filter:drop-shadow(0 12px 18px rgba(46,111,240,.38))}

/* Section head */
.hm-sec{padding:22px 18px 0}
.hm-sec__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}
.hm-sec__t{font-size:15px;font-weight:800;color:#0A2540}
.hm-sec__a{font-size:12px;font-weight:700;color:#1E63D8;display:inline-flex;align-items:center;gap:3px}

/* Trip cards (horizontal scroll) — gutter đều, peek gọn */
.hm-trips{display:flex;gap:12px;overflow-x:auto;padding:2px 18px 6px;scroll-snap-type:x mandatory;scroll-padding-left:18px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.hm-trips::-webkit-scrollbar{display:none}
.hm-trips::after{content:"";flex:0 0 6px}
.hm-trip{flex:0 0 82%;scroll-snap-align:start;background:#fff;border-radius:18px;box-shadow:0 10px 24px rgba(15,23,42,.08);border:1px solid #EEF3F9;overflow:hidden}
.hm-trip__hd{display:flex;align-items:center;gap:10px;padding:13px 14px 0}
.hm-trip__av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#60A5FA,#2563EB);color:#fff;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0;box-shadow:0 4px 10px rgba(37,99,235,.3)}
.hm-trip__rate{position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);background:#16A34A;color:#fff;font-size:8.5px;font-weight:800;padding:1px 5px;border-radius:999px;border:1.5px solid #fff;white-space:nowrap}
.hm-trip__who b{display:block;font-size:13px;color:#0A2540;font-weight:800;line-height:1.2}
.hm-trip__who span{font-size:10.5px;color:#64748B;display:inline-flex;align-items:center;gap:4px}
.hm-trip__kyc{display:inline-flex;align-items:center;gap:2px;color:#0284C7;font-weight:700}
.hm-trip__body{padding:12px 14px 0}
.hm-trip__route{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:800;color:#0A2540}
.hm-trip__route svg{color:#1E63D8;flex-shrink:0}
.hm-trip__route b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42%}
.hm-trip__chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.hm-trip__chip{display:inline-flex;align-items:center;gap:5px;background:#F1F5FB;color:#52647A;font-size:10.5px;font-weight:600;padding:5px 9px;border-radius:8px}
.hm-trip__chip svg{color:#1E63D8}
.hm-trip__foot{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding:11px 14px;border-top:1px solid #F1F5F9}
.hm-trip__status{font-weight:700;color:#16A34A;font-size:12px;display:inline-flex;align-items:center;gap:5px}
.hm-trip__status::before{content:"";width:7px;height:7px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 3px rgba(34,197,94,.2)}
.hm-trip__btn{background:linear-gradient(135deg,#2E6FF0,#0284C7);color:#fff;font-weight:700;font-size:12px;padding:9px 16px;border-radius:10px;box-shadow:0 6px 12px rgba(46,111,240,.28);transition:transform .12s}
.hm-trip__btn:active{transform:scale(.96)}

/* Order card + timeline */
.hm-order{margin:0 18px;background:#fff;border-radius:16px;padding:15px;box-shadow:0 8px 20px rgba(15,23,42,.06)}
.hm-order__top{display:flex;gap:12px}
.hm-order__ic{width:46px;height:46px;border-radius:13px;background:#EAF1FE;color:#1E63D8;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hm-order__code{font-weight:800;font-size:14px;color:#0A2540;display:flex;align-items:center;gap:8px}
.hm-order__pill{font-size:9.5px;font-weight:700;background:#DBEAFE;color:#1D4ED8;padding:3px 9px;border-radius:999px}
.hm-order__route{font-size:12.5px;color:#334155;font-weight:600;margin-top:4px}
.hm-order__rcv{font-size:11px;color:#64748B;margin-top:2px}
.hm-tl{display:flex;margin-top:16px}
.hm-tl__step{flex:1;text-align:center;position:relative}
.hm-tl__dot{width:26px;height:26px;border-radius:50%;margin:0 auto;display:flex;align-items:center;justify-content:center;background:#E2E8F0;color:#94A3B8;position:relative;z-index:2}
.hm-tl__step.done .hm-tl__dot{background:#1E63D8;color:#fff}
.hm-tl__step.cur .hm-tl__dot{background:#1E63D8;color:#fff;box-shadow:0 0 0 4px rgba(30,99,216,.18)}
.hm-tl__step::before{content:"";position:absolute;top:13px;left:-50%;width:100%;height:2px;background:#E2E8F0;z-index:1}
.hm-tl__step:first-child::before{display:none}
.hm-tl__step.done::before,.hm-tl__step.cur::before{background:#1E63D8}
.hm-tl__l{font-size:10px;font-weight:700;color:#94A3B8;margin-top:6px}
.hm-tl__step.done .hm-tl__l,.hm-tl__step.cur .hm-tl__l{color:#1E63D8}

/* Wallet row */
.hm-wallet{margin:18px 18px 0;display:flex;gap:10px}
.hm-wallet__main{flex:1.6;background:#fff;border-radius:16px;padding:14px;display:flex;align-items:center;gap:11px;box-shadow:0 8px 20px rgba(15,23,42,.06)}
.hm-wallet__ic{width:42px;height:42px;border-radius:12px;background:#EAF1FE;color:#1E63D8;display:flex;align-items:center;justify-content:center}
.hm-wallet__l{font-size:10.5px;color:#64748B}.hm-wallet__v{font-weight:800;font-size:15px;color:#0A2540}
.hm-wallet__side{flex:1;display:flex;gap:8px}
.hm-wallet__b{flex:1;background:#fff;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:#1E63D8;font-size:10px;font-weight:700;box-shadow:0 8px 20px rgba(15,23,42,.06);padding:10px 4px;transition:transform .12s}
.hm-wallet__b:active{transform:scale(.96)}

.hm-empty{background:#fff;border-radius:16px;padding:28px 16px;text-align:center;color:#94A3B8;font-size:13px;margin:0 18px}

/* Guest: login pill + why + CTA */
.hm-login{font-size:13px;font-weight:800;color:#fff;background:linear-gradient(135deg,#2E6FF0,#0284C7);padding:9px 16px;border-radius:999px;box-shadow:0 6px 14px rgba(2,132,199,.3)}
.hm-why{margin:0 18px;display:grid;grid-template-columns:1fr 1fr;gap:11px}
.hm-why__i{background:#fff;border:1px solid #EEF3F9;border-radius:16px;padding:17px 13px;box-shadow:0 6px 16px rgba(15,23,42,.05);position:relative;overflow:hidden;text-align:center}
.hm-why__i::after{content:"";position:absolute;top:-20px;right:-20px;width:60px;height:60px;border-radius:50%;background:radial-gradient(rgba(46,111,240,.06),transparent 70%)}
.hm-why__ic{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin:0 auto 11px;box-shadow:0 6px 14px rgba(15,23,42,.08)}
.hm-why__i b{display:block;font-size:13.5px;color:#0A2540;font-weight:800;position:relative}
.hm-why__i span{font-size:11px;color:#64748B;display:block;margin-top:4px;line-height:1.45;position:relative}
.hm-cta{margin:16px 18px 0;background:linear-gradient(135deg,#0A2540,#1E63D8);border-radius:18px;padding:18px;display:flex;align-items:center;gap:12px;color:#fff;box-shadow:0 14px 30px -12px rgba(2,30,64,.5)}
.hm-cta b{display:block;font-size:15px}.hm-cta span{font-size:11.5px;color:#C7DCF5}
.hm-cta a{margin-left:auto;background:#fff;color:#0A2540;font-weight:800;font-size:13.5px;padding:11px 16px;border-radius:11px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}