/* =================================================================================================
   lich-tuan.css — lưới tuần dùng chung (Giai đoạn 3, 02/09/2026)
   =================================================================================================
   Đi cùng assets/js/lich-tuan.js. Nạp ở cả cổng gia sư lẫn cổng học sinh.

   VÌ SAO CÓ FILE CSS RIÊNG mà không viết bằng class Tailwind trong template: lưới này đặt khối
   TUYỆT ĐỐI theo phút (top/height tính bằng JS), có đường chỉ giờ hiện tại, có vầng sáng ba lớp và
   một keyframes hữu hạn. Viết bằng utility là một chuỗi arbitrary-value dài không ai đọc lại được.
   Phần nào utility làm tốt (nút, chip, khoảng cách) thì vẫn để trong template.

   BIẾN MÀU khai lại tại chỗ, KHÔNG phải bịa: giá trị chép đúng từ tailwind.config.js (navy/gold/
   paper) để lưới không lệch tông với phần còn lại của site. Đổi bảng màu thì đổi ở tailwind.config.js
   trước, rồi đồng bộ xuống đây.
   ============================================================================================== */

.vp-tkb {
    --tkb-cao-o: 56px;              /* chiều cao một GIỜ — phải khớp CAO_O trong lich-tuan.js */
    --tkb-navy-900: #0D1F33;
    --tkb-navy-700: #16324F;
    --tkb-navy-300: #8FA4BB;
    --tkb-navy-100: #DCE4EC;
    --tkb-navy-50: #EEF2F6;
    --tkb-gold-700: #8A5F19;
    --tkb-gold-500: #C08A2E;
    --tkb-gold-400: #D1A544;
    --tkb-paper-dim: #F2EBDC;
    --tkb-vien: #E8E6E1;
    --tkb-vien-nhat: #EFEDE8;
    --tkb-chu-nhat: #6B7684;
    --tkb-xanh: #1D9A6C;
    --tkb-xanh-nen: #E9F7F1;
    --tkb-do: #B4232C;
    --tkb-cam: #B4630F;
    --tkb-cam-nen: #FDF3E7;
    --tkb-bong: 0 2px 4px rgba(13, 31, 51, .04), 0 12px 28px rgba(13, 31, 51, .07);
    --tkb-bong-cao: 0 8px 16px rgba(13, 31, 51, .07), 0 24px 48px rgba(13, 31, 51, .13);

    position: relative;
    background: #fff;
    border: 1px solid var(--tkb-vien);
    border-radius: 2px;
    overflow: hidden;
}

.vp-tkb-dau {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 16px; border-bottom: 1px solid var(--tkb-vien); flex-wrap: wrap;
}

.vp-tkb-cuon { overflow-x: auto; }

/* Cột giờ + 7 cột ngày. min-width giữ cho lưới không bị bóp méo trên màn hẹp — dưới 700px thì
   component tự chuyển sang chế độ danh sách nên thanh cuộn ngang chỉ gặp ở vùng giữa. */
.vp-tkb-luoi { display: flex; min-width: 860px; }

.vp-tkb-cot-gio { width: 58px; flex: none; border-right: 1px solid var(--tkb-vien); background: #fff; }
.vp-tkb-cot-ngay { flex: 1 1 0; min-width: 112px; border-right: 1px solid var(--tkb-vien-nhat); }
.vp-tkb-cot-ngay:last-child { border-right: 0; }

.vp-tkb-dau-o {
    height: 46px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    border-bottom: 1px solid var(--tkb-vien); font-size: 11.5px; font-weight: 800;
    color: var(--tkb-navy-900); background: #fff; position: sticky; top: 0; z-index: 2;
}
.vp-tkb-dau-o small { font-size: 10.5px; font-weight: 700; color: var(--tkb-chu-nhat); margin-top: 1px; }
/* Cột hôm nay có gạch vàng — đây là vàng làm ĐIỂM NEO, không phải màu trạng thái, nên nằm trong
   6 chỗ vàng được phép của theme.css (vạch dẫn). */
.vp-tkb-dau-o.la-hom-nay, .vp-tkb-dau-o.la-hom-nay small { color: var(--tkb-gold-700); }
.vp-tkb-dau-o.la-hom-nay::after {
    content: ""; display: block; width: 22px; height: 3px; border-radius: 3px;
    background: var(--tkb-gold-500); margin-top: 4px;
}

.vp-tkb-than-gio { position: relative; }
.vp-tkb-nhan-gio {
    height: var(--tkb-cao-o); font-size: 10.5px; font-weight: 700; color: var(--tkb-chu-nhat);
    text-align: right; padding-right: 7px; line-height: 1; transform: translateY(-5px);
}

/* Vạch giờ vẽ bằng gradient lặp thay vì 15 thẻ div: ít nút DOM hơn, và không có thẻ rỗng nào lọt
   vào cây trợ năng. */
.vp-tkb-than {
    position: relative;
    background-image: repeating-linear-gradient(
        to bottom, var(--tkb-vien-nhat), var(--tkb-vien-nhat) 1px,
        #fff 1px, #fff var(--tkb-cao-o));
}
.vp-tkb-than.la-hom-nay { background-color: #FCFAF5; }

.vp-tkb-bay-gio { position: absolute; left: 0; right: 0; height: 2px; background: var(--tkb-do); z-index: 4; pointer-events: none; }
.vp-tkb-bay-gio::before {
    content: ""; position: absolute; left: -4px; top: -4px; width: 10px; height: 10px;
    border-radius: 50%; background: var(--tkb-do);
}

/* ---- Khối buổi học ---- */
.vp-tkb-o {
    position: absolute; z-index: 2; border-radius: 8px; padding: 6px 8px; overflow: hidden;
    background: var(--tkb-navy-50); border: 1px solid var(--tkb-navy-100);
    border-left: 3px solid var(--tkb-navy-700);
    color: var(--tkb-navy-900); font-size: 11.5px; line-height: 1.3; text-align: left;
    display: block; cursor: pointer;
    transition: box-shadow 150ms cubic-bezier(.22, .61, .36, 1);
}
.vp-tkb-o:hover, .vp-tkb-o.dang-mo { box-shadow: var(--tkb-bong); }
.vp-tkb-o:focus-visible { outline: 2px solid var(--tkb-navy-700); outline-offset: 1px; }
.vp-tkb-o-gio { display: block; font-size: 10px; font-weight: 800; color: var(--tkb-navy-700); font-variant-numeric: tabular-nums; }
.vp-tkb-o-ai { display: block; font-weight: 800; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-tkb-o-mon { display: block; font-size: 10.5px; color: var(--tkb-chu-nhat); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-tkb-o-mon b { color: var(--tkb-navy-700); font-weight: 700; }

/* NĂM TRẠNG THÁI, phân biệt bằng VIỀN + NỀN + CHỮ, không chỉ bằng màu: người mù màu vẫn đọc được
   nhờ kiểu viền (liền/đứt), chữ gạch ngang, và nhãn chữ trong popover lẫn chế độ danh sách. */
.vp-tkb-o.tt-da-hoc { background: var(--tkb-xanh-nen); border-color: #CFEADD; border-left-color: var(--tkb-xanh); }
.vp-tkb-o.tt-da-hoc .vp-tkb-o-gio { color: var(--tkb-xanh); }
.vp-tkb-o.tt-huy { background: var(--tkb-paper-dim); border-left-color: var(--tkb-do); color: var(--tkb-chu-nhat); text-decoration: line-through; }
.vp-tkb-o.tt-chua-ke-hoach { border-style: dashed; border-left-style: solid; border-left-color: var(--tkb-cam); background: var(--tkb-cam-nen); }
.vp-tkb-o.tt-chua-ke-hoach .vp-tkb-o-gio { color: var(--tkb-cam); }

/* =================================================================================================
   Ô ĐANG TỚI GIỜ — MÀU VÀNG Ở ĐÂY LÀ NGOẠI LỆ ĐÃ DUYỆT, ĐỪNG "SỬA CHO ĐÚNG CHUẨN".
   =================================================================================================
   assets/css/theme.css cấm dùng vàng làm màu trạng thái (đã có emerald/red/amber). Chủ dự án xem
   hai bản dựng cạnh nhau — một bản vàng, một bản emerald — rồi chọn VÀNG ngày 02/09/2026, vì
   emerald đã mang nghĩa "buổi đã học" trong CHÍNH lưới này (.vp-tkb-o.tt-da-hoc): để hai trạng
   thái khác hẳn nhau cùng một màu thì phân biệt chỉ còn dựa vào độ đậm của vầng sáng.

   Ngoại lệ ghi ở ba chỗ để phiên sau không tự "chuẩn hoá" lại: DESIGN_SYSTEM.md mục Màu ngữ nghĩa,
   khối luật màu vàng trong assets/css/theme.css, và chú thích này.
   PHẠM VI: đúng ô này. KHÔNG lan sang badge, chip, pill hay nhãn trạng thái nào khác.

   Chuyển động: vầng sáng TĨNH bằng box-shadow ba lớp, cộng đúng BA nhịp hữu hạn lúc vừa vào trạng
   thái (animation ... 1.6s 3). Không bao giờ dùng `infinite` — theme.css cấm, và WCAG 2.2.2 cấm
   nội dung tự chuyển động quá 5 giây mà không có nút dừng. Người bật giảm chuyển động chỉ thấy
   vầng tĩnh, vẫn nhận ra trạng thái.

   Nhãn chữ "Vào lớp" ở góc dưới là chốt chặn cho người mù màu: trạng thái đọc được mà không cần
   nhìn màu. Đừng bỏ nó đi cho gọn.
   ============================================================================================== */
.vp-tkb-o.tt-dang-toi-gio {
    background: #fff;
    border-color: var(--tkb-gold-400);
    border-left-color: var(--tkb-gold-500);
    box-shadow: 0 0 0 3px rgba(192, 138, 46, .28), 0 0 24px 4px rgba(192, 138, 46, .45), 0 10px 24px rgba(13, 31, 51, .14);
    z-index: 3;
    animation: vp-tkb-vang-sang 1.6s cubic-bezier(.22, .61, .36, 1) 3;
}
.vp-tkb-o.tt-dang-toi-gio .vp-tkb-o-gio { color: var(--tkb-gold-700); }
.vp-tkb-o.tt-dang-toi-gio .vp-tkb-o-ai { color: var(--tkb-navy-900); }
.vp-tkb-o.tt-dang-toi-gio::after {
    content: "Vào lớp"; position: absolute; right: 6px; bottom: 5px; font-size: 10px; font-weight: 800;
    color: #fff; background: var(--tkb-gold-500); padding: 1px 7px; border-radius: 999px;
}
@keyframes vp-tkb-vang-sang {
    0%   { box-shadow: 0 0 0 3px rgba(192, 138, 46, .28), 0 0 24px 4px rgba(192, 138, 46, .45), 0 10px 24px rgba(13, 31, 51, .14); }
    50%  { box-shadow: 0 0 0 6px rgba(192, 138, 46, .18), 0 0 38px 10px rgba(192, 138, 46, .6), 0 10px 24px rgba(13, 31, 51, .14); }
    100% { box-shadow: 0 0 0 3px rgba(192, 138, 46, .28), 0 0 24px 4px rgba(192, 138, 46, .45), 0 10px 24px rgba(13, 31, 51, .14); }
}
@media (prefers-reduced-motion: reduce) {
    .vp-tkb-o.tt-dang-toi-gio { animation: none; }
}

/* Chip "Trùng giờ": hai gia sư khác nhau cùng xếp một khung cho một học sinh là hợp lệ với mọi
   ràng buộc trong DB (chốt duy nhất là theo gia sư), nên lưới phải NÓI RA chứ không chỉ chia cột. */
.vp-tkb-chip-trung {
    position: absolute; right: 4px; top: 4px; font-size: 9px; font-weight: 800; letter-spacing: .02em;
    color: #fff; background: var(--tkb-do); padding: 1px 5px; border-radius: 999px;
}

/* ---- Chú thích màu ---- */
.vp-tkb-chu-thich {
    display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
    font-size: 11px; color: var(--tkb-chu-nhat);
    padding: 12px 16px; border-top: 1px solid var(--tkb-vien);
}
.vp-tkb-chu-thich span { display: inline-flex; align-items: center; gap: 6px; }
.vp-tkb-chu-thich i.o {
    width: 13px; height: 13px; border-radius: 4px; display: inline-block;
    background: var(--tkb-navy-50); border: 1px solid var(--tkb-navy-100); border-left: 3px solid var(--tkb-navy-700);
}
.vp-tkb-chu-thich i.o.tt-da-hoc { background: var(--tkb-xanh-nen); border-color: #CFEADD; border-left-color: var(--tkb-xanh); }
.vp-tkb-chu-thich i.o.tt-huy { background: var(--tkb-paper-dim); border-left-color: var(--tkb-do); }
.vp-tkb-chu-thich i.o.tt-chua-ke-hoach { background: var(--tkb-cam-nen); border-style: dashed; border-left-style: solid; border-left-color: var(--tkb-cam); }
.vp-tkb-chu-thich i.o.tt-dang-toi-gio { background: #fff; border-color: var(--tkb-gold-400); border-left-color: var(--tkb-gold-500); box-shadow: 0 0 0 2px rgba(192, 138, 46, .25); }

/* ---- Chế độ danh sách (agenda) ---- */
.vp-tkb-agenda { padding: 4px 16px 16px; }
.vp-tkb-agenda-ngay {
    font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: var(--tkb-chu-nhat); margin: 16px 0 8px;
}
.vp-tkb-agenda-ngay.la-hom-nay { color: var(--tkb-gold-700); }
.vp-tkb-the {
    display: flex; align-items: flex-start; gap: 14px; width: 100%;
    padding: 12px 14px; margin-bottom: 8px; text-align: left;
    background: #fff; border: 1px solid var(--tkb-vien); border-left: 3px solid var(--tkb-navy-700);
    border-radius: 8px; cursor: pointer;
    transition: box-shadow 150ms cubic-bezier(.22, .61, .36, 1);
}
.vp-tkb-the:hover { box-shadow: var(--tkb-bong); }
.vp-tkb-the:focus-visible { outline: 2px solid var(--tkb-navy-700); outline-offset: 1px; }
.vp-tkb-the-gio { flex: none; min-width: 54px; }
.vp-tkb-the-nhan { flex: none; font-size: 10px; font-weight: 800; color: var(--tkb-chu-nhat); text-transform: uppercase; letter-spacing: .04em; }
.vp-tkb-the.tt-da-hoc { border-left-color: var(--tkb-xanh); background: var(--tkb-xanh-nen); }
.vp-tkb-the.tt-huy { border-left-color: var(--tkb-do); background: var(--tkb-paper-dim); }
.vp-tkb-the.tt-huy .vp-tkb-the-gio { text-decoration: line-through; }
.vp-tkb-the.tt-chua-ke-hoach { border-left-color: var(--tkb-cam); background: var(--tkb-cam-nen); border-style: dashed; border-left-style: solid; }
.vp-tkb-the.tt-dang-toi-gio {
    border-color: var(--tkb-gold-400); border-left-color: var(--tkb-gold-500);
    box-shadow: 0 0 0 3px rgba(192, 138, 46, .22);
}

/* ---- Popover ---- */
/* Nền trong suốt bắt cú bấm ra ngoài để đóng. z-index thấp hơn popover đúng một bậc. */
.vp-tkb-nen-pop { position: fixed; inset: 0; z-index: 49; }
.vp-tkb-pop {
    position: fixed; z-index: 50; width: 340px; max-width: calc(100vw - 24px);
    background: #fff; border: 1px solid var(--tkb-vien); border-radius: 2px;
    box-shadow: var(--tkb-bong-cao); padding: 15px 17px;
    max-height: calc(100vh - 24px); overflow-y: auto;
}
.vp-tkb-pop.mui-phai::before {
    content: ""; position: absolute; left: -7px; top: 20px; width: 12px; height: 12px; background: #fff;
    border-left: 1px solid var(--tkb-vien); border-bottom: 1px solid var(--tkb-vien); transform: rotate(45deg);
}
.vp-tkb-pop.mui-trai::before {
    content: ""; position: absolute; right: -7px; top: 20px; width: 12px; height: 12px; background: #fff;
    border-right: 1px solid var(--tkb-vien); border-top: 1px solid var(--tkb-vien); transform: rotate(45deg);
}
.vp-tkb-pop-dong { position: absolute; right: 9px; top: 9px; color: var(--tkb-chu-nhat); padding: 4px; line-height: 1; }
.vp-tkb-pop-dong:hover { color: var(--tkb-navy-900); }
.vp-tkb-pop-dong-tin {
    display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; line-height: 1.5;
    padding: 8px 0; border-top: 1px solid var(--tkb-vien-nhat); color: #3F4A56;
}
.vp-tkb-pop-dong-tin:first-of-type { margin-top: 8px; }
.vp-tkb-pop-dong-tin i { width: 16px; text-align: center; color: var(--tkb-navy-700); margin-top: 3px; flex: none; }
.vp-tkb-pop-dong-tin b { color: var(--tkb-navy-900); }
.vp-tkb-dem { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--tkb-gold-700); }