/* ============================================================
   GOBI · APPLE — token + thành phần dùng chung (v1.0, 2026-10-22)
   Nguồn: apple.css + desktop.css của bản vẽ Gobi v2 (anh chốt 13/10/2026),
   gộp thành MỘT tệp để app khác dùng. Màu lệch moc-lam.css vài đơn vị là
   chủ ý (anh chốt 13/10) — ánh xạ sang token gobi.css xem style guide §9.

   TRIẾT LÝ (Apple HIG, đọc ở gobi-apple-style-guide.md):
   - Phẳng, không viền, không lồi-lõm. Khối phân biệt bằng MÀU NỀN, không bằng bóng/viền.
   - Mỗi màn một việc, MỘT nút vàng. Việc phụ = link hoặc nút xám.
   - Danh sách = nhóm bo góc có ›. Chữ ít, chữ đời thường.
   - Font hệ thống (SF Pro trên Apple, Inter/system-ui nơi khác). Không nạp web font.

   CONTRAST đã đo 22/10 (WCAG, trên bg / s1 / s2):
   - t1 #F2EFE6: 16,2 / 14,7 / 12,9 — chữ chính
   - t2 #A3ADA5:  8,1 /  7,3 /  6,4 — chữ phụ, chú thích, nhãn nhóm
   - t3 #6F7A72:  4,2 /  3,8 /  3,3 — CHỈ icon, ›, placeholder (≥3:1). KHÔNG dùng cho chữ đọc.
   - ac #E3B455:  9,7 /  8,8 /  7,7 — nút vàng, link, số nhấn
   - ac-t #1A1405 trên ac: 9,5 — chữ trên nút vàng
   - ok #5FC48A: 8,7 / 7,8 / 6,9 · warn #E8A25A: 8,6 / 7,8 / 6,9 · hot #E08D66: 7,3 / 6,6 / 5,8
   Đổi màu thì đo lại — không đoán.
   ============================================================ */

:root{
  /* — Nền 3 tầng (phẳng; phân biệt bằng độ sáng, không bóng) — */
  --bg:  #0E1411;   /* nền trang, xanh-đen rừng */
  --s1:  #161F1A;   /* nhóm danh sách, thẻ, menu đang chọn */
  --s2:  #1F2A24;   /* ô nhập, nút phụ, badge, chấm bước chưa tới */
  --sep: rgba(255,255,255,.08);  /* kẻ giữa hàng trong nhóm — hairline duy nhất */

  /* — Chữ — */
  --t1:  #F2EFE6;   /* chính */
  --t2:  #A3ADA5;   /* phụ */
  --t3:  #6F7A72;   /* icon, ›, placeholder — không phải chữ đọc */

  /* — Nhấn: MỘT màu vàng, dùng cho đúng một nút mỗi màn — */
  --ac:   #E3B455;
  --ac-t: #1A1405;  /* chữ trên nền vàng */

  /* — Ngữ nghĩa (chỉ chữ/badge, không tô nền lớn) — */
  --ok:   #5FC48A;
  --warn: #E8A25A;
  --hot:  #E08D66;  /* lỗi, cấp bách — cùng họ kim loại ấm, không chọi nền lục */

  /* — Hình học — */
  --r:    16px;     /* nhóm, thẻ */
  --r-sm: 10px;     /* ô nhập, mục menu */
  --pill: 999px;    /* nút */

  /* — Font hệ thống — */
  --f: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
}

/* ---------- Nền tảng ---------- */
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--t1);font:17px/1.47 var(--f);-webkit-font-smoothing:antialiased}
a{color:var(--ac);text-decoration:none}
button{font:inherit;cursor:pointer}
.wrap{max-width:680px;margin:0 auto;padding:24px 20px 120px}

/* ---------- Chữ: 5 cỡ, không thêm ---------- */
.lt {font-size:34px;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin:8px 0 4px}   /* tiêu đề màn */
.t2 {font-size:22px;font-weight:600;line-height:1.25;margin:28px 0 8px}                         /* tiêu đề mục */
.sub{color:var(--t2);font-size:17px;margin:0 0 24px}                                            /* một dòng dưới tiêu đề */
.cap{color:var(--t2);font-size:13px;text-transform:uppercase;letter-spacing:.04em;margin:28px 16px 8px} /* nhãn nhóm */
.fn {color:var(--t2);font-size:13px}                                                            /* chú thích */
.num{font-size:44px;font-weight:700;letter-spacing:-.02em;line-height:1.05}                     /* số lớn */

/* ---------- Nhóm danh sách (thay thẻ viền, chip, bảng) ---------- */
.group{background:var(--s1);border-radius:var(--r);overflow:hidden}
.row{display:flex;align-items:center;gap:12px;min-height:52px;padding:12px 16px;border-top:1px solid var(--sep);color:inherit}
.row:first-child{border-top:0}
.row .grow{flex:1;min-width:0}
.row .val{color:var(--t2);flex:none;max-width:48%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .ic{width:22px;height:22px;flex:none;color:var(--t2)}
.chev::after{content:"›";color:var(--t3);font-size:22px;line-height:1;margin-left:6px}
.row.on{background:var(--s2)}

/* ---------- Nút: một vàng, còn lại xám hoặc link ---------- */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:50px;border:0;border-radius:var(--pill);
     background:var(--ac);color:var(--ac-t);font:600 17px var(--f);transition:opacity .15s}
.btn:active{opacity:.85}
.btn:disabled{opacity:.4;cursor:default}
.btn-2{background:var(--s2);color:var(--t1)}
.link{color:var(--ac);background:none;border:0;font:17px var(--f);padding:12px 0}
.bar{position:sticky;bottom:0;background:linear-gradient(transparent,var(--bg) 30%);padding:20px 0}  /* khay nút đáy */

/* ---------- Ô nhập ---------- */
.input{width:100%;background:var(--s2);border:0;border-radius:var(--r-sm);padding:14px 16px;color:var(--t1);font:17px var(--f)}
.input::placeholder{color:var(--t3)}
.input:focus{outline:2px solid var(--ac);outline-offset:0}
textarea.input{min-height:120px;resize:vertical;line-height:1.47}

/* ---------- Badge, chấm bước, công tắc ---------- */
.badge{font-size:13px;padding:3px 10px;border-radius:var(--pill);background:var(--s2);color:var(--t2);white-space:nowrap}
.badge.ok{color:var(--ok)}.badge.ac{color:var(--ac)}.badge.warn{color:var(--warn)}.badge.hot{color:var(--hot)}
.dots{display:flex;gap:6px}.dots i{width:8px;height:8px;border-radius:50%;background:var(--s2)}.dots i.on{background:var(--ac)}
.switch{width:51px;height:31px;border-radius:var(--pill);background:var(--s2);position:relative;flex:none;border:0}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;transition:left .15s}
.switch.on{background:var(--ok)}.switch.on::after{left:22px}

/* ---------- Thẻ, sheet, tiến độ ---------- */
.card{background:var(--s1);border-radius:var(--r);padding:20px}
.sheet{background:var(--s1);border-radius:20px 20px 0 0;padding:8px 0 24px}
.prog{height:6px;border-radius:var(--pill);background:var(--s2);overflow:hidden}
.prog>i{display:block;height:100%;background:var(--ac);border-radius:var(--pill)}

/* ---------- Màn trống / đang tải / lỗi (5 trạng thái, components/bang.md) ---------- */
.empty{text-align:center;padding:64px 20px;color:var(--t2)}
.empty .lt{font-size:22px;color:var(--t1)}
.empty .btn{width:auto;min-width:200px;margin:20px auto 0}

/* ---------- Khung MÁY TÍNH (≥1024): menu trái + pane + body ---------- */
.side,.pane{display:none}
.cols>.c-aside{margin-top:28px;padding:0 20px}
@media(min-width:900px){.wrap{padding-top:48px}.btn{width:auto;min-width:240px;padding:0 32px}}
@media(min-width:1024px){
  .app{display:grid;grid-template-columns:232px 1fr;min-height:100vh;background:var(--bg)}
  .side{display:flex;flex-direction:column;gap:2px;padding:20px 12px;border-right:1px solid var(--sep)}
  .side .logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:20px;padding:4px 12px 20px}
  .side a{display:flex;align-items:center;gap:12px;min-height:40px;padding:0 12px;border-radius:var(--r-sm);color:var(--t2);font-size:15px}
  .side a svg{width:18px;height:18px;flex:none}
  .side a.on{background:var(--s1);color:var(--t1)}
  .side .foot{margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px;color:var(--t2);font-size:14px}
  .main{display:flex;min-width:0}
  .pane{display:block;width:280px;flex:none;border-right:1px solid var(--sep);padding:20px 12px;overflow:hidden}
  .body{flex:1;min-width:0;padding:40px 48px 80px}
  .body>.wrap,.body .wrap{max-width:none;padding:0;margin:0}
  .body.narrow{max-width:760px;margin:0 auto}
  .cols{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:40px;align-items:start;max-width:1100px}
  .cols>.c-aside{margin-top:0;padding:0;position:sticky;top:24px}
  .bar{position:static;background:none;padding:24px 0 0}
}

/* ---------- Motion ---------- */
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}