/* App dựng tự động bởi InnoSME — bản dùng thử */
*,*::before,*::after{box-sizing:border-box}
:root{
  --mau:#D97706;
  --nen:#F4F6FA; --the:#FFFFFF; --chu:#16202E; --mo:#5B6B7F; --nhat:#8A99AC;
  --vien:#E3E9F0; --tot:#127A53; --cho:#B4690E; --loi:#C0392B;
  --goc:16px; --bong:0 6px 24px rgba(20,32,48,.08);
}
html,body{margin:0;padding:0;height:100%}
/* An thanh cuon: tren dien thoai he dieu hanh von da an, con khi app nam trong
   khung xem truoc o trang web thi thanh cuon xam noi len pha het cam giac app. */
html{scrollbar-width:none}
::-webkit-scrollbar{width:0;height:0}
body{
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--chu); background:var(--nen);
  -webkit-font-smoothing:antialiased;
}
.am-app{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;max-width:520px;margin:0 auto;background:var(--nen)}

.am-dau{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(14px + env(safe-area-inset-top)) 18px 14px;
  background:var(--mau);color:#fff;
}
.am-chao{margin:0;font-size:11px;letter-spacing:.09em;text-transform:uppercase;opacity:.85}
.am-dau h1{margin:2px 0 0;font-size:19px;line-height:1.2;font-weight:800}
.am-avatar{
  flex:none;width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.2);color:#fff;font-size:15px;font-weight:800;font-style:italic;
}

.am-than{flex:1;padding:16px 14px 96px;overflow-x:hidden}

.am-khoi{margin-bottom:18px}
.am-khoi-td{
  display:flex;align-items:baseline;gap:8px;margin:0 0 10px;padding:0 2px;
  font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--nhat);
}
.am-khoi-td span{margin-left:auto;font-weight:700;letter-spacing:0;text-transform:none;color:var(--mau)}

.am-the{background:var(--the);border:1px solid var(--vien);border-radius:var(--goc);overflow:hidden}
.am-hang{display:flex;align-items:center;gap:12px;padding:13px 15px;border-top:1px solid var(--vien)}
.am-hang:first-child{border-top:0}
.am-hang-chu{min-width:0;flex:1}
.am-hang-chu b{display:block;font-size:14.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.am-hang-chu small{display:block;margin-top:2px;font-size:12.5px;color:var(--mo);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.am-hang-phai{flex:none;text-align:right}
.am-gia{font-size:14px;font-weight:800;color:var(--chu);font-variant-numeric:tabular-nums}
.am-tt{
  display:inline-block;margin-top:3px;padding:2px 9px;border-radius:999px;
  font-size:10.5px;font-weight:800;letter-spacing:.02em;
  background:#EEF2F7;color:var(--mo);white-space:nowrap;
}
.am-tt.xanh{background:#E4F4EC;color:var(--tot)}
.am-tt.vang{background:#FBF0DE;color:var(--cho)}
.am-tt.do{background:#FBE9E7;color:var(--loi)}
.am-cham{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:17px;background:#EEF3FA}

.am-o-luoi{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.am-o{background:var(--the);border:1px solid var(--vien);border-radius:var(--goc);padding:15px}
.am-o b{display:block;font-size:22px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.am-o small{display:block;margin-top:3px;font-size:12px;color:var(--mo)}

.am-cn{list-style:none;margin:0;padding:0}
.am-cn li{display:flex;gap:10px;padding:11px 15px;border-top:1px solid var(--vien);font-size:13.5px;line-height:1.5}
.am-cn li:first-child{border-top:0}
.am-cn li::before{content:'✓';flex:none;font-weight:800;color:var(--tot)}
.am-cn small{display:block;color:var(--mo);font-size:12.5px;margin-top:2px}

.am-nut{
  display:block;width:100%;margin-top:12px;padding:13px 16px;border:0;border-radius:13px;cursor:pointer;
  background:var(--mau);color:#fff;font:inherit;font-size:14.5px;font-weight:800;
}
.am-nut.phu{background:var(--the);color:var(--chu);border:1px solid var(--vien)}
.am-nut:active{transform:translateY(1px)}

.am-buoc{list-style:none;margin:0;padding:0;counter-reset:b}
.am-buoc li{
  position:relative;counter-increment:b;padding:12px 15px 12px 46px;border-top:1px solid var(--vien);
  font-size:13.5px;line-height:1.6;
}
.am-buoc li:first-child{border-top:0}
.am-buoc li::before{
  content:counter(b);position:absolute;left:14px;top:12px;
  width:21px;height:21px;border-radius:50%;display:grid;place-items:center;
  background:var(--mau);color:#fff;font-size:11px;font-weight:800;
}

.am-tab{
  position:fixed;left:50%;transform:translateX(-50%);bottom:0;z-index:30;
  width:100%;max-width:520px;display:flex;
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96);border-top:1px solid var(--vien);
  backdrop-filter:saturate(180%) blur(10px);
}
.am-tab button{
  flex:1;min-width:0;border:0;background:none;cursor:pointer;padding:6px 2px;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  font:inherit;font-size:10.5px;font-weight:700;color:var(--nhat);
}
.am-tab button i{font-style:normal;font-size:19px;line-height:1}
.am-tab button span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.am-tab button[aria-current="true"]{color:var(--mau)}

.am-lop{position:fixed;inset:0;z-index:60;display:grid;place-items:end center;background:rgba(16,24,36,.55);padding:0}
/* display:grid ở trên đè mất [hidden] của trình duyệt, không có dòng này
   thì hộp thoại bật sẵn ngay khi vừa mở app. */
.am-lop[hidden],.am-nhac[hidden]{display:none}
.am-tam{
  position:relative;width:100%;max-width:520px;max-height:82vh;overflow:auto;
  background:var(--the);border-radius:20px 20px 0 0;padding:22px 18px calc(22px + env(safe-area-inset-bottom));
}
.am-dong{position:absolute;right:12px;top:8px;border:0;background:none;font-size:26px;line-height:1;color:var(--nhat);cursor:pointer}
.am-tam h2{margin:0 0 4px;font-size:18px}
.am-tam p{margin:0 0 14px;font-size:13.5px;color:var(--mo);line-height:1.6}
.am-truong{display:block;margin-bottom:12px}
.am-truong span{display:block;margin-bottom:5px;font-size:12.5px;font-weight:700}
.am-truong input,.am-truong select{
  width:100%;padding:12px 13px;font:inherit;font-size:14.5px;
  border:1px solid var(--vien);border-radius:11px;background:var(--nen);color:var(--chu);
}
.am-truong input:focus,.am-truong select:focus{outline:2px solid var(--mau);outline-offset:1px}

.am-nhac{
  position:fixed;left:50%;transform:translateX(-50%);bottom:84px;z-index:70;
  padding:11px 18px;border-radius:999px;background:#16202E;color:#fff;
  font-size:13.5px;font-weight:600;box-shadow:var(--bong);
}

.am-trong{padding:26px 16px;text-align:center;color:var(--nhat);font-size:13.5px}
.am-ghi{
  margin:16px 2px 0;padding:12px 14px;border:1px dashed var(--vien);border-radius:12px;
  font-size:12px;line-height:1.6;color:var(--nhat);background:var(--the);
}