/* Ngày Lành — giấy dó, mực nâu, đỏ son.
   Màu lấy từ MauApp của app #9 (apps/09-xem-ngay/app/lib/src/ui/mau_app.dart).

   ĐỎ Ở ĐÂY NGHĨA LÀ NGÀY TỐT — lịch Việt in ngày tốt bằng mực đỏ. Ngày nên
   tránh là mực xám, lưu ý là vàng đất. Không bao giờ dùng đỏ cho cảnh báo.

   Lệch app ở MỘT chỗ có chủ ý: --muc-mo đậm hơn (#726A5D thay #8B8171). Màu
   của app chỉ đạt 3,3–3,6:1 trên nền giấy (#726A5D đạt 4,65–5,0) — không đủ
   cho người lớn tuổi đọc dòng nguồn 13–14px trên laptop đặt xa. */

:root {
  --nen: #F4EFE2;
  --the: #FBF8F0;
  --nen-phu: #F7F2E6;
  --nen-chip: #F6EFDC;
  --vien: #E2D8C3;
  --vien-dam: #D9CDB5;
  --muc: #2B241C;
  --muc-phu: #6B6254;
  --muc-mo: #726A5D;
  --nhan: #B03A26;
  --nhan-dam: #8A2C1C;
  --nhan-nhat: #F9EAE5;
  --nhan-vien: #EBCFC6;
  --tren-nhan: #FFF8EC;
  --vang: #7A5D17;
  --vang-nhat: #F6EFDC;
  --vang-vien: #C9B48A;
  --tranh: #6B6254;
  --tranh-nhat: #EFE9DD;
  --canh-bao-nen: var(--vang-nhat);
  --canh-bao-vien: var(--vang-vien);
  --canh-bao-chu: var(--vang);
  --bo-the: 4px;
  --bo-nut: 3px;
  --bo-nhan: 3px;
  --gian-nhan: 1px;
}

/* Chip lựa chọn kiểu giấy: nền thẻ, viền đậm; chọn rồi thì viền đỏ son. */
.lua-chon { border-color: var(--vien-dam); background: var(--the); padding: 0 14px; }
.lua-chon:hover { background: var(--nen-phu); }
.lua-chon[aria-checked='true'] { border-color: var(--nhan); box-shadow: inset 0 0 0 .5px var(--nhan); font-weight: 700; }

/* ---------- biểu mẫu ---------- */

.hai-cot > .bieu-mau { flex: 1 1 320px; padding: 22px; display: flex; flex-direction: column; gap: 22px; }
.hai-cot > .ket-qua { flex: 1.7 1 480px; display: flex; flex-direction: column; gap: 16px; }

.nhom { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.nhom > legend { padding: 0 0 10px; }

.hai-o { display: flex; flex-wrap: wrap; gap: 10px; }
.hai-o label, .them-tuoi > label { flex: 1 1 140px; display: flex; flex-direction: column; gap: 5px; font-size: 15px; color: var(--muc-phu); }
.o-ngay {
  display: block; width: 100%; min-height: 50px; padding: 0 12px; border-radius: var(--bo-nut);
  border: 1px solid var(--vien-dam); background: var(--nen-phu);
  font-size: 17px; font-weight: 600; color: var(--muc);
}
.o-ngay:focus { outline: none; border-color: var(--nhan); box-shadow: 0 0 0 3px var(--nhan-nhat); }
.o-ngay::placeholder { color: var(--muc-mo); font-weight: 400; }

.ds-tuoi { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip-tuoi {
  min-height: 44px; display: inline-flex; align-items: center; padding-left: 14px;
  border-radius: var(--bo-nhan); background: var(--nen-chip); border: 1px solid var(--vang-vien);
  font-size: 15.5px; font-weight: 600;
}
.chip-tuoi button {
  width: 44px; height: 44px; border: 0; background: transparent; color: var(--muc-phu);
  display: flex; align-items: center; justify-content: center;
}
.chip-tuoi svg { width: 14px; height: 14px; }
.nut-them {
  min-height: 44px; padding: 0 14px; border-radius: var(--bo-nhan); border: 1px dashed var(--vang-vien);
  background: transparent; font-size: 15.5px; font-weight: 600; color: var(--muc-phu);
}
.nut-them:hover { background: var(--nen-chip); }
.them-tuoi { display: flex; flex-direction: column; gap: 8px; }
.hang-them { display: flex; flex-wrap: wrap; gap: 8px; }
.hang-them .o-ngay { flex: 1 1 140px; width: auto; min-width: 0; }
.hang-them .nut { min-height: 50px; }
.goi-y-nho { font-size: 15px; color: var(--muc-mo); }

.nut-xep { min-height: 54px; }

/* ---------- kết quả ---------- */

.ket-qua-trong {
  border: 1px dashed var(--vien-dam); border-radius: var(--bo-the); padding: 28px 24px;
  display: flex; flex-direction: column; gap: 6px; color: var(--muc-phu);
}
.ket-qua-trong .tieu { font-size: 18px; font-weight: 700; color: var(--muc); }

/* Điều kiện thu gọn (chỉ trên điện thoại): một dòng tóm tắt và nút "Sửa". */
.tom-tat { display: none; align-items: center; gap: 10px; }
.tom-tat .chu { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tom-tat h2 { font-size: 21px; font-weight: 700; line-height: 1.25; }
.tom-tat .chu span { font-size: 15px; color: var(--muc-mo); }
.tom-tat .nut { min-height: 44px; padding: 0 16px; flex-shrink: 0; }

.bao-cu { font-size: 15.5px; color: var(--vang); background: var(--vang-nhat); border: 1px solid var(--vang-vien); border-radius: var(--bo-nut); padding: 10px 14px; }
.ket-qua.da-cu > :not(.bao-cu):not(.tom-tat) { opacity: .55; }

.dem-loai { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 15px; color: var(--muc-phu); }
.dem-loai b { font-weight: 600; color: var(--muc); }
.loai { padding: 5px 10px; border-radius: var(--bo-nhan); }
.loai-rat-tot { background: var(--nhan-nhat); color: var(--nhan); font-weight: 600; }
.loai-tot { background: var(--nhan-nhat); color: var(--nhan); }
.loai-binh-thuong { background: var(--nen-chip); }
.loai-can-nhac, .loai-nen-tranh { background: var(--tranh-nhat); }

.the-tot-nhat {
  background: var(--the); border: 1.5px solid var(--nhan); border-radius: var(--bo-the);
  padding: 22px; display: flex; flex-direction: column; gap: 16px;
}
.the-tot-nhat.chua-tot { border-color: var(--vien-dam); }
.dau-the { display: flex; align-items: center; gap: 10px; }
.dau-the .nhan { flex-grow: 1; color: var(--nhan); }
.chua-tot .dau-the .nhan { color: var(--muc-mo); }
.diem-the { padding: 5px 11px; border-radius: 2px; font-size: 14px; font-weight: 700; white-space: nowrap; }

.ngay-lon { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 14px; }
.ngay-lon .so { font-size: 48px; font-weight: 700; letter-spacing: -1.6px; line-height: 1; }
.ngay-lon .chu { display: flex; flex-direction: column; gap: 2px; padding-bottom: 3px; }
.ngay-lon .thu { font-size: 17px; font-weight: 600; }
.ngay-lon .am { font-size: 15px; color: var(--muc-mo); }

.so-tinh { border-top: 1px solid var(--vien); padding-top: 14px; display: flex; flex-direction: column; }
.so-tinh > .nhan { padding-bottom: 6px; }
.dong-luat { display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px dashed var(--vien); }
.dong-luat:last-child { border-bottom: 0; }
.dong-luat .diem { width: 34px; flex-shrink: 0; font-size: 16px; font-weight: 700; }
.dong-luat .chu { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dong-luat .ten { font-size: 16px; font-weight: 600; }
.dong-luat .giai-thich { font-size: 15px; color: var(--muc-phu); line-height: 1.5; }
.dong-luat .nguon { font-size: 13.5px; color: var(--muc-mo); }
.diem-thuan { color: var(--nhan); }
.diem-trung { color: var(--muc-mo); }
.diem-can { color: var(--tranh); }

/* Ô vàng đất: giờ hoàng đạo và ngày lễ. Không phải cảnh báo đỏ — đỏ đã là "tốt". */
.o-vang {
  background: var(--vang-nhat); border: 1px solid var(--vang-vien); border-radius: var(--bo-nut);
  padding: 12px 14px; display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; line-height: 1.55;
}
.o-vang svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: 3px; color: var(--vang); }
.o-vang strong { font-weight: 600; }
.o-vang .chu { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.o-vang .phu { font-size: 14px; color: var(--muc-phu); line-height: 1.5; }

.nhan-khac { padding: 6px 2px 0; }
.ds-khac { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }

/* Mở một ngày thì nó chiếm trọn hàng, sổ tính không bị bó trong ô 240px. */
.ngay-khac { background: var(--the); border: 1px solid var(--vien); border-radius: var(--bo-the); min-width: 0; }
.ngay-khac[open] { grid-column: 1 / -1; border-color: var(--vien-dam); }
.ngay-khac summary {
  list-style: none; cursor: pointer; padding: 14px 12px 14px 16px; min-height: 56px;
  display: flex; align-items: center; gap: 14px; border-radius: var(--bo-the);
}
.ngay-khac summary::-webkit-details-marker { display: none; }
.ngay-khac summary:hover { background: var(--nen-phu); }
.cot-ngay { width: 58px; flex-shrink: 0; display: flex; flex-direction: column; gap: 1px; }
.cot-ngay .so { font-size: 19px; font-weight: 700; }
.cot-ngay .thu { font-size: 13.5px; color: var(--muc-mo); white-space: nowrap; }
.ngay-khac .giua { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ngay-khac .giua .tieu { font-size: 15.5px; font-weight: 600; }
.ngay-khac .giua .phu { font-size: 14px; color: var(--muc-mo); }
.ngay-khac .giua .le { font-size: 14px; color: var(--vang); }
.diem-gon { font-size: 15px; font-weight: 700; white-space: nowrap; }
.mui-ten { width: 18px; height: 18px; flex-shrink: 0; color: var(--muc-mo); transition: transform .15s; }
.ngay-khac[open] .mui-ten { transform: rotate(180deg); }
.than-mo { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.than-mo .so-tinh { padding-top: 6px; }

.khoi-sau > summary {
  list-style: none; cursor: pointer; min-height: 56px; padding: 14px 12px 14px 18px;
  display: flex; align-items: center; gap: 14px;
  background: var(--nen-phu); border: 1px solid var(--vien); border-radius: var(--bo-the);
}
.khoi-sau > summary::-webkit-details-marker { display: none; }
.khoi-sau > summary:hover { border-color: var(--vien-dam); }
.khoi-sau > summary .chu { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.khoi-sau > summary .tieu { font-size: 16px; font-weight: 600; }
.khoi-sau > summary .phu { font-size: 14.5px; color: var(--muc-phu); }
.khoi-sau[open] > summary .mui-ten { transform: rotate(180deg); }
.khoi-sau > .ds-khac { margin-top: 10px; }

.chu-thich { font-size: 15px; color: var(--muc-mo); line-height: 1.55; }
.chu-thich + .chu-thich { margin-top: -8px; }

.chan-trang a { display: inline-block; padding: 10px 2px; }

/* ---------- điện thoại ---------- */

@media (max-width: 899px) {
  .thuong-hieu small { display: none; }
  .thuong-hieu b { font-size: 20px; }

  .hai-cot > .bieu-mau { padding: 18px; gap: 20px; }
  .ket-qua-trong { display: none; }

  /* Có kết quả rồi thì biểu mẫu gập thành dòng tóm tắt, kết quả lên đầu trang. */
  .thu-gon .tieu-de-trang, .thu-gon .bieu-mau { display: none; }
  .thu-gon .tom-tat { display: flex; }
  .hai-cot > .ket-qua { gap: 14px; }

  .dem-loai { gap: 6px; font-size: 14.5px; }
  .dem-loai > b { flex-basis: 100%; }
  .loai { padding: 5px 9px; }
  .the-tot-nhat { padding: 18px; gap: 14px; }
  .ngay-lon { gap: 6px 12px; }
  .ngay-lon .so { font-size: 44px; letter-spacing: -1.4px; }
  .ngay-lon .thu { font-size: 16px; }
  .dong-luat { gap: 12px; padding: 11px 0; }
  .dong-luat .diem { width: 30px; }
  .than-mo { padding: 0 14px 14px; }
}