/* ============================================================
   HỆ THỐNG GIAO DIỆN — "SỔ MỰC"
   Ngôn ngữ thị giác lấy từ chính cuốn sổ giấy của giáo xứ:
   mực xanh đen trên giấy ngà, ghi chú bên lề bằng mực đỏ son.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
    /* Giấy */
    --giay:         #F2EFE6;   /* nền giấy ngà */
    --giay-sang:    #FBFAF6;   /* mặt phiếu */
    --giay-toi:     #E4DFD2;   /* nền chìm, sọc bảng */
    --ke-mo:        #D6D0C0;   /* đường kẻ ngang của sổ */

    /* Mực */
    --muc:          #1B2A4A;   /* mực xanh đen — chữ chính */
    --muc-nhat:     #55617C;   /* nhãn, chú thích */
    --muc-mo:       #8C93A6;   /* placeholder */

    /* Son — dành RIÊNG cho ghi chú bên lề và cảnh báo */
    --son:          #7B2D3A;
    --son-nhat:     #A85462;
    --son-nen:      #F6E9E9;

    /* Trạng thái */
    --xanh-la:      #2F6B4F;   /* đã hoàn tất */
    --hoang-thô:    #8A6420;   /* còn tồn đọng */

    /* Chữ */
    --chu-tieu-de:  'Source Serif 4', Georgia, serif;
    --chu-than:     'Be Vietnam Pro', system-ui, sans-serif;
    --chu-so:       'IBM Plex Mono', ui-monospace, monospace;

    --bo-goc:       3px;       /* sổ sách không bo tròn nhiều */
    --vien:         1px solid var(--ke-mo);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--giay);
    color: var(--muc);
    font-family: var(--chu-than);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: var(--chu-tieu-de);
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 .5rem;
}
h1 { font-size: 1.65rem; }
h2 { font-size: 1.25rem; }

/* ---------- Bố cục khung ---------- */
.khung        { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.thanh-ben    { background: var(--muc); color: #D9DEE9; padding: 1.25rem 0; }
.thanh-ben h1 { color: #fff; font-size: 1.05rem; padding: 0 1.25rem; margin-bottom: .15rem; }
.thanh-ben .phu { padding: 0 1.25rem; font-size: .78rem; color: #8C97B0; margin-bottom: 1.5rem; }
.thanh-ben a {
    display: block; padding: .55rem 1.25rem; color: #C3CBDA;
    text-decoration: none; font-size: .9rem; border-left: 3px solid transparent;
}
.thanh-ben a:hover  { background: rgba(255,255,255,.06); color: #fff; }
.thanh-ben a.active { background: rgba(255,255,255,.1); color: #fff;
                      border-left-color: var(--son-nhat); font-weight: 500; }
.thanh-ben .nhom    { padding: 1.1rem 1.25rem .35rem; font-size: .7rem;
                      text-transform: uppercase; letter-spacing: .09em; color: #6B778F; }

.noi-dung { padding: 1.75rem 2rem; max-width: 1180px; }

/* ---------- Phiếu ---------- */
.phieu {
    background: var(--giay-sang);
    border: var(--vien);
    border-radius: var(--bo-goc);
    padding: 1.25rem 1.4rem;
    margin-bottom: 1.1rem;
}
.phieu > header {
    font-family: var(--chu-tieu-de);
    font-size: .95rem; font-weight: 600;
    padding-bottom: .55rem; margin-bottom: .9rem;
    border-bottom: 2px solid var(--muc);
}

/* ---------- Biểu mẫu ---------- */
.hang  { display: grid; grid-template-columns: repeat(12, 1fr); gap: .85rem; }
/* Đủ 12 mức. Thiếu bất kỳ mức nào là ô đó co về 1 cột và vỡ hàng. */
.o-1  { grid-column: span 1;  }
.o-2  { grid-column: span 2;  }
.o-3  { grid-column: span 3;  }
.o-4  { grid-column: span 4;  }
.o-5  { grid-column: span 5;  }
.o-6  { grid-column: span 6;  }
.o-7  { grid-column: span 7;  }
.o-8  { grid-column: span 8;  }
.o-9  { grid-column: span 9;  }
.o-10 { grid-column: span 10; }
.o-11 { grid-column: span 11; }
.o-12 { grid-column: span 12; }

.truong { display: flex; flex-direction: column; gap: .25rem; margin-bottom: .55rem; }

/* Nhãn chiếm chỗ cố định 2 dòng và canh đáy.
   Nhờ vậy nhãn dài xuống dòng cũng không đẩy lệch ô nhập bên cạnh. */
.truong > label {
    font-size: .74rem; font-weight: 600; letter-spacing: .045em;
    text-transform: uppercase; color: var(--muc-nhat);
    line-height: 1.25;
    min-height: 1.85em;
    display: flex; align-items: flex-end;
}
input, select, textarea {
    font-family: inherit; font-size: .93rem; color: var(--muc);
    padding: .45rem .6rem;
    background: #fff;
    border: 1px solid var(--ke-mo);
    border-radius: var(--bo-goc);
}
input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--muc); outline-offset: -1px; border-color: var(--muc);
}
input::placeholder { color: var(--muc-mo); }
.o-so input { font-family: var(--chu-so); }

.nut {
    font-family: inherit; font-size: .88rem; font-weight: 600;
    padding: .48rem 1.05rem; border-radius: var(--bo-goc); cursor: pointer;
    border: 1px solid var(--muc); background: var(--muc); color: #fff;
}
.nut:hover  { background: #26375C; }
.nut.phu    { background: transparent; color: var(--muc); }
.nut.phu:hover { background: var(--giay-toi); }
.nut.son    { background: var(--son); border-color: var(--son); }
.nut:focus-visible { outline: 3px solid var(--son-nhat); outline-offset: 2px; }

/* ---------- Bảng tra cứu ---------- */
.bang { width: 100%; border-collapse: collapse; font-size: .9rem; }
.bang th {
    text-align: left; font-size: .72rem; text-transform: uppercase;
    letter-spacing: .05em; color: var(--muc-nhat); font-weight: 600;
    padding: .5rem .6rem; border-bottom: 2px solid var(--muc);
}
.bang td { padding: .55rem .6rem; border-bottom: 1px solid var(--ke-mo); }
.bang tbody tr:hover { background: var(--giay-toi); cursor: pointer; }
.bang .stt { font-family: var(--chu-so); font-weight: 500; white-space: nowrap; }

/* ============================================================
   TRANG SỔ — phần tử đặc trưng của hệ thống.
   Tái hiện đúng trang sổ giấy: nội dung chính bên trái,
   cột lề bên phải ghi chú bằng mực đỏ.
   ============================================================ */
.trang-so {
    display: grid;
    grid-template-columns: 1fr 300px;
    background: var(--giay-sang);
    border: var(--vien);
    border-radius: var(--bo-goc);
    overflow: hidden;
}

.trang-so .than {
    padding: 1.5rem 1.75rem;
    /* đường kẻ ngang mờ như giấy kẻ dòng */
    background-image: repeating-linear-gradient(
        to bottom, transparent, transparent 31px, var(--ke-mo) 31px, var(--ke-mo) 32px);
    background-position: 0 1.5rem;
}
.trang-so .than dl { display: grid; grid-template-columns: 168px 1fr; gap: 0; margin: 0; }
.trang-so .than dt {
    font-size: .74rem; text-transform: uppercase; letter-spacing: .045em;
    color: var(--muc-nhat); font-weight: 600; padding: .45rem 0; height: 32px;
}
.trang-so .than dd {
    margin: 0; padding: .45rem 0; height: 32px;
    font-size: .96rem; font-weight: 500;
}

/* Cột lề — mực son */
.le {
    background: var(--son-nen);
    border-left: 2px solid var(--son);
    padding: 1.25rem 1.1rem;
}
.le > h3 {
    font-family: var(--chu-than);
    font-size: .7rem; text-transform: uppercase; letter-spacing: .09em;
    color: var(--son); font-weight: 700; margin-bottom: .9rem;
}
.ghi-le {
    font-family: var(--chu-tieu-de);
    color: var(--son);
    font-size: .88rem; line-height: 1.45;
    padding-left: .75rem; margin-bottom: 1rem;
    border-left: 2px solid var(--son-nhat);
}
.ghi-le .nhan {
    display: block; font-family: var(--chu-than);
    font-size: .68rem; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; margin-bottom: .1rem;
}
.ghi-le .ngay { font-family: var(--chu-so); font-size: .8rem; opacity: .8; }
.le .trong {
    color: var(--son-nhat); font-size: .84rem; font-style: italic;
}

/* ---------- Nhãn trạng thái ---------- */
.the {
    display: inline-block; font-size: .7rem; font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase;
    padding: .15rem .5rem; border-radius: 2px;
}
.the.xong   { background: #E3EFE8; color: var(--xanh-la); }
.the.ton    { background: #F6EEDC; color: var(--hoang-thô); }
.the.huy    { background: var(--son-nen); color: var(--son); }

/* ---------- Cảnh báo tồn đọng ---------- */
.canh-bao {
    border-left: 4px solid var(--hoang-thô);
    background: #F9F3E4;
    padding: .8rem 1rem; border-radius: var(--bo-goc);
    margin-bottom: 1.1rem; font-size: .9rem;
}

/* ---------- Màn hình rỗng ---------- */
.rong { text-align: center; padding: 3rem 1rem; color: var(--muc-nhat); }
.rong p { margin: 0 0 1rem; }

/* ---------- In chứng thư ---------- */
@media print {
    .thanh-ben, .nut, .khong-in { display: none !important; }
    .khung { grid-template-columns: 1fr; }
    body { background: #fff; }
    .trang-so, .phieu { border: none; }
}

/* ---------- Màn hình hẹp ---------- */
@media (max-width: 900px) {
    .khung { grid-template-columns: 1fr; }
    .thanh-ben { display: flex; overflow-x: auto; padding: .5rem 0; }
    .thanh-ben h1, .thanh-ben .phu, .thanh-ben .nhom { display: none; }
    .thanh-ben a { white-space: nowrap; border-left: none; border-bottom: 3px solid transparent; }
    .trang-so { grid-template-columns: 1fr; }
    .le { border-left: none; border-top: 2px solid var(--son); }
    .trang-so .than dl { grid-template-columns: 1fr; }
    .trang-so .than dt { height: auto; padding-bottom: 0; }
    .trang-so .than dd { height: auto; padding-top: .1rem; }
    .trang-so .than { background-image: none; }
    .hang > * { grid-column: span 12; }
    .noi-dung { padding: 1rem; }
}

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