/* ============================================================
   Bàn Học — trang chủ. Token và reset ở base.css, nạp trước tệp này.

   Hướng: Swiss editorial. Type lớn hẳn, lưới bất đối xứng, hairline
   thay cho khung viền, đúng một màu nhấn. Không gradient, không glow,
   không glass — đây là cửa vào một chỗ để đọc, không phải trang quảng cáo.
   ============================================================ */

body {
  min-height: 100%;
  min-height: 100dvh;   /* 100% vẫn nhảy khi thanh địa chỉ Safari iOS ẩn/hiện */
  display: flex;
  flex-direction: column;
}

/* --- thanh trên: rút xuống còn dấu hiệu nhận biết + nút giao diện --- */

.home-bar {
  display: flex; align-items: center;
  min-height: 60px;
  padding: var(--space-3) clamp(var(--space-4), 5vw, 56px);
  padding-left: max(clamp(var(--space-4), 5vw, 56px), env(safe-area-inset-left));
  padding-right: max(clamp(var(--space-4), 5vw, 56px), env(safe-area-inset-right));
}
.home-mark {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  border-radius: 8px;
  background: var(--primary); color: var(--on-primary);
}
.home-mark .ico { width: 17px; height: 17px; }

/* Ngày giờ nằm luôn trên thanh trên: hero đã bỏ, đây là chỗ duy nhất còn
   hiện nó ra ngoài ô "Lịch". */
.bar-now {
  margin: 0 0 0 auto;
  display: flex; align-items: center; gap: var(--space-3);
  min-width: 0;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted-fg);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bar-rule { width: 22px; height: 1px; background: var(--border-strong); flex: none; }

.icon-btn {
  margin-left: var(--space-3);
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  background: transparent; color: var(--muted-fg);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.icon-btn:hover { background: var(--muted); color: var(--fg); }
.icon-btn .ico-moon { display: none; }
:root[data-theme="dark"] .icon-btn .ico-sun { display: none; }
:root[data-theme="dark"] .icon-btn .ico-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-btn .ico-sun { display: none; }
  :root:not([data-theme="light"]) .icon-btn .ico-moon { display: block; }
}

/* --- thân trang --- */

.home {
  flex: 1;
  width: 100%; max-width: 1180px;
  margin: 0 auto;
  padding: clamp(var(--space-4), 4vw, 40px) clamp(var(--space-4), 5vw, 56px) var(--space-6);
  padding-bottom: max(var(--space-6), env(safe-area-inset-bottom));
  display: flex; flex-direction: column;
  gap: clamp(var(--space-5), 4vw, 44px);
}

/* --- lưới: các ô KHÔNG bằng nhau. Ba thẻ y hệt nhau cạnh nhau chính là
       mẫu template mà cả ba skill đều gắn cờ. Nên ô "Học" giữ nguyên cột
       trái và cao gấp đôi, còn cột phải chia cho "Lịch" và "Chi tiêu" —
       vẫn hai cột, không phải ba. Thêm ô nữa thì khai lại grid-template-areas
       cho đúng nhịp, đừng nhân bản ô. --- */

.grid {
  display: grid;
  grid-template-columns: 1.62fr 1fr;
  grid-template-areas: "hoc lich" "hoc tien";
  gap: var(--space-3);
}
.cell-lead { grid-area: hoc; }
.cell-side { grid-area: lich; }
.cell-tien { grid-area: tien; }

.cell {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  gap: var(--space-4);
  padding: clamp(var(--space-4), 2.4vw, 30px);
  border-radius: var(--radius-lg);
  color: inherit; text-decoration: none;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.cell:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
.cell:active { transform: translateY(0) scale(.995); }

.cell-body { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.cell h2 {
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 600; letter-spacing: -.03em; line-height: 1;
}
.cell p {
  margin: 0; max-width: 34ch;
  font-size: 14px; line-height: 1.6;
}

.cell-go {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 600;
}
.cell-go-dot {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  border-radius: 999px;
  border: 1px solid currentColor;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.cell-go-dot .ico { width: 15px; height: 15px; }
.cell:hover .cell-go-dot { transform: translateX(4px); }

/* ô dẫn: tô kín màu nhấn — điểm nhìn duy nhất của trang.
   Cao gấp đôi vì nó trải hai hàng của cột phải. */
.cell-lead {
  min-height: clamp(330px, 40vw, 452px);
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: var(--shadow-sm);
}
/* 78% chi ra 3.79:1. Ep gan het ve --on-primary de qua 4.5:1 ma van
   tach duoc khoi tieu de. */
.cell-lead p { color: color-mix(in srgb, var(--on-primary) 92%, var(--primary)); }
.cell-lead:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.cell-lead:hover .cell-go-dot { background: color-mix(in srgb, var(--on-primary) 18%, transparent); }

/* Icon phóng to làm hoạ tiết nền, không phải hình vẽ tay mới. */
.cell-ghost {
  position: absolute; z-index: -1;
  right: -14%; top: -22%;
  width: 62%; height: auto; aspect-ratio: 1;
  color: var(--on-primary);
  opacity: .13;
  stroke-width: 1.1;
}

/* ô phụ: nền thẻ + hairline, không bóng nặng */
.cell-side {
  min-height: clamp(159px, 19.4vw, 220px);
  background: var(--card);
  border: 1px solid var(--border);
}
.cell-side p { color: var(--muted-fg); font-size: 13px; max-width: 30ch; }
.cell-side .cell-go { color: var(--primary); }
.cell-side:hover { border-color: var(--primary); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.cell-side:hover .cell-go-dot { background: var(--primary-soft); }

/* Hai ô cột phải thấp hơn ô dẫn nên chữ phải nhỏ lại theo, không thì hàng tự
   nở ra và đẩy dải "Hôm nay" xuống dưới màn hình. */
.cell-side { padding: clamp(var(--space-4), 1.8vw, 22px); gap: var(--space-3); }
.cell-side h2 { font-size: clamp(20px, 2.2vw, 26px); }

.cell-date, .cell-money {
  display: flex; align-items: baseline; gap: 8px;
  min-width: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}
.cell-date b, .cell-money b {
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 500; letter-spacing: -.05em; line-height: .85;
  white-space: nowrap;
}
.cell-date i, .cell-money i {
  font-style: normal; font-size: 12px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted-fg);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Số tiền dài hơn số ngày nhiều — cho nó co lại thay vì đẩy nhãn ra ngoài. */
.cell-money b { font-size: clamp(26px, 3.2vw, 38px); overflow: hidden; text-overflow: ellipsis; }

/* --- dải Hôm nay: hàng dữ liệu thật, hairline, không phải thẻ --- */

.strip { display: flex; flex-direction: column; gap: var(--space-3); }
.strip-head {
  display: flex; align-items: baseline; gap: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-strong);
}
.strip-head h2 {
  font-size: 13px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg);
}
.strip-count {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  color: var(--muted-fg); font-variant-numeric: tabular-nums;
}

.strip-list { list-style: none; margin: 0; padding: 0; }
.strip-row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  align-items: baseline; gap: var(--space-4);
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
}
.strip-row:last-child { border-bottom: 0; }

/* Hàng có gắn môn thì bấm được — mở thẳng môn đó trong bàn đọc. */
a.strip-row {
  color: inherit; text-decoration: none;
  margin: 0 calc(var(--space-3) * -1);
  padding-left: var(--space-3); padding-right: var(--space-3);
  border-radius: 8px;
  transition: background var(--dur) var(--ease);
}
a.strip-row:hover { background: var(--muted); }
a.strip-row:hover .strip-name { color: var(--primary); }
a.strip-row:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
@media (pointer: coarse) { .strip-row { padding-top: 15px; padding-bottom: 15px; } }
.strip-time {
  font-family: var(--font-mono); font-size: 13px; font-weight: 500;
  color: var(--fg); font-variant-numeric: tabular-nums;
}
.strip-name {
  font-size: 15px; font-weight: 500; color: var(--fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.strip-tail { font-size: 12px; color: var(--muted-fg); white-space: nowrap; }
.strip-kind {
  display: inline-block;
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
  color: var(--on-primary); background: var(--k, var(--muted-fg));
}
.strip-empty {
  padding: 15px 0 4px; margin: 0;
  font-size: 14px; color: var(--muted-fg);
}

.home-foot {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  font-size: 12px; line-height: 1.6; color: var(--muted-fg);
  max-width: 62ch;
}
.home-foot b { color: var(--fg); font-weight: 600; }

/* --- vào trang: một lượt duy nhất, so le nhẹ. Trang này mở hàng chục
       lần mỗi ngày nên hoạt cảnh phải ngắn, và biến mất hoàn toàn khi
       người dùng đã tắt chuyển động. --- */

@media (prefers-reduced-motion: no-preference) {
  .cell-lead, .cell-side, .strip {
    animation: rise 460ms var(--ease) both;
  }
  .cell-side { animation-delay: 60ms; }
  .strip     { animation-delay: 120ms; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- màn hẹp --- */

@media (max-width: 820px) {
  /* Một cột: bỏ hẳn vùng lưới, ba ô xếp dọc theo đúng thứ tự trong HTML. */
  .grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; }
  .cell-lead, .cell-side, .cell-tien { grid-area: auto; min-height: 0; }
  .cell-lead { padding-bottom: var(--space-5); }
}

@media (max-width: 560px) {
  .home { gap: var(--space-5); }
  /* Không đủ chỗ cho cả ngày lẫn giờ; giờ là thứ hay nhìn hơn. */
  .bar-now #now-date, .bar-rule { display: none; }
  .strip-row { grid-template-columns: 68px minmax(0, 1fr); gap: var(--space-3); }
  .strip-tail { grid-column: 2; font-size: 11px; }
  .cell-ghost { right: -20%; top: -16%; width: 74%; }
}