:root { color-scheme:dark; --nen:#070b12; --the:#0f1622; --o:#0a1019; --chu:#e9eef6; --phu:#8b97aa; --vien:#1e2938; --nhan:#00e3ff; --nhan-chu:#03141a; --tot:#3ddc97; --loi:#ff6b6b; }
  * { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
  body { margin:0; min-height:100vh; color:var(--chu); font:16px/1.5 -apple-system,system-ui,"Segoe UI",Roboto,sans-serif;
    background:radial-gradient(120% 60% at 50% -10%, #0d2a3d 0%, rgba(7,11,18,0) 60%) var(--nen); background-attachment:fixed; }
  main { max-width:560px; margin:0 auto; padding:20px 16px 110px; }
  h1 { display:flex; align-items:center; gap:10px; font-size:22px; letter-spacing:-.01em; margin:4px 0 18px; }
  h1 svg { width:28px; height:28px; flex:none; fill:none; stroke:var(--nhan); stroke-width:1.8; stroke-linecap:round; filter:drop-shadow(0 0 6px rgba(0,227,255,.7)); }
  a { color:var(--nhan); }
  .the { background:linear-gradient(180deg, #111a28, var(--the)); border:1px solid var(--vien); border-radius:18px; padding:18px; margin-bottom:14px; box-shadow:0 10px 30px rgba(0,0,0,.35); }
  .phu { color:var(--phu); font-size:14px; }
  button, .nut { display:inline-block; border:0; border-radius:12px; padding:13px 18px; font:inherit; font-weight:650; background:var(--nhan); color:var(--nhan-chu); text-decoration:none; text-align:center; cursor:pointer; transition:transform .1s, box-shadow .2s, opacity .2s; }
  button:not(:disabled):hover, .nut:hover { box-shadow:0 0 0 3px rgba(0,227,255,.18); }
  button:not(:disabled):active, .nut:active { transform:scale(.98); }
  button.phu2, .nut.phu2 { background:rgba(0,227,255,.06); color:var(--nhan); border:1px solid rgba(0,227,255,.35); }
  button:disabled { opacity:.35; cursor:default; }
  .rong { width:100%; }
  input[type=text], input[type=password], select, textarea { width:100%; padding:13px 14px; border-radius:12px; border:1px solid var(--vien); background:var(--o); color:var(--chu); font:inherit; margin:8px 0 14px; outline:none; transition:border-color .2s, box-shadow .2s; }
  input[type=text]:focus, input[type=password]:focus, select:focus, textarea:focus { border-color:var(--nhan); box-shadow:0 0 0 3px rgba(0,227,255,.15); }
  input::placeholder, textarea::placeholder { color:#4f5b6d; }
  textarea { display:block; min-height:84px; resize:vertical; line-height:1.45; }
  select { appearance:none; -webkit-appearance:none; padding-right:40px; cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2300e3ff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 14px center; }
  input[type=file] { width:100%; margin:6px 0 4px; padding:14px; border:1.5px dashed rgba(0,227,255,.35); border-radius:14px; background:rgba(0,227,255,.04); color:var(--phu); font:inherit; font-size:14px; cursor:pointer; }
  input[type=file]::file-selector-button { margin-right:12px; padding:9px 14px; border:0; border-radius:10px; background:var(--nhan); color:var(--nhan-chu); font:inherit; font-weight:650; cursor:pointer; }
  label { display:block; font-weight:650; font-size:14px; color:#c9d3e1; }
  .thanh { height:8px; background:var(--o); border:1px solid var(--vien); border-radius:99px; overflow:hidden; margin:16px 0 6px; }
  .thanh i { display:block; height:100%; width:0; border-radius:99px; background:linear-gradient(90deg, #0077ff, var(--nhan)); box-shadow:0 0 12px rgba(0,227,255,.6); transition:width .3s; }
  .dong { display:flex; gap:12px; align-items:center; justify-content:space-between; padding:14px 0; border-top:1px solid var(--vien); }
  .dong:first-child { border-top:0; padding-top:2px; }
  .dong:last-child { padding-bottom:2px; }
  .dong b { display:block; word-break:break-word; }
  .dong .nut, .dong button { padding:10px 16px; flex:none; }
  .dong.tp { display:block; }
  .hang { display:flex; gap:12px; align-items:center; justify-content:space-between; }
  .dong .thanh { margin:10px 0 4px; }
  .nuts { display:flex; gap:8px; margin-top:10px; }
  .nuts button { flex:1; padding:10px 8px; }
  .tp-hang { display:flex; gap:12px; align-items:stretch; }
  .tp-ben { flex:1; min-width:0; }
  .dong .anh { flex:none; position:relative; width:68px; height:121px; padding:0; border-radius:10px; overflow:hidden; background:var(--o); border:1px solid var(--vien); }
  .dong .anh:disabled { opacity:1; }
  .anh video { display:block; width:100%; height:100%; object-fit:cover; pointer-events:none; }
  .anh .choi { position:absolute; left:50%; top:50%; width:28px; height:28px; margin:-14px 0 0 -14px; border-radius:50%; background:rgba(0,0,0,.55); }
  .anh .choi::after { content:''; position:absolute; left:11px; top:8px; border-left:9px solid #fff; border-top:6px solid transparent; border-bottom:6px solid transparent; }
  .mo:empty { display:none; }
  .mo { margin-top:12px; }
  .mo video, .mo img { display:block; width:100%; max-height:70vh; border-radius:12px; background:#000; }
  .nhan { font-size:13px; font-weight:650; white-space:nowrap; padding:6px 12px; border-radius:99px; background:rgba(61,220,151,.12); }
  .tot { color:var(--tot); } .loi { color:var(--loi); }
  nav { position:fixed; left:0; right:0; bottom:0; display:flex; max-width:560px; margin:0 auto; padding:6px 8px calc(6px + env(safe-area-inset-bottom));
    background:rgba(10,16,25,.85); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-top:1px solid var(--vien); }
  nav button { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; background:transparent; color:var(--phu); border-radius:12px; padding:8px 4px; font-size:12px; font-weight:600; }
  nav button svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  nav button.chon { color:var(--nhan); background:rgba(0,227,255,.08); }
  nav button:not(:disabled):hover { box-shadow:none; }
  .an { display:none !important; }
  .mau { display:grid; grid-template-columns:repeat(5, 1fr); gap:8px; margin:8px 0 14px; }
  .mau label { display:flex; flex-direction:column; align-items:center; gap:4px; font-size:12px; font-weight:600; color:var(--phu); cursor:pointer; }
  .mau input[type=color] { width:100%; height:44px; padding:0; border:1px solid var(--vien); border-radius:10px; background:var(--o); cursor:pointer; }
  .mau input[type=color]::-webkit-color-swatch-wrapper { padding:3px; }
  .mau input[type=color]::-webkit-color-swatch { border:0; border-radius:7px; }
  .mau code { font-size:11px; color:var(--chu); }
  .chon2 { display:flex; gap:8px; margin:8px 0 10px; }
  .chon2 label { flex:1; padding:11px 8px; border:1px solid var(--vien); border-radius:12px; background:var(--o); text-align:center; color:var(--phu); cursor:pointer; }
  .chon2 input { display:none; }
  .chon2 input:checked + span { color:var(--nhan); }
  .chon2 label:has(input:checked) { border-color:var(--nhan); background:rgba(0,227,255,.08); }
  #bao { position:fixed; left:16px; right:16px; bottom:88px; max-width:528px; margin:0 auto; padding:13px 16px; border-radius:14px; background:#1a2535; border:1px solid #2a3a50; color:var(--chu); font-size:14px; box-shadow:0 12px 30px rgba(0,0,0,.45); }
  /* trang Bắt đầu + Quản lý */
  .buoc { display:flex; gap:12px; align-items:flex-start; }
  .buoc > .so { flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-weight:700; background:rgba(0,227,255,.1); color:var(--nhan); border:1px solid rgba(0,227,255,.35); }
  .buoc.xong > .so { background:var(--tot); color:#03140c; border-color:var(--tot); }
  .buoc > div { flex:1; min-width:0; }
  .buoc h2 { font-size:17px; margin:2px 0 6px; }
  ol.nho { padding-left:20px; margin:8px 0; } ol.nho li { margin:6px 0; }
  pre.chep { white-space:pre-wrap; word-break:break-all; background:var(--o); border:1px solid var(--vien); border-radius:12px; padding:12px; font:13px/1.45 ui-monospace,Menlo,monospace; color:#cfe9f2; margin:8px 0; }
  .the.bang { overflow-x:auto; padding:10px; }
  table { border-collapse:collapse; width:100%; font-size:14px; }
  th, td { text-align:left; padding:9px 8px; border-top:1px solid var(--vien); vertical-align:top; }
  th { color:var(--phu); font-weight:600; border-top:0; }
  td .tick { display:flex; flex-wrap:wrap; gap:4px 10px; }
  td .tick label { font-weight:500; font-size:13px; display:flex; gap:4px; align-items:center; white-space:nowrap; }
  td select { margin:0; padding:7px 34px 7px 10px; width:auto; }
  td input[type=text] { margin:0; padding:7px 10px; min-width:140px; }