/* =====================================================================
   ZDS — design system chung cho portal + 3 app.
   Token lấy từ ZaUI (zmp-ui, Zalo Mini App UI) — màu, cỡ chữ, chiều cao
   nút/ô nhập, bo góc. Font: Poppins (tải sẵn trong ds/fonts, chạy offline).

   Thứ tự nạp trong mỗi trang:
     <link rel="stylesheet" href="../ds/zds.css">   ← file này
     <style> …chỉ phần riêng của app… </style>
   ===================================================================== */

/* ---------- font ----------
   Poppins không có các chữ Việt dấu chồng (U+1EA0–1EF1: ạ ả ấ ầ … ự ỳ),
   nên khối đó lấy từ Be Vietnam Pro — cùng họ hình học, nét gần giống —
   gộp chung dưới một tên để cả trang chỉ khai báo "Poppins VN". */
@font-face{font-family:"Poppins VN";font-weight:400;font-display:swap;
  src:url(fonts/poppins-400-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins VN";font-weight:500;font-display:swap;
  src:url(fonts/poppins-500-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins VN";font-weight:600;font-display:swap;
  src:url(fonts/poppins-600-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins VN";font-weight:400;font-display:swap;
  src:url(fonts/poppins-400-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Poppins VN";font-weight:500;font-display:swap;
  src:url(fonts/poppins-500-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Poppins VN";font-weight:600;font-display:swap;
  src:url(fonts/poppins-600-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Poppins VN";font-weight:400;font-display:swap;
  src:url(fonts/bevn-400-vietnamese.woff2) format("woff2");unicode-range:U+1EA0-1EF1}
@font-face{font-family:"Poppins VN";font-weight:500;font-display:swap;
  src:url(fonts/bevn-500-vietnamese.woff2) format("woff2");unicode-range:U+1EA0-1EF1}
@font-face{font-family:"Poppins VN";font-weight:600;font-display:swap;
  src:url(fonts/bevn-600-vietnamese.woff2) format("woff2");unicode-range:U+1EA0-1EF1}
/* chữ đậm 700 trong code cũ → dùng 600, tránh trình duyệt tự "giả đậm" */

/* ---------- tokens ---------- */
:root{
  /* thang neutral & blue của ZaUI */
  --z-n-900:#141415; --z-n-800:#252627; --z-n-700:#36383a; --z-n-600:#53575a;
  --z-n-500:#767a7f; --z-n-400:#8f9499; --z-n-300:#b9bdc1; --z-n-200:#d6d9dc;
  --z-n-100:#e9ebed; --z-n-50:#f4f5f6;
  --z-blue-900:#03244e; --z-blue-800:#03316d; --z-blue-600:#0250b6; --z-blue-500:#006af5;
  --z-blue-400:#52a0ff; --z-blue-300:#8fc1ff; --z-blue-200:#b8d9ff; --z-blue-100:#d6e9ff; --z-blue-50:#ebf4ff;

  /* vai trò — giao diện sáng */
  --z-bg:#f4f5f6;            /* nền trang */
  --z-surface:#ffffff;       /* khối nội dung */
  --z-fill:#f4f5f6;          /* ô/thanh nền xám trong khối trắng */
  --z-fill-strong:#e9ebed;   /* nút trung tính, track */
  --z-divider:#e9ebed;
  --z-border:#b9bdc1;        /* viền ô nhập */
  --z-text:#141415; --z-text-2:#767a7f; --z-text-3:#8f9499; --z-text-disabled:#b9bdc1;
  --z-primary:#006af5; --z-primary-pressed:#0250b6; --z-on-primary:#ffffff;
  --z-primary-soft:#d6e9ff; --z-primary-soft-pressed:#b8d9ff; --z-primary-tint:#ebf4ff;
  --z-primary-text:#006af5;
  --z-success:#34b764; --z-success-text:#16843f; --z-success-soft:#e3f6ea;
  --z-danger:#dc1f18;  --z-danger-text:#dc1f18;  --z-danger-soft:#fed8d7; --z-danger-tint:#ffebeb;
  --z-warning:#e8ba02; --z-warning-text:#a15c00; --z-warning-soft:#fff4d6;
  --z-snackbar:#252627;
  color-scheme:light;   /* thanh cuộn, ô chọn… của trình duyệt theo đúng theme */

  /* chữ — thang ZaUI, đổi sang Poppins */
  --z-font:"Poppins VN","Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --z-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --z-fs-title-xl:24px; --z-lh-title-xl:32px;   /* số lớn */
  --z-fs-title-l:20px;  --z-lh-title-l:28px;    /* tiêu đề trang */
  --z-fs-header:18px;   --z-lh-header:26px;     /* header bar */
  --z-fs-title:16px;    --z-lh-title:24px;      /* tiêu đề khối / list item */
  --z-fs-body:15px;     --z-lh-body:22px;
  --z-fs-small:14px;    --z-lh-small:20px;
  --z-fs-xsmall:13px;   --z-lh-xsmall:18px;
  --z-fs-xxsmall:12px;  --z-lh-xxsmall:16px;

  /* khoảng cách 4pt, bo góc, kích thước control */
  --z-s1:4px; --z-s2:8px; --z-s3:12px; --z-s4:16px; --z-s5:20px; --z-s6:24px; --z-s8:32px;
  --z-r-sm:6px; --z-r:8px; --z-r-lg:12px; --z-r-pill:999px;
  --z-h-lg:48px; --z-h-md:40px; --z-h-sm:32px;
  --z-header-h:56px;
  --z-dur:.15s;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --z-bg:#000000; --z-surface:#141415; --z-fill:#252627; --z-fill-strong:#36383a;
  --z-divider:#2b2d2f; --z-border:#53575a;
  --z-text:#f4f5f6; --z-text-2:#a3a8ad; --z-text-3:#8f9499; --z-text-disabled:#53575a;
  --z-primary:#1f7bff; --z-primary-pressed:#0250b6;
  --z-primary-soft:#03316d; --z-primary-soft-pressed:#03244e; --z-primary-tint:#0b1a2e;
  --z-primary-text:#52a0ff;
  --z-success:#34b764; --z-success-text:#5fd08a; --z-success-soft:#0f2c1a;
  --z-danger:#f1645f; --z-danger-text:#f89996; --z-danger-soft:#650e0b; --z-danger-tint:#2e0807;
  --z-warning:#e8ba02; --z-warning-text:#f2c94c; --z-warning-soft:#2e2504;
  --z-snackbar:#36383a;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --z-bg:#000000; --z-surface:#141415; --z-fill:#252627; --z-fill-strong:#36383a;
  --z-divider:#2b2d2f; --z-border:#53575a;
  --z-text:#f4f5f6; --z-text-2:#a3a8ad; --z-text-3:#8f9499; --z-text-disabled:#53575a;
  --z-primary:#1f7bff; --z-primary-pressed:#0250b6;
  --z-primary-soft:#03316d; --z-primary-soft-pressed:#03244e; --z-primary-tint:#0b1a2e;
  --z-primary-text:#52a0ff;
  --z-success:#34b764; --z-success-text:#5fd08a; --z-success-soft:#0f2c1a;
  --z-danger:#f1645f; --z-danger-text:#f89996; --z-danger-soft:#650e0b; --z-danger-tint:#2e0807;
  --z-warning:#e8ba02; --z-warning-text:#f2c94c; --z-warning-soft:#2e2504;
  --z-snackbar:#36383a;
  color-scheme:dark;
}

/* tên biến cũ của các app → token mới (để code JS/CSS cũ còn dùng var(--acc)… vẫn đúng) */
:root{
  --bg:var(--z-bg); --panel:var(--z-surface); --panel-2:var(--z-fill); --line:var(--z-divider);
  --tx:var(--z-text); --tx-2:var(--z-text-2); --tx-3:var(--z-text-3);
  --acc:var(--z-primary-text); --acc-soft:var(--z-primary-tint);
  --ok:var(--z-success-text); --ok-bg:var(--z-success-soft); --ok-line:var(--z-success);
  --bad:var(--z-danger-text); --bad-bg:var(--z-danger-tint); --bad-line:var(--z-danger-soft);
  --warn:var(--z-warning-text); --warn-bg:var(--z-warning-soft);
  --radius:var(--z-r-lg); --shadow:none;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--z-bg);color:var(--z-text);min-height:100vh;
  font-family:var(--z-font);font-size:var(--z-fs-body);line-height:var(--z-lh-body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
b,strong{font-weight:600}
h1,h2,h3,h4{font-weight:600;letter-spacing:0}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
.hidden{display:none!important}
::selection{background:var(--z-blue-200);color:var(--z-n-900)}
:focus-visible{outline:2px solid var(--z-primary);outline-offset:2px}
kbd{font:500 10.5px/1 var(--z-mono);border:1px solid currentColor;border-radius:4px;
  padding:2px 4px;margin-left:8px;opacity:.45;vertical-align:1px}

/* ---------- icon: <i class="ic ic-volume"></i> — tô bằng currentColor ---------- */
.ic{display:inline-block;width:1.25em;height:1.25em;flex:none;vertical-align:-.25em;background:currentColor;
  -webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.ic-back{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E")}
.ic-next{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E")}
.ic-volume{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5v5h3.5L12 19V5L7.5 9.5z' fill='%23000'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7M18.5 5.5a9 9 0 0 1 0 13'/%3E%3C/svg%3E")}
.ic-replay{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12a8 8 0 1 0 2.4-5.7L4 8.5'/%3E%3Cpath d='M4 4v4.5h4.5'/%3E%3C/svg%3E")}
.ic-mic{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21'/%3E%3C/svg%3E")}
.ic-headphones{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 15v-3a8 8 0 0 1 16 0v3'/%3E%3Crect x='3.5' y='14' width='4.5' height='6' rx='1.5'/%3E%3Crect x='16' y='14' width='4.5' height='6' rx='1.5'/%3E%3C/svg%3E")}
.ic-music{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5.5l11-2V16'/%3E%3Ccircle cx='6.5' cy='18' r='2.5'/%3E%3Ccircle cx='17.5' cy='16' r='2.5'/%3E%3C/svg%3E")}
.ic-pen{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9a2.8 2.8 0 0 0-4-4L4 16z'/%3E%3Cpath d='M13.5 6.5l4 4'/%3E%3C/svg%3E")}
.ic-target{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4.5h11a3 3 0 0 1 3 3V20H8a3 3 0 0 1-3-3z'/%3E%3Cpath d='M9 9h6M9 13h4'/%3E%3C/svg%3E")}
.ic-eye{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")}
.ic-star{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 16.9l-5.2 2.7 1-5.8-4.3-4.1 5.9-.9z'/%3E%3C/svg%3E")}
.ic-star-fill{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 16.9l-5.2 2.7 1-5.8-4.3-4.1 5.9-.9z'/%3E%3C/svg%3E")}
.ic-skip{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5.5l9 6.5-9 6.5zM18.5 5v14'/%3E%3C/svg%3E")}
.ic-ban{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M6 6l12 12'/%3E%3C/svg%3E")}
.ic-play{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.5v15l12.5-7.5z' fill='%23000'/%3E%3C/svg%3E")}
.ic-pause{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='4.5' width='4' height='15' rx='1' fill='%23000'/%3E%3Crect x='14' y='4.5' width='4' height='15' rx='1' fill='%23000'/%3E%3C/svg%3E")}
.ic-rec{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='6' fill='%23000'/%3E%3C/svg%3E")}
.ic-download{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10.5l5 5 5-5M5 20h14'/%3E%3C/svg%3E")}
.ic-upload{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V5M7 9.5l5-5 5 5M5 20h14'/%3E%3C/svg%3E")}
.ic-alert{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5v5.5M12 16.2v.3'/%3E%3C/svg%3E")}
.ic-sun{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2.5v2M12 19.5v2M2.5 12h2M19.5 12h2M5.3 5.3l1.4 1.4M17.3 17.3l1.4 1.4M5.3 18.7l1.4-1.4M17.3 6.7l1.4-1.4'/%3E%3C/svg%3E")}
.ic-moon{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M19.5 14.5A8 8 0 0 1 9.5 4.5a8 8 0 1 0 10 10z'/%3E%3C/svg%3E")}
.ic-auto{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 3.5a8.5 8.5 0 0 1 0 17z' fill='%23000'/%3E%3C/svg%3E")}

.ic-plus{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")}
.ic-minus{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E")}
.ic-check{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.ic-close{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E")}
.ic-up{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E")}
.ic-down{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
.ic-habit{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='3'/%3E%3Cpath d='M8 3v4M16 3v4M8.5 13l2.5 2.5 4.5-5'/%3E%3C/svg%3E")}
.ic-flame{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M12 21c-3.6 0-6.5-2.6-6.5-6.2 0-3.4 2.6-5.3 3.6-8.3.4 1.6 1.4 2.7 2.4 3.1C12 6.4 13.6 4 15.2 3c-.2 3.2 3.3 5.6 3.3 11.1 0 4-2.9 6.9-6.5 6.9z'/%3E%3C/svg%3E")}

.ic-work{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='7' width='17' height='12.5' rx='2.5'/%3E%3Cpath d='M9 7V5.5A1.5 1.5 0 0 1 10.5 4h3A1.5 1.5 0 0 1 15 5.5V7M3.5 12.5h17'/%3E%3C/svg%3E")}
.ic-cloud{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 18.5h10.5a4 4 0 0 0 .6-7.95A6 6 0 0 0 6.6 9.1 4.7 4.7 0 0 0 7 18.5z'/%3E%3C/svg%3E")}
.ic-grip{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Ccircle cx='9' cy='6' r='1.6'/%3E%3Ccircle cx='15' cy='6' r='1.6'/%3E%3Ccircle cx='9' cy='12' r='1.6'/%3E%3Ccircle cx='15' cy='12' r='1.6'/%3E%3Ccircle cx='9' cy='18' r='1.6'/%3E%3Ccircle cx='15' cy='18' r='1.6'/%3E%3C/svg%3E")}
.ic-tag{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12.6V4.5a1 1 0 0 1 1-1h8.1a1 1 0 0 1 .7.3l7.2 7.2a1 1 0 0 1 0 1.4l-8.1 8.1a1 1 0 0 1-1.4 0l-7.2-7.2a1 1 0 0 1-.3-.7z'/%3E%3Ccircle cx='8.2' cy='8.2' r='1.5'/%3E%3C/svg%3E")}
.ic-external{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4.5h5.5V10M19.5 4.5L11 13M17 14v4a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 5 18V8.5A1.5 1.5 0 0 1 6.5 7H10'/%3E%3C/svg%3E")}

.ic-chat{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a7.5 7.5 0 0 1-11.2 6.5L4 19.5l1-4.4A7.5 7.5 0 1 1 20 12z'/%3E%3Cpath d='M9 10.5h6M9 13.5h4'/%3E%3C/svg%3E")}
/* ---------- header (Zalo Header + Tabs) ---------- */
/* header trải full bề ngang nhưng nội dung thẳng hàng với cột main (760px) */
.topbar{--gut:max(var(--z-s3),calc((100% - 760px) / 2 + var(--z-s4)));
  position:sticky;top:0;z-index:20;background:var(--z-surface);border-bottom:1px solid var(--z-divider);
  display:flex;align-items:center;flex-wrap:wrap;column-gap:var(--z-s2);padding:0 var(--gut);
  min-height:var(--z-header-h)}
.homebtn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin-left:-6px;
  border:0;border-radius:var(--z-r-pill);background:transparent;color:var(--z-text);font-size:20px;cursor:pointer}
.homebtn:hover{background:var(--z-fill)}
.brand{font-size:var(--z-fs-header);line-height:var(--z-lh-header);font-weight:500;white-space:nowrap;
  padding:var(--z-s2) 0;min-width:0}
.brand small{display:block;font-size:var(--z-fs-xxsmall);line-height:var(--z-lh-xxsmall);font-weight:400;color:var(--z-text-2)}
.tabs{order:10;flex:1 0 100%;display:flex;gap:var(--z-s6);margin-top:-4px;
  overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{position:relative;border:0;background:transparent;padding:0;height:44px;cursor:pointer;white-space:nowrap;
  color:var(--z-text-2);font-size:var(--z-fs-body);font-weight:400}
.tab:hover{color:var(--z-text)}
.tab.active{color:var(--z-primary-text);font-weight:500}
.tab.active:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px 2px 0 0;background:var(--z-primary)}
.streak{margin-left:auto;font-size:var(--z-fs-xsmall);color:var(--z-text-2);text-align:right}

main{max-width:760px;margin:0 auto;padding:var(--z-s4) var(--z-s4) 80px}

/* ---------- khối nội dung ---------- */
.panel,.card{background:var(--z-surface);border-radius:var(--z-r-lg);padding:var(--z-s4);margin-bottom:var(--z-s3)}
.panel h3{margin:0 0 var(--z-s3);font-size:var(--z-fs-title);line-height:var(--z-lh-title);font-weight:600}
.hintline{font-size:var(--z-fs-xsmall);line-height:var(--z-lh-xsmall);color:var(--z-text-2);margin-top:var(--z-s3)}
.hintline kbd{margin:0 2px}

/* ---------- nút (ZaUI Button: pill, cao 40 / 32) ---------- */
button.primary,button.ghost,.cta,.backbtn{display:inline-flex;align-items:center;justify-content:center;gap:var(--z-s2);
  height:var(--z-h-md);padding:0 var(--z-s5);border:0;border-radius:var(--z-r-pill);cursor:pointer;white-space:nowrap;
  font-size:var(--z-fs-small);font-weight:500;transition:background-color var(--z-dur)}
button.primary,.cta{background:var(--z-primary);color:var(--z-on-primary)}
button.primary:hover,.cta:hover{background:var(--z-primary-pressed)}
button.ghost{background:var(--z-fill-strong);color:var(--z-text)}
button.ghost:hover{background:var(--z-n-200)}
:root[data-theme="dark"] button.ghost:hover{background:var(--z-n-600)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) button.ghost:hover{background:var(--z-n-600)}}
button.ghost.on{background:var(--z-primary-soft);color:var(--z-primary-text)}
button.primary:disabled,button.ghost:disabled,.cta:disabled{background:var(--z-fill-strong);color:var(--z-text-disabled);cursor:default}
.cta{height:var(--z-h-lg);padding:0 var(--z-s8);font-size:var(--z-fs-body)}
.backbtn{height:var(--z-h-sm);padding:0 var(--z-s3) 0 var(--z-s2);gap:2px;background:transparent;color:var(--z-text-2)}
.backbtn:hover{background:var(--z-fill-strong);color:var(--z-text)}
.danger,button.ghost.danger{color:var(--z-danger-text)}
button.ghost.danger{background:var(--z-danger-tint)}
button.ghost.danger:hover{background:var(--z-danger-soft)}
.linkbtn{border:0;background:transparent;padding:var(--z-s2) 0 0;cursor:pointer;
  color:var(--z-primary-text);font-size:var(--z-fs-xsmall);font-weight:500}
.row{display:flex;gap:var(--z-s2);margin-top:var(--z-s3);flex-wrap:wrap;align-items:center}
.spacer{flex:1}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:0;padding:0;
  border-radius:var(--z-r-pill);background:transparent;color:var(--z-text-2);cursor:pointer;font-size:16px}
.iconbtn:hover{background:var(--z-fill);color:var(--z-text)}
.speak{display:inline-flex;align-items:center;border:0;background:transparent;padding:2px;margin-left:2px;cursor:pointer;
  color:var(--z-primary-text);font-size:15px;vertical-align:-1px;opacity:.85}
.speak:hover{opacity:1}

/* ---------- ô nhập (ZaUI Input: cao 48, viền 1px, bo 8) ---------- */
textarea,input[type=search],input[type=text],input:not([type]),input[type=number],select{
  border:1px solid var(--z-border);border-radius:var(--z-r);background:var(--z-surface);color:var(--z-text);outline:none;
  transition:border-color var(--z-dur)}
textarea:hover,input[type=search]:hover,input[type=text]:hover,input:not([type]):hover,input[type=number]:hover,select:hover{border-color:var(--z-text-2)}
textarea:focus,input:focus,select:focus{border-color:var(--z-primary)}
textarea::placeholder,input::placeholder{color:var(--z-text-disabled)}
textarea{width:100%;padding:var(--z-s3);min-height:var(--z-h-lg);resize:vertical;font-size:17px;line-height:26px}
textarea:disabled{background:var(--z-fill);opacity:1;color:var(--z-text-2)}
input[type=search],input[type=text],input:not([type]){height:var(--z-h-md);padding:0 var(--z-s3)}
select{height:var(--z-h-sm);padding:0 28px 0 var(--z-s3);font-size:var(--z-fs-small);cursor:pointer;appearance:none;
  background:var(--z-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23767a7f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") right 8px center/16px no-repeat}
input[type=number]{height:var(--z-h-sm);width:76px;padding:0 var(--z-s2);text-align:center;font-size:var(--z-fs-small)}
input[type=range]{accent-color:var(--z-primary);width:160px}

/* ---------- dòng cài đặt (ZaUI List item) ---------- */
.opt{display:flex;align-items:center;justify-content:space-between;gap:var(--z-s4);
  padding:var(--z-s3) 0;border-bottom:1px solid var(--z-divider);font-size:var(--z-fs-body)}
.opt:last-child{border-bottom:0;padding-bottom:0}
.opt:first-of-type{padding-top:0}
.opt label{font-size:var(--z-fs-body)}
.opt small{display:block;margin-top:2px;color:var(--z-text-2);font-size:var(--z-fs-xsmall);line-height:var(--z-lh-xsmall)}
.opt .row{margin:0}

/* ---------- switch (ZaUI: 40×24, tắt = n-300) ---------- */
.switch{position:relative;width:40px;height:24px;flex:0 0 40px;display:inline-block}
.switch input{opacity:0;width:0;height:0;position:absolute}
.slider{position:absolute;inset:0;background:var(--z-n-300);border-radius:var(--z-r-pill);cursor:pointer;transition:background var(--z-dur)}
.slider:before{content:"";position:absolute;width:20px;height:20px;left:2px;top:2px;background:#fff;border-radius:50%;
  transition:transform var(--z-dur)}
.switch input:checked + .slider{background:var(--z-primary)}
.switch input:checked + .slider:before{transform:translateX(16px)}
.switch input:focus-visible + .slider{outline:2px solid var(--z-primary);outline-offset:2px}

/* ---------- thanh tiến độ ---------- */
.progress{height:4px;background:var(--z-fill-strong);border-radius:var(--z-r-pill);overflow:hidden;margin-bottom:var(--z-s4)}
.progress i{display:block;height:100%;width:0;background:var(--z-primary);border-radius:var(--z-r-pill);transition:width .3s}

/* ---------- banner thông báo trong trang ---------- */
.warnbar{display:flex;gap:var(--z-s2);align-items:flex-start;background:var(--z-danger-tint);color:var(--z-danger-text);
  padding:var(--z-s3) var(--z-s4);font-size:var(--z-fs-xsmall);line-height:var(--z-lh-xsmall)}
.warnbar code{background:rgba(127,127,127,.18);padding:1px 5px;border-radius:4px}
.resumebar,.focusbar{display:flex;align-items:center;gap:var(--z-s3);background:var(--z-primary-tint);color:var(--z-text);
  border-radius:var(--z-r);padding:var(--z-s2) var(--z-s2) var(--z-s2) var(--z-s3);margin-bottom:var(--z-s3);font-size:var(--z-fs-xsmall)}
.resumebar button,.focusbar button{margin-left:auto;flex:none;border:0;background:transparent;color:var(--z-primary-text);
  font-weight:500;cursor:pointer;height:var(--z-h-sm);padding:0 var(--z-s3);border-radius:var(--z-r-pill)}
.resumebar button:hover,.focusbar button:hover{background:var(--z-primary-soft)}

/* ---------- thẻ luyện gõ: gợi ý, kết quả, so sánh ---------- */
.hint,.hintbox{margin-top:var(--z-s3);padding:var(--z-s3);border-radius:var(--z-r);background:var(--z-fill);color:var(--z-text);
  font:16px/1.6 var(--z-mono);letter-spacing:1px}
.result{margin-top:var(--z-s4);border-top:1px solid var(--z-divider);padding-top:var(--z-s4)}
.verdict{display:flex;align-items:center;gap:var(--z-s2);font-weight:600;font-size:var(--z-fs-body);margin-bottom:var(--z-s3)}
.verdict.ok{color:var(--z-success-text)} .verdict.bad{color:var(--z-danger-text)} .verdict.close{color:var(--z-warning-text)}
.answers{display:flex;flex-direction:column;gap:var(--z-s2)}
.ansrow{display:flex;gap:var(--z-s3);align-items:flex-start;margin-bottom:var(--z-s2)}
.answers .ansrow{margin-bottom:0}
.lbl{flex:0 0 64px;font-size:var(--z-fs-xxsmall);color:var(--z-text-2);padding-top:10px}
.diff{flex:1;padding:var(--z-s2) var(--z-s3);border-radius:var(--z-r);background:var(--z-fill);
  font-size:16px;line-height:26px;word-break:break-word}
.diff.correct{background:var(--z-success-soft)}
.diff .w-bad{color:var(--z-danger-text);background:var(--z-danger-tint);border-radius:4px;padding:0 3px;text-decoration:line-through}
.diff .w-miss{color:var(--z-success-text);background:var(--z-success-soft);border-radius:4px;padding:0 3px;font-weight:600;
  box-shadow:inset 0 -2px 0 var(--z-success)}
.fixbox,.drill{margin-top:var(--z-s4);background:var(--z-fill);border-radius:var(--z-r-lg);padding:var(--z-s4)}
.fixbox > b{font-size:var(--z-fs-small);font-weight:600}
.fixbox .target{font-size:17px;font-weight:500;margin:var(--z-s2) 0 var(--z-s3)}
.fixbox textarea{background:var(--z-surface)}
.fixmsg{font-size:var(--z-fs-xsmall);margin-top:var(--z-s2);min-height:18px}
.fixmsg.bad{color:var(--z-danger-text)}
.shake{animation:shake .28s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

/* ---------- màn hình xong lượt ---------- */
/* #doneArea: app từ vựng dùng class .done — không viết .done trần vì trùng .ccard.done */
.done-pass,#doneArea{text-align:center;padding:var(--z-s8) var(--z-s5)}
.done-pass h2,#doneArea h2{margin:0 0 var(--z-s2);font-size:var(--z-fs-title-l);line-height:var(--z-lh-title-l)}
.done-pass p,#doneArea p{color:var(--z-text-2);margin:0 0 var(--z-s5)}
.done-pass .row,#doneArea .row{justify-content:center}

/* ---------- danh sách (ZaUI List) ---------- */
.clist{display:flex;flex-direction:column;background:var(--z-surface);border-radius:var(--z-r-lg);overflow:hidden}
.ccard{display:flex;gap:var(--z-s3);align-items:center;padding:var(--z-s3) var(--z-s4);cursor:pointer;position:relative;
  transition:background-color var(--z-dur)}
.ccard + .ccard:before{content:"";position:absolute;top:0;right:0;left:68px;border-top:1px solid var(--z-divider)}
.ccard:hover{background:var(--z-fill)}
.cnum{flex:0 0 40px;height:40px;border-radius:var(--z-r-pill);background:var(--z-fill-strong);display:flex;
  align-items:center;justify-content:center;font-weight:500;font-size:var(--z-fs-small);color:var(--z-text-2)}
.ccard.done .cnum{background:var(--z-success-soft);color:var(--z-success-text)}
.cbody{flex:1;min-width:0}
.cbody b{font-size:var(--z-fs-title);line-height:var(--z-lh-title);font-weight:500}
.cbody .cctx{font-size:var(--z-fs-xsmall);line-height:var(--z-lh-xsmall);color:var(--z-text-2);margin-top:2px}
.cmeta{display:flex;gap:var(--z-s3);align-items:center;margin-top:var(--z-s2);font-size:var(--z-fs-xxsmall);color:var(--z-text-2);flex-wrap:wrap}
.pips{display:flex;gap:3px}
.pips i{width:14px;height:4px;border-radius:var(--z-r-pill);background:var(--z-fill-strong);display:block}
.pips i.on{background:var(--z-primary)}
.ccard.done .pips i.on{background:var(--z-success)}
.cbadge{display:inline-block;font-size:var(--z-fs-xxsmall);line-height:var(--z-lh-xxsmall);font-weight:500;padding:2px var(--z-s2);
  border-radius:var(--z-r-pill);background:var(--z-primary-tint);color:var(--z-primary-text);margin-left:var(--z-s2);vertical-align:2px}
.cbadge.ok{background:var(--z-success-soft);color:var(--z-success-text)}

/* ---------- snackbar ---------- */
.toast{position:fixed;left:50%;bottom:var(--z-s6);transform:translateX(-50%);z-index:50;
  display:flex;align-items:center;gap:var(--z-s4);max-width:min(92vw,560px);
  background:var(--z-snackbar);color:#fff;border-radius:var(--z-r);padding:var(--z-s3) var(--z-s4);
  font-size:var(--z-fs-small);line-height:var(--z-lh-small)}
.toast span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.toast button{border:0;background:transparent;color:var(--z-blue-400);font-weight:500;cursor:pointer;white-space:nowrap;padding:0}

@media (max-width:620px){
  main{padding:var(--z-s3) var(--z-s3) 64px}
  .lbl{display:none}
  .panel,.card{padding:var(--z-s4) var(--z-s3)}
  .tabs{gap:var(--z-s5)}
  kbd{display:none}
}

/* ---------- segmented control ---------- */
.seg{display:flex;gap:4px;background:var(--z-fill-strong);padding:4px;border-radius:var(--z-r-pill)}
.seg button{flex:1;height:32px;border:0;background:transparent;border-radius:var(--z-r-pill);cursor:pointer;
  color:var(--z-text-2);font-size:var(--z-fs-xsmall);font-weight:500;white-space:nowrap;padding:0 var(--z-s2)}
.seg button.on{background:var(--z-surface);color:var(--z-primary-text)}

/* ---------- bottom sheet (ZaUI Sheet) ---------- */
.sheet-mask{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;justify-content:center;
  animation:zfade .15s ease}
.sheet{width:100%;max-width:560px;max-height:92vh;overflow-y:auto;background:var(--z-surface);
  border-radius:var(--z-r-lg) var(--z-r-lg) 0 0;padding:0 var(--z-s4) calc(var(--z-s4) + env(safe-area-inset-bottom));
  animation:zup .2s ease}
.sheet-head{position:sticky;top:0;z-index:1;background:var(--z-surface);display:flex;align-items:center;gap:var(--z-s2);
  height:var(--z-header-h);margin:0 calc(-1 * var(--z-s4)) var(--z-s2);padding:0 var(--z-s2) 0 var(--z-s4);border-bottom:1px solid var(--z-divider)}
.sheet-head h3{margin:0;flex:1;font-size:var(--z-fs-header);font-weight:500}
.sheet-head:before{content:"";position:absolute;top:6px;left:50%;width:36px;height:4px;margin-left:-18px;border-radius:2px;background:var(--z-n-200)}
@media (min-width:600px){.sheet-mask{align-items:center}.sheet{border-radius:var(--z-r-lg)}.sheet-head:before{display:none}}
.field{padding:var(--z-s3) 0}
.field > label{display:block;font-size:var(--z-fs-xsmall);font-weight:500;color:var(--z-text-2);margin-bottom:var(--z-s2)}
.field input[type=text],.field input:not([type]){width:100%;height:var(--z-h-lg);font-size:16px}
@keyframes zfade{from{opacity:0}}
@keyframes zup{from{transform:translateY(24px);opacity:.6}}