:root{
  --nen:#f6f4ef;--nen2:#efece4;--the:#ffffff;--chu:#1f1d1a;--mo:#6b675e;--nhat:#9a958a;--vien:#e2ddd2;--vien2:#d4cebf;
  --nhan:#c4622d;--nhan2:#a9501f;--nhan-nen:#f7e7dc;--tim:#6b4fd8;--xanh:#24805a;--xanh-nen:#e2f2ea;--do:#b33a3a;--do-nen:#f8e3e3;
  --vang:#9a6b00;--vang-nen:#fbf0d6;--ma:#f1eee6;--ma-chu:#2c2a26;--bong:0 1px 2px rgba(0,0,0,.05),0 4px 16px rgba(0,0,0,.06);
  --r:12px;--sb:284px;--font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace
}
@media (prefers-color-scheme:dark){:root{
  --nen:#191816;--nen2:#211f1c;--the:#262421;--chu:#ece8df;--mo:#aaa498;--nhat:#7d786d;--vien:#34312c;--vien2:#45413a;
  --nhan:#e08852;--nhan2:#eb9d6c;--nhan-nen:#3a2a20;--tim:#a796f0;--xanh:#5fc398;--xanh-nen:#1c3329;--do:#ee8b8b;--do-nen:#3a2222;
  --vang:#e6b85a;--vang-nen:#3a3020;--ma:#1e1d1a;--ma-chu:#e6e1d6;--bong:0 1px 2px rgba(0,0,0,.4),0 6px 20px rgba(0,0,0,.35)
}}
*{box-sizing:border-box}
html,body,#app{height:100%}
body{margin:0;background:var(--nen);color:var(--chu);font:15px/1.6 var(--font);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--nhan2)}
.an{display:none!important}

/* ── buttons & fields ── */
.nut{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--vien2);background:var(--the);
  border-radius:9px;padding:8px 14px;cursor:pointer;font-weight:500;transition:background .15s,border-color .15s}
.nut:hover{background:var(--nen2)}
.nut:disabled{opacity:.55;cursor:not-allowed}
.nut.chinh{background:var(--nhan);border-color:var(--nhan);color:#fff}
.nut.chinh:hover{background:var(--nhan2)}
.nut.nho{padding:4px 10px;font-size:13px;border-radius:7px}
.nut.nguy{color:var(--do);border-color:var(--do)}
.nut.trong{border-color:transparent;background:transparent}
.nut.trong:hover{background:var(--nen2)}
label.o{display:block;margin:10px 0}
label.o>span{display:block;font-size:13px;color:var(--mo);margin-bottom:4px}
input.tr,select.tr,textarea.tr{width:100%;border:1px solid var(--vien2);background:var(--the);border-radius:9px;padding:9px 12px;outline:none}
input.tr:focus,select.tr:focus,textarea.tr:focus{border-color:var(--nhan);box-shadow:0 0 0 3px color-mix(in srgb,var(--nhan) 18%,transparent)}
.thong-bao{border-radius:9px;padding:9px 12px;margin:10px 0;font-size:14px}
.thong-bao.loi{background:var(--do-nen);color:var(--do)}
.thong-bao.tot{background:var(--xanh-nen);color:var(--xanh)}
.thong-bao.canh{background:var(--vang-nen);color:var(--vang)}

/* ── auth ── */
.dn{min-height:100%;display:grid;place-items:center;padding:24px 16px}
.dn-the{width:100%;max-width:400px;background:var(--the);border:1px solid var(--vien);border-radius:18px;padding:28px 26px;box-shadow:var(--bong)}
.dn-logo{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.dn-logo img{width:38px;height:38px}
.dn-logo b.dn-chu{display:block;width:118px;height:33px;font-size:0;color:transparent;background:url("/tinh/alliw-chu-sang.svg") left center/contain no-repeat}  /* 12/10 · the logo's own word as an image (alliw-chu*.svg), 34/78 of the logo */
@media (prefers-color-scheme:dark){.dn-logo b.dn-chu{background-image:url("/tinh/alliw-chu.svg")}}
.dn-logo b{font-size:22px;letter-spacing:.2px}
/* 13/10 · Admin «logo khung đăng nhập đúng chuẩn logo gốc», then «bỏ nền đen, cân chỉnh trực quan, vừa khung hơi to»:
   the original logo (mark + word, its gradients and glow) with no ground, cropped to what it draws so it sits centred;
   the original colours on a dark page, the same hues one step deeper on a light one (alliw-logo-goc-sang.svg) */
.dn-logo:has(.dn-logo-goc){justify-content:center;margin:2px 0 10px}
.dn-logo .dn-logo-goc{display:block;width:100%;max-width:340px}
.dn-logo .dn-logo-goc img{display:block;width:100%;height:auto;aspect-ratio:458/176}
.dn-logo:has(.dn-logo-goc)+.dn-phu{text-align:center}
.dn-phu{color:var(--mo);margin:0 0 16px;font-size:14px}
.tab{display:flex;background:var(--nen2);border-radius:10px;padding:3px;margin-bottom:8px}
.tab button{flex:1;border:0;background:transparent;padding:7px;border-radius:8px;cursor:pointer;color:var(--mo);font-weight:500}
.tab button.on{background:var(--the);color:var(--chu);box-shadow:var(--bong)}
.dn-the .nut.chinh{width:100%;margin-top:8px;padding:10px}
.dn-cuoi{margin-top:14px;font-size:12px;color:var(--nhat);text-align:center}
/* v9 · sign-up: the consent box (never pre-ticked) */
label.o-chon{display:flex;gap:10px;align-items:flex-start;margin:12px 0 4px;font-size:13px;line-height:1.5;color:var(--mo);cursor:pointer}
label.o-chon input{width:17px;height:17px;margin:2px 0 0;flex:none;accent-color:var(--nhan)}
.dn-the #pk{width:100%;margin-top:8px;padding:10px}   /* v11 · passkey sign-in */

/* ── shell ── */
.vo{display:grid;grid-template-columns:var(--sb) 1fr;grid-template-rows:100%;height:100%;overflow:hidden}
.man-che{display:none}
.ben{background:var(--nen2);border-right:1px solid var(--vien);display:flex;flex-direction:column;min-height:0}
.ben-dau{display:flex;align-items:center;gap:9px;padding:14px 14px 8px}
.ben-dau img{width:28px;height:28px}
.ben-dau b{font-size:17px}
.ben .nut.moi{margin:6px 12px;justify-content:flex-start}
.tim{margin:6px 12px}
.tim input{width:100%;border:1px solid var(--vien);background:var(--the);border-radius:8px;padding:6px 10px;font-size:14px;outline:none}
.ds{flex:1;overflow-y:auto;padding:4px 8px 8px;min-height:0}
.ds h4{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--nhat);margin:12px 8px 4px}
.ds a{display:block;padding:7px 10px;border-radius:8px;color:var(--chu);text-decoration:none;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds a:hover{background:var(--vien)}
.ds a.on{background:var(--the);box-shadow:var(--bong)}
.ds .rong{color:var(--nhat);font-size:13px;padding:10px}
.ben-cuoi{border-top:1px solid var(--vien);padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.hd-trang{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--mo)}
.cham{width:8px;height:8px;border-radius:50%;background:var(--nhat);flex:none}
.cham.ban{background:var(--vang);animation:nhip 1.4s infinite}
.cham.ranh{background:var(--xanh)}
@keyframes nhip{50%{opacity:.35}}
.toi{display:flex;align-items:center;gap:9px;padding:6px;border-radius:9px;cursor:pointer;position:relative}
.toi:hover{background:var(--vien)}
.anh{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--nhan),var(--tim));color:#fff;display:grid;place-items:center;font-weight:600;flex:none}
.toi-ten{flex:1;min-width:0}
.toi-ten b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.huy-hieu{display:inline-block;font-size:11px;padding:1px 7px;border-radius:99px;background:var(--nhan-nen);color:var(--nhan2);font-weight:600}
.menu{position:absolute;bottom:calc(100% + 6px);left:0;right:0;background:var(--the);border:1px solid var(--vien);border-radius:11px;box-shadow:var(--bong);padding:5px;z-index:20}
.menu a,.menu button{display:block;width:100%;text-align:left;border:0;background:transparent;padding:8px 10px;border-radius:7px;cursor:pointer;color:var(--chu);text-decoration:none;font-size:14px}
.menu a:hover,.menu button:hover{background:var(--nen2)}

.chinh-khu{display:flex;flex-direction:column;min-width:0;min-height:0;height:100%}
.dau{display:flex;align-items:center;gap:8px;padding:10px 16px;border-bottom:1px solid var(--vien);min-height:52px}
.dau h1{font-size:15px;font-weight:600;margin:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:text}
.dau input{flex:1;font-size:15px;font-weight:600;border:1px solid var(--vien2);border-radius:7px;padding:3px 8px;background:var(--the)}
.mo-ben{display:none}

/* ── chat ── */
.cuon{flex:1;overflow-y:auto;min-height:0}
.cot{max-width:800px;margin:0 auto;padding:22px 20px 30px}
.chao{text-align:center;padding:12vh 10px 20px}
.chao img{width:56px;height:56px}
.chao h2{font-size:26px;margin:12px 0 6px;font-weight:600}
.chao p{color:var(--mo);margin:0 0 22px}
.goi-y{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;text-align:left}
.goi-y button{border:1px solid var(--vien);background:var(--the);border-radius:12px;padding:12px 14px;cursor:pointer;text-align:left;color:var(--chu)}
.goi-y button:hover{border-color:var(--nhan)}
.goi-y small{display:block;color:var(--mo);font-size:12px;margin-top:2px}
.tin{margin:0 0 22px}
.tin.nguoi{display:flex;justify-content:flex-end}
.tin.nguoi .bong{background:var(--the);border:1px solid var(--vien);border-radius:16px 16px 4px 16px;padding:10px 14px;max-width:85%;white-space:pre-wrap;word-break:break-word}
.tin.tro .vai{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mo);margin-bottom:6px}
.tin.tro .vai img{width:22px;height:22px}
.noi-dung{word-break:break-word}
.noi-dung p{margin:0 0 12px}
.noi-dung h2,.noi-dung h3,.noi-dung h4,.noi-dung h5,.noi-dung h6{margin:18px 0 8px;line-height:1.3}
.noi-dung h2{font-size:20px}.noi-dung h3{font-size:17px}.noi-dung h4,.noi-dung h5,.noi-dung h6{font-size:15px}
.noi-dung ul,.noi-dung ol{margin:0 0 12px;padding-left:24px}
.noi-dung li{margin:3px 0}
.noi-dung blockquote{margin:0 0 12px;padding:4px 14px;border-left:3px solid var(--nhan);color:var(--mo);background:var(--nen2);border-radius:0 8px 8px 0}
.noi-dung code{font-family:var(--mono);font-size:.88em;background:var(--ma);color:var(--ma-chu);padding:1px 5px;border-radius:5px}
.noi-dung .khoi-ma{position:relative;margin:0 0 12px;background:var(--ma);border:1px solid var(--vien);border-radius:10px;overflow:hidden}
.khoi-ma .ma-dau{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--mo);padding:5px 10px;border-bottom:1px solid var(--vien)}
.khoi-ma pre{margin:0;padding:12px;overflow-x:auto;font:13px/1.5 var(--mono);color:var(--ma-chu)}
.khoi-ma pre code{background:none;padding:0;font-size:inherit}
.noi-dung table{border-collapse:collapse;margin:0 0 12px;display:block;overflow-x:auto}
.noi-dung th,.noi-dung td{border:1px solid var(--vien2);padding:6px 10px;text-align:left}
.noi-dung th{background:var(--nen2)}
.noi-dung hr{border:0;border-top:1px solid var(--vien);margin:16px 0}
.noi-dung .math{font-family:var(--mono);background:var(--nen2);padding:0 4px;border-radius:4px}
.chan-tin{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:12px;color:var(--nhat);margin-top:4px}
.nhan-tt{font-size:12px;font-weight:600;padding:1px 8px;border-radius:99px}
.nhan-tt.loi{background:var(--do-nen);color:var(--do)}
.nhan-tt.canh{background:var(--vang-nen);color:var(--vang)}
.tien-do{display:flex;align-items:center;gap:12px;border:1px solid var(--vien);background:var(--the);border-radius:12px;padding:10px 14px;margin:6px 0 12px;font-size:14px}
.vong-quay{width:18px;height:18px;border:2px solid var(--vien2);border-top-color:var(--nhan);border-radius:50%;animation:quay .9s linear infinite;flex:none}
@keyframes quay{to{transform:rotate(360deg)}}
.tien-do .td-chu{flex:1;min-width:0}
.tien-do .td-chu b{display:block;font-weight:600}
.tien-do .td-chu span{color:var(--mo);font-size:13px}
.con-tro::after{content:"▍";color:var(--nhan);animation:nhip 1s infinite;margin-left:1px}

.soan{padding:8px 16px calc(14px + env(safe-area-inset-bottom))}
.soan-khung{max-width:800px;margin:0 auto;border:1px solid var(--vien2);background:var(--the);border-radius:16px;box-shadow:var(--bong);padding:10px 10px 8px 14px}
.soan-khung:focus-within{border-color:var(--nhan)}
.soan textarea{width:100%;border:0;outline:none;resize:none;background:transparent;max-height:40vh;min-height:24px;line-height:1.5}
.soan-duoi{display:flex;align-items:center;gap:10px;margin-top:6px}
.soan-duoi .goi-nho{flex:1;font-size:12px;color:var(--nhat);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nut-gui{width:36px;height:36px;border-radius:10px;border:0;background:var(--nhan);color:#fff;cursor:pointer;display:grid;place-items:center;font-size:18px}
.nut-gui:disabled{background:var(--vien2);cursor:not-allowed}
.nut-gui.dung{background:var(--chu);color:var(--nen)}

/* ── account & admin ── */
.trang{max-width:980px;margin:0 auto;padding:22px 20px 60px}
.trang h2{font-size:22px;margin:0 0 4px}
.trang .phu{color:var(--mo);margin:0 0 18px}
.luoi{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:14px}
.the{background:var(--the);border:1px solid var(--vien);border-radius:var(--r);padding:16px 18px}
.the h3{margin:0 0 10px;font-size:16px}
.so-lon{font-size:26px;font-weight:650;letter-spacing:-.3px}
.so-nho{color:var(--mo);font-size:13px}
.thanh{height:8px;background:var(--nen2);border-radius:99px;overflow:hidden;margin:8px 0 4px}
.thanh i{display:block;height:100%;background:linear-gradient(90deg,var(--nhan),var(--tim));border-radius:99px}
.hang{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chip{border:1px solid var(--vien2);background:var(--the);border-radius:99px;padding:4px 12px;cursor:pointer;font-size:13px}
.chip.on{border-color:var(--nhan);color:var(--nhan2);background:var(--nhan-nen)}
.goi-the{border:1px solid var(--vien);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:6px}
.goi-the.hien{border-color:var(--nhan);box-shadow:0 0 0 2px var(--nhan-nen)}
.goi-the b{font-size:16px}
table.bang{width:100%;border-collapse:collapse;font-size:13px}
table.bang th,table.bang td{border-bottom:1px solid var(--vien);padding:7px 8px;text-align:left;vertical-align:top}
table.bang th{color:var(--mo);font-weight:600;white-space:nowrap}
.cuon-ngang{overflow-x:auto}
.am{color:var(--do)}.duong{color:var(--xanh)}
.ma-bi-mat{font-family:var(--mono);font-size:13px;background:var(--ma);padding:8px 10px;border-radius:8px;word-break:break-all;margin:6px 0}
.so-the{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:14px}
.so-the .the{padding:12px 14px}
.sua-hang td{background:var(--nen2)}
.sua-luoi{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}

/* ── sandbox checkout ── */
.tt-the{max-width:420px}
.tt-so{font-size:30px;font-weight:700;margin:6px 0 2px}

@media (max-width:820px){
  .vo{grid-template-columns:1fr}
  .ben{position:fixed;inset:0 auto 0 0;width:min(86vw,var(--sb));z-index:30;transform:translateX(-102%);transition:transform .2s;box-shadow:var(--bong)}
  .vo.mo .ben{transform:none}
  .mo-ben{display:inline-flex}
  .vo.mo .man-che{display:block;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:25}
  .cot{padding:16px 14px 24px}
  .trang{padding:16px 14px 50px}
}

/* 26/10 · iPhone: Safari zooms the whole page into a field whose text is under 16px (body is 15px here) — tapping e-mail,
   password or the 6-digit code blew the sign-in box up past the screen edges. On touch screens every field is 16px. */
@media (pointer: coarse) {
  input, select, textarea, .tim input, .dau input { font-size: 16px; }
}