/* ─────────────────────────────────────────────────────────────────────────
   app-theme.css — hệ thiết kế Gia Cốp, bố cục học từ app WATV
   (My Memo · MyPage · Pray Daily · NM School · EDU LMS · Mother's Love)

   Nguyên tắc mượn từ WATV:
     • nền TRẮNG là chính, phân mục bằng DẢI NỀN tràn viền (không viền khung)
     • thanh trên TRẮNG chữ đen, tiêu đề canh trái, letter-spacing âm nhẹ
     • ô chức năng vuông bo 16px, mỗi mục một màu phấn khác nhau
     • hàng danh sách + dấu › là khung xương của trang mục lục
     • bóng gần như không, bo góc nút nhỏ (8-10px)
   Màu thương hiệu vẫn là NAVY Gia Cốp (#1a4b8c) — không đổi sang xanh WATV.
   Resolves at /css/app-theme.css.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --gc-navy:        #1a4b8c;
  --gc-navy-dark:   #0f2e5a;
  --gc-navy-light:  #e8effa;
  --gc-navy-mid:    #3567b5;
  --gc-navy-soft:   #93c5fd;

  /* Mực & nét — thang xám của WATV */
  --gc-ink:         #111111;
  --gc-ink-2:       #666666;
  --gc-ink-3:       #999999;
  --gc-line:        #ebebeb;
  --gc-line-soft:   #f1f3f6;

  /* Dải phân mục tràn viền */
  --gc-band:        #f5f8fb;
  --gc-band-warm:   #f8f5f1;
  --gc-band-amber:  #fff8e1;

  /* Nhấn phụ */
  --gc-gold:        #ffd75e;
  --gc-green:       #16a34a;
  --gc-red:         #ef4444;

  /* Màu phấn cho ô chức năng (mỗi mục một màu, chữ vẫn đen) */
  --gc-p-sky:       #d9ecff;
  --gc-p-pink:      #ffe8ef;
  --gc-p-lilac:     #e4e8ff;
  --gc-p-mint:      #d5f5e6;
  --gc-p-cream:     #fff4cc;
  --gc-p-peach:     #ffe9db;
  --gc-p-lime:      #e6f6cf;
  --gc-p-lavender:  #efe4ff;

  --gc-radius-sm:   8px;
  --gc-radius:      12px;
  --gc-radius-lg:   16px;

  --gc-shadow-sm:   0 1px 2px rgba(15,46,90,.05);
  --gc-shadow:      0 2px 8px rgba(15,46,90,.06);
  --gc-shadow-lg:   0 8px 24px rgba(15,46,90,.10);

  --gc-gradient:    linear-gradient(135deg, #0f2e5a 0%, #1a4b8c 60%, #3567b5 100%);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Inter", sans-serif;
  -webkit-font-smoothing: antialiased;
  background: #ffffff;
  color: var(--gc-ink);
}

/* Chữ đậm cỡ lớn siết nhẹ — dấu hiệu nhận dạng của WATV */
h1, h2, h3, .gc-title, .gc-sec-title, .gc-appbar-title {
  letter-spacing: -0.3px;
}

/* ── Thanh trên: TRẮNG, chữ đen ─────────────────────────────────────────── */
.gc-appbar {
  background: #ffffff;
  border-bottom: 1px solid var(--gc-line);
  box-shadow: none;
}
.gc-appbar-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--gc-ink);
}
.gc-appbar-btn {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 999px;
  color: var(--gc-ink);
  background: transparent;
  transition: background-color .15s;
}
.gc-appbar-btn:hover { background: var(--gc-line-soft); }

/* Nút "Trang chủ" trên thanh đầu — vùng chạm rộng, có chữ (phiếu 16/08). */
.gc-appbar-home { min-height: 44px; background: var(--gc-line-soft, #eef2f7); transition: background-color .15s; }
.gc-appbar-home:hover { background: #dde5f0; }
.gc-appbar-btn { width: 44px; height: 44px; }

.gc-brand-dot { color: var(--gc-navy); }

/* ── Dải phân mục tràn viền (thay cho đường kẻ/khung) ───────────────────── */
.gc-band      { background: var(--gc-band); }
.gc-band-warm { background: var(--gc-band-warm); }
.gc-gap       { height: 10px; background: var(--gc-band); }

/* ── Tiêu đề mục ────────────────────────────────────────────────────────── */
.gc-sec-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--gc-ink);
}
.gc-sec-sub {
  font-size: 15px;
  color: var(--gc-ink-2);
  margin-top: 4px;
}
.gc-sec-more {
  font-size: 14px;
  color: var(--gc-ink-3);
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.gc-hero {                       /* tràn viền, dùng ở trang chủ */
  background: var(--gc-navy);
  color: #fff;
}
.gc-hero-card {                  /* thẻ bo góc, dùng đầu trang mục */
  background: var(--gc-navy);
  color: #fff;
  border-radius: var(--gc-radius-lg);
  overflow: hidden;
}
.gc-kicker {
  color: var(--gc-gold);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2px;
}

/* ── Ô chức năng nhanh ──────────────────────────────────────────────────── */
.gc-quick {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 8px;
}
@media (min-width: 480px) { .gc-quick { grid-template-columns: repeat(5, minmax(0,1fr)); } }
.gc-quick-tile {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center;
}
.gc-quick-icon {
  width: 62px; height: 62px;
  border-radius: var(--gc-radius-lg);
  display: grid; place-items: center;
  font-size: 28px; line-height: 1;
  transition: transform .15s;
}
.gc-quick-tile:active .gc-quick-icon { transform: scale(.94); }
.gc-quick-label {
  font-size: 12.5px;
  line-height: 1.25;
  color: var(--gc-ink);
  font-weight: 500;
}
.gc-quick-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px;
  background: var(--gc-red); color: #fff;
  font-size: 10px; font-weight: 700;
  display: grid; place-items: center;
}

/* ── Hàng danh sách + dấu › ─────────────────────────────────────────────── */
.gc-row {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--gc-line);
  color: var(--gc-ink);
}
.gc-row:last-child { border-bottom: 0; }
.gc-row-icon {
  width: 48px; height: 48px; flex: none;
  border-radius: 14px;
  display: grid; place-items: center;
  font-size: 24px; line-height: 1;
}
.gc-row-title { font-size: 16.5px; font-weight: 600; line-height: 1.35; }
.gc-row-desc  { font-size: 13.5px; color: var(--gc-ink-3); line-height: 1.4; margin-top: 2px; }
.gc-row-chev  { color: #c4c8cf; font-size: 20px; flex: none; }
.gc-row:active { background: var(--gc-line-soft); }

/* ── Thẻ ────────────────────────────────────────────────────────────────── */
/* .gc-card dùng ở 100+ chỗ: giữ tên, đổi sang phẳng kiểu WATV */
.gc-card {
  border-radius: var(--gc-radius);
  transition: transform .15s, box-shadow .15s;
}
.gc-card:hover  { transform: none; box-shadow: var(--gc-shadow); }
.gc-card:active { transform: scale(.995); }

.gc-tint-card {                  /* thẻ tô nhạt 2 cột */
  border-radius: var(--gc-radius);
  padding: 16px;
  position: relative;
  overflow: hidden;
}

/* ── Nút ────────────────────────────────────────────────────────────────── */
.gc-btn {
  display: block; width: 100%;
  padding: 15px 16px;
  border-radius: 10px;
  background: var(--gc-navy);
  color: #fff;
  font-size: 15.5px; font-weight: 700;
  text-align: center;
}
.gc-btn:active { background: var(--gc-navy-dark); }
.gc-btn-soft {
  display: block; width: 100%;
  padding: 15px 16px;
  border-radius: 10px;
  background: var(--gc-navy-light);
  color: var(--gc-navy);
  font-size: 15.5px; font-weight: 700;
  text-align: center;
}

/* ── Viên thuốc lọc (cuộn ngang) ────────────────────────────────────────── */
.gc-pills { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.gc-pills::-webkit-scrollbar { display: none; }
.gc-pill {
  flex: none;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--gc-line-soft);
  color: var(--gc-ink-2);
  font-size: 14px; font-weight: 600;
  white-space: nowrap;
}
.gc-pill.is-active { background: var(--gc-navy-dark); color: #fff; }

/* ── Tab gạch chân ──────────────────────────────────────────────────────── */
.gc-tabs {
  display: flex; gap: 22px;
  border-bottom: 1px solid var(--gc-line);
  overflow-x: auto; scrollbar-width: none;
}
.gc-tabs::-webkit-scrollbar { display: none; }
.gc-tab {
  flex: none;
  padding: 12px 0 10px;
  font-size: 16px; font-weight: 600;
  color: var(--gc-ink-3);
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}
.gc-tab.is-active { color: var(--gc-ink); border-bottom-color: var(--gc-navy); }

/* ── Trích dẫn Kinh Thánh ───────────────────────────────────────────────── */
.gc-quote {
  border-left: 3px solid #c0a58f;
  padding-left: 16px;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--gc-ink);
}
.gc-quote-ref { font-size: 14px; color: var(--gc-ink-3); margin-top: 10px; }

/* ── Chuỗi ngày (điểm danh) ─────────────────────────────────────────────── */
.gc-streak { display: flex; gap: 8px; justify-content: center; }
.gc-dot {
  width: 34px; height: 34px; border-radius: 999px;
  border: 2px solid var(--gc-line);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700; color: var(--gc-ink-3);
  background: #fff;
}
.gc-dot.is-done   { background: var(--gc-navy); border-color: var(--gc-navy); color: #fff; }
.gc-dot.is-today  { border-color: var(--gc-navy); color: var(--gc-navy); }
.gc-dot.is-missed { background: #f1f3f6; color: #c4c8cf; }

/* ── Dải mốc chặng cuộn ngang (70 chặng — mẫu chuỗi ngày của My Memo, kéo dài) ── */
.gc-milestones {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 6px 0 2px;
  -webkit-overflow-scrolling: touch;
}
.gc-milestones::-webkit-scrollbar { display: none; }
.gc-ms {
  flex: none;
  width: 72px;
  text-align: center;
  position: relative;
}
/* Đoạn nối giữa hai mốc — nằm sau vòng tròn. */
.gc-ms::before {
  content: '';
  position: absolute;
  top: 16px; left: 0; right: 50%;
  height: 3px;
  background: var(--gc-line);
}
.gc-ms::after {
  content: '';
  position: absolute;
  top: 16px; left: 50%; right: 0;
  height: 3px;
  background: var(--gc-line);
}
.gc-ms:first-child::before, .gc-ms:last-child::after { background: transparent; }
.gc-ms.is-qua::before, .gc-ms.is-qua::after { background: var(--gc-navy); }
.gc-ms.is-ke::before { background: var(--gc-navy); }
.gc-ms-dot {
  position: relative; z-index: 1;
  width: 26px; height: 26px; margin: 4px auto 0;
  border-radius: 999px;
  border: 2px solid var(--gc-line);
  background: #fff;
  display: grid; place-items: center;
  font-size: 11px; line-height: 1;
  color: var(--gc-ink-3);
}
.gc-ms.is-qua .gc-ms-dot { background: var(--gc-navy); border-color: var(--gc-navy); color: #fff; }
.gc-ms.is-ke  .gc-ms-dot { border-color: var(--gc-navy); color: var(--gc-navy); box-shadow: 0 0 0 4px rgba(26,75,140,.12); }
.gc-ms-ten {
  display: block;
  margin-top: 6px;
  font-size: 11px; line-height: 1.25;
  color: var(--gc-ink-2);
  padding: 0 4px;
}
.gc-ms.is-ke .gc-ms-ten { font-weight: 700; color: var(--gc-navy); }
.gc-ms-km { display: block; font-size: 10px; color: var(--gc-ink-3); margin-top: 2px; }
.gc-ms.is-sion .gc-ms-dot { border-color: #f59e0b; }
/* Mốc Pangyo dùng ảnh đền thánh thật thay vì ký hiệu. */
.gc-ms-anh { background-size: cover; background-position: center; font-size: 0; }
.gc-ms.is-sion.is-qua .gc-ms-dot { background: #f59e0b; border-color: #f59e0b; }

/* ── Câu hỏi kiểu viên thuốc (trang hướng dẫn) ──────────────────────────── */
.gc-qa-q {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--gc-navy-light);
  color: var(--gc-ink);
  font-weight: 700; font-size: 15.5px;
  padding: 10px 16px; border-radius: 999px;
}
.gc-qa-a { font-size: 16px; line-height: 1.7; color: #333; margin-top: 12px; }
.gc-mark { background: var(--gc-navy-light); color: var(--gc-navy); font-weight: 600; }

/* ── Thẻ tiến độ 3 cột (mẫu NM School) ──────────────────────────────────── */
.gc-progress-cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.gc-progress-card {
  position: relative;
  border-radius: var(--gc-radius);
  padding: 14px 12px 40px;
  min-height: 130px;
  overflow: hidden;
}
.gc-progress-card .gc-pc-title { font-size: 17px; font-weight: 700; line-height: 1.2; color: var(--gc-ink); }
.gc-progress-card .gc-pc-state { font-size: 13px; color: var(--gc-ink-3); margin-top: 6px; }
.gc-progress-card .gc-pc-art {
  position: absolute; right: 8px; bottom: 6px;
  font-size: 34px; opacity: .45; line-height: 1;
}

/* ── Hàng khoá học có ảnh + % (mẫu EDU LMS) ─────────────────────────────── */
.gc-course-row { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--gc-line); }
.gc-course-thumb {
  position: relative; flex: none;
  width: 96px; height: 76px; border-radius: 8px; overflow: hidden;
  background: var(--gc-line-soft);
  display: grid; place-items: center; font-size: 30px;
}
.gc-course-chip {
  position: absolute; top: 6px; left: 6px;
  background: #16a34a; color: #fff;
  font-size: 10.5px; font-weight: 700;
  padding: 3px 8px; border-radius: 999px;
}
.gc-course-kicker { font-size: 13px; font-weight: 600; color: var(--gc-navy-mid); }
.gc-course-title  { font-size: 17px; font-weight: 700; color: var(--gc-ink); line-height: 1.3; margin-top: 2px; }
.gc-course-meta   { font-size: 13px; color: var(--gc-ink-3); margin-top: 3px; }
.gc-bar { height: 6px; border-radius: 999px; background: var(--gc-line); overflow: hidden; flex: 1; }
.gc-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--gc-navy); }

/* ── Bộ đếm trang ‹ › (mẫu EDU LMS) ─────────────────────────────────────── */
.gc-pager { display: inline-flex; align-items: center; gap: 10px; }
.gc-pager-num { font-size: 15px; color: var(--gc-ink-3); }
.gc-pager-num b { color: var(--gc-navy); font-weight: 700; }
.gc-pager-btn {
  width: 34px; height: 34px;
  border: 1px solid var(--gc-line);
  display: grid; place-items: center;
  color: var(--gc-ink-2); font-size: 16px;
  background: #fff;
}
.gc-pager-btn:first-of-type { border-radius: 6px 0 0 6px; }
.gc-pager-btn:last-of-type  { border-radius: 0 6px 6px 0; border-left: 0; }

/* ── Thẻ trắng nổi trên nền màu (mẫu EDU LMS) ───────────────────────────── */
.gc-panel {
  background: #fff;
  border-radius: var(--gc-radius-lg);
  padding: 18px 16px;
  box-shadow: var(--gc-shadow);
}

/* ── Nút cuộn lên đầu trang (mẫu NM School) ─────────────────────────────── */
.gc-to-top {
  position: fixed; right: 16px;
  bottom: calc(150px + env(safe-area-inset-bottom, 0px));
  width: 46px; height: 46px; border-radius: 999px;
  background: rgba(60,64,72,.72); color: #fff;
  display: grid; place-items: center; font-size: 20px;
  z-index: 35;
}

/* ── Điều hướng dưới ────────────────────────────────────────────────────── */
.gc-bottom-nav {
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid var(--gc-line);
  box-shadow: none;
  border-radius: 0;
}
.gc-nav-item.is-active .gc-nav-icon { background: transparent; color: var(--gc-navy); }
.gc-nav-icon { transition: color .15s; }

/* ── Trang đăng nhập / xác thực ─────────────────────────────────────────── */
.gc-auth-bg {
  background:
    radial-gradient(1200px 500px at 50% -10%, rgba(53,103,181,.10), transparent 60%),
    #ffffff;
}
.gc-auth-card { box-shadow: var(--gc-shadow-lg); }
.gc-logo-badge {
  background: var(--gc-gradient);
  box-shadow: 0 6px 18px rgba(15,46,90,.28);
}

/* ── Ô nhập ─────────────────────────────────────────────────────────────── */
.gc-input:focus {
  border-color: var(--gc-navy-mid);
  box-shadow: 0 0 0 3px rgba(53,103,181,.18);
  outline: none;
}

@keyframes gcPopIn {
  from { transform: scale(.85); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.gc-pop-in { animation: gcPopIn .4s cubic-bezier(.175,.885,.32,1.275); }