/* gia-su-cong.css — chỉ phục vụ LƯỚI TUẦN của tab Giờ Trống trong cổng gia sư.
   Mọi thứ còn lại của trang dùng Tailwind như các trang khác.

   VÌ SAO LƯỚI NÀY CẦN CSS RIÊNG thay vì viết bằng class Tailwind:
   nó là 33 hàng x 8 cột ô nhỏ có kích thước cố định, cộng hai dải cố định (cột giờ dính trái,
   hàng thứ dính trên). Viết bằng utility thì mỗi ô mang mười mấy class, mà 264 ô là 264 lần lặp
   chuỗi đó trong DOM. Một khối CSS 40 dòng đọc dễ hơn và nhẹ hơn hẳn.

   MÀU LẤY TỪ BIẾN CỦA theme.css, không tự chế hex. --ao-vien, --gold-*, --navy-* đều đã có sẵn ở
   :root; dùng lại để đổi bảng màu một lần là cả site theo. */

.luoi-khung {
    overflow-x: auto;
    border: 1px solid var(--ao-vien);
    border-radius: var(--ao-r-the);
    background: #fff;
}

/* min-width 74px cho cột ngày: hẹp hơn thì tên thứ và số giờ chồng lên nhau trên điện thoại.
   min-width tổng của lưới đẩy khung cha sinh thanh cuộn ngang RIÊNG cho nó, không để cả trang
   cuộn ngang (luật của DESIGN_SYSTEM: bảng và sơ đồ rộng phải tự cuộn trong hộp của mình). */
.luoi-tuan {
    display: grid;
    grid-template-columns: 62px repeat(7, minmax(74px, 1fr));
    min-width: 640px;
}

.luoi-tuan .dau {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
    border-bottom: 1px solid var(--ao-vien);
    padding: 9px 4px;
    text-align: center;
    font-size: 11.5px;
    font-weight: 800;
    color: var(--navy-900, #0D1F33);
}
.luoi-tuan .dau small {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: var(--gold-700, #8A5F19);
    margin-top: 1px;
}
.luoi-tuan .dau small.trong { color: var(--ao-chu-nhat); font-weight: 600; }

.luoi-tuan .goc {
    position: sticky;
    left: 0;
    top: 0;
    z-index: 3;
    background: #fff;
    border-right: 1px solid var(--ao-vien);
    border-bottom: 1px solid var(--ao-vien);
}

.luoi-tuan .cot-gio {
    position: sticky;
    left: 0;
    z-index: 1;
    background: #fff;
    border-right: 1px solid var(--ao-vien);
    border-bottom: 1px solid #EFEDE8;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--ao-chu-nhat);
    text-align: right;
    padding: 0 8px;
    line-height: 26px;
    height: 27px;
}

.o-gio {
    height: 27px;
    border-bottom: 1px solid #EFEDE8;
    border-right: 1px solid #EFEDE8;
    background: #fff;
    transition: background var(--ao-nhanh) var(--ao-ease);
    position: relative;
}
.o-gio:hover { background: var(--navy-50, #EEF2F6); }
.o-gio[aria-pressed="true"] { background: var(--gold-300, #E3B95C); }
.o-gio[aria-pressed="true"]:hover { background: var(--gold-400, #D1A544); }

/* PHẢI đứng SAU hai luật aria-pressed ở trên. Ô đã có buổi đặt cũng mang aria-pressed="true"
   (giờ đó đúng là giờ nhận dạy), mà .o-gio.co-buoi và .o-gio[aria-pressed] có CÙNG độ ưu tiên
   0-2-0, nên luật viết sau thắng. Đặt trên thì ô đã đặt hiện màu vàng có gạch chéo mờ, nhìn
   không phân biệt được với ô còn trống. Đã vấp thật ở bản thử trong sandbox. */
.o-gio.co-buoi,
.o-gio.co-buoi:hover {
    background: var(--navy-700, #16324F);
    cursor: not-allowed;
}
.o-gio.co-buoi::after {
    content: "";
    position: absolute;
    inset: 3px 4px;
    border-radius: 4px;
    background: repeating-linear-gradient(45deg, transparent, transparent 3px,
                rgba(255, 255, 255, .16) 3px, rgba(255, 255, 255, .16) 6px);
}

.o-gio:focus-visible {
    outline: 2px solid var(--navy-900, #0D1F33);
    outline-offset: -2px;
    z-index: 4;
}

.chu-thich-o {
    width: 15px;
    height: 15px;
    border-radius: 4px;
    border: 1px solid var(--ao-vien);
    display: inline-block;
    flex: none;
}