:root {
  --navy: #1f2a36;
  --navy-light: #2c3c4d;
  --mint: #e6f7f6;
  --module: #f5f7f8;
  --accent: #e5202f;
  --accent-dark: #c11b29;
  --border: #e5e7eb;
  --text: #151515;
  --text-muted: #6b7280;
  --radius: 8px;

  /* Ty le co chu (type scale) - dong bo lai thay vi cac gia tri le te (0.72/0.75/0.78/0.8/0.85rem)
     rai rac truoc do. Chi 2 muc nho (xs/sm) cho label/meta, cac muc lon danh cho tieu de/so lieu
     de tao do tuong phan/an tuong ro hon (dac biet stat-value va hero, truoc do qua khiem ton). */
  --fs-xs: 0.75rem;    /* 12px - badge, eyebrow, label nho nhat */
  --fs-sm: 0.875rem;   /* 14px - meta/muted text can doc ro hon mot chut */
  --fs-lg: 1.25rem;    /* 20px - h5 */
  --fs-xl: 1.625rem;   /* 26px - h4 */
  --fs-2xl: 2rem;      /* 32px - h3 */
  --fs-3xl: 2.5rem;    /* 40px - h2 */
  --fs-4xl: 3.25rem;   /* 52px - h1 */
  --fs-hero: 3.75rem;  /* 60px - tieu de hero cong trinh, an tuong hon nhieu so 2.5rem cu */
  --fs-stat: 1.375rem; /* 22px - so lieu Tong thu/Tong chi/So du (user chinh lai tu 40px xuong 22px) */
}

body {
  font-family: "IBM Plex Sans", sans-serif;
  color: var(--text);
  background-color: #fff;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .navbar-brand {
  font-family: "Inter", sans-serif;
  font-weight: 900;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); }
h5 { font-size: var(--fs-lg); }
h6 { font-size: 1rem; }

/* Cac phan tu dang "nhan"/dieu huong - viet Hoa dong bo, giu doan van/mo ta o dang thuong de de doc */
.app-navbar .nav-link,
.btn,
.badge-status,
.form-label,
th {
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* ---------- Motion ---------- */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  animation: fadeInUp 0.5s ease both;
}

.fade-in-up.delay-1 {
  animation-delay: 0.08s;
}

.fade-in-up.delay-2 {
  animation-delay: 0.16s;
}

/* ---------- Header ---------- */

.navbar.app-navbar {
  background-color: #fff !important;
  border-bottom: 1px solid var(--border);
  box-shadow: none;
  /* Chua khoang trong tren cung bang dung chieu cao Dynamic Island/notch khi mo o che do
     standalone (PWA them vao MH chinh, khong co thanh dia chi Safari che bot) - viewport-fit=cover
     trong base.html cho phep env(safe-area-inset-top) co gia tri that thay vi luon = 0. */
  padding-top: calc(0.5rem + env(safe-area-inset-top, 0px));
}

.app-navbar .navbar-brand {
  color: var(--navy) !important;
  font-weight: 900;
}

.app-navbar .nav-link {
  color: var(--navy) !important;
  font-weight: 500;
  transition: color 0.15s ease;
}

.app-navbar .nav-link:hover {
  color: var(--accent) !important;
}

.app-navbar .navbar-text {
  color: var(--text-muted) !important;
}

/* ---------- Buttons ---------- */

.btn {
  border-radius: var(--radius);
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease,
    border-color 0.15s ease, color 0.15s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  background-color: var(--accent);
  border-color: var(--accent);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--accent-dark);
  border-color: var(--accent-dark);
  box-shadow: 0 6px 16px rgba(229, 32, 47, 0.25);
}

.btn-outline-secondary {
  color: var(--navy);
  border-color: var(--navy);
}

.btn-outline-secondary:hover {
  background-color: var(--navy);
  border-color: var(--navy);
  color: #fff;
  box-shadow: 0 6px 16px rgba(31, 42, 54, 0.18);
}

.btn-outline-light {
  border-radius: var(--radius);
}

/* ---------- Cards ---------- */

.card {
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

a.card-link-hover {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  display: block;
}

a.card-link-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(31, 42, 54, 0.1);
}

/* ---------- Modal ---------- */

.modal-content {
  border: none;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(31, 42, 54, 0.25);
}

.modal-header {
  border-bottom: 1px solid var(--border);
  padding: 1.1rem 1.4rem;
}

.modal-body {
  padding: 1.4rem;
}

/* ---------- Section icon badges (dong bo kich thuoc, khac gradient theo muc) ---------- */

.section-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 14px;
  box-shadow: 0 4px 10px rgba(31, 42, 54, 0.12);
}

.section-icon.icon-thu-chi {
  background: linear-gradient(135deg, #ff7a59, var(--accent));
}

.section-icon.icon-nhat-ky {
  background: linear-gradient(135deg, var(--navy-light), var(--navy));
}

.section-icon.icon-ho-so {
  background: linear-gradient(135deg, #2dd4bf, #0f8a5f);
}

/* ---------- Status badge ---------- */

.badge-status {
  display: inline-block;
  padding: 0.3em 0.7em;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 600;
  background-color: var(--mint);
  color: var(--navy);
}

.badge-status.on-hero {
  background-color: rgba(255, 255, 255, 0.16);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

/* ---------- Back link (nut quay lai trang truoc) ---------- */

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 1rem;
  padding: 5px 14px 5px 6px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background-color: #fff;
  color: var(--navy);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.back-link:hover {
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(229, 32, 47, 0.15);
  transform: translateX(-2px);
}

.back-link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: var(--module);
  color: var(--navy);
  font-size: var(--fs-sm);
  line-height: 1;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.back-link:hover .back-link-icon {
  background-color: var(--accent);
  color: #fff;
}

/* ---------- Project hero (background photo per cong trinh) ---------- */

.hero-cover {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  min-height: 260px;
  display: flex;
  align-items: flex-end;
  background-color: var(--navy);
  background-size: cover;
  background-position: center;
  padding: 40px 0;
  color: #fff;
  margin-bottom: 24px;
}

/* Bleed het chieu rong man hinh (tran vien) trong khi noi dung ben trong van can giua qua .container */
.hero-cover.hero-bleed {
  border-radius: 0;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.hero-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(31, 42, 54, 0.2) 0%, rgba(31, 42, 54, 0.88) 100%);
}

.hero-cover > * {
  position: relative;
  z-index: 1;
}

/* Anh nen hero (dung 1 anh duy nhat/cong trinh) - nam duoi lop gradient ::before
   (z-index 0 mac dinh < 1). Hieu ung Ken Burns (zoom/pan cham) thay cho crossfade nhieu anh
   truoc do (da bo vi anh goc qua nang, tai trang cham). */
@keyframes heroKenBurns {
  0% { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.12) translate(-2%, -1.5%); }
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  animation: heroKenBurns 20s ease-in-out infinite alternate;
}

.hero-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--mint);
}

.hero-cover h1 {
  font-size: var(--fs-hero);
  margin: 0.25rem 0 0.5rem;
  color: #fff;
}

.hero-sub {
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 0.5rem;
}

/* ---------- Stat tiles ---------- */

.stat-tile {
  background: var(--module);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 12px;
  text-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.stat-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(31, 42, 54, 0.08);
}

.stat-tile .stat-value {
  font-family: "Inter", sans-serif;
  font-weight: 900;
  font-size: var(--fs-stat);
  line-height: 1.1;
}

.stat-tile.positive .stat-value {
  color: #0f8a5f;
}

.stat-tile.negative .stat-value {
  color: var(--accent);
}

.stat-tile-clickable {
  cursor: pointer;
}

.stat-tile-clickable .stat-label {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

/* Ghim 3 o Tong thu/Tong chi/So du ngay duoi navbar khi cuon trang - --navbar-height do JS
   trong base.html do dac chieu cao navbar thuc te (dat mac dinh du phong neu JS chua chay kip). */
.stat-summary-sticky {
  position: sticky;
  top: var(--navbar-height, 64px);
  z-index: 900;
  background-color: #fff;
  padding-top: 8px;
  padding-bottom: 4px;
}

/* Hang tieu de bang Thu-Chi (Ngay/Loai/Giai doan/...) - lam noi bat len bang nen rieng + chu
   dam, tranh bi chim vao nen giong hang du lieu ben duoi (de xay ra khi cell trong suot o cac
   theme toi - xem them .table thead th trong dark/cyberpunk/terminal/hellokitty.css). */
.table thead th {
  background-color: var(--module) !important;
  font-weight: 700;
}

/* Cot Ghi chu trong bang Thu-Chi - thu gon lai (giong cach rut gon nut Quan ly Tam ung), tranh
   ghi chu dai lam vo ty le toan bang. Di chuot vao (title) de xem day du. */
.note-cell {
  max-width: 220px;
  vertical-align: bottom;
}

.progress {
  background-color: var(--module);
  border-radius: 999px;
  overflow: hidden;
}

.progress-bar {
  background-color: var(--accent);
}

/* ---------- Tx card list (dang the cho bang Thu-Chi tren man hinh nho, thay vi bang nhieu cot bi bop chat) ---------- */

.tx-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 12px;
  background: #fff;
}

.tx-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.tx-card-date {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* Nhan Thu/Chi (badge Bootstrap mac dinh) va tag ten giai doan (.badge-status) trong the
   giao dich mobile - thu gon lai (nho/mong hon mac dinh) cho do choi mat tren man hinh nho. */
.tx-card-top .badge {
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.2em 0.55em;
  line-height: 1.2;
}

.tx-card .badge-status {
  font-size: 0.6875rem;
  padding: 0.15em 0.5em;
  line-height: 1.2;
}

.tx-card-amount {
  font-family: "Inter", sans-serif;
  font-weight: 900;
  font-size: 15px;
  margin-bottom: 8px;
}

.tx-card-category {
  font-weight: 600;
}

.tx-card-actions {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.progress-bar.bg-danger {
  background-color: var(--accent-dark) !important;
}

.stat-tile .stat-label {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 6px;
}

/* ---------- Progress photos ---------- */

.progress-thumb {
  width: 110px;
  height: 110px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.photo-preview-item {
  position: relative;
  display: inline-block;
}

.photo-remove-btn {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: none;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

/* ---------- Lich tien do thi cong + moc thu tien (thay the ban Gantt truoc do - qua nho/kho
   bam tren dien thoai). Moi ngay la 1 o vuong to trong luoi 7 cot kieu lich thang. ---------- */

.progress-cal-legend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
}

.progress-cal-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}

.progress-cal-dot.is-done {
  background: #1f9c4a;
}

.progress-cal-dot.is-overdue {
  background: var(--accent-dark);
}

.progress-cal-dot.is-pending {
  background: #d99a1b;
}

.progress-cal-payment-icon {
  font-style: normal;
  font-weight: 700;
  color: var(--accent);
}

.progress-cal-wrap {
  max-width: 640px;
}

.progress-cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.progress-cal-months {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.progress-cal-months .progress-cal-month {
  flex: 1 1 260px;
  min-width: 240px;
}

.progress-cal-month-label {
  font-weight: 600;
  font-size: var(--fs-sm);
}

.progress-cal-weekdays,
.progress-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.progress-cal-weekdays {
  margin-bottom: 4px;
}

.progress-cal-weekdays span {
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.progress-cal-day {
  position: relative;
  aspect-ratio: 1;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--module);
  color: var(--text);
  font-size: var(--fs-sm);
  cursor: pointer;
  padding: 0;
  transition: filter 0.15s ease;
}

.progress-cal-day:hover {
  filter: brightness(0.96);
}

.progress-cal-day.is-outside,
.progress-cal-day[disabled] {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

.progress-cal-day.is-today {
  outline: 2px solid var(--text);
  outline-offset: -2px;
}

.progress-cal-day.is-done {
  background: rgba(31, 156, 74, 0.16);
  border-color: #1f9c4a;
  color: #12622d;
}

.progress-cal-day.is-overdue {
  background: rgba(193, 27, 41, 0.12);
  border-color: var(--accent-dark);
  color: var(--accent-dark);
}

.progress-cal-day.is-pending {
  background: rgba(217, 154, 27, 0.14);
  border-color: #d99a1b;
  color: #8a5f0d;
}

.progress-cal-payment-badge {
  position: absolute;
  top: 2px;
  right: 3px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: inherit;
}

.progress-cal-photo-dot {
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.progress-notify-box {
  background: var(--module);
  border-radius: 12px;
  padding: 14px;
  height: 100%;
}

.progress-notify-photo-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: var(--fs-sm);
  color: var(--text);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.progress-notify-photo-btn:hover {
  background: rgba(0, 0, 0, 0.04);
}

.progress-cal-summary-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1f9c4a;
  margin-right: 2px;
  animation: progressCalSummaryPulse 1.6s ease-in-out infinite;
}

@keyframes progressCalSummaryPulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}

/* Cham nho bao co bo loc dang ap dung, gan tren icon pheu loc (thu-chi) khi thu gon bang popup */
.filter-active-dot {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-dark);
}

.btn {
  min-height: 38px;
}

@media (max-width: 576px) {
  .navbar-text {
    display: block;
    margin: 0.5rem 0;
  }
  .hero-cover h1 {
    font-size: 2rem;
  }

  /* Chu tieu de tren dien thoai nhe bot (Inter 900 + IN HOA de bi "qua to" o man hinh nho) -
     van giu ty le lon hon truoc de dong bo voi scale desktop moi, chi giam so voi ban desktop */
  h1 { font-size: 2rem; }
  h2 { font-size: 1.75rem; }
  h3 { font-size: 1.5rem; }
  h4 { font-size: 1.25rem; }
  h5 { font-size: 1.125rem; }
  h6 { font-size: 1rem; }

  /* Stat-tile (Tong thu/Tong chi/So du): giu dang can giua/chong dong nhu ban goc
     (chi giam padding/font mot chut) - so duoc toan bo chieu rong o rieng (nho da
     doi sang col-12 tung o mot hang), khong phai chia se voi nhan nhu kieu hang ngang,
     nen so tien rat lon (VD hang ty dong) van khong bi nhay dong giua chung.
     Thu gon them (23/07/2026) vi khoi nay gio ghim lai khi cuon (.stat-summary-sticky) -
     can gon de khong chiem qua nhieu khong gian man hinh co dinh. */
  .stat-tile {
    padding: 8px 10px;
  }
  .stat-tile .stat-value {
    font-size: 1.05rem;
  }
  .stat-tile .stat-label {
    font-size: 0.65rem;
    margin-top: 2px;
  }
}