/* Pass tối giản (chủ tịch 14/10: "design kiểu minimal hơn"): một màu nhấn, nền trắng, viền mảnh, không gradient, không bóng, biểu tượng đơn sắc. Nạp SAU app.css để ghi đè. */
:root, :root:not([data-theme="light"]), :root[data-theme="dark"] {
  --chinh: #2563eb; --chinh-dam: #1d4ed8; --chinh-nhat: #eef3ff; --nhan: #111827; --nhan-nhat: #f3f4f6;
  --chu: #111827; --chu-mo: #6b7280; --nen: #ffffff; --nen-phu: #f9fafb; --vien: #e5e7eb; --bo-goc: 14px; --xanh-ok: #10b981;
}
html { background: #f9fafb; }
#app { box-shadow: none; }
@media (min-width: 520px) { #app { border-left: 1px solid var(--vien); border-right: 1px solid var(--vien); } }
.dau-app { border-bottom: 0; background: #fff; }
.dau-app h1 { font-size: 17px; font-weight: 600; }
.dau-app .lui, .nut-tron { background: transparent; border: 1px solid var(--vien); }
/* trang chủ: đầu trắng, chữ đậm, không gradient */
.dau-trang-chu { background: #f9fafb; color: var(--chu); padding: calc(18px + env(safe-area-inset-top)) 20px 8px; border-radius: 0; }
.dau-trang-chu .chao { color: var(--chu-mo); font-size: 13px; }
.dau-trang-chu .ten { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.dau-trang-chu .vi-tri { background: transparent; color: var(--chu-mo); padding: 0; margin-top: 2px; font-size: 13px; }
.dau-trang-chu .vi-tri svg { color: var(--chinh); }
.dau-trang-chu .nut-tron { color: var(--chu); }
.tim { margin: 12px 20px 0; box-shadow: none; border: 0; background: #f3f4f6; border-radius: 999px; padding: 12px 16px; }
.tim svg { color: #9ca3af; }
.banner { margin: 28px 20px 0; background: var(--chinh); color: #fff; border-radius: 16px; padding: 16px 18px; }
.banner p { color: rgba(255,255,255,.85) !important; }
.banner strong { font-size: 15px; } .banner p { color: var(--chu-mo); font-size: 13px; opacity: 1; }
.banner .nut { background: #fff; color: var(--chinh); padding: 10px 14px; border-radius: 10px; font-size: 14px; }
.khoi { padding: 28px 20px 0; }
.khoi h2 { font-size: 18px; font-weight: 600; margin-bottom: 14px; } .khoi h2 a { font-weight: 500; font-size: 13px; }
.luoi-nghe { gap: 8px; }
.luoi-nghe .o, .luoi-nghe a:nth-child(n) .o { width: 48px; height: 48px; border-radius: 50%; background: rgba(37, 99, 235, .10); color: var(--chinh); transition: transform .12s; }
.luoi-nghe a:active .o { transform: scale(.94); }
.luoi-nghe .o svg { width: 24px; height: 24px; stroke-width: 1.75; }
.luoi-nghe a { font-size: 12px; font-weight: 500; color: var(--chu); }
.cuon-ngang { padding: 2px 20px 4px; margin: 0 -20px; }
.the-tho { flex-basis: 140px; border-radius: 14px; padding: 14px 10px; background: #fff; }
.the-tho .ten { font-size: 14px; font-weight: 600; }
.avatar, .avatar.nho, .avatar.lon { background: #f3f4f6 !important; color: var(--chu); font-weight: 600; }
.avatar .tich { background: #10b981; }
.nhan.ok { background: #ecfdf5; color: #047857; }
.sao-dong { color: var(--chu); font-weight: 500; } .sao-dong svg { fill: var(--chu); color: var(--chu); width: 12px; height: 12px; }
.nhan { background: #f3f4f6; color: var(--chu); font-weight: 500; }
.nhan.ok { background: #ecfdf5; color: #047857; } .nhan.cho { background: #fffbeb; color: #b45309; } .nhan.xam { background: #f3f4f6; color: var(--chu-mo); } .nhan.cam, .nhan.tim { background: var(--chinh-nhat); color: var(--chinh); }
.the-viec { grid-template-columns: 44px 1fr; border-radius: 14px; padding: 14px; border: 1px solid var(--vien); margin: 0 0 10px; background: #fff; }
.the-viec .o { width: 44px; height: 44px; border-radius: 12px; background: #f3f4f6; color: var(--chu); }
.the-viec .o svg { stroke-width: 1.75; width: 22px; height: 22px; }
.the-viec .tieu-de { font-weight: 600; }
.the-viec .phai { grid-column: 2; flex-direction: row; justify-content: flex-start; align-items: center; margin-top: 8px; gap: 10px; }
.the-viec .phai b { color: var(--chu-mo); font-weight: 500; }

.chip-dong { padding: 10px 20px 2px; } .chip { padding: 6px 12px; font-weight: 500; border-color: var(--vien); }
.chip[aria-pressed="true"] { background: var(--chinh); border-color: var(--chinh); }
.thong-ke-o div { border-radius: 12px; } .thong-ke-o b { font-size: 20px; color: var(--chu); }
/* tab dưới: mảnh, nút giữa không nổi */
.tab-duoi { border-top: 1px solid var(--vien); padding-top: 8px; }
.tab-duoi a { font-size: 10.5px; font-weight: 500; } .tab-duoi a svg { width: 22px; height: 22px; stroke-width: 1.75; }
.tab-duoi a.giua { margin-top: 0; } .tab-duoi a.giua .vong { width: 40px; height: 40px; border-radius: 12px; background: var(--chinh); box-shadow: none; margin-bottom: -2px; }
.tab-duoi a.giua .vong svg { width: 22px; height: 22px; }
.tab-duoi a { color: #9ca3af; } .tab-duoi a[aria-current="page"] { color: var(--chinh); } .tab-duoi a[aria-current="page"] svg { stroke-width: 2.25; fill: rgba(37,99,235,.12); }
.tab-duoi { background: #fff; }
/* chi tiết: không dải màu, đầu trắng */
.dai-mau { background: #fff; color: var(--chu); padding: 8px 20px 16px; border-bottom: 1px solid var(--vien); }
.dai-mau .o-lon { background: #f3f4f6; color: var(--chu); border-radius: 16px; width: 56px; height: 56px; }
.dai-mau .o-lon svg { width: 28px; height: 28px; stroke-width: 1.75; }
.dai-mau h2 { font-size: 22px; letter-spacing: -.02em; }
.dai-mau .nhan { background: #f3f4f6; color: var(--chu); }
.dai-mau > div[style*="rgba(255,255,255"] { background: #f3f4f6 !important; color: var(--chu); }
.the { border-radius: 14px; margin: 12px 20px 0; padding: 14px 16px; background: #fff; }
.the h3 { font-size: 12px; letter-spacing: .06em; }
.hang-thong-tin svg { color: var(--chu-mo); stroke-width: 1.75; }
.nut { border-radius: 12px; font-weight: 600; min-height: 48px; } .nut.cam { background: var(--chinh); } .nut.phu { background: #f3f4f6; color: var(--chu); } .nut.vien { border-color: var(--vien); }
.nut-day { padding: 10px 20px; background: linear-gradient(to top, #fff 70%, transparent); }
.form { padding: 0 20px; } .form input, .form select, .form textarea { border-radius: 12px; }
.chon-o button { border-radius: 12px; border-width: 1px; } .chon-o button svg { color: var(--chu); stroke-width: 1.75; }
.chon-o button[aria-pressed="true"] { border-color: var(--chinh); background: var(--chinh-nhat); }
.buoc-thanh { padding: 12px 20px 0; } .buoc-thanh i.xong { background: var(--chinh); }
.rong .o { background: #f3f4f6; color: var(--chu); border-radius: 20px; }
.tam .to { border-radius: 20px 20px 0 0; }
.vai-tro-chon { padding: 0 20px; } .vai-tro-chon button { border-radius: 14px; border-width: 1px; } .vai-tro-chon button .o { background: #f3f4f6 !important; color: var(--chu) !important; border-radius: 14px; }
.menu-toi { margin: 12px 20px 0; border-radius: 14px; } .menu-toi svg { color: var(--chu); stroke-width: 1.75; }
.menu-toi a:first-child, .menu-toi button:first-child { border-radius: 14px 14px 0 0; } .menu-toi a:last-child, .menu-toi button:last-child { border-radius: 0 0 14px 14px; }
.sao-chon button.chon { color: #f59e0b; }
.toast { border-radius: 10px; }
.bao { margin: 12px 20px 0; border-radius: 12px; }
.dau-trang-chu .hang > div .ten { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }