/* Phần tử giao diện lấy từ thư viện Lucian UX/UI Prompt (MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/),
   chuyển sang trang khách của Video tự động: giữ hình, chuyển động; đổi màu theo bộ màu cam của app, đổi chữ sang tiếng Việt, gắn dữ liệu thật.
   Mỗi khối dưới đây ghi số phần tử gốc. */

/* ---------- bảng màu: trỏ --ux-* sang biến của app (app chỉ có nền tối) ---------- */
:root{
  --ux-page:var(--bg);--ux-surface:var(--panel);--ux-surface-2:var(--card);--ux-surface-3:var(--card2);
  --ux-ink:var(--txt);--ux-ink-2:var(--mut);--ux-ink-3:var(--dim);
  --ux-line:rgba(255,255,255,.08);--ux-line-2:rgba(255,255,255,.16);
  --ux-accent:var(--o);--ux-accent-2:var(--o2);--ux-accent-soft:var(--osoft);--ux-accent-ink:#1B0F05;
  --ux-mint:var(--ok);--ux-warn:var(--warn);--ux-danger:var(--bad);
  --ux-glass:rgba(255,255,255,.06);--ux-glass-line:rgba(255,255,255,.16);
  --ux-shadow:rgba(0,0,0,.45);--ux-shadow-strong:rgba(0,0,0,.72);
  --ux-grad:linear-gradient(120deg,#F97316,#FB923C 50%,#FBBF24);
  --ux-ease:cubic-bezier(.2,.8,.2,1);--ux-spring:cubic-bezier(.34,1.45,.64,1);
}
.ux,.ux *,.ux *::before,.ux *::after{box-sizing:border-box}
.ux{font-family:inherit;color:var(--ux-ink);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overflow-wrap:break-word}
:where(.ux) :is(button,input,textarea,select){font:inherit;color:inherit}
:where(.ux) button{cursor:pointer}
.ux :focus-visible{outline:2px solid var(--ux-accent);outline-offset:3px}
.ux [hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){.ux,.ux *,.ux *::before,.ux *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}

/* ---------- khung trang tài khoản ---------- */
.lx-shell{display:grid;grid-template-columns:auto minmax(0,1fr);min-height:100vh}
.lx-main{padding:22px 34px 96px;max-width:1240px;width:100%;margin:0 auto}
.lx-top{display:flex;align-items:center;gap:14px;margin-bottom:22px;min-height:52px}
.lx-top h1{font-size:28px;font-weight:800;letter-spacing:-.035em}
.lx-top .lx-sub{font-size:13.5px;color:var(--mut);margin-top:2px}
.lx-top .lx-tools{margin-left:auto;display:flex;align-items:center;gap:10px}
.lx-card{background:var(--ux-surface);border-radius:26px;box-shadow:0 0 0 1px var(--ux-line),0 30px 60px -40px var(--ux-shadow-strong);padding:22px}
.lx-card h2{font-size:18px;font-weight:800;letter-spacing:-.025em}
.lx-card .lx-hint{font-size:13px;color:var(--ux-ink-3);margin:4px 0 0}
.lx-grid{display:grid;gap:16px}
.lx-g2{grid-template-columns:repeat(2,minmax(0,1fr))}.lx-g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.lx-g-hero{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.lx-sec+.lx-sec{margin-top:16px}
.lx-eyebrow{font-size:12px;font-weight:750;color:var(--ux-ink-3);letter-spacing:.02em}
.lx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px;border:0;border-radius:14px;background:var(--ux-surface-2);box-shadow:inset 0 0 0 1px var(--ux-line-2);color:var(--ux-ink);font-weight:750;font-size:14px;text-decoration:none;white-space:nowrap;cursor:pointer;transition:transform .3s var(--ux-spring),background-color .2s,box-shadow .2s}
.lx-btn:hover{background:var(--ux-surface-3)}
.lx-btn:active{transform:scale(.96)}
.lx-btn.pri{background:var(--ux-grad);box-shadow:0 14px 26px -14px rgba(0,0,0,.55);color:var(--ux-accent-ink)}
.lx-btn.pri:hover{filter:brightness(1.06)}
.lx-btn.sm{height:34px;padding:0 12px;border-radius:11px;font-size:13px}
.lx-btn.bad{color:var(--bad);box-shadow:inset 0 0 0 1px rgba(248,113,113,.4)}
.lx-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.lx-empty{padding:34px 16px;text-align:center;color:var(--ux-ink-3);font-size:14px}
.lx-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lx-row.between{justify-content:space-between}
.lx-pill{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:999px;background:var(--ux-surface-2);color:var(--ux-ink-2);font-size:11.5px;font-weight:800;white-space:nowrap}
.lx-pill.ok{background:var(--oksoft);color:var(--ok)}.lx-pill.wait{background:var(--warnsoft);color:var(--warn)}.lx-pill.err{background:var(--badsoft);color:var(--bad)}.lx-pill.or{background:var(--osoft);color:var(--o2)}
.lx-field{display:flex;flex-direction:column;gap:6px}
.lx-field label{font-size:12.5px;font-weight:700;color:var(--ux-ink-3)}
.lx-input{height:46px;padding:0 14px;border:0;border-radius:14px;background:var(--ux-surface-2);box-shadow:inset 0 0 0 1.5px var(--ux-line);color:var(--ux-ink);outline:none;width:100%;transition:box-shadow .2s}
textarea.lx-input{height:auto;min-height:92px;padding:12px 14px;resize:vertical}
.lx-input:focus{box-shadow:inset 0 0 0 1.5px var(--ux-accent)}
section[data-s]{animation:lx-in .45s var(--ux-ease)}
@keyframes lx-in{from{opacity:0;transform:translateY(10px)}}
@media(max-width:1100px){.lx-g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:860px){.lx-g2,.lx-g3,.lx-g-hero{grid-template-columns:minmax(0,1fr)}}

/* #040 Expanding side rail — thanh bên co giãn của trang tài khoản */
.u040{--rw:76px;position:sticky;top:0;height:100vh;z-index:20;display:flex;flex-direction:column;width:calc(var(--rw) + 20px);padding:12px 10px;transition:width .6s var(--ux-spring)}
.u040.is-wide{--rw:216px}
.u040-rail{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;width:var(--rw);padding:12px 10px;border-radius:24px;background:#120F0D;box-shadow:0 0 0 1px var(--ux-line);color:var(--ux-ink);overflow:hidden;transition:width .6s var(--ux-spring)}
.u040-top{display:flex;align-items:center;gap:10px;height:44px;margin-bottom:14px;flex:none;text-decoration:none;color:inherit}
.u040-logo{width:36px;height:36px;flex:none;margin-left:10px;border-radius:12px;background:var(--ux-grad);display:grid;place-items:center;font-weight:900;color:var(--ux-accent-ink)}
.u040-name{font-size:15.5px;font-weight:780;letter-spacing:-.03em;white-space:nowrap;opacity:0;transition:opacity .25s}
.u040.is-wide .u040-name{opacity:1;transition:opacity .3s .15s}
.u040-tog{position:absolute;right:-1px;top:16px;width:30px;height:36px;border:0;padding:0;border-radius:10px 0 0 10px;background:color-mix(in srgb,var(--ux-ink) 10%,transparent);color:inherit;display:grid;place-items:center;opacity:0;transition:opacity .2s}
.u040-rail:hover .u040-tog,.u040-tog:focus-visible,.u040.is-wide .u040-tog{opacity:1}
@media (hover:none){.u040-tog{opacity:1}}
.u040-tog:focus-visible{outline:2px solid var(--ux-accent);outline-offset:-2px}
.u040-tog svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--ux-spring)}
.u040.is-wide .u040-tog svg{transform:rotate(180deg)}
.u040-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;margin:0 -10px;padding:0 10px}
.u040-scroll::-webkit-scrollbar{display:none}
.u040-nav{position:relative;margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px}
.u040-hl{position:absolute;left:0;right:0;top:0;height:48px;border-radius:15px;background:color-mix(in srgb,var(--ux-accent) 16%,transparent);transform:translateY(var(--y,0));transition:transform .5s var(--ux-spring);pointer-events:none}
.u040-hl::before{content:"";position:absolute;left:-10px;top:12px;bottom:12px;width:4px;border-radius:0 4px 4px 0;background:var(--ux-grad)}
.u040-sep{height:1px;margin:8px 8px;background:var(--ux-line)}
.u040-it{position:relative;display:flex;align-items:center;gap:14px;width:100%;height:48px;padding:0 0 0 16px;border:0;border-radius:15px;background:none;color:inherit;opacity:.62;text-align:left;text-decoration:none;transition:opacity .25s}
.u040-it:hover,.u040-it[aria-current="page"]{opacity:1}
.u040-it[aria-current="page"]{color:var(--o2)}
.u040-it:focus-visible{outline:2px solid var(--ux-accent);outline-offset:-2px}
.u040-it svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.u040-it span{font-size:14.5px;font-weight:650;white-space:nowrap;opacity:0;transform:translateX(-8px);transition:opacity .2s,transform .35s var(--ux-ease)}
.u040.is-wide .u040-it span{opacity:1;transform:none;transition:opacity .3s var(--ux-ease),transform .5s var(--ux-spring);transition-delay:calc(.12s + var(--i) * 35ms)}
.u040-bd{position:absolute;left:34px;top:9px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#DC2F45;color:#fff;font-size:10.5px;font-weight:800;display:grid;place-items:center;font-style:normal;box-shadow:0 0 0 2.5px #120F0D;transition:left .5s var(--ux-spring)}
.u040.is-wide .u040-bd{left:182px}
.u040-bd:empty{display:none}

/* #037 Account switcher menu — thẻ tài khoản cuối thanh bên, mở menu Bảo mật, Dữ liệu, Đăng xuất */
.u037{position:relative;flex:none;margin-top:10px}
.u037-menu{position:absolute;left:0;bottom:76px;width:268px;padding:8px;border-radius:22px;background:var(--ux-surface);box-shadow:0 0 0 1px var(--ux-line-2),0 34px 64px -30px var(--ux-shadow-strong);z-index:30;
  transform-origin:30px 100%;opacity:0;transform:translateY(10px) scale(.9);visibility:hidden;transition:opacity .2s var(--ux-ease),transform .45s var(--ux-spring),visibility 0s .45s}
.u037.is-open .u037-menu{opacity:1;transform:none;visibility:visible;transition:opacity .2s var(--ux-ease),transform .5s var(--ux-spring)}
.u037-sec{margin:6px 10px 6px;font-size:11.5px;font-weight:750;letter-spacing:.06em;color:var(--ux-ink-3);text-transform:uppercase}
.u037-list{position:relative;margin:0;padding:0;list-style:none}
.u037-hl{position:absolute;left:0;right:0;top:0;height:var(--h,52px);border-radius:14px;background:var(--ux-surface-2);transform:translateY(var(--y,0));opacity:0;transition:transform .3s var(--ux-spring),height .3s var(--ux-spring),opacity .2s;pointer-events:none}
.u037-list.is-hl .u037-hl{opacity:1}
.u037-it{position:relative;display:flex;align-items:center;gap:12px;width:100%;height:48px;padding:0 10px;border:0;border-radius:14px;background:none;color:var(--ux-ink);font-size:14.5px;font-weight:630;text-align:left;text-decoration:none;
  opacity:0;transform:translateY(8px);transition:opacity .25s var(--ux-ease),transform .45s var(--ux-spring)}
.u037.is-open .u037-it{opacity:1;transform:none;transition-delay:calc(var(--i) * 32ms)}
.u037-it:focus-visible{outline:2px solid var(--ux-accent);outline-offset:-2px}
.u037-ws{width:32px;height:32px;flex:none;border-radius:10px;display:grid;place-items:center;font-size:13px;font-weight:800;color:var(--ux-accent-ink);background:var(--c,var(--ux-grad))}
.u037-it small{display:block;font-size:12px;font-weight:500;color:var(--ux-ink-3)}
.u037-ico{width:32px;height:32px;flex:none;display:grid;place-items:center;color:var(--ux-ink-2)}
.u037-ico svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.u037-it.out{color:var(--ux-danger)}
.u037-it.out .u037-ico{color:var(--ux-danger)}
.u037-sep{height:1px;margin:6px 10px;background:var(--ux-line)}
.u037-chip{display:flex;align-items:center;gap:12px;width:var(--rw);height:64px;padding:0 0 0 11px;border:0;border-radius:20px;background:#120F0D;color:var(--ux-ink);text-align:left;overflow:hidden;
  box-shadow:0 0 0 1px var(--ux-line),0 18px 36px -24px var(--ux-shadow-strong);transition:transform .4s var(--ux-spring),box-shadow .3s,width .6s var(--ux-spring)}
.u037-chip:hover{box-shadow:0 0 0 1px var(--ux-line-2),0 18px 36px -24px var(--ux-shadow-strong)}
.u037-chip:active{transform:scale(.98)}
.u037-chip:focus-visible{outline:2px solid var(--ux-accent);outline-offset:3px}
.u037-chip .u037-ws{width:42px;height:42px;border-radius:13px;font-size:16px}
.u037-chip .u037-who{min-width:0;opacity:0;transition:opacity .25s}
.u040.is-wide .u037-chip .u037-who{opacity:1;transition-delay:.25s}
.u037-chip b{display:block;font-size:14px;font-weight:720;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u037-chip small{display:block;margin-top:1px;font-size:12px;color:var(--ux-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u037-car{margin-left:auto;margin-right:12px;width:18px;height:18px;flex:none;fill:none;stroke:var(--ux-ink-3);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .45s var(--ux-spring)}
.u037.is-open .u037-car{transform:rotate(180deg)}

/* #041 Notched bottom tab bar — thanh dưới trên điện thoại */
.u041{--x:34px;position:fixed;left:10px;right:10px;bottom:10px;z-index:40;height:84px;display:none}
.u041-bar{position:absolute;inset:0;border-radius:28px;background:#171310;
  -webkit-mask:radial-gradient(circle 42px at var(--x) -4px,transparent 96%,#000 100%);mask:radial-gradient(circle 42px at var(--x) -4px,transparent 96%,#000 100%);
  box-shadow:0 0 0 1px var(--ux-line)}
.u041-shadow{position:absolute;inset:0;border-radius:28px;box-shadow:0 24px 40px -18px var(--ux-shadow-strong);pointer-events:none}
.u041-bub{position:absolute;left:var(--x);top:-35px;width:62px;height:62px;margin-left:-31px;border-radius:50%;background:var(--ux-grad);box-shadow:0 14px 26px -12px rgba(0,0,0,.55)}
.u041-tabs{position:absolute;inset:0;display:flex;margin:0;padding:0 8px;list-style:none}
.u041-tabs>li{flex:1;display:flex}
.u041-tab{position:relative;flex:1;height:100%;border:0;padding:0;background:none;color:var(--ux-ink-3)}
.u041-tab:hover .u041-ic{color:var(--ux-ink)}
.u041-tab:focus-visible{outline:2px solid var(--ux-accent);outline-offset:-6px;border-radius:18px}
.u041-ic{position:absolute;left:50%;top:22px;width:26px;height:26px;margin-left:-13px;transition:transform .55s var(--ux-spring),color .3s}
.u041-ic svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.u041-lab{position:absolute;left:0;right:0;bottom:12px;font-size:11.5px;font-weight:700;color:var(--ux-ink);opacity:0;transform:translateY(6px);transition:opacity .3s,transform .45s var(--ux-spring);white-space:nowrap}
.u041-tab[aria-selected="true"] .u041-ic{transform:translateY(-39px);color:var(--ux-accent-ink)}
.u041-tab[aria-selected="true"] .u041-ic svg{stroke-width:2.2}
.u041-tab[aria-selected="true"] .u041-lab{opacity:1;transform:none}
.u041-bd{position:absolute;left:calc(50% + 6px);top:16px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#DC2F45;color:#fff;font-size:10.5px;font-weight:800;line-height:18px;font-style:normal;box-shadow:0 0 0 2.5px #171310;transition:transform .45s var(--ux-spring),opacity .3s}
.u041-bd:empty{display:none}
.u041-tab[aria-selected="true"] .u041-bd{transform:scale(0);opacity:0}
.lx-more{position:fixed;left:10px;right:10px;bottom:104px;z-index:39;padding:8px;border-radius:24px;background:var(--ux-surface);box-shadow:0 0 0 1px var(--ux-line-2),0 30px 60px -20px #000;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;
  transform-origin:90% 100%;opacity:0;transform:translateY(10px) scale(.92);visibility:hidden;transition:opacity .2s,transform .45s var(--ux-spring),visibility 0s .45s}
.lx-more.is-open{opacity:1;transform:none;visibility:visible;transition:opacity .2s,transform .5s var(--ux-spring)}
body:has(.lx-more.is-open) .u215{opacity:0;pointer-events:none}
.lx-more a,.lx-more button{display:flex;align-items:center;gap:10px;height:48px;padding:0 12px;border:0;border-radius:14px;background:none;color:var(--ux-ink);font-size:14px;font-weight:650;text-decoration:none;text-align:left}
.lx-more a:hover,.lx-more button:hover{background:var(--ux-surface-2)}
.lx-more svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--ux-ink-2);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:760px){
  .lx-shell{grid-template-columns:minmax(0,1fr)}
  .u040{display:none}
  .u041{display:block}
  .lx-main{padding:16px 16px 132px}
  .lx-top h1{font-size:23px}
}

/* #074 Notification bell dropdown — chuông thông báo trên đầu trang */
.u074{position:relative}
.u074-bell{position:relative;width:46px;height:46px;border:0;padding:0;border-radius:50%;display:grid;place-items:center;background:var(--ux-surface);color:var(--ux-ink);box-shadow:0 0 0 1px var(--ux-line),0 10px 20px -14px var(--ux-shadow-strong);transition:transform .3s var(--ux-spring)}
.u074-bell:active{transform:scale(.9)}
.u074-bell:focus-visible{outline:2px solid var(--ux-accent);outline-offset:3px}
.u074-bell svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transform-origin:50% 15%}
.u074-bell.ring svg{animation:u074-ring .9s var(--ux-ease)}
@keyframes u074-ring{10%{transform:rotate(18deg)}25%{transform:rotate(-16deg)}40%{transform:rotate(12deg)}55%{transform:rotate(-8deg)}70%{transform:rotate(4deg)}}
.u074-badge{position:absolute;right:2px;top:2px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:#DC2F45;color:#fff;font-size:11px;font-weight:850;line-height:20px;text-align:center;box-shadow:0 0 0 2.5px var(--ux-surface);font-variant-numeric:tabular-nums;transition:transform .4s var(--ux-spring)}
.u074-badge.zero{transform:scale(0)}
.u074-pan{position:absolute;right:0;top:58px;z-index:35;width:min(380px,calc(100vw - 32px));max-height:min(520px,calc(100vh - 120px));display:flex;flex-direction:column;border-radius:24px;background:var(--ux-surface);box-shadow:0 0 0 1px var(--ux-line-2),0 30px 50px -20px #000;transform-origin:calc(100% - 23px) -10px;transition:transform .45s var(--ux-spring),opacity .25s}
.u074-pan::before{content:"";position:absolute;right:17px;top:-6px;width:14px;height:14px;border-radius:3px;background:var(--ux-surface);transform:rotate(45deg);box-shadow:-1px -1px 0 0 var(--ux-line-2)}
.u074.is-closed .u074-pan{transform:scale(.4);opacity:0;pointer-events:none;transition:transform .3s var(--ux-ease),opacity .2s}
.u074-ph{display:flex;align-items:center;gap:6px;padding:14px 14px 10px}
.u074-tab{height:32px;padding:0 12px;border:0;border-radius:999px;background:none;font-size:13px;font-weight:750;color:var(--ux-ink-3);transition:background-color .25s,color .25s}
.u074-tab[aria-selected="true"]{background:var(--ux-ink);color:var(--ux-page)}
.u074-tab:focus-visible,.u074-all:focus-visible{outline:2px solid var(--ux-accent);outline-offset:2px}
.u074-all{margin-left:auto;border:0;padding:4px 6px;background:none;font-size:12.5px;font-weight:750;color:var(--ux-accent)}
.u074-all:disabled{color:var(--ux-ink-3);cursor:default}
.u074-list{position:relative;flex:1;margin:0;padding:0 8px 10px;list-style:none;overflow-y:auto}
.u074-it{display:grid;grid-template-rows:1fr;transition:grid-template-rows .45s var(--ux-ease)}
.u074-it.new{grid-template-rows:0fr}
.u074-it.hide{display:none}
.u074-it>div{min-height:0;overflow:hidden}
.u074-row{position:relative;display:flex;gap:12px;width:100%;padding:11px 26px 11px 10px;border:0;border-radius:14px;background:none;text-align:left;transition:background-color .2s,transform .5s var(--ux-spring),opacity .3s}
.u074-row:hover{background:var(--ux-surface-2)}
.u074-it.new .u074-row{transform:translateY(-30px);opacity:0}
.u074-av{position:relative;width:38px;height:38px;flex:none;border-radius:50%;background:var(--g,var(--ux-grad));display:grid;place-items:center;font-size:16px}
.u074-tx{flex:1;min-width:0;font-size:13px;line-height:1.45;color:var(--ux-ink-2)}
.u074-tx b{display:block;color:var(--ux-ink);font-weight:780}
.u074-tx small{display:block;margin-top:2px;font-size:11.5px;font-weight:650;color:var(--ux-ink-3)}
.u074-dot{position:absolute;right:10px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:var(--ux-accent);transition:transform .35s var(--ux-spring),opacity .25s}
.u074-row.read .u074-dot{transform:scale(0);opacity:0}
.u074-row.read .u074-tx{color:var(--ux-ink-3)}
.u074-empty{padding:30px 10px;text-align:center;font-size:13px;color:var(--ux-ink-3)}

/* #073 Rolling announcement banner — dải tin chạy: khuyến mãi theo giờ, bảo trì, có gì mới, bản thử */
.u073{border-radius:20px;overflow:hidden;margin-bottom:18px;box-shadow:0 20px 40px -30px rgba(0,0,0,.55)}
.u073-ban{display:grid;grid-template-rows:1fr;transition:grid-template-rows .5s var(--ux-ease)}
.u073.is-closed .u073-ban{grid-template-rows:0fr}
.u073.is-closed{box-shadow:none;margin-bottom:0}
.u073-ban>div{min-height:0;overflow:hidden}
.u073-bar{position:relative;display:flex;align-items:center;gap:8px;height:56px;padding:0 6px 0 14px;background:linear-gradient(100deg,#9A3412,#EA580C 40%,#F59E0B);color:#fff;overflow:hidden}
.u073-bar::after{content:"";position:absolute;top:0;bottom:0;width:80px;left:-100px;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);animation:u073-shine 4.5s ease-in-out infinite;pointer-events:none}
@keyframes u073-shine{0%,60%{transform:translateX(0)}100%{transform:translateX(1400px)}}
.u073-tag{height:22px;padding:0 7px;border-radius:7px;flex:none;display:inline-flex;align-items:center;background:rgba(255,255,255,.22);font-size:10.5px;font-weight:850;letter-spacing:.06em}
.u073-msgs{position:relative;flex:1;height:100%;overflow:hidden}
.u073-m{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;transform:translateY(100%);opacity:0;transition:transform .55s var(--ux-ease),opacity .4s}
.u073-m.on{transform:none;opacity:1}
.u073-m.up{transform:translateY(-100%);opacity:0}
.u073-m b{font-size:14px;font-weight:800;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u073-m span{font-size:12px;font-weight:600;opacity:.88;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u073-segs{display:flex;gap:3px;flex:none}
.u073-segs i{width:12px;height:3px;border-radius:2px;background:rgba(255,255,255,.3);overflow:hidden}
.u073-segs i::after{content:"";display:block;height:100%;background:#fff;transform-origin:0 50%;transform:scaleX(var(--f,0))}
.u073-b{width:30px;height:30px;flex:none;border:0;padding:0;border-radius:9px;display:grid;place-items:center;background:none;color:#fff;transition:background-color .2s,transform .3s var(--ux-spring)}
.u073-b:hover{background:rgba(255,255,255,.18)}
.u073-b:active{transform:scale(.88)}
.u073-b:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.u073-b svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.u073-act{height:30px;padding:0 10px;border:0;border-radius:9px;background:rgba(255,255,255,.22);color:#fff;font-size:12px;font-weight:800;text-decoration:none;display:inline-flex;align-items:center;flex:none}

/* #070 Stacking toasts — thông báo nổi xếp chồng (thay toast() của ui.js) */
.u070{position:fixed;right:16px;bottom:16px;z-index:60;width:min(380px,calc(100vw - 32px));height:0}
.u070-zone{position:absolute;left:0;right:0;bottom:0;outline:none}
.u070-t{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:12px;min-height:64px;padding:12px 12px 12px 14px;border-radius:20px;background:var(--ux-surface-3);box-shadow:0 0 0 1px var(--ux-line-2),0 16px 30px -12px #000;transform-origin:50% 100%;transform:translate(var(--dx,0px),var(--y,0px)) scale(var(--s,1));opacity:var(--o,1);transition:transform .5s var(--ux-spring),opacity .35s;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.u070-t.drag{transition:none}
.u070-t.enter{transform:translateY(90px) scale(.9);opacity:0}
.u070-t.leave{opacity:0;pointer-events:none}
.u070-t.leave.side{transform:translate(calc(var(--dir,1) * 420px),var(--y,0px)) rotate(calc(var(--dir,1) * 8deg))}
.u070-t>*{transition:opacity .25s}
.u070-t.back>*{opacity:0}
.u070-ic{width:36px;height:36px;flex:none;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 15%,transparent);color:var(--c)}
.u070-ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.u070-tx{flex:1;min-width:0;font-size:13.5px;font-weight:650;line-height:1.4}
.u070-x{width:30px;height:30px;flex:none;border:0;padding:0;border-radius:50%;display:grid;place-items:center;background:none;color:var(--ux-ink-3)}
.u070-x:hover{background:var(--ux-surface-2);color:var(--ux-ink)}
.u070-x svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.u070-x:focus-visible{outline:2px solid var(--ux-accent);outline-offset:1px}
.u070-bar{position:absolute;left:16px;right:16px;bottom:0;height:2px;border-radius:2px;background:var(--c);opacity:.5;transform-origin:0 50%;transform:scaleX(var(--left,1))}
@media(max-width:760px){.u070{bottom:108px}}

/* #215 Support chat from a launcher bubble — nút chat hỗ trợ góc phải dưới */
.u215{position:fixed;right:18px;bottom:18px;z-index:45}
.u215-ln{position:relative;z-index:3;width:56px;height:56px;border:0;border-radius:50%;background:var(--ux-grad);color:var(--ux-accent-ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 14px 28px -10px rgba(0,0,0,.55);transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.u215-ln svg{position:absolute;width:24px;height:24px;transition:transform .35s cubic-bezier(.3,1.5,.5,1),opacity .2s}
.u215-ln .x{transform:rotate(-90deg) scale(.5);opacity:0}
.u215.is-open .u215-ln .c{transform:rotate(90deg) scale(.5);opacity:0}
.u215.is-open .u215-ln .x{transform:none;opacity:1}
.u215-ln:active{transform:scale(.92)}
.u215-wg{position:absolute;right:0;bottom:70px;z-index:2;width:min(360px,calc(100vw - 36px));height:min(520px,calc(100vh - 120px));display:flex;flex-direction:column;border-radius:22px;background:var(--ux-surface);box-shadow:0 0 0 1px var(--ux-line-2),0 30px 50px -20px #000;overflow:hidden;transform-origin:calc(100% - 28px) calc(100% + 42px);transform:scale(.1);opacity:0;pointer-events:none;transition:transform .45s cubic-bezier(.3,1.15,.4,1),opacity .25s}
.u215.is-open .u215-wg{transform:none;opacity:1;pointer-events:auto}
.u215-wh{padding:16px 16px 14px;background:linear-gradient(120deg,#C2410C,#F97316 55%,#F59E0B);color:#fff}
.u215-fs{display:flex}
.u215-fs i{width:28px;height:28px;margin-right:-7px;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.9);display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:850;color:#1B0F05}
.u215-wh b{display:block;margin-top:10px;font-size:16px;font-weight:900}
.u215-wh small{display:flex;align-items:center;gap:5px;margin-top:2px;font-size:11.5px;font-weight:700;opacity:.92}
.u215-wh small::before{content:"";width:6px;height:6px;border-radius:50%;background:#4ADE80}
.u215-ms{flex:1;overflow-y:auto;scrollbar-width:thin;padding:12px 12px 4px;display:flex;flex-direction:column;gap:7px}
.u215-b{max-width:84%;padding:9px 12px;border-radius:14px;font-size:13px;line-height:1.5;font-weight:550;white-space:pre-wrap;animation:u215-in .35s cubic-bezier(.3,1.4,.5,1) backwards}
@keyframes u215-in{from{opacity:0;transform:translateY(8px) scale(.96)}}
.u215-b.bt{align-self:flex-start;background:var(--ux-surface-2);border-bottom-left-radius:5px}
.u215-b.me{align-self:flex-end;background:var(--ux-accent);color:var(--ux-accent-ink);border-bottom-right-radius:5px}
.u215-ty{align-self:flex-start;display:flex;gap:3px;padding:10px 12px;border-radius:14px;border-bottom-left-radius:5px;background:var(--ux-surface-2)}
.u215-ty i{width:6px;height:6px;border-radius:50%;background:var(--ux-ink-3);animation:u215-dt 1s ease-in-out infinite}
.u215-ty i:nth-child(2){animation-delay:.15s}.u215-ty i:nth-child(3){animation-delay:.3s}
@keyframes u215-dt{30%{transform:translateY(-4px);opacity:.6}}
.u215-ar{display:flex;align-items:center;gap:8px;margin-top:6px;padding:7px;border-radius:10px;background:var(--ux-surface);box-shadow:inset 0 0 0 1px var(--ux-line);text-decoration:none;color:inherit}
.u215-ar i{flex:none;width:28px;height:28px;border-radius:7px;background:var(--ux-grad)}
.u215-ar b{display:block;font-size:12px;font-weight:850}
.u215-ar small{display:block;font-size:11px;font-weight:700;color:var(--ux-ink-3)}
.u215-sy{align-self:center;padding:3px 9px;border-radius:999px;background:var(--ux-surface-2);font-size:11px;font-weight:800;color:var(--ux-ink-3);animation:u215-in .35s backwards}
.u215-qs{display:flex;flex-wrap:wrap;gap:5px;padding:4px 12px 8px;justify-content:flex-end}
.u215-qk{min-height:30px;padding:4px 11px;border:0;border-radius:999px;background:var(--ux-surface);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ux-accent) 50%,transparent);color:var(--o2);font-size:12px;font-weight:800;cursor:pointer;transition:opacity .2s;text-align:left}
.u215-qk:disabled{opacity:.35;cursor:default}
.u215-ip{display:flex;gap:6px;padding:8px 10px 10px;border-top:1px solid var(--ux-line)}
.u215-ip input{flex:1;min-width:0;height:40px;padding:0 12px;border:0;border-radius:12px;background:var(--ux-surface-2);color:var(--ux-ink);font-size:13.5px;outline:none}
.u215-ip button{height:40px;padding:0 14px;border:0;border-radius:12px;background:var(--ux-accent);color:var(--ux-accent-ink);font-weight:800}
.u215 button:focus-visible{outline:2px solid var(--ux-accent);outline-offset:2px}
@media(max-width:760px){.u215{bottom:108px}}
@media (prefers-reduced-motion: reduce){.u215-wg,.u215-ln svg{transition:none}.u215-b,.u215-sy{animation:none}.u215-ty i{animation:none}}
/* #098 Live metric with rolling digits — số lượt còn lại, video 30 ngày, số dư ví; đường biểu diễn từ sổ lượt */
.u098{position:relative;display:flex;flex-direction:column;padding:20px 18px 16px;border-radius:30px;background:var(--ux-surface);box-shadow:0 0 0 1px var(--ux-line),0 30px 60px -36px var(--ux-shadow-strong);overflow:hidden;min-height:100%}
.u098-h{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:750;color:var(--ux-ink-2)}
.u098-live{width:8px;height:8px;border-radius:50%;background:var(--ux-mint);box-shadow:0 0 0 0 color-mix(in srgb,var(--ux-mint) 50%,transparent);animation:u098-live 1.6s ease-out infinite}
@keyframes u098-live{to{box-shadow:0 0 0 8px color-mix(in srgb,var(--ux-mint) 0%,transparent)}}
.u098-h .lx-pill{margin-left:auto}
.u098-num{display:flex;align-items:flex-start;height:64px;margin-top:10px;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent);font-size:56px;font-weight:850;letter-spacing:-.04em;line-height:64px;font-variant-numeric:tabular-nums}
.u098-col{display:inline-flex;flex-direction:column;transform:translateY(calc(var(--d) * -64px));transition:transform .9s cubic-bezier(.3,1.25,.5,1);transition-delay:calc(var(--i) * 45ms)}
.u098-col span{height:64px}
.u098-sym{display:inline-block}
.u098-sym.sm{font-size:26px;margin-left:6px;color:var(--ux-ink-3);letter-spacing:-.02em}
.u098-dl{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:12.5px;font-weight:700;color:var(--ux-ink-3);flex-wrap:wrap}
.u098-bd{display:inline-flex;align-items:center;gap:3px;height:24px;padding:0 8px;border-radius:999px;background:color-mix(in srgb,var(--c,var(--ux-mint)) 15%,transparent);color:var(--c,var(--ux-mint));font-weight:850;transition:color .3s,background-color .3s}
.u098-bd svg{width:10px;height:10px;fill:currentColor;transition:transform .4s var(--ux-spring)}
.u098-bd.dn svg{transform:rotate(180deg)}
.u098-sp{position:relative;height:110px;margin:12px -18px 0;overflow:hidden}
.u098-sp svg{display:block;width:100%;height:110px;overflow:visible}
.u098-ln{fill:none;stroke:var(--ux-accent);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.u098-gd stop{stop-color:var(--ux-accent)}
.u098-hd{fill:var(--ux-accent);stroke:var(--ux-surface);stroke-width:2.5}
.u098-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:auto;padding-top:10px}
.u098-tb{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:9px 10px;border:0;border-radius:14px;background:var(--ux-surface-2);text-align:left;transition:background-color .2s,box-shadow .25s,transform .3s var(--ux-spring);min-width:0}
.u098-tb:hover{background:var(--ux-surface-3)}
.u098-tb:active{transform:scale(.96)}
.u098-tb[aria-pressed="true"]{background:var(--ux-surface);box-shadow:inset 0 0 0 2px var(--ux-accent)}
.u098-tb small{font-size:11.5px;font-weight:750;color:var(--ux-ink-3)}
.u098-tb b{font-size:15px;font-weight:850;letter-spacing:-.03em;color:var(--ux-ink);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.u098-tb em{font-style:normal;font-size:11px;font-weight:800;color:var(--ux-mint)}
.u098-tb:focus-visible{outline:2px solid var(--ux-accent);outline-offset:2px}
.u098-act{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}

/* #299 Usage meter that warns near the limit — quyền lợi gói: lượt đã dùng, thời hạn gói, chỗ trong nhóm; dự báo ngày hết lượt */
.u299{position:relative;border-radius:30px;overflow:hidden;background:var(--ux-surface);box-shadow:0 0 0 1px var(--ux-line),0 30px 60px -36px var(--ux-shadow-strong);color:var(--ux-ink);padding:22px 20px 18px;min-height:100%}
.u299-wn{display:flex;align-items:center;gap:8px;padding:0 12px;border-radius:13px;background:color-mix(in srgb,#F59E0B 16%,var(--ux-surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,#F59E0B 40%,transparent);color:#FCD34D;font-size:12px;font-weight:800;max-height:0;opacity:0;overflow:hidden;transition:max-height .45s cubic-bezier(.3,1.3,.5,1),opacity .3s,margin .45s,padding .45s}
.u299.is-warn .u299-wn{max-height:60px;opacity:1;margin-bottom:14px;padding:9px 12px}
.u299-wn i{flex:none;width:16px;height:16px;border-radius:50%;background:#F59E0B;color:#1B0F05;font-style:normal;font-size:10px;font-weight:900;display:grid;place-items:center}
.u299-hd{display:flex;align-items:flex-start;gap:10px}
.u299-hd div{margin-right:auto}
.u299-hd b{display:block;font-size:18px;font-weight:850;letter-spacing:-.03em}
.u299-hd small{display:block;margin-top:2px;font-size:12px;font-weight:650;color:var(--ux-ink-3)}
.u299-fc{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 4px 0 10px;border:0;border-radius:999px;background:var(--ux-surface-2);box-shadow:inset 0 0 0 1px var(--ux-line);color:var(--ux-ink-2);font-size:12px;font-weight:800;cursor:pointer;flex:none}
.u299-fc i{position:relative;width:28px;height:18px;border-radius:9px;background:var(--ux-surface-3);transition:background .2s}
.u299-fc i::after{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .25s cubic-bezier(.3,1.5,.5,1)}
.u299-fc[aria-checked="true"] i{background:var(--ux-accent)}
.u299-fc[aria-checked="true"] i::after{transform:translateX(10px)}
.u299-ls{margin-top:10px}
.u299-rw{position:relative;padding:12px 0 13px}
.u299-rw+.u299-rw{border-top:1px solid var(--ux-line)}
.u299-tp{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:13px;font-weight:800}
.u299-tp span:last-child{font-size:12px;font-weight:700;color:var(--ux-ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.u299-tp span b{color:var(--ux-ink);font-weight:900}
.u299-tr{position:relative;height:10px;margin-top:9px;border-radius:5px;background:var(--ux-surface-3)}
.u299-fl{position:absolute;left:0;top:0;bottom:0;border-radius:5px;background:var(--ux-accent);transition:width .6s cubic-bezier(.3,1,.4,1),background .4s}
.u299-fl.is-hi{background:#F59E0B}
.u299-fl.is-max{background:#E11D48}
.u299-fx{position:absolute;top:0;bottom:0;border-radius:0 5px 5px 0;background:repeating-linear-gradient(90deg,var(--c) 0 4px,transparent 4px 7px);opacity:.55;transform:scaleX(0);transform-origin:0 50%;transition:transform .7s cubic-bezier(.3,1,.4,1)}
.u299.is-fc .u299-fx{transform:none}
.u299-ov{display:block;height:0;overflow:hidden;font-size:11.5px;font-weight:800;color:#FB7185;font-style:normal;transition:height .3s,margin .3s}
.u299.is-fc .u299-ov.is-on{height:16px;margin-top:6px}
.u299-tt{position:absolute;top:-24px;padding:3px 7px;border-radius:7px;background:var(--ux-ink);color:var(--ux-page);font-size:11px;font-weight:800;white-space:nowrap;transform:translateX(-50%);opacity:0;pointer-events:none;transition:opacity .15s;font-variant-numeric:tabular-nums}
.u299-rw:hover .u299-tt{opacity:1}
.u299-kv{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.u299-kv span{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border-radius:10px;background:var(--ux-surface-2);font-size:12px;font-weight:700;color:var(--ux-ink-2)}
.u299-kv span b{color:var(--ux-ink)}
.u299-kv span.off{opacity:.55}
.u299-up{width:100%;height:44px;margin-top:14px;border:0;border-radius:14px;background:var(--ux-ink);color:var(--ux-page);font-size:13.5px;font-weight:850;cursor:pointer;display:none}
.u299.is-warn .u299-up{display:block;animation:u299-up .45s cubic-bezier(.3,1.4,.5,1)}
@keyframes u299-up{from{opacity:0;transform:translateY(10px)}}
.u299 button:focus-visible{outline:2px solid var(--ux-accent);outline-offset:2px}

/* #026 6-digit code input — xác minh số điện thoại để nhận lượt dùng thử */
.u026{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.u026-ic{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;color:var(--ux-accent-ink);background:var(--ux-grad);box-shadow:0 14px 26px -14px rgba(0,0,0,.55);transition:background .5s var(--ux-ease)}
.u026-ic svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.u026.is-ok .u026-ic{background:linear-gradient(140deg,#2FD8A8,#119C72)}
.u026-t{margin:16px 0 0;font-size:18px;font-weight:760;letter-spacing:-.03em}
.u026-s{margin:6px 0 20px;font-size:13.5px;color:var(--ux-ink-3)}
.u026-s b{color:var(--ux-ink-2);font-weight:650}
.u026-row{position:relative;display:flex;gap:8px}
.u026-row i.sep{width:10px;align-self:center;height:2px;border-radius:2px;background:var(--ux-line-2)}
.u026-c{position:relative;width:46px;height:58px;border-radius:14px;background:var(--ux-surface-2);box-shadow:inset 0 0 0 1.5px var(--ux-line-2);display:grid;place-items:center;overflow:hidden;
  font-size:26px;font-weight:760;font-variant-numeric:tabular-nums;transition:box-shadow .25s var(--ux-ease),background-color .4s var(--ux-ease),color .4s,transform .45s var(--ux-spring)}
.u026-c span{display:block;animation:u026-in .4s var(--ux-spring)}
@keyframes u026-in{from{transform:translateY(70%);opacity:0}}
.u026-c.cur{box-shadow:inset 0 0 0 2px var(--ux-accent),0 0 0 4px var(--ux-accent-soft)}
.u026-c.cur::after{content:"";position:absolute;left:50%;top:16px;bottom:16px;width:2px;margin-left:-1px;border-radius:1px;background:var(--ux-accent);animation:u026-blink 1s steps(1) infinite}
.u026-c.cur.has::after{display:none}
@keyframes u026-blink{50%{opacity:0}}
.u026.is-check .u026-c{animation:u026-wave .5s var(--ux-ease);animation-delay:calc(var(--i) * 60ms)}
@keyframes u026-wave{40%{transform:translateY(-8px)}}
.u026.is-ok .u026-c{background:color-mix(in srgb,var(--ux-mint) 14%,var(--ux-surface));box-shadow:inset 0 0 0 2px var(--ux-mint);color:var(--ux-mint);transition-delay:calc(var(--i) * 50ms)}
.u026.is-bad .u026-row{animation:u026-shake .45s var(--ux-ease)}
.u026.is-bad .u026-c{box-shadow:inset 0 0 0 2px var(--ux-danger);color:var(--ux-danger)}
@keyframes u026-shake{20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
.u026-real{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;padding:0;font-size:16px;cursor:text;caret-color:transparent;color:transparent;background:transparent}
.u026-msg{min-height:20px;margin:16px 0 0;font-size:13.5px;font-weight:650;color:var(--ux-ink-3);transition:color .3s var(--ux-ease)}
.u026.is-ok .u026-msg{color:var(--ux-mint)}
.u026.is-bad .u026-msg{color:var(--ux-danger)}
.u026-real:focus-visible{outline:none}
@media(max-width:420px){.u026-c{width:40px;height:52px;font-size:22px}.u026-row{gap:6px}}

/* #093 Celebration when every task is done — 5 bước bắt đầu; xong hết thì mừng một lần */
.u093{position:relative;display:flex;flex-direction:column;padding:20px 16px 16px;border-radius:30px;background:var(--ux-surface);box-shadow:0 0 0 1px var(--ux-line),0 30px 60px -36px var(--ux-shadow-strong);overflow:hidden;min-height:430px}
.u093-h{display:flex;align-items:flex-end;justify-content:space-between;padding:0 4px}
.u093-h small{display:block;font-size:12px;font-weight:700;color:var(--ux-ink-3)}
.u093-h b{display:block;margin-top:2px;font-size:22px;font-weight:850;letter-spacing:-.045em}
.u093-c{font-size:14px;font-weight:800;color:var(--ux-ink-3);font-variant-numeric:tabular-nums}
.u093-c b{display:inline-block;font-size:inherit;color:var(--ux-ink)}
.u093-bar{height:8px;margin:12px 4px 14px;border-radius:4px;background:var(--ux-surface-3);overflow:hidden}
.u093-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#22C3A6,#10B981 60%,#FFB547);transform-origin:0 50%;transform:scaleX(var(--p,0));transition:transform .6s var(--ux-spring)}
.u093-list{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.u093-t{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:0 14px;border:0;border-radius:17px;background:var(--ux-surface-2);text-align:left;text-decoration:none;color:inherit;transition:background-color .25s,transform .3s var(--ux-spring)}
.u093-t:hover{background:var(--ux-surface-3)}
.u093-t:active{transform:scale(.98)}
.u093-bx{position:relative;width:26px;height:26px;flex:none;border-radius:9px;box-shadow:inset 0 0 0 2px var(--ux-line-2);background:var(--ux-surface);transition:background-color .25s,box-shadow .25s,transform .4s var(--ux-spring)}
.u093-bx svg{position:absolute;inset:0;width:26px;height:26px;fill:none;stroke:var(--ux-accent-ink);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset .3s var(--ux-ease) .08s}
.u093-t[aria-checked="true"] .u093-bx{background:var(--ux-mint);box-shadow:inset 0 0 0 2px var(--ux-mint);transform:scale(1.08)}
.u093-t[aria-checked="true"] .u093-bx svg{stroke-dashoffset:0}
.u093-tx{position:relative;font-size:14.5px;font-weight:720;letter-spacing:-.02em;color:var(--ux-ink);transition:color .3s}
.u093-tx::after{content:"";position:absolute;left:-2px;right:-2px;top:52%;height:2px;border-radius:1px;background:var(--ux-ink-3);transform:scaleX(0);transform-origin:0 50%;transition:transform .35s var(--ux-ease)}
.u093-t[aria-checked="true"] .u093-tx{color:var(--ux-ink-3)}
.u093-t[aria-checked="true"] .u093-tx::after{transform:none}
.u093-go{margin-left:auto;font-size:12px;font-weight:800;color:var(--o2)}
.u093-t[aria-checked="true"] .u093-go{display:none}
.u093-win{position:absolute;left:0;right:0;bottom:0;top:96px;z-index:2;display:flex;flex-direction:column;align-items:center;padding:30px 20px 16px;border-radius:28px 28px 0 0;background:var(--ux-surface);box-shadow:0 -1px 0 var(--ux-line),0 -24px 40px -28px var(--ux-shadow-strong);text-align:center;transform:translateY(105%);visibility:hidden;transition:transform .6s var(--ux-spring),visibility 0s .6s}
.u093.done .u093-win{transform:none;visibility:visible;transition:transform .7s var(--ux-spring)}
.u093-bdg{position:relative;width:86px;height:86px;border-radius:30px;display:grid;place-items:center;background:linear-gradient(140deg,#22C3A6,#10B981 55%,#FFB547);color:#fff;transform:scale(.3) rotate(-25deg);opacity:0;transition:transform .7s var(--ux-spring) .2s,opacity .2s .2s}
.u093.done .u093-bdg{transform:none;opacity:1}
.u093-bdg svg{width:42px;height:42px;fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.u093-bdg::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 color-mix(in srgb,#10B981 50%,transparent);opacity:0}
.u093.done .u093-bdg::after{animation:u093-wave 1.1s .45s var(--ux-ease)}
@keyframes u093-wave{0%{opacity:1;box-shadow:0 0 0 0 color-mix(in srgb,#10B981 50%,transparent)}100%{opacity:0;box-shadow:0 0 0 26px color-mix(in srgb,#10B981 0%,transparent)}}
.u093-wt{margin:18px 0 0;font-size:19px;font-weight:850;letter-spacing:-.04em}
.u093-ws{margin:5px 0 0;font-size:13px;font-weight:600;color:var(--ux-ink-3)}
.u093-again{margin-top:auto;width:100%;height:48px;border:0;border-radius:15px;background:var(--ux-ink);color:var(--ux-page);font-size:14.5px;font-weight:760;transition:transform .3s var(--ux-spring)}
.u093-again:active{transform:scale(.97)}
.u093-cf{position:absolute;inset:0;z-index:4;width:100%;height:100%;pointer-events:none}
.u093-p{position:absolute;z-index:3;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;pointer-events:none}
.u093-t:focus-visible,.u093-again:focus-visible{outline:2px solid var(--ux-accent);outline-offset:2px}

/* #015 Plan radio cards — chọn gói */
.u015{position:relative}
.u015-grp{position:relative;display:flex;flex-direction:column;gap:10px}
.u015-frame{position:absolute;left:0;right:0;top:0;height:0;border-radius:22px;pointer-events:none;
  box-shadow:0 0 0 2px var(--ux-accent),0 18px 36px -20px rgba(0,0,0,.6);
  background:linear-gradient(135deg,color-mix(in srgb,var(--ux-accent) 9%,transparent),transparent 70%);
  transition:top .55s var(--ux-spring),height .55s var(--ux-spring)}
.u015-opt{position:relative;display:flex;align-items:center;gap:14px;width:100%;padding:16px 18px;border:0;border-radius:22px;background:var(--ux-surface);color:var(--ux-ink);text-align:left;
  box-shadow:0 0 0 1px var(--ux-line);transition:transform .4s var(--ux-spring),box-shadow .3s var(--ux-ease)}
.u015-opt:hover{box-shadow:0 0 0 1px var(--ux-line-2)}
.u015-opt.is-hot{background:linear-gradient(180deg,color-mix(in srgb,var(--ux-accent) 12%,transparent),transparent 75%),var(--ux-surface);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ux-accent) 75%,transparent),0 18px 44px -30px var(--ux-accent)}
.lx-card.up-strip{box-shadow:inset 3px 0 0 var(--ux-accent)}
.lx-card.vip-box{background:radial-gradient(120% 160% at 0% 0%,rgba(251,191,36,.16),transparent 55%),var(--ux-surface);box-shadow:inset 0 0 0 1.5px rgba(251,191,36,.55),0 24px 60px -36px rgba(251,191,36,.5)}
.vip-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.vip-crown{width:20px;height:20px;flex:none;fill:rgba(251,191,36,.18);stroke:#FBBF24;stroke-width:1.8;stroke-linejoin:round}
.vip-tag{font-size:11px;font-weight:800;padding:3px 8px;border-radius:999px;background:linear-gradient(90deg,#FDE68A,#FBBF24 45%,#F59E0B);color:#1B0F05}
.lx-btn.vip-btn{background:linear-gradient(90deg,#FDE68A,#FBBF24 40%,#F59E0B);color:#1B0F05;border-color:transparent}
.u015-opt:active{transform:scale(.98)}
.u015-opt:focus-visible{outline:2px solid var(--ux-accent);outline-offset:4px}
.u015-dot{position:relative;width:24px;height:24px;flex:none;border-radius:50%;box-shadow:inset 0 0 0 2px var(--ux-line-2);transition:box-shadow .3s var(--ux-ease)}
.u015-dot::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--ux-accent);transform:scale(0);transition:transform .45s var(--ux-spring)}
.u015-opt[aria-checked="true"] .u015-dot{box-shadow:inset 0 0 0 2px var(--ux-accent)}
.u015-opt[aria-checked="true"] .u015-dot::after{transform:scale(1)}
.u015-ic{width:42px;height:42px;flex:none;border-radius:13px;display:grid;place-items:center;color:#fff;background:var(--g)}
.u015-ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.u015-txt{flex:1;min-width:0}
.u015-txt b{display:flex;align-items:center;gap:7px;font-size:16px;font-weight:720;letter-spacing:-.02em;flex-wrap:wrap}
.u015-txt em{font-style:normal;font-size:11px;font-weight:750;padding:3px 7px;border-radius:999px;background:var(--ux-accent-soft);color:var(--o2)}
.u015-txt em.cur{background:var(--oksoft);color:var(--ok)}
.u015-txt em.save{background:rgba(52,211,153,.14);color:#6EE7B7}
.u015-txt small{display:block;margin-top:3px;font-size:13px;color:var(--ux-ink-3)}
.u015-price{text-align:right;font-variant-numeric:tabular-nums;color:var(--ux-ink-3);transition:color .35s var(--ux-ease);flex:none}
.u015-price b{display:block;font-size:17px;font-weight:760;letter-spacing:-.02em}
.u015-price s{display:block;font-size:12px}
.u015-price small{font-size:11.5px}
.u015-opt[aria-checked="true"] .u015-price{color:var(--ux-ink)}

/* #230 Order summary that recalculates with a promo code — tóm tắt đơn, nhập mã giảm giá, nâng gói */
.u230{position:relative;border-radius:30px;overflow:hidden;background:var(--ux-surface);box-shadow:0 0 0 1px var(--ux-line),0 30px 60px -36px var(--ux-shadow-strong);color:var(--ux-ink);padding-bottom:16px}
.u230-hd{display:flex;align-items:baseline;justify-content:space-between;padding:22px 20px 0}
.u230-hd b{font-size:18px;font-weight:900;letter-spacing:-.03em}
.u230-hd span{font-size:12px;font-weight:750;color:var(--ux-ink-3)}
.u230-ls{margin:10px 0 0;padding:0 20px;list-style:none}
.u230-ls li{display:flex;align-items:center;gap:11px;padding:5px 0}
.u230-ls i{flex:none;width:44px;height:44px;border-radius:12px;background:var(--g,var(--ux-grad));display:grid;place-items:center;font-style:normal;font-weight:900;color:var(--ux-accent-ink)}
.u230-ls div{flex:1;min-width:0}
.u230-ls b{display:block;font-size:14px;font-weight:850}
.u230-ls small{display:block;margin-top:2px;font-size:12px;font-weight:650;color:var(--ux-ink-3)}
.u230-ls em{font-style:normal;font-size:14px;font-weight:850;font-variant-numeric:tabular-nums}
.u230-pr{margin:8px 20px 0;padding:12px 0;border-top:1px solid var(--ux-line);border-bottom:1px solid var(--ux-line)}
.u230-lk{display:flex;align-items:center;gap:7px;width:100%;height:26px;padding:0;border:0;background:none;color:var(--ux-ink-2);font-size:13px;font-weight:800;cursor:pointer}
.u230-lk svg{width:15px;height:15px;color:var(--ux-accent)}
.u230-lk .cv{margin-left:auto;width:12px;height:12px;color:var(--ux-ink-3);transition:transform .3s}
.u230.is-open .u230-lk .cv{transform:rotate(180deg)}
.u230-lk:focus-visible,.u230 button:focus-visible{outline:2px solid var(--ux-accent);outline-offset:2px;border-radius:6px}
.u230-ex{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.3,1,.4,1)}
.u230.is-open .u230-ex{grid-template-rows:1fr}
.u230-ex>div{min-height:0;overflow:hidden}
.u230-rw{display:flex;gap:6px;margin-top:10px}
.u230-in{flex:1;min-width:0;height:40px;padding:0 12px;border:0;border-radius:11px;background:var(--ux-surface-2);box-shadow:inset 0 0 0 1.5px var(--ux-line);color:var(--ux-ink);font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;outline:none;transition:box-shadow .2s}
.u230-in::placeholder{letter-spacing:0;text-transform:none;font-weight:650;color:var(--ux-ink-3)}
.u230-in:focus{box-shadow:inset 0 0 0 1.5px var(--ux-accent)}
.u230-in.is-bad{box-shadow:inset 0 0 0 1.5px #E11D48;animation:u230-sh .4s}
@keyframes u230-sh{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
.u230-ap{position:relative;flex:none;min-width:72px;height:40px;border:0;border-radius:11px;background:var(--ux-ink);color:var(--ux-page);font-size:13px;font-weight:850;cursor:pointer}
.u230-ap i{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px;border-radius:50%;border:2px solid color-mix(in srgb,var(--ux-page) 35%,transparent);border-top-color:var(--ux-page);animation:u230-sp .7s linear infinite;display:none}
.u230-ap.is-busy span{visibility:hidden}
.u230-ap.is-busy i{display:block}
@keyframes u230-sp{to{transform:rotate(360deg)}}
.u230-er{height:0;margin:0;overflow:hidden;font-size:12px;font-weight:750;color:#FB7185;opacity:0;transition:opacity .2s,height .2s,margin .2s}
.u230-er.is-on{height:auto;margin-top:6px;opacity:1}
.u230-cp{display:none;align-items:center;gap:6px;margin-top:10px;min-height:34px;padding:0 6px 0 11px;border-radius:999px;background:color-mix(in srgb,#16A34A 16%,transparent);color:#4ADE80;font-size:12.5px;font-weight:850;width:max-content;max-width:100%}
.u230-cp svg{width:13px;height:13px;flex:none}
.u230.is-on .u230-rw{display:none}
.u230.is-on .u230-cp{display:inline-flex;animation:u230-in .45s cubic-bezier(.3,1.5,.5,1)}
@keyframes u230-in{from{transform:scale(.7);opacity:0}}
.u230-rm{display:grid;place-items:center;width:24px;height:24px;flex:none;padding:0;border:0;border-radius:50%;background:none;color:inherit;cursor:pointer}
.u230-rm:hover{background:color-mix(in srgb,#16A34A 18%,transparent)}
.u230-rm svg{width:10px;height:10px}
.u230-sm{margin:12px 20px 0;font-size:13px;font-weight:700;color:var(--ux-ink-2)}
.u230-ln{display:flex;justify-content:space-between;gap:10px;padding:4px 0;font-variant-numeric:tabular-nums}
.u230-dc{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .4s cubic-bezier(.3,1,.4,1),opacity .3s}
.u230-dc>div{min-height:0;overflow:hidden}
.u230-dc.is-on{grid-template-rows:1fr;opacity:1}
.u230-dc .u230-ln{color:#4ADE80;font-weight:850}
.u230-tt{display:flex;justify-content:space-between;align-items:flex-end;margin:10px 20px 0;padding-top:12px;border-top:1px solid var(--ux-line)}
.u230-tt>div:first-child{display:flex;flex-direction:column;gap:5px;font-size:14px;font-weight:850}
.u230-sv{align-self:flex-start;padding:3px 8px;border-radius:999px;background:#16A34A;color:#fff;font-size:11px;font-weight:900;transform:scale(0);transform-origin:0 50%;transition:transform .4s cubic-bezier(.3,1.7,.5,1)}
.u230-sv.is-on{transform:none;transition-delay:.5s}
.u230-tv{display:flex;align-items:baseline;gap:7px}
.u230-tv s{display:inline-block;max-width:0;overflow:hidden;white-space:nowrap;font-size:12.5px;font-weight:700;color:var(--ux-ink-3);opacity:0;transition:max-width .4s,opacity .3s;font-variant-numeric:tabular-nums}
.u230-tv s.is-on{max-width:120px;opacity:1}
.u230-tv b{display:block;font-size:26px;font-weight:900;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.u230-opt{margin:12px 20px 0;display:flex;gap:6px;flex-wrap:wrap}
.u230-go{display:block;width:calc(100% - 32px);margin:16px 16px 0;height:52px;border:0;border-radius:15px;background:var(--ux-grad);color:var(--ux-accent-ink);font-size:15px;font-weight:850;cursor:pointer;font-variant-numeric:tabular-nums;box-shadow:0 18px 30px -16px rgba(0,0,0,.55);transition:transform .3s var(--ux-spring)}
.u230-go:active{transform:scale(.97)}
.u230-go:disabled{opacity:.45;cursor:not-allowed}
.u230-go2{display:block;width:calc(100% - 32px);margin:8px 16px 0;height:44px;border:0;border-radius:13px;background:var(--ux-surface-2);color:var(--ux-ink);font-size:13.5px;font-weight:800;cursor:pointer}
.u230-go2:disabled{opacity:.45;cursor:not-allowed}
.u230-nt{margin:10px 20px 0;font-size:12px;color:var(--ux-ink-3);line-height:1.5}
@media (prefers-reduced-motion: reduce){.u230-ex,.u230-dc,.u230-sv,.u230-tv s,.u230-lk .cv{transition:none}.u230-in.is-bad,.u230.is-on .u230-cp,.u230-ap i{animation:none}}

/* #217 Plan comparison with differences only — so sánh quyền lợi các gói */
.u217{position:relative;border-radius:30px;overflow:hidden;background:var(--ux-surface);box-shadow:0 0 0 1px var(--ux-line),0 30px 60px -36px var(--ux-shadow-strong);color:var(--ux-ink);padding:20px 12px 18px}
.u217-tp{display:flex;align-items:center;gap:10px;padding:0 8px 10px}
.u217-tp b{margin-right:auto;font-size:18px;font-weight:900;letter-spacing:-.03em}
.u217-df{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 4px 0 10px;border:0;border-radius:999px;background:var(--ux-surface-2);box-shadow:inset 0 0 0 1px var(--ux-line);color:var(--ux-ink-2);font-size:12px;font-weight:800;cursor:pointer;flex:none}
.u217-df i{position:relative;width:28px;height:18px;border-radius:9px;background:var(--ux-surface-3);transition:background .2s}
.u217-df i::after{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .25s cubic-bezier(.3,1.5,.5,1)}
.u217-df[aria-checked="true"] i{background:var(--ux-accent)}
.u217-df[aria-checked="true"] i::after{transform:translateX(10px)}
.u217-df:focus-visible{outline:2px solid var(--ux-accent);outline-offset:2px}
.u217-sc{overflow-x:auto}
.u217-r{display:grid;grid-template-columns:minmax(140px,1.4fr) repeat(var(--n,3),minmax(84px,1fr));align-items:center;min-width:440px}
.u217-hd{position:sticky;top:0;z-index:2;background:var(--ux-surface);padding:6px 0 8px;box-shadow:0 1px 0 var(--ux-line)}
.u217-hd>div{display:flex;flex-direction:column;align-items:center;gap:2px;position:relative;padding-top:14px}
.u217-hd b{font-size:14px;font-weight:900}
.u217-hd small{font-size:11.5px;font-weight:800;color:var(--ux-ink-3);font-variant-numeric:tabular-nums}
.u217-hd em{position:absolute;top:-2px;padding:1px 7px;border-radius:999px;background:var(--ux-accent);color:var(--ux-accent-ink);font-style:normal;font-size:10px;font-weight:850;white-space:nowrap}
.u217-hd .u217-c>button{margin-top:6px;height:26px;padding:0 11px;border:0;border-radius:999px;background:none;box-shadow:inset 0 0 0 1px var(--ux-line-2);font-size:11.5px;font-weight:850;color:var(--ux-ink-2);transition:background .2s,color .2s,box-shadow .2s}
.u217-gp{display:grid;grid-template-rows:1fr;transition:grid-template-rows .45s cubic-bezier(.3,.8,.3,1),opacity .3s}
.u217-gp>div{min-height:0;overflow:hidden}
.u217-gp.is-off{grid-template-rows:0fr;opacity:0}
.u217-gh{padding:14px 8px 4px;font-size:11px;font-weight:850;letter-spacing:.06em;color:var(--o2);text-transform:uppercase}
.u217-rw{display:grid;grid-template-rows:1fr;transition:grid-template-rows .45s cubic-bezier(.3,.8,.3,1),opacity .3s}
.u217-rw>div{min-height:0;overflow:hidden}
.u217-rw.is-off{grid-template-rows:0fr;opacity:0}
.u217-rw .u217-r{min-height:40px;border-bottom:1px solid var(--ux-line)}
.u217-r>span:first-child{padding:0 8px;font-size:13px;font-weight:700;color:var(--ux-ink-2)}
.u217-c{display:grid;place-items:center;align-self:stretch;font-size:12.5px;font-weight:800;transition:background .2s;text-align:center;padding:0 4px}
.u217-c svg{width:15px;height:15px}
.u217-c .y{color:#10B981}.u217-c .n{color:var(--ux-ink-3);opacity:.6}
.u217[data-col="1"] .u217-c1,.u217[data-col="2"] .u217-c2,.u217[data-col="3"] .u217-c3,.u217[data-col="4"] .u217-c4,.u217[data-col="5"] .u217-c5{background:color-mix(in srgb,var(--ux-accent) 9%,transparent)}
.u217[data-col="1"] .u217-hd .u217-c1 button,.u217[data-col="2"] .u217-hd .u217-c2 button,.u217[data-col="3"] .u217-hd .u217-c3 button,.u217[data-col="4"] .u217-hd .u217-c4 button,.u217[data-col="5"] .u217-hd .u217-c5 button{background:var(--ux-ink);color:var(--ux-page);box-shadow:none}
.u217-hd .u217-c{border-radius:12px 12px 0 0}
@media (prefers-reduced-motion: reduce){.u217-gp,.u217-rw{transition:none}}

/* #298 Tear-off discount coupon + #100 Folding flip timer — vé khuyến mãi theo giờ, đếm ngược lật số */
.u298{position:relative;border-radius:30px;overflow:hidden;background:radial-gradient(90% 70% at 50% 0%,color-mix(in srgb,#F97316 16%,transparent),transparent 70%),var(--ux-surface);box-shadow:0 0 0 1px var(--ux-line),0 30px 60px -36px var(--ux-shadow-strong);color:var(--ux-ink);padding:22px}
.u298-tm{display:flex;align-items:center;justify-content:center;gap:10px;font-size:12.5px;font-weight:750;color:var(--ux-ink-3)}
.u298-tk{position:relative;display:flex;min-height:132px;margin-top:16px;filter:drop-shadow(0 16px 22px rgba(234,88,12,.25))}
.u298-mn{position:relative;flex:1;padding:18px;border-radius:18px 0 0 18px;background:linear-gradient(135deg,#FB923C,#EA580C);color:#1B0F05;-webkit-mask:radial-gradient(circle 10px at 100% 0,transparent 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 10px at 100% 100%,transparent 98%,#000) bottom/100% 51% no-repeat;mask:radial-gradient(circle 10px at 100% 0,transparent 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 10px at 100% 100%,transparent 98%,#000) bottom/100% 51% no-repeat}
.u298-mn small{font-size:11.5px;font-weight:800;opacity:.9}
.u298-mn b{display:flex;align-items:baseline;gap:6px;margin-top:4px;font-size:40px;line-height:1;font-weight:900;letter-spacing:-.04em;flex-wrap:wrap}
.u298-mn b em{font-style:normal;font-size:15px;letter-spacing:0}
.u298-mn p{margin:10px 0 0;font-size:12px;font-weight:700;opacity:.9}
.u298-cd{position:absolute;inset:0;padding:18px;display:flex;flex-direction:column;justify-content:center;background:inherit;opacity:0;transform:scale(.96);transition:opacity .3s .25s,transform .4s cubic-bezier(.3,1.5,.5,1) .25s;pointer-events:none}
.u298.is-got .u298-cd{opacity:1;transform:none;pointer-events:auto}
.u298-cd small{font-size:11.5px;font-weight:800;opacity:.9}
.u298-cr{display:flex;align-items:center;gap:8px;margin-top:8px;padding:6px 6px 6px 12px;border-radius:12px;background:rgba(255,255,255,.18);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
.u298-cr code{flex:1;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:17px;font-weight:800;letter-spacing:.08em;overflow:hidden;text-overflow:ellipsis}
.u298-cp{display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 12px;border:0;border-radius:9px;background:#fff;color:#C2410C;font-size:12px;font-weight:850;cursor:pointer;flex:none}
.u298-cp svg{width:12px;height:12px}
.u298-cp:focus-visible,.u298-gt:focus-visible{outline:2px solid #fff;outline-offset:2px}
.u298-st{position:relative;flex:none;width:92px;border-left:2px dashed rgba(255,255,255,.7);border-radius:0 18px 18px 0;background:linear-gradient(135deg,#FB923C,#F97316);transform-origin:0 100%;transition:transform .6s cubic-bezier(.5,0,.6,1),opacity .4s .3s;-webkit-mask:radial-gradient(circle 10px at 0 0,transparent 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 10px at 0 100%,transparent 98%,#000) bottom/100% 51% no-repeat;mask:radial-gradient(circle 10px at 0 0,transparent 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 10px at 0 100%,transparent 98%,#000) bottom/100% 51% no-repeat}
.u298.is-got .u298-st{transform:translate(18px,120px) rotate(28deg);opacity:0;pointer-events:none}
.u298-gt{position:absolute;inset:0;border:0;background:none;color:#1B0F05;font-size:14px;font-weight:900;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.u298-gt svg{width:20px;height:20px;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.u298-gt:hover svg{transform:translateY(3px)}
.u298-nt{display:flex;align-items:center;gap:8px;margin-top:14px;padding:11px 14px;border-radius:14px;background:var(--ux-ink);color:var(--ux-page);font-size:12.5px;font-weight:750;opacity:0;transform:translateY(12px);transition:opacity .3s,transform .5s cubic-bezier(.3,1.4,.5,1)}
.u298-nt.is-on{opacity:1;transform:none}
.u298-nt i{flex:none;width:18px;height:18px;border-radius:50%;background:#10B981;display:grid;place-items:center}
.u298-nt i::after{content:"";width:4px;height:7px;margin-top:-2px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
@media (prefers-reduced-motion: reduce){.u298-st,.u298-cd,.u298-nt{transition:opacity .2s}.u298.is-got .u298-st{transform:none}}
.u100-clk{display:flex;align-items:center;gap:4px}
.u100-fl{position:relative;width:30px;height:44px;border-radius:8px;font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:44px;text-align:center;color:#F3F1EC;box-shadow:0 0 0 1px var(--ux-line),0 8px 14px -10px rgba(0,0,0,.6);font-variant-numeric:tabular-nums}
.u100-fl>span{position:absolute;left:0;right:0;height:50%;overflow:hidden;background:#1F1A17}
.u100-fl>span b{position:absolute;left:0;right:0;height:44px;font:inherit}
.u100-t,.u100-ft{top:0;border-radius:8px 8px 0 0;transform-origin:50% 100%;background:linear-gradient(#2A231F,#1F1A17)!important}
.u100-b,.u100-fb{bottom:0;border-radius:0 0 8px 8px;transform-origin:50% 0}
.u100-b b,.u100-fb b{top:-22px}
.u100-t b,.u100-ft b{top:0}
.u100-ft{z-index:2;transform:perspective(160px) rotateX(-90deg)}
.u100-fb{z-index:2;transform:perspective(160px) rotateX(90deg)}
.u100-fl::after{content:"";position:absolute;left:0;right:0;top:50%;z-index:3;height:2px;margin-top:-1px;background:rgba(0,0,0,.55)}
.u100-co{display:flex;flex-direction:column;gap:8px;padding:0 2px}
.u100-co i{width:5px;height:5px;border-radius:50%;background:var(--ux-ink-3);animation:u100-blink 1s steps(1) infinite}
@keyframes u100-blink{50%{opacity:.25}}

/* #081 Payment ring and check — trạng thái thanh toán trong hộp chuyển khoản */
.u081{position:relative;display:flex;flex-direction:column;align-items:center;min-height:150px}
.u081-stage{position:relative;width:100%;height:90px;display:flex;align-items:center;justify-content:center}
.u081-go{position:relative;width:100%;height:56px;border:0;border-radius:18px;background:var(--ux-surface-2);color:var(--ux-ink);font-size:14.5px;font-weight:800;transition:width .5s var(--ux-spring),border-radius .5s var(--ux-spring),transform .3s var(--ux-spring),background-color .4s;overflow:hidden;pointer-events:none}
.u081-go span{transition:opacity .2s}
.u081.is-run .u081-go,.u081.is-ok .u081-go{width:56px;border-radius:50%}
.u081.is-run .u081-go span,.u081.is-ok .u081-go span{opacity:0}
.u081-ring{pointer-events:none;position:absolute;left:50%;top:5px;width:80px;height:80px;margin-left:-40px;transform:rotate(-90deg);opacity:0;transition:opacity .3s}
.u081.is-run .u081-ring,.u081.is-ok .u081-ring{opacity:1;transition-delay:.25s}
.u081-ring circle{fill:none;stroke-width:5;stroke-linecap:round}
.u081-ring .t{stroke:var(--ux-surface-3)}
.u081-ring .p{stroke:var(--ux-accent);stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--p,0) * 100);transition:stroke .4s}
.u081.is-ok .u081-ring .p{stroke:var(--ux-mint)}
.u081-ck{position:absolute;left:50%;top:33px;width:24px;height:24px;margin-left:-12px;fill:none;stroke:var(--ux-page);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.u081-ck path{stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .45s var(--ux-ease) .2s}
.u081.is-ok .u081-go{background:var(--ux-mint)}
.u081.is-ok .u081-ck{stroke:var(--ux-accent-ink)}
.u081.is-ok .u081-ck path{stroke-dashoffset:0}
.u081-steps{display:flex;gap:12px;justify-content:center;margin:6px 0 4px;min-height:24px;font-size:12.5px;font-weight:700;color:var(--ux-ink-3);flex-wrap:wrap}
.u081-steps span{display:inline-flex;align-items:center;gap:5px;transition:color .3s}
.u081-steps span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ux-line-2);transition:background-color .3s,transform .4s var(--ux-spring)}
.u081-steps span.on{color:var(--ux-ink)}
.u081-steps span.on::before{background:var(--ux-accent);transform:scale(1.3)}
.u081.is-ok .u081-steps span.on::before{background:var(--ux-mint)}
.u081-msg{margin:6px 0 0;font-size:13.5px;color:var(--ux-ink-2);text-align:center}
.u081-msg.warn{color:var(--warn)}.u081-msg.bad{color:var(--bad)}
.u081-rec{position:absolute;inset:-6px;display:flex;flex-direction:column;justify-content:center;padding:20px 18px 16px;border-radius:22px;background:var(--ux-surface-2);transform:translateY(16px);opacity:0;visibility:hidden;transition:transform .6s var(--ux-spring),opacity .3s,visibility 0s .6s;text-align:center}
.u081.is-rec .u081-rec{transform:none;opacity:1;visibility:visible;transition:transform .6s var(--ux-spring),opacity .3s}
.u081-rec i{width:60px;height:60px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;background:var(--ux-mint);color:var(--ux-accent-ink);box-shadow:0 0 0 8px color-mix(in srgb,var(--ux-mint) 16%,transparent)}
.u081-rec i svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.u081-rec b{display:block;font-size:20px;font-weight:850;letter-spacing:-.04em}
.u081-rec p{margin:6px 0 14px;font-size:13.5px;color:var(--ux-ink-3)}
.u081-rec .lx-row{justify-content:center}

/* #008 Copy button that turns into a check — số tài khoản, số tiền, nội dung chuyển khoản, link giới thiệu */
.u008{position:relative}
.u008-lab{display:block;font-size:12px;font-weight:750;color:var(--ux-ink-3);margin:0 0 6px 4px}
.u008-box{position:relative;display:flex;align-items:center;width:100%;min-height:56px;padding:0 6px 0 16px;border-radius:16px;background:var(--ux-surface-2);box-shadow:0 0 0 1px var(--ux-line-2);overflow:visible;transition:box-shadow .45s var(--ux-ease)}
.u008-code{position:relative;flex:1;min-width:0;overflow:hidden;font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:15px;white-space:nowrap;text-overflow:ellipsis;color:var(--ux-ink);font-weight:600}
.u008-code.big{font-size:18px;font-weight:800;color:var(--o2);letter-spacing:.04em}
.u008-code::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,color-mix(in srgb,var(--ux-mint) 30%,transparent) 50%,transparent 80%);transform:translateX(-110%);pointer-events:none}
.u008.is-copied .u008-code::after{animation:u008-sweep .7s var(--ux-ease)}
@keyframes u008-sweep{to{transform:translateX(110%)}}
.u008-btn{position:relative;flex:none;width:44px;height:44px;border:0;padding:0;border-radius:13px;background:var(--ux-surface);color:var(--ux-ink-2);display:grid;place-items:center;transition:background-color .35s var(--ux-ease),color .35s var(--ux-ease),transform .45s var(--ux-spring)}
.u008-btn:hover{background:var(--ux-surface-3);color:var(--ux-ink)}
.u008-btn:active{transform:scale(.88)}
.u008-btn:focus-visible{outline:2px solid var(--ux-accent);outline-offset:3px}
.u008-btn svg{position:absolute;width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:opacity .25s var(--ux-ease),transform .5s var(--ux-spring)}
.u008-ok{opacity:0;transform:scale(.4) rotate(-30deg)}
.u008-ok path{stroke-width:2.6;stroke-dasharray:22;stroke-dashoffset:22;transition:stroke-dashoffset .4s var(--ux-ease) .1s}
.u008.is-copied .u008-btn{background:var(--ux-mint);color:var(--ux-accent-ink)}
.u008.is-copied .u008-cp{opacity:0;transform:scale(.4) rotate(30deg)}
.u008.is-copied .u008-ok{opacity:1;transform:none}
.u008.is-copied .u008-ok path{stroke-dashoffset:0}
.u008.is-copied .u008-box{box-shadow:0 0 0 1.5px var(--ux-mint),0 0 0 6px color-mix(in srgb,var(--ux-mint) 16%,transparent)}
.u008-tip{position:absolute;right:-6px;top:-40px;padding:7px 12px;border-radius:10px;background:var(--ux-ink);color:var(--ux-page);font-size:13px;font-weight:650;white-space:nowrap;pointer-events:none;opacity:0;transform:translateY(8px) scale(.8);transform-origin:80% 100%;transition:opacity .25s var(--ux-ease),transform .5s var(--ux-spring);z-index:2}
.u008-tip::after{content:"";position:absolute;right:24px;bottom:-5px;width:10px;height:10px;background:inherit;border-radius:2px;transform:rotate(45deg)}
.u008.is-copied .u008-tip{opacity:1;transform:none}

/* #035 Money transfer amount — nhập số tiền nạp ví, nút cộng nhanh */
.u035{position:relative;display:flex;flex-direction:column;align-items:center}
.u035-to{display:flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border-radius:999px;background:var(--ux-surface-2);box-shadow:0 0 0 1px var(--ux-line);font-size:13.5px;font-weight:650;color:var(--ux-ink-2)}
.u035-to i{width:30px;height:30px;border-radius:50%;background:var(--ux-grad)}
.u035-to b{color:var(--ux-ink)}
.u035-amt{position:relative;display:flex;align-items:baseline;justify-content:center;gap:6px;width:100%;height:84px;margin-top:18px;cursor:text;border-radius:18px;transition:box-shadow .2s}
.u035-num{display:flex;align-items:baseline;height:64px;overflow:hidden;font-size:48px;font-weight:820;letter-spacing:-.05em;line-height:64px;font-variant-numeric:tabular-nums;color:var(--ux-ink);transition:color .3s var(--ux-ease)}
.u035-num span{display:inline-block}
.u035-num span.new{animation:u035-up .4s var(--ux-spring)}
@keyframes u035-up{from{transform:translateY(60%);opacity:0}}
.u035-num span.c{color:var(--ux-ink-3);font-weight:700}
.u035-num .ph{color:var(--ux-ink-3)}
.u035-caret{width:3px;height:44px;margin-left:3px;align-self:center;border-radius:2px;background:var(--ux-accent);opacity:0}
.u035.is-focus .u035-caret{opacity:1;animation:u035-blink 1s steps(1) infinite}
@keyframes u035-blink{50%{opacity:0}}
.u035-cur{font-size:26px;font-weight:760;color:var(--ux-ink-3)}
.u035-real{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;font-size:16px;cursor:text}
.u035-sub{margin:6px 0 0;min-height:20px;font-size:13px;font-weight:600;color:var(--ux-ink-3);font-variant-numeric:tabular-nums;transition:color .3s;text-align:center}
.u035.is-over .u035-num,.u035.is-over .u035-sub{color:var(--ux-danger)}
.u035.is-shake .u035-amt{animation:u035-shake .42s var(--ux-ease)}
@keyframes u035-shake{20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
.u035-chips{display:flex;gap:6px;margin-top:18px;flex-wrap:wrap;justify-content:center}
.u035-chip{height:38px;padding:0 14px;border:0;border-radius:12px;background:var(--ux-surface-2);box-shadow:inset 0 0 0 1px var(--ux-line-2);font-size:13.5px;font-weight:700;color:var(--ux-ink-2);transition:transform .35s var(--ux-spring),box-shadow .2s,color .2s}
.u035-chip:hover{color:var(--ux-ink);box-shadow:inset 0 0 0 1px var(--ux-ink-3)}
.u035-chip:active{transform:scale(.92)}
.u035-chip:focus-visible{outline:2px solid var(--ux-accent);outline-offset:2px}
.u035-send{width:100%;height:54px;margin-top:20px;border:0;border-radius:18px;background:var(--ux-grad);color:var(--ux-accent-ink);font-size:15.5px;font-weight:800;transition:opacity .3s,transform .35s var(--ux-spring)}
.u035-send:active{transform:scale(.97)}
.u035-send:focus-visible{outline:2px solid var(--ux-accent);outline-offset:3px}
.u035-send[aria-disabled="true"]{opacity:.35}
.u035-real:focus-visible{outline:none}
.u035.is-focus .u035-amt{box-shadow:0 0 0 2px var(--ux-accent-soft)}

/* #292 Filter-and-reflow gallery — chip thư mục, thẻ không khớp thu nhỏ biến mất, thẻ còn lại trượt vào chỗ */
.u292-fs{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.u292-f{height:36px;padding:0 14px;border:0;border-radius:999px;background:var(--ux-surface-2);font-size:13px;font-weight:750;color:var(--ux-ink-2);transition:background-color .25s,color .25s,transform .3s var(--ux-spring)}
.u292-f:active{transform:scale(.95)}
.u292-f[aria-pressed="true"]{background:var(--ux-ink);color:var(--ux-page)}
.u292-f:focus-visible{outline:2px solid var(--ux-accent);outline-offset:2px}
.u292-n{margin:10px 0 0;font-size:12.5px;font-weight:700;color:var(--ux-ink-3);font-variant-numeric:tabular-nums}
.u292-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-top:12px}
@media(max-width:560px){.u292-g{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
.u292-t{transition:transform .6s cubic-bezier(.3,1.25,.4,1),opacity .35s}
.u292-t.out{opacity:0;transform:scale(.2)}

/* #038 Right-click context menu — thẻ video, bấm chuột phải hoặc nút ⋯ để mở thao tác */
.u038{position:relative;user-select:none;-webkit-user-select:none}
.u038-card{position:relative;padding:8px 8px 12px;border-radius:20px;background:var(--ux-surface);box-shadow:0 0 0 1px var(--ux-line);cursor:default;outline:none;transition:transform .45s var(--ux-spring),box-shadow .25s,opacity .35s,filter .35s}
.u038-card:focus-visible{box-shadow:0 0 0 2px var(--ux-accent)}
.u038-card.is-ctx{box-shadow:0 0 0 2px var(--ux-accent),0 16px 30px -18px var(--ux-shadow-strong);transform:translateY(-2px)}
.u038-th{position:relative;aspect-ratio:9/15;border-radius:14px;background:linear-gradient(140deg,#3B2416,#1B1410);overflow:hidden;display:block;width:100%;border:0;padding:0;cursor:zoom-in}
.u038-th video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;background:#000;pointer-events:none}
.u038-th .u038-ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--ux-ink-3);font-size:12.5px;font-weight:700;padding:12px;text-align:center}
.u038-th .u038-kind{position:absolute;left:8px;bottom:8px;height:22px;padding:0 8px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;font-size:11px;font-weight:800;display:inline-flex;align-items:center;gap:4px}
.u038-th:focus-visible{outline:2px solid var(--ux-accent);outline-offset:2px}
.u038-card b{display:block;margin:10px 4px 0;font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u038-card small{display:flex;align-items:center;gap:6px;margin:3px 4px 0;font-size:12px;color:var(--ux-ink-3);flex-wrap:wrap}
.u038-card small .st{color:#FBBF24;letter-spacing:1px}
.u038-more{position:absolute;right:14px;top:14px;width:30px;height:30px;border:0;padding:0;border-radius:9px;background:rgba(255,255,255,.85);color:#2A2A30;display:grid;place-items:center;opacity:0;transition:opacity .2s;z-index:2}
.u038-card:hover .u038-more,.u038-card:focus-within .u038-more{opacity:1}
@media (hover:none){.u038-more{opacity:1}}
.u038-more:focus-visible{outline:2px solid var(--ux-accent);outline-offset:1px}
.u038-more svg{width:16px;height:16px;fill:currentColor}
.u038-pick{position:absolute;left:14px;top:14px;z-index:2;width:28px;height:28px;border:0;padding:0;border-radius:9px;background:rgba(0,0,0,.55);box-shadow:inset 0 0 0 2px rgba(255,255,255,.8);display:grid;place-items:center;color:#1B0F05;opacity:0;transition:opacity .2s,background-color .25s,transform .35s var(--ux-spring)}
.u038-pick svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .2s}
.u038-card:hover .u038-pick,.u038-card:focus-within .u038-pick,.u038-card[aria-selected="true"] .u038-pick,.u038.is-picking .u038-pick{opacity:1}
@media (hover:none){.u038-pick{opacity:1}}
.u038-card[aria-selected="true"] .u038-pick{background:var(--ux-accent);box-shadow:none;transform:scale(1.08)}
.u038-card[aria-selected="true"] .u038-pick svg{opacity:1}
.u038-card[aria-selected="true"]{box-shadow:0 0 0 2px var(--ux-accent);transform:translateY(-4px)}
.u038-pick:disabled{display:none}
.u038-menu{position:fixed;z-index:50;width:220px;padding:6px;border-radius:16px;background:var(--ux-surface);box-shadow:0 0 0 1px var(--ux-line-2),0 24px 48px -20px #000;overflow:hidden;
  height:var(--mh,auto);opacity:0;transform:scale(.85);visibility:hidden;transition:opacity .15s var(--ux-ease),transform .35s var(--ux-spring),height .4s var(--ux-spring),visibility 0s .35s}
.u038-menu.is-open{opacity:1;transform:none;visibility:visible;transition:opacity .15s var(--ux-ease),transform .4s var(--ux-spring),height .4s var(--ux-spring)}
.u038-track{display:flex;width:416px;transition:transform .45s var(--ux-spring)}
.u038-menu.is-sub .u038-track{transform:translateX(-208px)}
.u038-p{width:208px;flex:none;margin:0;padding:0;list-style:none;transition:opacity .3s;max-height:340px;overflow-y:auto}
.u038-menu.is-sub .u038-p:first-child,.u038-menu:not(.is-sub) .u038-p+.u038-p{opacity:0}
.u038-back{color:var(--ux-ink-2)!important;font-weight:700!important}
.u038-mi{display:flex;align-items:center;gap:10px;width:100%;height:40px;padding:0 10px;border:0;border-radius:10px;background:none;color:var(--ux-ink);font-size:13.5px;font-weight:620;text-align:left;text-decoration:none}
.u038-mi:hover,.u038-mi:focus-visible,.u038-mi[aria-expanded="true"]{background:var(--ux-surface-2);outline:none}
.u038-mi svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;color:var(--ux-ink-2)}
.u038-mi .u038-ar{margin-left:auto;width:14px;height:14px}
.u038-mi .cur{margin-left:auto;color:var(--o2);font-size:12px;font-weight:800}
.u038-mi:disabled{opacity:.4;cursor:default}
.u038-sep{height:1px;margin:5px 8px;background:var(--ux-line)}

/* #178 Bulk selection dock — thanh thao tác khi chọn nhiều video */
.u178-dock{position:fixed;left:50%;bottom:22px;z-index:38;display:flex;align-items:center;gap:8px;padding:8px 8px 8px 16px;border-radius:18px;background:var(--ux-ink);color:var(--ux-page);font-size:13.5px;font-weight:750;box-shadow:0 20px 40px -14px #000;transform:translate(-50%,120%);opacity:0;visibility:hidden;transition:transform .35s var(--ux-spring),opacity .35s,visibility 0s .35s;font-variant-numeric:tabular-nums;max-width:calc(100vw - 24px);flex-wrap:wrap}
.u178-dock.active{transform:translate(-50%,0);opacity:1;visibility:visible;transition-delay:0s}
.u178-dock button{height:36px;padding:0 12px;border:0;border-radius:11px;background:var(--ux-page);color:var(--ux-ink);font-size:12.5px;font-weight:800;transition:transform .3s}
.u178-dock button:active{transform:translateY(1px)}
.u178-dock button.ghost{background:transparent;color:var(--ux-page);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ux-page) 30%,transparent)}
.u178-dock :focus-visible{outline:2px solid var(--ux-accent);outline-offset:3px}
@media(max-width:760px){.u178-dock{bottom:112px}}

/* #061 Thumbnail-to-lightbox zoom — xem video lớn, phóng ra từ đúng ô thu nhỏ */
.u061-scrim{position:fixed;inset:0;z-index:70;background:#07070C;opacity:0;pointer-events:none;transition:opacity .45s}
.u061.is-open .u061-scrim{opacity:.92;pointer-events:auto}
.u061-view{position:fixed;z-index:71;border-radius:22px;overflow:hidden;visibility:hidden;background:#000;box-shadow:0 40px 80px -20px #000;transform-origin:0 0}
.u061.is-open .u061-view{visibility:visible}
.u061-img{position:absolute;inset:0;transform-origin:0 0;transition:transform .45s var(--ux-ease)}
.u061-img video{width:100%;height:100%;object-fit:contain;background:#000;display:block}
.u061-ui{position:fixed;z-index:72;inset:0;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.u061.is-open.is-ready .u061-ui{opacity:1;visibility:visible;transition-delay:0s}
.u061-x{position:absolute;right:16px;top:16px;width:44px;height:44px;border:0;padding:0;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);color:#fff;pointer-events:auto;transition:transform .3s var(--ux-spring)}
.u061-x:active{transform:scale(.88)}
.u061-x:focus-visible{outline:2px solid #fff;outline-offset:2px}
.u061-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.u061-cap{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);width:min(560px,calc(100vw - 32px));display:flex;align-items:center;justify-content:space-between;gap:12px;color:#fff;pointer-events:auto}
.u061-cap b{display:block;font-size:17px;font-weight:800;letter-spacing:-.03em}
.u061-cap small{font-size:12.5px;font-weight:650;opacity:.8}
.u061-cap a{flex:none}

/* #016 Star rating — chấm sao từng video, viết đánh giá */
.u016{--gold:linear-gradient(160deg,#FFD66B,#FFAA2C 60%,#FF7A45);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.u016-q{margin:0;font-size:14.5px;font-weight:650;color:var(--ux-ink-2);text-align:center}
.u016-stars{display:flex;gap:6px;border-radius:16px}
.u016-stars:focus-visible{outline:2px solid var(--ux-accent);outline-offset:6px}
.u016-s{position:relative;width:46px;height:46px;padding:0;border:0;background:none;transition:transform .35s var(--ux-spring);cursor:pointer}
.u016-s svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.u016-s .bg{fill:var(--ux-surface-3);stroke:var(--ux-line-2);stroke-width:1}
.u016-s .fg{transform-origin:50% 55%;transform:scale(0);transition:transform .4s var(--ux-spring)}
.u016-s.is-pre .fg{transform:scale(.72);opacity:.55}
.u016-s.is-on .fg{transform:scale(1);opacity:1}
.u016-s:hover{transform:scale(1.12) rotate(-6deg)}
.u016-s.is-pop{animation:u016-pop .55s var(--ux-spring)}
@keyframes u016-pop{0%{transform:scale(1)}35%{transform:scale(1.32) rotate(12deg)}100%{transform:scale(1)}}
.u016-s i{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:#FFB547;opacity:0;pointer-events:none}
.u016-s.is-pop i{animation:u016-spark .6s var(--ux-ease) forwards}
@keyframes u016-spark{0%{opacity:1;transform:rotate(var(--a)) translateY(-14px) scale(1)}100%{opacity:0;transform:rotate(var(--a)) translateY(-40px) scale(.3)}}
.u016-out{display:flex;align-items:baseline;gap:10px;height:36px}
.u016-score{font-size:30px;font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums;transition:color .4s var(--ux-ease)}
.u016-word{position:relative;height:24px;width:150px;overflow:hidden;font-size:15px;font-weight:700}
.u016-word span{position:absolute;left:0;top:0;line-height:24px;white-space:nowrap;transition:transform .5s var(--ux-spring),opacity .3s var(--ux-ease)}
.u016.sm .u016-s{width:30px;height:30px}
.u016.sm .u016-out{display:none}

/* #254 Share dialog with link access — đồng ý dùng video làm mẫu công khai */
.u254{position:relative;color:var(--ux-ink)}
.u254 h3{margin:0;font-size:17px;font-weight:900;letter-spacing:-.02em}
.u254 h5{margin:16px 0 8px;font-size:11.5px;font-weight:850;color:var(--ux-ink-3);text-transform:uppercase;letter-spacing:.05em}
.u254-pp{display:flex;align-items:center;gap:10px;min-height:36px}
.u254-pp i{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--ux-accent-ink);font-style:normal;font-size:12px;font-weight:850;background:var(--ux-grad)}
.u254-pp b{flex:1;font-size:13.5px;font-weight:800;min-width:0;overflow:hidden;text-overflow:ellipsis}
.u254-pp small{font-size:12px;font-weight:750;color:var(--ux-ink-3)}
.u254-ga{position:relative;display:flex;align-items:center;gap:10px}
.u254-ic{position:relative;flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--ux-surface-2);color:var(--ux-ink-2);transition:background .35s,color .35s}
.u254.is-pub .u254-ic{background:color-mix(in srgb,#10B981 16%,transparent);color:#34D399}
.u254-ic svg{position:absolute;width:18px;height:18px;transition:transform .45s cubic-bezier(.3,1.5,.5,1),opacity .25s}
.u254-ic .g{transform:rotate(-120deg) scale(.4);opacity:0}
.u254.is-pub .u254-ic .l{transform:rotate(120deg) scale(.4);opacity:0}
.u254.is-pub .u254-ic .g{transform:none;opacity:1}
.u254-ga>div{flex:1;min-width:0}
.u254-ac{display:inline-flex;align-items:center;gap:5px;padding:4px 7px;margin-left:-7px;border:0;border-radius:8px;background:none;color:var(--ux-ink);font-size:14px;font-weight:850;cursor:pointer}
.u254-ac:hover{background:var(--ux-surface-2)}
.u254-ac svg{width:10px;height:10px;color:var(--ux-ink-3)}
.u254-ga small{display:block;font-size:12px;font-weight:650;color:var(--ux-ink-3)}
.u254-dd{position:absolute;left:40px;top:38px;z-index:3;width:250px;padding:5px;border-radius:13px;background:var(--ux-surface-3);box-shadow:0 0 0 1px var(--ux-line-2),0 16px 32px -12px #000;transform-origin:20% 0;transform:scale(.94) translateY(-4px);opacity:0;pointer-events:none;transition:transform .2s cubic-bezier(.3,1.5,.5,1),opacity .15s}
.u254.is-dd .u254-dd{transform:none;opacity:1;pointer-events:auto}
.u254-op{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:38px;padding:0 10px;border:0;border-radius:9px;background:none;color:var(--ux-ink);font-size:13px;font-weight:750;cursor:pointer;text-align:left}
.u254-op:hover{background:var(--ux-surface-2)}
.u254-op svg{width:13px;height:13px;color:var(--ux-accent);opacity:0;flex:none}
.u254-op[aria-selected="true"] svg{opacity:1}
.u254-lk{display:flex;align-items:center;gap:6px;margin-top:16px;padding:5px 5px 5px 12px;border-radius:12px;background:var(--ux-surface-2);box-shadow:inset 0 0 0 1px var(--ux-line)}
.u254-lk code{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:12.5px;color:var(--ux-ink-2)}
.u254-lk.is-fl{animation:u254-fl .8s ease}
@keyframes u254-fl{25%{box-shadow:inset 0 0 0 2px var(--ux-accent);background:var(--ux-accent-soft)}}
.u254-cp{flex:none;display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 12px;border:0;border-radius:9px;background:var(--ux-ink);color:var(--ux-page);font-size:12.5px;font-weight:850;cursor:pointer;transition:background .3s}
.u254-cp.is-ok{background:#059669;color:#fff}
.u254-cp svg{width:12px;height:12px}
.u254 button:focus-visible{outline:2px solid var(--ux-accent);outline-offset:2px}
@media (prefers-reduced-motion: reduce){.u254-ic svg,.u254-dd{transition:none}.u254-lk.is-fl{animation:none}}

/* #088 Empty folder that swallows paper — kho video trống */
.u088{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 22px 44px;text-align:center;border-radius:30px;background:var(--ux-surface);box-shadow:0 0 0 1px var(--ux-line)}
.u088-art{position:relative;width:168px;height:138px}
.u088-fl{animation:u088-f 5s ease-in-out infinite}
@keyframes u088-f{50%{transform:translateY(-7px)}}
.u088-art svg{display:block;width:168px;height:128px;overflow:visible;transform-origin:50% 92%}
.u088-sh{position:absolute;left:34px;right:34px;bottom:0;height:10px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,#000 50%,transparent),transparent);animation:u088-s 5s ease-in-out infinite}
@keyframes u088-s{50%{transform:scaleX(.8);opacity:.6}}
.u088-front,.u088-pp{transform-box:fill-box;transform-origin:50% 100%;transition:transform .55s var(--ux-spring)}
.u088-pp.b{transition-delay:.04s}
.u088-art:hover .u088-front,.u088:has(.u088-tpl a:hover,.u088-tpl a:focus-visible) .u088-front{transform:skewX(-7deg) scaleY(.86)}
.u088-art:hover .u088-pp.a,.u088:has(.u088-tpl a:hover,.u088-tpl a:focus-visible) .u088-pp.a{transform:translateY(-10px) rotate(-5deg)}
.u088-art:hover .u088-pp.b,.u088:has(.u088-tpl a:hover,.u088-tpl a:focus-visible) .u088-pp.b{transform:translateY(-6px) rotate(4deg)}
.u088-t{margin:12px 0 0;font-size:19px;font-weight:850;letter-spacing:-.04em}
.u088-s{margin:6px 0 0;font-size:13.5px;font-weight:600;line-height:1.5;color:var(--ux-ink-3);max-width:44ch}
.u088-tpl{display:flex;gap:6px;margin-top:18px;flex-wrap:wrap;justify-content:center}
.u088-tpl a{height:40px;padding:0 12px 0 8px;border:0;border-radius:13px;display:inline-flex;align-items:center;gap:7px;background:var(--ux-surface-2);font-size:13px;font-weight:750;color:var(--ux-ink-2);text-decoration:none;transition:transform .35s var(--ux-spring),background-color .2s,color .2s}
.u088-tpl a:hover{background:var(--ux-surface-3);color:var(--ux-ink);transform:translateY(-2px)}
.u088-tpl i{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;background:var(--c);color:#fff}
.u088-tpl svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* #039 Sliding pill tabs — Lịch sử: đơn hàng, lượt cộng trừ, ví; hàng trượt vào theo hướng tab */
.u039{position:relative}
.u039-tabs{position:relative;display:inline-flex;padding:5px;border-radius:999px;background:var(--ux-surface);box-shadow:0 0 0 1px var(--ux-line);max-width:100%;overflow-x:auto;scrollbar-width:none}
.u039-pill{position:absolute;left:0;top:5px;bottom:5px;width:var(--w,80px);border-radius:999px;background:var(--ux-ink);transform:translateX(var(--x,5px));box-shadow:0 8px 16px -10px var(--ux-shadow-strong);transition:transform .5s var(--ux-spring),width .5s var(--ux-spring)}
.u039-tab{position:relative;height:42px;border:0;padding:0 20px;border-radius:999px;background:none;font-size:14px;font-weight:700;color:var(--ux-ink-2);white-space:nowrap;transition:color .35s var(--ux-ease)}
.u039-tab[aria-selected="true"]{color:var(--ux-page)}
.u039-tab:focus-visible{outline:2px solid var(--ux-accent);outline-offset:2px}
.u039-panel{position:relative;margin-top:14px;overflow:hidden;border-radius:22px;min-height:120px}
.u039-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.u039-list.old{position:absolute;inset:0}
.u039-row{display:flex;align-items:center;gap:12px;padding:10px 12px 10px 10px;border-radius:18px;background:var(--ux-surface);box-shadow:0 0 0 1px var(--ux-line);transition:transform .55s var(--ux-spring),opacity .35s var(--ux-ease)}
.u039-art{position:relative;width:46px;height:46px;flex:none;border-radius:14px;background:var(--g,var(--ux-grad));overflow:hidden;display:grid;place-items:center;color:#fff;font-weight:900;font-size:15px}
.u039-art::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.35),transparent 55%)}
.u039-row .tx{flex:1;min-width:0}
.u039-row b{display:block;font-size:14.5px;font-weight:750;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u039-row small{display:flex;align-items:center;gap:6px;margin-top:3px;font-size:12.5px;color:var(--ux-ink-3);flex-wrap:wrap}
.u039-row em{margin-left:auto;font-style:normal;font-size:14px;font-weight:800;color:var(--ux-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.u039-row em.plus{color:var(--ok)}
.u039-row .acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.u039-row.click{cursor:pointer}
.u039-row.click:hover{box-shadow:0 0 0 1px var(--ux-line-2)}

/* #200 Folding receipt — biên nhận giấy gấp lại, mở ra xem chi tiết đơn */
.u200-wrap{padding:6px 0 4px}
.u200 .receipt{max-width:340px;margin:auto;background:#f4edda;color:#3d3c31;padding:24px 24px 32px;position:relative;filter:drop-shadow(0 9px 9px #0006);clip-path:polygon(0 0,100% 0,100% 97%,95% 100%,90% 97%,85% 100%,80% 97%,75% 100%,70% 97%,65% 100%,60% 97%,55% 100%,50% 97%,45% 100%,40% 97%,35% 100%,30% 97%,25% 100%,20% 97%,15% 100%,10% 97%,5% 100%,0 97%)}
.u200 .receipt h3{font:italic 26px/1.1 Georgia,serif;text-align:center;margin:0 0 6px}
.u200 .receipt .meta{text-align:center;font:10.5px ui-monospace,Consolas,monospace;letter-spacing:1px;color:#5d5b4f;padding-bottom:12px;border-bottom:1px dashed #969383}
.u200 .total{display:flex;align-items:center;justify-content:center;margin:14px 0 16px}
.u200 .total strong{font:32px Georgia,serif;letter-spacing:-1px}
.u200 .fold{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.22,1,.36,1)}
.u200 .fold-inner{overflow:hidden;min-height:0}
.u200 .receipt.expanded .fold{grid-template-rows:1fr}
.u200 .line{display:flex;justify-content:space-between;font:11.5px/1.6 ui-monospace,Consolas,monospace;margin:7px 0;gap:10px}
.u200 .line span:last-child{text-align:right}
.u200 .line.sub{border-top:1px dashed #a09b88;padding-top:8px}
.u200 .expand{width:100%;background:transparent;border:0;border-top:1px dashed #999580;border-bottom:1px dashed #999580;color:#514d3f;border-radius:0;font:11px ui-monospace,Consolas,monospace;min-height:34px;margin:0;padding:8px 0;cursor:pointer}
.u200 .acts{display:flex;gap:8px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.u200 .acts a,.u200 .acts button{font:12px ui-monospace,Consolas,monospace;color:#3d3c31;background:transparent;border:1px solid #a09b88;border-radius:8px;padding:7px 10px;text-decoration:none;cursor:pointer}
.u200 .acts a:hover,.u200 .acts button:hover{background:#e9e0c6}
.u200 .footer{text-align:center;margin-top:12px;font:9.5px ui-monospace,Consolas,monospace;letter-spacing:2px;color:#6d6a5c}
.u200 :focus-visible{outline:2px solid #C2410C;outline-offset:3px}

/* #271 Filterable changelog — Có gì mới: dòng thời gian, lọc theo thời gian */
.u271{position:relative;border-radius:30px;background:var(--ux-surface);box-shadow:0 0 0 1px var(--ux-line),0 30px 60px -36px var(--ux-shadow-strong);color:var(--ux-ink);padding:22px 20px 18px}
.u271-cs{position:relative;display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--ux-surface-2);box-shadow:inset 0 0 0 1px var(--ux-line)}
.u271-pl{position:absolute;top:3px;bottom:3px;left:3px;width:var(--w,80px);border-radius:999px;background:var(--ux-surface-3);box-shadow:0 2px 6px -2px #000,0 0 0 1px var(--ux-line-2);transform:translateX(var(--x,0));transition:transform .4s cubic-bezier(.3,1.3,.5,1),width .4s cubic-bezier(.3,1.3,.5,1)}
.u271-ch{position:relative;height:32px;padding:0 14px;border:0;border-radius:999px;background:none;color:var(--ux-ink-3);font-size:12.5px;font-weight:800;cursor:pointer;white-space:nowrap;transition:color .25s;display:inline-flex;align-items:center;justify-content:center;gap:5px}
.u271-ch.is-on{color:var(--ux-ink)}
.u271-ch:focus-visible{outline:2px solid var(--ux-accent);outline-offset:1px}
.u271-ch i{font-style:normal;font-size:10.5px;font-weight:850;color:var(--ux-ink-3);font-variant-numeric:tabular-nums}
.u271-tl{position:relative;margin-top:16px}
.u271-tl::before{content:"";position:absolute;left:15px;top:12px;bottom:6px;width:2px;border-radius:1px;background:var(--ux-line)}
.u271-en{display:grid;grid-template-rows:1fr;opacity:1;transition:grid-template-rows .45s cubic-bezier(.3,.8,.3,1),opacity .3s,transform .45s cubic-bezier(.3,.8,.3,1)}
.u271-en.is-off{grid-template-rows:0fr;opacity:0;transform:translateX(10px)}
.u271-en>div{min-height:0;overflow:hidden}
.u271-in{position:relative;padding:6px 0 14px 36px}
.u271-dt{position:absolute;left:10px;top:10px;width:12px;height:12px;border-radius:50%;background:var(--ux-surface);box-shadow:inset 0 0 0 2px var(--c)}
.u271-dt.is-new{background:var(--c)}
.u271-dt.is-new::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--c);animation:u271-p 1.8s ease-out infinite}
@keyframes u271-p{from{transform:scale(.6);opacity:.9}to{transform:scale(1.5);opacity:0}}
.u271-mt{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:var(--ux-ink-3)}
.u271-tg{padding:2px 8px;border-radius:999px;background:color-mix(in srgb,var(--c) 16%,transparent);color:var(--c);font-size:11px;font-weight:850}
.u271-nw{padding:2px 7px;border-radius:5px;background:var(--ux-ink);color:var(--ux-page);font-size:10.5px;font-weight:850}
.u271-in h4{margin:6px 0 0;font-size:16px;font-weight:850;letter-spacing:-.02em;line-height:1.35}
.u271-in p{margin:5px 0 0;font-size:13.5px;line-height:1.6;font-weight:500;color:var(--ux-ink-2);white-space:pre-wrap;max-width:70ch}
@media (prefers-reduced-motion: reduce){.u271-en,.u271-pl{transition:none}.u271-dt.is-new::after{animation:none}}

/* #285 Team invites through to acceptance — Nhóm: mời nhân viên dùng chung lượt */
.u285{position:relative;border-radius:30px;background:var(--ux-surface);box-shadow:0 0 0 1px var(--ux-line),0 30px 60px -36px var(--ux-shadow-strong);color:var(--ux-ink);padding:20px 16px 12px}
.u285-hd{display:flex;align-items:center;gap:8px;padding:0 6px;font-size:18px;font-weight:900;letter-spacing:-.03em}
.u285-hd span{padding:2px 9px;border-radius:999px;background:var(--ux-surface-2);font-size:12px;font-weight:850;color:var(--ux-ink-2);font-variant-numeric:tabular-nums}
.u285-hd small{margin-left:auto;font-size:12px;font-weight:650;color:var(--ux-ink-3);letter-spacing:0}
.u285-fm{display:flex;gap:5px;margin-top:14px;padding:5px;border-radius:15px;background:var(--ux-surface-2);box-shadow:inset 0 0 0 1px var(--ux-line);transition:box-shadow .2s}
.u285-fm:focus-within{box-shadow:inset 0 0 0 2px var(--ux-accent)}
.u285-in{flex:1;min-width:0;height:40px;padding:0 10px;border:0;background:none;color:var(--ux-ink);font-size:14px;font-weight:650;outline:none}
.u285-in::placeholder{color:var(--ux-ink-3);font-weight:550}
.u285-go{flex:none;height:40px;padding:0 16px;border:0;border-radius:11px;background:var(--ux-ink);color:var(--ux-page);font-size:13px;font-weight:850;cursor:pointer;transition:opacity .2s}
.u285-go:disabled{opacity:.3;cursor:not-allowed}
.u285-ls{margin:8px 0 0;padding:0;list-style:none}
.u285-it{display:grid;grid-template-rows:1fr;transition:grid-template-rows .45s cubic-bezier(.3,1,.4,1),opacity .3s}
.u285-it>div{min-height:0;overflow:hidden}
.u285-it.is-new{grid-template-rows:0fr;opacity:0}
.u285-it.is-gone{grid-template-rows:0fr;opacity:0}
.u285-rw{display:flex;align-items:center;gap:10px;min-height:58px;padding:6px;border-bottom:1px solid var(--ux-line)}
.u285-it:last-child .u285-rw{border-bottom:0}
.u285-av{position:relative;flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--ux-accent-ink);font-size:14px;font-weight:850;background:var(--ux-surface-3);overflow:hidden}
.u285-av::before{content:"";position:absolute;inset:0;background:var(--c);transform:scale(var(--k,1));border-radius:50%;transition:transform .6s cubic-bezier(.3,1.4,.5,1)}
.u285-av span{position:relative}
.u285-tx{flex:1;min-width:0}
.u285-tx b{display:block;font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u285-tx small{display:block;font-size:12px;font-weight:600;color:var(--ux-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u285-st{flex:none;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:850}
.u285-st.pd{background:color-mix(in srgb,#F59E0B 16%,transparent);color:#FBBF24;animation:u285-bl 1.1s ease-in-out infinite}
.u285-st.ok{background:color-mix(in srgb,#10B981 16%,transparent);color:#34D399;animation:u285-pop .45s cubic-bezier(.3,1.7,.5,1)}
.u285-st.own{background:var(--osoft);color:var(--o2)}
@keyframes u285-bl{50%{opacity:.45}}
@keyframes u285-pop{from{transform:scale(.4)}}
.u285-rb{flex:none;height:30px;padding:0 10px;border:0;border-radius:9px;background:var(--ux-surface-2);color:var(--ux-ink-2);font-size:12px;font-weight:800;cursor:pointer}
.u285-rb:hover{color:var(--ux-ink)}
.u285 button:focus-visible{outline:2px solid var(--ux-accent);outline-offset:2px}
@media (prefers-reduced-motion: reduce){.u285-it,.u285-av::before{transition:none}.u285-st.pd,.u285-st.ok{animation:none}}

/* #044 FAQ accordion — câu hỏi thường gặp */
.u044{position:relative;display:flex;flex-direction:column;gap:8px}
.u044-it{position:relative;border-radius:20px;background:var(--ux-surface);box-shadow:0 0 0 1px var(--ux-line);transition:background-color .4s var(--ux-ease),box-shadow .5s var(--ux-ease),transform .5s var(--ux-spring)}
.u044-it.open{box-shadow:0 0 0 1px var(--ux-line-2),0 22px 40px -22px var(--ux-shadow-strong);transform:translateY(-2px)}
.u044-q{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:58px;padding:10px 14px 10px 16px;border:0;border-radius:20px;background:none;font-size:14.5px;font-weight:680;letter-spacing:-.02em;color:var(--ux-ink);text-align:left}
.u044-q:focus-visible{outline:2px solid var(--ux-accent);outline-offset:2px}
.u044-n{font-size:12px;font-weight:800;color:var(--ux-ink-3);font-variant-numeric:tabular-nums;transition:color .3s}
.u044-it.open .u044-n{color:var(--ux-accent)}
.u044-t{flex:1}
.u044-pm{position:relative;width:30px;height:30px;flex:none;border-radius:50%;background:var(--ux-surface-2);transition:background-color .35s var(--ux-ease),transform .45s var(--ux-spring)}
.u044-q:hover .u044-pm{transform:scale(1.1)}
.u044-q:active .u044-pm{transform:scale(.9)}
.u044-pm::before,.u044-pm::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:2px;margin:-1px 0 0 -5.5px;border-radius:2px;background:var(--ux-ink);transition:transform .5s var(--ux-spring),background-color .3s}
.u044-pm::after{transform:rotate(90deg)}
.u044-it.open .u044-pm{background:var(--ux-ink)}
.u044-it.open .u044-pm::before,.u044-it.open .u044-pm::after{background:var(--ux-page)}
.u044-it.open .u044-pm::after{transform:rotate(180deg)}
.u044-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ux-ease)}
.u044-it.open .u044-body{grid-template-rows:1fr}
.u044-body>div{overflow:hidden;min-height:0}
.u044-a{padding:0 18px 16px 42px;opacity:0;transform:translateY(-8px);transition:opacity .25s var(--ux-ease),transform .45s var(--ux-spring)}
.u044-it.open .u044-a{opacity:1;transform:none;transition-delay:.12s}
.u044-a p{margin:0;font-size:13.5px;line-height:1.62;color:var(--ux-ink-2);white-space:pre-wrap}

/* #028 Auto-growing reply box — ô viết yêu cầu hỗ trợ, trả lời nhân viên */
.u028{position:relative}
.u028-thread{display:flex;flex-direction:column;gap:10px;max-height:46vh;overflow-y:auto;margin-bottom:14px;padding-right:4px}
.u028-msg{display:flex;gap:10px}
.u028-msg.me{flex-direction:row-reverse}
.u028-av{width:34px;height:34px;flex:none;border-radius:50%;background:var(--ux-grad);display:grid;place-items:center;font-size:12px;font-weight:900;color:var(--ux-accent-ink)}
.u028-msg.me .u028-av{background:var(--ux-surface-3);color:var(--ux-ink)}
.u028-bub{margin:0;padding:10px 14px;border-radius:4px 16px 16px 16px;background:var(--ux-surface-2);box-shadow:0 0 0 1px var(--ux-line);font-size:14px;line-height:1.55;color:var(--ux-ink-2);white-space:pre-wrap;max-width:78%}
.u028-msg.me .u028-bub{border-radius:16px 4px 16px 16px;background:color-mix(in srgb,var(--ux-accent) 14%,var(--ux-surface))}
.u028-bub b{display:block;font-size:12px;color:var(--ux-ink);margin-bottom:2px}
.u028-box{position:relative;padding:14px 14px 12px 16px;border-radius:22px;background:var(--ux-surface-2);box-shadow:0 0 0 1.5px var(--ux-line-2);transition:box-shadow .3s var(--ux-ease)}
.u028-box:focus-within{box-shadow:0 0 0 2px var(--ux-accent),0 0 0 6px var(--ux-accent-soft)}
.u028-sub{display:block;width:100%;height:30px;padding:0;margin-bottom:6px;border:0;border-bottom:1px solid var(--ux-line);outline:0;background:none;font-size:15px;font-weight:750;color:var(--ux-ink)}
.u028-ta{display:block;width:100%;height:24px;min-height:24px;max-height:168px;padding:0;border:0;outline:0;resize:none;background:none;font-size:15px;line-height:24px;color:var(--ux-ink);overflow:hidden;transition:height .25s var(--ux-ease)}
.u028-ta::placeholder,.u028-sub::placeholder{color:var(--ux-ink-3)}
.u028-foot{display:flex;align-items:center;gap:10px;margin-top:12px}
.u028-foot .hint{font-size:12px;color:var(--ux-ink-3)}
.u028-ring{position:relative;width:30px;height:30px;margin-left:auto;flex:none;transition:transform .45s var(--ux-spring)}
.u028-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.u028-ring circle{fill:none;stroke-width:3}
.u028-ring .bg{stroke:var(--ux-surface-3)}
.u028-ring .fg{stroke:var(--ux-accent);stroke-linecap:round;stroke-dasharray:75.4;stroke-dashoffset:calc(75.4 * (1 - var(--p,0)));transition:stroke-dashoffset .3s var(--ux-ease),stroke .3s var(--ux-ease)}
.u028-left{position:absolute;inset:0;display:grid;place-items:center;font-size:10px;font-weight:800;font-variant-numeric:tabular-nums;opacity:0;transition:opacity .2s}
.u028.is-near .u028-ring{transform:scale(1.25)}
.u028.is-near .u028-ring .fg{stroke:var(--ux-warn)}
.u028.is-near .u028-left{opacity:1;color:var(--ux-warn)}
.u028.is-over .u028-ring .fg{stroke:var(--ux-danger)}
.u028.is-over .u028-left{color:var(--ux-danger)}
.u028-send{height:40px;padding:0 18px;border:0;border-radius:12px;background:var(--ux-ink);color:var(--ux-page);font-size:14px;font-weight:750;transition:opacity .25s var(--ux-ease),transform .4s var(--ux-spring)}
.u028-send:active{transform:scale(.94)}
.u028-send:focus-visible{outline:2px solid var(--ux-accent);outline-offset:2px}
.u028-send[aria-disabled="true"]{opacity:.3;cursor:not-allowed}
.u028-sep{width:1px;height:20px;background:var(--ux-line-2)}
.u028-ta:focus-visible,.u028-sub:focus-visible{outline:none}

/* #036 Password strength meter — đổi mật khẩu, tạo tài khoản */
.u036{--lv:var(--ux-line-2);position:relative;display:flex;flex-direction:column}
.u036-lab{display:block;margin:0 4px 8px;font-size:13px;font-weight:700;color:var(--ux-ink-3)}
.u036-box{position:relative;display:flex;align-items:center;height:56px;padding:0 6px 0 16px;border-radius:16px;background:var(--ux-surface-2);box-shadow:0 0 0 1.5px var(--ux-line-2);transition:box-shadow .25s}
.u036-box:focus-within{box-shadow:0 0 0 2px var(--lv),0 0 0 6px color-mix(in srgb,var(--lv) 18%,transparent)}
.u036-in{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;font-size:16px;font-weight:650;letter-spacing:.03em;color:var(--ux-ink)}
.u036-in:focus-visible{outline:none}
.u036-eye{width:44px;height:44px;flex:none;border:0;padding:0;border-radius:13px;background:none;color:var(--ux-ink-2);display:grid;place-items:center;transition:background-color .2s}
.u036-eye:hover{background:var(--ux-surface)}
.u036-eye:focus-visible{outline:2px solid var(--ux-accent);outline-offset:1px}
.u036-eye svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.u036-lid{transform-origin:12px 12px;transition:transform .4s var(--ux-spring)}
.u036-pupil{transform-origin:12px 12px;transition:transform .35s var(--ux-spring) .05s}
.u036-slash{stroke-dasharray:24;stroke-dashoffset:0;transition:stroke-dashoffset .35s var(--ux-ease)}
.u036.is-show .u036-slash{stroke-dashoffset:24}
.u036:not(.is-show) .u036-pupil{transform:scale(0)}
.u036:not(.is-show) .u036-lid{transform:scaleY(.45)}
.u036-meter{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:14px 4px 0}
.u036-meter i{height:7px;border-radius:4px;background:var(--ux-surface-3);overflow:hidden;position:relative}
.u036-meter i::after{content:"";position:absolute;inset:0;background:var(--lv);transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--ux-ease),background-color .4s}
.u036-meter i.on::after{transform:none}
.u036-meter i:nth-child(2)::after{transition-delay:.05s}
.u036-meter i:nth-child(3)::after{transition-delay:.1s}
.u036-meter i:nth-child(4)::after{transition-delay:.15s}
.u036-lv{display:flex;justify-content:space-between;margin:8px 4px 0;font-size:12.5px;font-weight:650;color:var(--ux-ink-3)}
.u036-lv b{color:var(--lv);transition:color .4s}
.u036-rules{margin:14px 0 0;padding:14px;list-style:none;border-radius:16px;background:var(--ux-surface-2);display:grid;grid-template-columns:1fr 1fr;gap:10px}
.u036-r{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:var(--ux-ink-3);transition:color .3s}
.u036-r i{position:relative;width:20px;height:20px;flex:none;border-radius:50%;box-shadow:inset 0 0 0 1.8px var(--ux-line-2);transition:box-shadow .3s,background-color .3s}
.u036-r svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--ux-accent-ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.u036-r path{stroke-dasharray:14;stroke-dashoffset:14;transition:stroke-dashoffset .3s var(--ux-ease) .1s}
.u036-r.ok{color:var(--ux-ink)}
.u036-r.ok i{background:var(--ux-mint);box-shadow:none;animation:u036-pop .4s var(--ux-spring)}
.u036-r.ok path{stroke-dashoffset:0}
@keyframes u036-pop{from{transform:scale(.4)}}
.u036.sm .u036-rules{display:none}
@media(max-width:420px){.u036-rules{grid-template-columns:1fr}}

/* #269 Type-the-name delete confirmation — xóa tài khoản: gõ đúng email mới bật nút */
.u269-dg{padding:16px;border-radius:18px;box-shadow:inset 0 0 0 1px color-mix(in srgb,#E11D48 40%,transparent);background:color-mix(in srgb,#E11D48 6%,transparent)}
.u269-dg b{display:block;font-size:14px;font-weight:850;color:#FB7185}
.u269-dg div{display:flex;align-items:center;gap:12px;margin-top:6px;flex-wrap:wrap}
.u269-dg span{flex:1;min-width:200px;font-size:13px;line-height:1.5;font-weight:550;color:var(--ux-ink-2)}
.u269-dz{height:40px;padding:0 16px;border:0;border-radius:11px;background:#E11D48;color:#fff;font-size:13px;font-weight:850;cursor:pointer}
.u269-dim{position:fixed;inset:0;z-index:80;background:rgba(5,4,3,.6);opacity:0;pointer-events:none;transition:opacity .3s}
.u269.is-m .u269-dim{opacity:1;pointer-events:auto}
.u269-md{position:fixed;z-index:81;left:50%;top:50%;width:min(440px,calc(100vw - 32px));padding:22px;border-radius:22px;background:var(--ux-surface);box-shadow:0 0 0 1px var(--ux-line-2),0 30px 60px -20px #000;transform:translate(-50%,-46%) scale(.96);opacity:0;pointer-events:none;transition:transform .35s cubic-bezier(.3,1.3,.5,1),opacity .2s}
.u269.is-m .u269-md{transform:translate(-50%,-50%);opacity:1;pointer-events:auto}
.u269-md h3{display:flex;align-items:center;gap:8px;margin:0;font-size:17px;font-weight:900}
.u269-md h3 i{width:26px;height:26px;border-radius:8px;background:color-mix(in srgb,#E11D48 18%,transparent);color:#FB7185;display:grid;place-items:center;font-style:normal;font-size:14px;font-weight:900}
.u269-md p{margin:8px 0 0;font-size:13px;line-height:1.55;font-weight:550;color:var(--ux-ink-2)}
.u269-nm{display:inline-flex;flex-wrap:wrap;margin-top:12px;padding:6px 10px;border-radius:8px;background:var(--ux-surface-2);font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:13.5px;font-weight:800;color:var(--ux-ink-3);max-width:100%}
.u269-nm span{transition:color .15s}
.u269-nm span.is-ok{color:#FB7185}
.u269-in{display:block;width:100%;height:44px;margin-top:8px;padding:0 12px;border:0;border-radius:11px;background:var(--ux-surface-2);box-shadow:inset 0 0 0 1.5px var(--ux-line);color:var(--ux-ink);font-size:14px;font-weight:650;outline:none}
.u269-in.mono{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace}
.u269-in:focus{box-shadow:inset 0 0 0 2px #E11D48}
.u269-in.is-shake{animation:u269-sh .35s}
@keyframes u269-sh{25%,75%{transform:translateX(-4px)}50%{transform:translateX(4px)}}
.u269-bs{display:flex;gap:8px;margin-top:16px}
.u269-bs button{flex:1;height:44px;border:0;border-radius:12px;font-size:13.5px;font-weight:850;cursor:pointer}
.u269-cx{background:var(--ux-surface-2);color:var(--ux-ink-2)}
.u269-go{background:#E11D48;color:#fff;transition:opacity .2s}
.u269-go:disabled{opacity:.3;cursor:not-allowed}
.u269 button:focus-visible{outline:2px solid var(--ux-accent);outline-offset:2px}
@media (prefers-reduced-motion: reduce){.u269-md,.u269-dim{transition:none}.u269-in.is-shake{animation:none}}

/* #004 Progress download button — tải toàn bộ dữ liệu của tôi (Nghị định 13/2023) */
.u004{--bar:linear-gradient(90deg,#EA580C,#F97316 60%,#FBBF24);position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.u004-btn{--p:0;position:relative;width:268px;max-width:100%;height:60px;border:0;padding:0;border-radius:999px;background:var(--ux-ink);color:var(--ux-page);overflow:hidden;isolation:isolate;box-shadow:0 22px 36px -22px var(--ux-shadow-strong);transition:width .6s var(--ux-ease),transform .5s var(--ux-spring),background-color .5s var(--ux-ease)}
.u004-btn:hover{transform:translateY(-2px)}
.u004-btn:active{transform:scale(.97)}
.u004-btn:focus-visible{outline:2px solid var(--ux-accent);outline-offset:4px}
.u004-idle,.u004-run,.u004-ok{position:absolute;inset:0;display:flex;align-items:center;transition:opacity .35s var(--ux-ease),transform .5s var(--ux-ease)}
.u004-idle{gap:14px;padding:0 22px 0 7px}
.u004-arw{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--ux-page) 14%,transparent);overflow:hidden}
.u004-arw svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.u004-arw .u004-a{transition:transform .5s var(--ux-ease)}
.u004-btn:hover .u004-arw .u004-a{animation:u004-bob 1s var(--ux-ease) infinite}
@keyframes u004-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
.u004-idle b{font-size:16px;font-weight:750;letter-spacing:-.02em}
.u004-idle small{margin-left:auto;font-size:12.5px;font-weight:600;opacity:.55}
.u004-track{position:absolute;inset:0;background:#2A211C;opacity:0;transition:opacity .4s var(--ux-ease)}
.u004-bar{position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--bar);transform-origin:0 50%;transform:scaleX(var(--p));border-radius:inherit}
.u004-bar::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);background-size:220% 100%;animation:u004-shine 1.3s linear infinite}
@keyframes u004-shine{from{background-position:120% 0}to{background-position:-100% 0}}
.u004-run{justify-content:space-between;padding:0 24px;opacity:0;transform:translateY(12px);color:#fff}
.u004-run b{font-size:18px;font-weight:760;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.u004-run small{font-size:12.5px;font-weight:600;opacity:.85}
.u004-ok{justify-content:center;gap:10px;opacity:0;transform:scale(.6);color:var(--ux-accent-ink)}
.u004-ok i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,currentColor 18%,transparent)}
.u004-ok svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.u004-ok path{stroke-dasharray:18;stroke-dashoffset:18;transition:stroke-dashoffset .45s var(--ux-ease) .25s}
.u004-ok span{font-size:15px;font-weight:750;white-space:nowrap;max-width:0;overflow:hidden;opacity:0;transition:max-width .6s var(--ux-ease),opacity .4s var(--ux-ease)}
.u004[data-state="run"] .u004-idle{opacity:0;transform:translateY(-12px)}
.u004[data-state="run"] .u004-arw .u004-a{transform:translateY(26px)}
.u004[data-state="run"] .u004-track{opacity:1}
.u004[data-state="run"] .u004-run{opacity:1;transform:none}
.u004[data-state="fold"] .u004-idle,.u004[data-state="done"] .u004-idle{opacity:0}
.u004[data-state="fold"] .u004-btn{width:60px;background:var(--ux-mint)}
.u004[data-state="fold"] .u004-bar{opacity:0}
.u004[data-state="fold"] .u004-ok,.u004[data-state="done"] .u004-ok{opacity:1;transform:none}
.u004[data-state="fold"] .u004-ok path,.u004[data-state="done"] .u004-ok path{stroke-dashoffset:0}
.u004[data-state="done"] .u004-btn{background:var(--ux-mint);transition-timing-function:var(--ux-spring)}
.u004[data-state="done"] .u004-ok span{max-width:220px;opacity:1}
/* @end */

/* ---------- Tổng quan: lời chào, lối tắt (đồng bộ với trang ngoài: nền đen, quầng cam) ---------- */
.ac-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:30px;align-items:center;padding:28px 30px;border-radius:30px;overflow:hidden;isolation:isolate;
  background:radial-gradient(90% 140% at 100% 0%,rgba(249,115,22,.2),transparent 55%),radial-gradient(70% 120% at 0% 110%,rgba(251,191,36,.07),transparent 60%),var(--ux-surface);
  box-shadow:0 0 0 1px var(--ux-line),inset 0 1px 0 rgba(255,255,255,.06),0 40px 80px -50px rgba(0,0,0,.8)}
.ac-eye{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ux-accent-2)}
.ac-eye::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ux-accent);box-shadow:0 0 0 4px rgba(249,115,22,.18)}
.ac-name{font-size:clamp(28px,3.2vw,40px);font-weight:850;letter-spacing:-.045em;line-height:1.08;margin-top:8px;overflow-wrap:anywhere}
.ac-line{color:var(--ux-ink-2);font-size:15px;margin-top:8px}
.ac-line b{color:var(--ux-ink);font-weight:800}
.ac-quick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:22px}
.ac-q{display:flex;flex-direction:column;gap:3px;min-width:0;padding:14px 14px 15px;border-radius:18px;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px var(--ux-line);color:var(--ux-ink);text-decoration:none;transition:transform .4s var(--ux-spring),background-color .2s,box-shadow .2s}
.ac-q:hover{transform:translateY(-3px);background:rgba(249,115,22,.08);box-shadow:inset 0 0 0 1px rgba(249,115,22,.4)}
.ac-q:active{transform:scale(.97)}
.ac-q i{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--ux-accent-soft);color:var(--ux-accent-2);margin-bottom:8px;transition:transform .4s var(--ux-spring)}
.ac-q:hover i{transform:rotate(-8deg) scale(1.06)}
.ac-q svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ac-q b{font-size:14px;font-weight:800;letter-spacing:-.01em}
.ac-q small{font-size:12px;color:var(--ux-ink-2);line-height:1.4}
.ac-g-rec{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}

/* #052 Membership card — thẻ thành viên: mặt trước lượt còn và hạn gói, mặt sau mã giới thiệu và quyền lợi; màu theo gói */
.u052{--ry:0deg;--tilt:0deg;--sh:50%;position:relative;width:340px;max-width:100%;display:flex;flex-direction:column;align-items:center;gap:18px;padding-top:4px;perspective:1100px}
.u052-card{position:relative;width:320px;max-width:100%;aspect-ratio:320/202;border:0;padding:0;background:none;border-radius:20px;transform-style:preserve-3d;transform:rotateX(var(--tilt)) rotateY(var(--ry));transition:transform .75s var(--ux-spring);cursor:grab;touch-action:pan-y;color:#fff;text-align:left}
.u052-card.drag{transition:none;cursor:grabbing}
.u052-card:focus-visible{outline:none}
.u052-card:focus-visible .u052-f{box-shadow:0 0 0 3px var(--ux-accent),0 26px 40px -24px rgba(0,0,0,.8)}
.u052-f{position:absolute;inset:0;border-radius:20px;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;box-shadow:0 30px 50px -24px rgba(0,0,0,.85),inset 0 0 0 1px rgba(255,255,255,.14);transition:filter .6s}
.u052-front{background:var(--mg)}
.u052{--mg:linear-gradient(135deg,#7C2D12,#EA580C 38%,#F97316 66%,#FBBF24)}
.u052[data-t="free"]{--mg:linear-gradient(135deg,#1C1917,#44403C 45%,#78716C 80%,#A8A29E)}
.u052[data-t="pro"]{--mg:linear-gradient(135deg,#3B0716,#9F1239 36%,#EA580C 72%,#FBBF24)}
.u052-front::before{content:"";position:absolute;inset:-40%;background:linear-gradient(115deg,transparent 35%,rgba(255,220,170,.42) 45%,rgba(255,255,255,.38) 52%,rgba(255,190,140,.34) 58%,transparent 68%);transform:translateX(calc(var(--sh) - 50%));mix-blend-mode:screen;transition:transform .75s var(--ux-spring)}
.u052-card.drag .u052-front::before{transition:none}
.u052-front::after{content:"";position:absolute;width:260px;height:260px;right:-90px;bottom:-140px;border-radius:50%;border:30px solid rgba(255,255,255,.08)}
.u052-chip{position:absolute;left:22px;top:62px;width:42px;height:32px;border-radius:7px;background:linear-gradient(135deg,#F7E3A6,#C9A34E);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.u052-chip::before{content:"";position:absolute;inset:7px 0;border-top:1px solid rgba(0,0,0,.2);border-bottom:1px solid rgba(0,0,0,.2)}
.u052-brand{position:absolute;left:22px;top:20px;font-size:15px;font-weight:800;letter-spacing:-.02em}
.u052-tier{position:absolute;right:20px;top:20px;height:24px;padding:0 9px;border-radius:999px;display:inline-flex;align-items:center;background:rgba(255,255,255,.2);font-size:11px;font-weight:800;letter-spacing:.08em}
.u052-num{position:absolute;left:22px;bottom:42px;font-size:13px;font-weight:700;letter-spacing:.02em;font-variant-numeric:tabular-nums;opacity:.92}
.u052-num b{font-size:30px;font-weight:850;letter-spacing:-.03em;margin-right:4px;opacity:1}
.u052-name{position:absolute;left:22px;bottom:18px;font-size:11.5px;font-weight:700;letter-spacing:.1em;opacity:.82;max-width:60%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u052-exp{position:absolute;right:20px;bottom:18px;font-size:11.5px;font-weight:700;opacity:.82;font-variant-numeric:tabular-nums}
.u052-back{transform:rotateY(180deg);background:linear-gradient(160deg,#1C1410,#2A1A10)}
.u052-strip{position:absolute;left:0;right:0;top:22px;height:38px;background:#0B0806}
.u052-cvc{position:absolute;left:22px;right:22px;top:76px;display:flex;align-items:center;gap:10px}
.u052-cvc i{flex:1;height:30px;border-radius:5px;background:repeating-linear-gradient(-45deg,#F6EDE4 0 6px,#E9DACB 6px 12px)}
.u052-cvc b{height:30px;padding:0 10px;border-radius:5px;display:grid;place-items:center;background:#fff;color:#16151B;font-size:13px;font-weight:800;letter-spacing:.12em}
.u052-perk{position:absolute;left:22px;right:22px;bottom:16px;display:flex;gap:6px}
.u052-perk span{flex:1;min-width:0;padding:7px 8px;border-radius:10px;background:rgba(255,255,255,.08);font-size:10.5px;font-weight:650;line-height:1.35;color:rgba(255,255,255,.7)}
.u052-perk b{display:block;font-size:13px;color:#fff}
.u052-lock{position:absolute;inset:0;display:grid;place-items:center;background:rgba(10,10,20,.35);opacity:0;transition:opacity .5s}
.u052-lock svg{width:44px;height:44px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transform:scale(.6);transition:transform .6s var(--ux-spring)}
.u052.is-locked .u052-f{filter:grayscale(1) brightness(.85)}
.u052.is-locked .u052-lock{opacity:1}
.u052.is-locked .u052-lock svg{transform:none}
.u052-bar{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.u052-b{height:44px;padding:0 16px;border:0;border-radius:999px;display:inline-flex;align-items:center;gap:7px;background:var(--ux-surface-2);box-shadow:0 0 0 1px var(--ux-line-2);color:var(--ux-ink);font-size:13.5px;font-weight:700;transition:transform .35s var(--ux-spring),background-color .3s,color .3s}
.u052-b:active{transform:scale(.94)}
.u052-b:focus-visible{outline:2px solid var(--ux-accent);outline-offset:2px}
.u052-b svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.u052-b.u052-lk{background:var(--ux-grad);color:var(--ux-accent-ink);box-shadow:none}

/* #366 Hover-scrub video previews — video gần đây: khung dọc, rê ngang để tua */
.u366-hd{font-size:18px;font-weight:800;letter-spacing:-.025em}
.u366-ls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:16px}
.u366-it{display:flex;flex-direction:column;gap:9px;min-width:0}
.u366-th{position:relative;width:100%;aspect-ratio:9/14;border-radius:14px;overflow:hidden;background:#000;cursor:ew-resize;touch-action:pan-y;outline:none;box-shadow:0 0 0 1px var(--ux-line);transition:transform .4s var(--ux-spring),box-shadow .2s}
.u366-th:hover{transform:translateY(-3px);box-shadow:0 0 0 1px rgba(249,115,22,.5),0 20px 30px -20px rgba(0,0,0,.8)}
.u366-th:focus-visible{box-shadow:0 0 0 3px var(--ux-accent)}
.u366-th video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.u366-du{position:absolute;right:6px;bottom:8px;padding:1px 5px;border-radius:4px;background:rgba(0,0,0,.7);color:#fff;font:700 10px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;transition:opacity .2s}
.u366-du:empty{display:none}
.u366-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.3);opacity:0;transition:opacity .2s}
.u366-bar i{display:block;height:100%;width:0;background:var(--ux-accent)}
.u366-tip{position:absolute;top:6px;left:0;padding:2px 6px;border-radius:5px;background:rgba(0,0,0,.75);color:#fff;font:700 10px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;transform:translateX(-50%);opacity:0;transition:opacity .15s;pointer-events:none}
.u366-th.is-on .u366-bar,.u366-th.is-on .u366-tip{opacity:1}
.u366-th.is-on .u366-du{opacity:0}
.u366-tx b{display:block;font-size:13px;font-weight:800;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u366-tx span{display:block;margin-top:3px;font-size:11px;font-weight:600;color:var(--ux-ink-3)}

/* #151 Contribution grid — hoạt động 12 tuần: ô cam đậm dần theo số video mỗi ngày */
.u151{position:relative;font-size:13px;line-height:1.45}
.u151 .month{display:flex;justify-content:space-between;color:var(--ux-ink-3);font-size:12px;margin-top:16px}
.u151 .heat{display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(7,20px);grid-auto-flow:column;gap:4px;margin:8px 0 0;cursor:pointer}
.u151 .heat i{border-radius:4px;background:color-mix(in srgb,var(--ux-accent) calc(var(--v) * 24%),var(--ux-surface-3));transition:background .25s,transform .25s}
.u151 .heat i.chosen{outline:2px solid var(--ux-ink);outline-offset:1px;transform:translateY(-2px)}
.u151 input[type="range"]{width:100%;height:44px;accent-color:var(--ux-accent);margin:0}
.u151 .inline{display:flex;align-items:center;justify-content:space-between;gap:12px}
.u151 .date{font-size:12.5px;color:var(--ux-ink-2)}
.u151 .count{font-weight:800;color:var(--ux-accent-2);font-size:18px;font-variant-numeric:tabular-nums}

/* ---------- chỉnh chung cho trang tài khoản: thẻ có viền sáng mảnh, nền có quầng cam như trang ngoài ---------- */
.lx-main{position:relative;isolation:isolate}
.lx-main::before{content:"";position:absolute;left:0;right:0;top:-40px;height:420px;z-index:-1;pointer-events:none;background:radial-gradient(50% 70% at 70% 0%,rgba(249,115,22,.09),transparent 70%)}
.lx-card{background-image:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,0) 38%);box-shadow:0 0 0 1px var(--ux-line),inset 0 1px 0 rgba(255,255,255,.05),0 30px 60px -40px var(--ux-shadow-strong)}
.lx-top h1{font-size:30px;font-weight:850;letter-spacing:-.04em}
.lx-empty a{color:var(--ux-accent-2);font-weight:700}

@media(max-width:1100px){.ac-hero{grid-template-columns:minmax(0,1fr)}.u052{justify-self:center}}
@media(max-width:860px){.ac-g-rec{grid-template-columns:minmax(0,1fr)}}
@media(max-width:560px){.ac-hero{padding:20px 18px;border-radius:24px}.ac-quick{grid-template-columns:minmax(0,1fr)}.ac-q{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:12px}.ac-q i{margin:0}.ac-q small{flex-basis:100%;padding-left:50px;margin-top:-6px}.u366-ls{grid-template-columns:repeat(2,minmax(0,1fr))}.u151 .heat{grid-template-rows:repeat(7,16px);gap:3px}}
@media(max-width:760px){.lx-top h1{font-size:24px}}

/* ---------- #023 Expanding notification settings (Tài khoản › Thiết lập: nhận thông báo loại nào, qua kênh nào) ---------- */
.u023{position:relative;display:flex;flex-direction:column;padding:22px 22px 18px;border-radius:26px;background:var(--ux-surface);box-shadow:0 0 0 1px var(--ux-line),0 30px 60px -36px var(--ux-shadow-strong)}
.u023-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:0 4px 12px}
.u023-top b{font-size:18px;font-weight:800;letter-spacing:-.025em}
.u023-top p{margin:4px 0 0;font-size:13px;color:var(--ux-ink-3)}
.u023-badge{flex:none;font-size:12.5px;font-weight:700;padding:5px 10px;border-radius:999px;background:var(--ux-accent-soft);color:var(--ux-accent);font-variant-numeric:tabular-nums;transition:background-color .3s,color .3s}
.u023-item{border-top:1px solid var(--ux-line)}
.u023-head{display:flex;align-items:center;gap:14px;padding:14px 4px}
.u023-ic{width:40px;height:40px;flex:none;border-radius:12px;display:grid;place-items:center;color:#fff;background:var(--g);transition:filter .5s var(--ux-ease),opacity .5s var(--ux-ease)}
.u023-ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.u023-item.is-off .u023-ic{filter:grayscale(1);opacity:.45}
.u023-t{flex:1;min-width:0}
.u023-t b{display:block;font-size:15px;font-weight:700;letter-spacing:-.02em}
.u023-t small{display:block;margin-top:2px;font-size:13px;color:var(--ux-ink-3)}
.u023-sw{position:relative;width:52px;height:32px;flex:none;border:0;padding:0;border-radius:999px;background:var(--ux-surface-3);transition:background-color .4s var(--ux-ease)}
.u023-sw::after{content:"";position:absolute;left:3px;top:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 2px 6px -1px rgba(0,0,0,.3);transition:transform .5s var(--ux-spring),width .25s var(--ux-ease)}
.u023-sw:active::after{width:32px}
.u023-sw[aria-checked="true"]{background:var(--ux-mint)}
.u023-sw[aria-checked="true"]::after{transform:translateX(20px)}
.u023-sw[aria-checked="true"]:active::after{transform:translateX(14px)}
.u023-sw:disabled{opacity:.55;cursor:not-allowed}
.u023-sw:focus-visible{outline:2px solid var(--ux-accent);outline-offset:3px}
.u023-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ux-ease)}
.u023-more.is-open{grid-template-rows:1fr}
.u023-more>div{overflow:hidden;min-height:0}
.u023-opts{position:relative;display:flex;flex-wrap:wrap;gap:6px;margin:0 4px 16px 58px;padding:4px;border-radius:12px;background:var(--ux-surface-2);opacity:0;transform:translateY(-8px);transition:opacity .3s var(--ux-ease),transform .5s var(--ux-spring)}
.u023-more.is-open .u023-opts{opacity:1;transform:none;transition-delay:.12s}
.u023-opt{position:relative;flex:1;min-width:96px;height:36px;border:0;background:none;border-radius:9px;font-size:13.5px;font-weight:650;color:var(--ux-ink-3);display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:color .3s var(--ux-ease),background-color .3s var(--ux-ease),box-shadow .3s}
.u023-opt[aria-pressed="true"]{color:var(--ux-ink);background:var(--ux-surface);box-shadow:0 1px 0 var(--ux-line),0 4px 10px -6px var(--ux-shadow-strong)}
.u023-opt i{width:16px;height:16px;border-radius:5px;box-shadow:inset 0 0 0 1.5px var(--ux-line-2);display:grid;place-items:center;font-style:normal;font-size:11px;transition:background-color .3s}
.u023-opt[aria-pressed="true"] i{background:var(--ux-mint);box-shadow:none;color:#04261c}
.u023-opt:disabled{cursor:not-allowed;opacity:.7}
.u023-opt:focus-visible{outline:2px solid var(--ux-accent);outline-offset:1px}
.u023-note{margin:-8px 4px 14px 58px;font-size:12.5px;color:var(--ux-ink-3)}
.u023-all{margin-top:6px;height:46px;border:0;border-radius:15px;background:var(--ux-surface-2);font-size:14px;font-weight:700;color:var(--ux-ink-2);transition:background-color .3s var(--ux-ease),color .3s var(--ux-ease),transform .4s var(--ux-spring)}
.u023-all:hover{color:var(--ux-danger);background:color-mix(in srgb,var(--ux-danger) 10%,var(--ux-surface-2))}
.u023-all:active{transform:scale(.98)}
.u023-all:focus-visible{outline:2px solid var(--ux-accent);outline-offset:2px}
@media(max-width:560px){.u023{padding:18px 14px 14px}.u023-opts,.u023-note{margin-left:4px}}

/* ---------- quà tạo tài khoản: hộp chúc mừng lần đầu vào /tai-khoan (theo mẫu chủ app gửi 02/11; account.js giftWelcome) ---------- */
.vg{width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:34px 30px 28px;border:0;border-radius:32px;background:#FAF6EF;color:#1C1917;text-align:center;box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
.vg::backdrop{background:rgba(20,16,12,.55);backdrop-filter:blur(6px)}
.vg[open]{animation:vg-in .5s var(--ux-spring)}
.vg[open]::backdrop{animation:vg-fade .3s ease}
@keyframes vg-in{from{opacity:0;transform:translateY(16px) scale(.94)}}
@keyframes vg-fade{from{opacity:0}}
.vg-x{position:absolute;right:16px;top:16px;width:40px;height:40px;border:0;border-radius:50%;background:none;color:#8A8178;display:grid;place-items:center;transition:background-color .2s,color .2s}
.vg-x:hover{background:rgba(28,25,23,.07);color:#1C1917}
.vg-x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.vg-ic{position:relative;width:84px;height:84px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#FDBA74,#F97316 55%,#EA580C);box-shadow:0 18px 30px -14px rgba(234,88,12,.75)}
.vg-ic svg{width:38px;height:38px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.vg-ic::after{content:"";position:absolute;right:5px;top:6px;width:12px;height:12px;border-radius:50%;background:#E5484D;box-shadow:0 0 0 3px #FAF6EF}
.vg-t{margin:0;font-size:22px;font-weight:850;letter-spacing:-.01em;color:#1C1917}
.vg-s{margin:6px 0 22px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#7A7067}
.vg-box{padding:22px 20px 18px;border-radius:20px;background:#fff;box-shadow:0 1px 2px rgba(28,25,23,.05),0 12px 28px -18px rgba(28,25,23,.25)}
.vg-hot{margin:0;font-size:19px;font-weight:700;color:#DC4A0C}
.vg-msg{margin:8px 0 18px;font-size:15px;line-height:1.55;font-weight:600;text-transform:uppercase;color:#3F3A35;text-wrap:balance}
.vg-msg b{color:#C2410C;font-weight:900}
.vg-go{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 30px;border-radius:999px;background:linear-gradient(120deg,#C2410C,#E5530F);color:#fff;font-size:15px;font-weight:850;letter-spacing:.02em;text-decoration:none;text-transform:uppercase;box-shadow:0 12px 22px -12px rgba(234,88,12,.8);transition:transform .3s var(--ux-spring)}
.vg-go:hover{transform:translateY(-2px)}
.vg-note{margin:14px 0 0;font-size:12.5px;line-height:1.5;color:#6F665D;text-wrap:balance}
.vg-ok{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;margin-top:22px;border:0;border-radius:16px;background:linear-gradient(120deg,#B93E0B,#DC5512);color:#fff;font-size:14px;font-weight:850;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 16px 28px -16px rgba(234,88,12,.85);transition:transform .3s var(--ux-spring)}
.vg-ok:hover{transform:translateY(-1px)}
.vg-ok svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.vg :focus-visible{outline:2px solid #C2410C;outline-offset:3px}
@media (max-width:420px){.vg{padding:28px 20px 22px;border-radius:26px}.vg-t{font-size:20px}}

/* Lịch sale ở trang Tài khoản */
.sl-row{display:grid;grid-template-columns:96px minmax(0,1fr);gap:20px;align-items:start}
.sl-date{display:flex;flex-direction:column;gap:2px;font-variant-numeric:tabular-nums}
.sl-date b{font-size:28px;font-weight:800;letter-spacing:-.02em;line-height:1.1;color:var(--ux-ink)}
.sl-date small{font-size:12.5px;color:var(--ux-ink-3)}
.sl-row.is-soon .sl-date b{color:var(--ux-accent)}
.sl-hot{background:var(--ux-accent);color:#1C1917}
.sl-tip{font-size:13px;font-weight:650;color:var(--ux-accent)}
.sl-ideas{display:grid;gap:8px;margin-top:14px}
.sl-idea{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:9px 14px;border-radius:12px;background:var(--ux-surface-2);box-shadow:inset 0 0 0 1px var(--ux-line);color:var(--ux-ink);font-size:14px;line-height:1.4;text-decoration:none;transition:box-shadow .2s,background-color .2s}
.sl-idea:hover{box-shadow:inset 0 0 0 1.5px var(--ux-accent)}
.sl-idea svg{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--ux-ink-3)}
@media(max-width:760px){.sl-row{grid-template-columns:minmax(0,1fr);gap:10px}}