chữ cái đầu dùng nền bg-navy-100 của Tailwind — file CSS trang nạp sau
tailwind.css nên nếu để nền ở cả .tutor-card__photo thì nó đè mất lớp bg-navy-100 kia. */
img.tutor-card__photo {
background: var(--navy-50);
}
/* ===== Ô CHỮ CÁI ĐẦU 28/08/2026 (đợt 1, hạng mục T3 của sandbox/ban-chi-dan-hinh-anh.md) =====
VÌ SAO SỬA: bản cũ là nền bg-navy-100 chữ text-navy-800 (hai class Tailwind còn nằm trong
gia-su.html dòng 341). Cặp màu đó nhạt tới mức người xem đọc ra là "ô đang chờ tải ảnh" chứ
không phải một quyết định thiết kế. Mà VPath chưa có gia sư thật, nên ô này là phương án CHÍNH
dùng lâu dài chứ không phải phương án dự phòng vài ngày. Nó phải trông có chủ ý.
NGÔN NGỮ MỚI (giống class dùng chung .o-chu-dau đang được khai ở theme.css): nền navy-900 đặc,
chữ cái gold-400 đậm 700 cỡ bằng 42 phần trăm cạnh ô, một vành gold-500 mờ 0,35 chạy cách mép
trong 3px, và hoa văn giấy kẻ ô phủ mờ 0,10 để mặt navy không chết phẳng.
Trang gia sư dùng bản VUÔNG BO GÓC 14px chứ không phải bản tròn, vì ảnh đại diện thật ở đây
(img.tutor-card__photo phía trên) cũng bo 14px theo áo mới 25/08. Ô chữ và ô ảnh phải cùng dáng,
nếu không thì một danh sách có gia sư đã có ảnh lẫn gia sư chưa có ảnh sẽ so le hai kiểu bo góc.
VÌ SAO NHẮM `div.tutor-card__photo` CHỨ KHÔNG NHẮM `.o-chu-dau`: markup ở gia-su.html dòng 341
hiện chưa mang class đó, và gia-su.html không thuộc phạm vi sửa của đợt này. Chọn `div` là chọn
đúng nhánh v-else (ô chữ): nhánh có ảnh thật là thẻ ![]()
, còn khung chờ ở dòng 293 là thẻ
, nên cả hai đều không dính luật này. Khi nào markup được gắn thêm .o-chu-dau thì phần
nền, chữ và vành ở đây trùng với class chung và gỡ bớt được, chỉ còn giữ lại ba biến thể theo cỡ
cùng dáng vuông bên dưới.
Đè được lên bg-navy-100 và text-4xl của Tailwind là nhờ độ đặc hiệu: `div.tutor-card__photo` là
(0,1,1) còn class trần của Tailwind là (0,1,0). Không cần !important. */
div.tutor-card__photo {
position: relative;
background-color: var(--navy-900);
color: var(--gold-400);
font-weight: 700;
/* 42 phần trăm của cạnh 160px. Ghi số tuyệt đối chứ không dùng em/%, vì cỡ chữ gốc của thẻ
không cố định và ba biến thể dưới đây phải bám đúng ba cạnh 160 / 128 / 96. */
font-size: 67px;
line-height: 1;
/* Hoa văn giấy kẻ ô 24px, một đường ngang một đường dọc mỗi ô, nét mờ 0,10 đúng như hạng mục
T1. Viết thẳng thành data URI thay vì trỏ tới assets/anh/hoa-van/ke-o.svg vì file đó chưa
tồn tại (T1 chưa làm), và data URI thì không cần thêm một lượt tải mạng cho một ô 160px.
Màu nét ghi thô #FAF6EE (giấy kem, đúng token paper trong tailwind.config.js) chứ không
var(--...): SVG trong background-image là một tài liệu riêng, nó KHÔNG đọc được biến CSS của
trang, và currentColor trong đó cũng không kế thừa. Cùng lý do với rgba() ở .tutor-video__note.
Nhịp "cứ 5 ô một đường đậm hơn" của T1 bị bỏ ở đây vì nhịp đó cần một ô lặp 120px, mà cạnh
lớn nhất của ô này mới có 160px, tức chưa đủ hai nhịp để mắt nhận ra nhịp. */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M24 0H0v24' fill='none' stroke='%23FAF6EE' stroke-width='1' stroke-opacity='0.1'/%3E%3C/svg%3E");
background-size: 24px 24px;
background-repeat: repeat;
}
/* Vành trong: đặt bằng phần tử giả thay vì box-shadow inset, vì spec đòi vành LÙI VÀO 3px so với
mép chứ không nằm sát mép. Bán kính 11px = 14px của ô trừ 3px lùi vào, để hai đường bo đồng tâm.
gold-500 ở độ mờ 0,35 phải ghi thô vì var() không nhét vào trong rgba() được. */
div.tutor-card__photo::before {
content: "";
position: absolute;
inset: 3px;
border: 1.5px solid rgba(192, 138, 46, 0.35);
border-radius: 11px;
pointer-events: none;
}
/* Cắt phần mô tả còn tối đa 3 dòng như Preply, phần còn lại mở bằng "Xem thêm" */
.tutor-card__bio {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.tutor-card__bio--open { -webkit-line-clamp: unset; overflow: visible; }
/* Trên màn hẹp, xếp dọc lại thay vì giữ 4 cột cố định */
@media (min-width: 1024px) and (max-width: 1279px) {
.tutor-card {
grid-template-columns: 128px minmax(180px, 1fr) 200px 40px;
}
.tutor-card__photo { width: 128px; height: 128px; }
/* Biến thể 128px: vẫn GIỮ ĐỦ vành và hoa văn, chỉ hạ cỡ chữ cho đúng 42 phần trăm cạnh
(0,42 x 128 = 54px). Ô 24px của hoa văn lặp được 5,3 lần trên cạnh này nên vẫn đọc ra là
giấy kẻ ô, chưa thành vệt bẩn. */
div.tutor-card__photo { font-size: 54px; }
}
@media (max-width: 767px) {
.tutor-card {
grid-template-columns: 96px minmax(0, 1fr);
grid-template-rows: auto;
grid-template-areas:
"avatar heading"
"avatar indicators"
"maininfo maininfo"
"actions actions";
padding: 16px;
}
.tutor-card__favorite { display: none; }
.tutor-card__photo { width: 96px; height: 96px; }
/* Biến thể 96px: BỎ HOA VĂN, giữ vành và chữ. Lý do bỏ chứ không thu nhỏ hoa văn: cạnh 96px
chỉ chứa được 4 ô 24px, và trên màn điện thoại mật độ điểm ảnh cao thì bốn đường mảnh mờ 0,10
không còn đọc ra là giấy kẻ ô nữa, nó thành vệt xước trên mặt navy. Thà sạch còn hơn bẩn.
Cỡ chữ 40px = 42 phần trăm của 96. */
div.tutor-card__photo {
font-size: 40px;
background-image: none;
}
}
/* ===== Khung video bên phải — phát khi rê chuột vào card ===== */
/* Khung video chỉ hiện khi rê chuột vào đúng hàng của gia sư đó — mặc định cả trang
không bày sẵn video của toàn bộ gia sư. Vẫn giữ nguyên ô chiếm chỗ (chỉ ẩn hình,
không dùng display:none) để lúc hiện ra không đẩy card xê dịch. */
.tutor-video-panel {
background: var(--trang);
border: 2px solid var(--navy-900);
border-radius: var(--ao-r-the); /* áo mới 25/08: khung tròn 16px như thẻ */
padding: 24px;
display: flex;
flex-direction: column;
opacity: 0;
visibility: hidden;
transform: translateX(-8px);
transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
}
/* Đợt 1 mục 1.4: luật này CỐ Ý KHÔNG bọc trong @media (hover: hover) and (pointer: fine), khác
với hai luật scale ở dưới. Lý do: hover ở đây MANG THÔNG TIN chứ không trang trí, nó là cách
duy nhất mở khung video giới thiệu. Bọc lại là xóa hẳn tính năng trên máy cảm ứng.
Nhánh :focus-within đi kèm cũng vì lý do đó: nội dung chỉ mở được bằng chuột là rào cản bàn
phím, người đi tab vào card phải mở được khung video y như người rê chuột. */
.tutor-row:hover .tutor-video-panel,
.tutor-row:focus-within .tutor-video-panel {
opacity: 1;
visibility: visible;
transform: none;
}
.tutor-video {
position: relative;
aspect-ratio: 16 / 9;
/* overflow hidden có sẵn nên bo 14px (áo mới 25/08) cắt gọn cả video lẫn ảnh bìa phóng to */
border-radius: var(--ao-r-nho);
overflow: hidden;
background: var(--navy-900);
}
.tutor-video video,
.tutor-video img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Ảnh bìa phóng nhẹ khi hover để khung video có phản hồi ngay cả khi gia sư chưa có video */
.tutor-video img { transition: transform 0.6s ease; }
/* Đợt 1 mục 1.3: luật hover CÓ TRANSFORM phải bọc trong @media (hover: hover) and (pointer: fine).
Một cú chạm trên điện thoại sinh ra :hover giả rồi treo ở đó, nên ảnh bìa phóng to 1.06 lần và
nằm luôn như vậy. Đây thuần túy là trang trí (khác hẳn luật mở khung video ở trên) nên chặn
được, máy cảm ứng không mất thông tin nào. */
@media (hover: hover) and (pointer: fine) {
.tutor-row:hover .tutor-video img { transform: scale(1.06); }
}
/* Ảnh bìa nằm đè lên video, mờ dần đi khi video bắt đầu chạy */
.tutor-video__poster {
position: absolute;
inset: 0;
opacity: 1;
transition: opacity 0.3s ease;
}
.tutor-video--playing .tutor-video__poster { opacity: 0; pointer-events: none; }
.tutor-video__play {
position: absolute;
right: 12px;
bottom: 12px;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: var(--gold-500);
color: var(--navy-900);
border: none;
border-radius: var(--ao-r-vien-thuoc); /* áo mới 25/08: nút phát thành hình tròn */
cursor: pointer;
transition: transform 0.2s ease, opacity 0.2s ease;
}
/* Đợt 1 mục 1.3: cùng lý do với ảnh bìa ở trên, nút phát phình to 1.1 lần rồi treo sau mỗi cú
chạm trên điện thoại. Chỉ bọc phần transform; nút vẫn bấm được y như cũ ở mọi thiết bị. */
@media (hover: hover) and (pointer: fine) {
.tutor-row:hover .tutor-video__play { transform: scale(1.1); }
}
.tutor-video--playing .tutor-video__play { opacity: 0; pointer-events: none; }
.tutor-video__note {
position: absolute;
left: 12px;
bottom: 12px;
/* navy-900 ở độ mờ 85% — var() không nhét vào trong rgba() được nên giữ số thô */
background: rgba(13, 31, 51, 0.85);
/* Áo mới 25/08: hết chữ kem paper-dim, về trắng; huy hiệu thành viên thuốc */
color: var(--trang);
border-radius: var(--ao-r-vien-thuoc);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 4px 8px;
}
/* ===== Thanh điểm theo tiêu chí (dùng ở cả 2 trang) ===== */
.criteria-bar {
height: 4px;
background: var(--stone-200);
border-radius: var(--ao-r-vien-thuoc); /* áo mới 25/08: thanh điểm bo tròn hai đầu */
overflow: hidden;
}
.criteria-bar__fill {
height: 100%;
background: var(--navy-900);
transition: width 0.6s ease;
}
/* ===== Ô lọc + dropdown tự dựng =====
Dùng thay cho