/* CSS riêng cho trang Ôn Luyện (practice.html) — khung xem đôi "tờ insert | câu hỏi" và thanh kéo
chỉnh độ rộng. Phần dùng chung nằm ở assets/css/theme.css.
Vì sao không làm hết bằng class Tailwind: độ rộng hai bên là một con số CHẠY (người dùng kéo),
nên phải đi qua biến CSS; và con số đó chỉ có nghĩa khi màn hình đủ rộng để xếp hai bên cạnh
nhau — dưới 1024px hai khung xếp dọc và độ rộng phải trả về 100%. Viết bằng style inline thì
không có chỗ nào đặt được điều kiện màn hình. */
.khung-chia {
display: flex;
flex-direction: column;
gap: 0;
}
/* Khung tờ insert. Dưới lg: nằm trên, cao cố định để phần câu hỏi vẫn thấy được ngay dưới.
Từ lg: nằm bên trái, rộng đúng --rong-insert (mặc định 50%, người dùng kéo đổi). */
.khung-chia__insert {
width: 100%;
height: 46vh;
min-height: 220px;
overflow: auto;
overscroll-behavior: contain;
/* Áo mới 25/08/2026: dải lạnh + viền ấm + bo 14px theo hợp đồng toàn site (cuối theme.css).
overflow:auto sẵn có nên góc bo tự cắt gọn cả thanh tiêu đề sticky bên trong. */
background: var(--ao-nen-lanh);
border: 1px solid var(--ao-vien);
border-radius: var(--ao-r-nho);
}
.khung-chia__cau-hoi {
flex: 1 1 auto;
min-width: 0;
overflow: auto;
overscroll-behavior: contain;
padding-top: 0.75rem;
}
/* Thanh kéo. Dưới lg là một vạch ngang trang trí (không kéo được — xếp dọc thì kéo ngang vô nghĩa),
từ lg mới thành tay kéo thật. */
.khung-chia__tay-keo {
display: none;
}
@media (min-width: 1024px) {
.khung-chia {
flex-direction: row;
height: 76vh;
}
.khung-chia__insert {
width: var(--rong-insert, 50%);
height: auto;
flex: 0 0 auto;
}
.khung-chia__cau-hoi {
padding-top: 0;
padding-left: 0.75rem;
}
.khung-chia__tay-keo {
display: block;
flex: 0 0 10px;
position: relative;
cursor: col-resize;
background: transparent;
border: 0;
padding: 0;
touch-action: none; /* để pointermove không bị trình duyệt nuốt thành cuộn trang */
}
/* Đợt 4 mục 4.4: con trỏ NGỮ NGHĨA lúc đang kéo. Không có luật này thì ngay khi bấm giữ,
con trỏ nhảy về mũi tên mặc định và người dùng tưởng đã tuột tay khỏi thanh chia. */
.khung-chia__tay-keo:active {
cursor: col-resize;
}
/* Vạch mảnh ở giữa vùng bấm 10px — vùng bấm phải rộng hơn vạch thì mới trúng chuột dễ. */
.khung-chia__tay-keo::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 2px;
transform: translateX(-50%);
background: var(--stone-200);
transition: background-color 0.15s ease;
}
.khung-chia__tay-keo:hover::before,
.khung-chia__tay-keo:focus-visible::before,
.khung-chia__tay-keo[data-dang-keo="1"]::before {
background: var(--navy-500);
width: 3px;
}
.khung-chia__tay-keo:focus-visible {
outline: 2px solid var(--navy-500);
outline-offset: -2px;
}
}
/* Mỗi trang PDF của tờ insert là một canvas. Nền trắng + viền mảnh để phân biệt ranh giới trang
khi cuộn liên tục nhiều trang. */
.trang-insert {
display: block;
width: 100%;
height: auto;
background: var(--trang);
border: 1px solid var(--stone-200);
margin: 0 auto 0.5rem;
}
/* Đang kéo thanh chia: cấm bôi đen chữ trong cả trang, nếu không con trỏ quét qua câu hỏi sẽ
bôi xanh cả khung trong lúc kéo.
cursor thêm 28/08/2026 (đợt 4 mục 4.4): một mình .khung-chia__tay-keo:active ở trên KHÔNG đủ.
batDauKeoKhung dùng setPointerCapture, mà pointer capture chỉ đổi nơi nhận SỰ KIỆN chứ không đổi
nơi trình duyệt lấy con trỏ: con trỏ vẫn đọc theo phần tử nằm dưới nó. Kéo nhanh là con trỏ vượt
khỏi vạch 10px và biến thành con trỏ chữ trên ảnh đề bên cạnh, đúng cảm giác "tuột tay". */
body.dang-keo-khung * {
user-select: none !important;
cursor: col-resize !important;
}
/* ---- Mở tờ insert: hàng xem câu TRÀN ra hết bề ngang cửa sổ (24/08/2026) ----
Khung nội dung của trang rộng max-w-7xl (1280px, trừ padding còn 1216px) để mép trái mọi khung
trắng thẳng hàng với logo VPath và mép phải thẳng hàng với nút tài khoản. Bề ngang đó vừa đủ cho
MỘT trang đề, nhưng mở tờ insert là phải chứa HAI trang A4 cạnh nhau: chia đôi 1216px còn khoảng
560px mỗi bên, tức mỗi trang co về ~70% cỡ thật (A4 ở 96dpi rộng 794px) và chữ trong đề nhỏ tới
mức phải ghé sát màn hình mới đọc nổi.
Vì vậy RIÊNG lúc mở tờ insert, hàng "danh sách + khung xem" được phép tràn khỏi khung nội dung ra
hết bề ngang cửa sổ, chỉ chừa 2rem mỗi mép cho khớp padding lg:px-8 của trang. Đóng tờ insert là
mọi thứ về lại đúng hàng với header như cũ. Trên màn 1920px, mỗi bên khung đôi được ~890px, tức
gần đúng cỡ thật của một trang A4.
Chỉ từ 1024px: hẹp hơn thì hai khung xếp dọc (xem .khung-chia ở trên), tràn ngang không thêm được
gì mà còn phá bố cục một cột.
Vì sao 100vw an toàn ở đây: 100vw tính CẢ thanh cuộn dọc (~15px khi hệ điều hành để thanh cuộn
luôn hiện), nhưng phần trừ đi là 4rem = 64px > 15px nên khung vẫn hẹp hơn vùng nhìn thật, không
đẻ ra thanh cuộn ngang. margin-left dùng 50% (nửa khung nội dung) trừ 50vw (nửa cửa sổ) để kéo
mép trái về đúng 2rem tính từ mép cửa sổ, đúng cho cả khi cửa sổ hẹp hơn 1280px. */
@media (min-width: 1024px) {
.hang-xem--rong {
width: calc(100vw - 4rem);
max-width: calc(100vw - 4rem);
margin-left: calc(50% - 50vw + 2rem);
}
}
/* ---- Thanh công cụ của câu hỏi: GHIM vào đỉnh khung xem (lỗi A5, kiểm định 22/08) ----
Một câu 9618 dài tới ba màn hình; đọc tới cuối là Question / Mark Scheme / Insert Paper / mốc
điểm / hai nút đánh dấu đã trôi hết khỏi màn hình, muốn xem đáp án phải cuộn ngược lên đầu.
Vì sao ghim Ở ĐÂY (con trực tiếp của khung trắng) chứ không ghim bên trong .khung-chia__cau-hoi:
khung đó có overflow:auto nên position:sticky trong nó sẽ dính vào mép khung CON chứ không phải
mép màn hình, mà ở chế độ tờ insert thanh công cụ còn phải nằm trên CẢ HAI bên.
top: 5rem vì header trang đã sticky top-0 với chiều cao h-20 = 80px ở mọi bề rộng (h-20 không có
biến thể responsive) — để top: 0 thì thanh công cụ chui xuống dưới header và mất một nửa. Không
dùng lớp .top-20 của Tailwind: bản build sẵn assets/css/tailwind.ea465e5f.css KHÔNG có lớp đó, thêm vào là
bắt cả dự án chạy lại npm run build:css chỉ vì một con số.
z-index 20 < 40 của header: thanh công cụ phải trôi XUỐNG DƯỚI header chứ không đè lên. Dropdown
Cấp Học / Môn Học dùng z-50 nên vẫn phủ lên được. */
.thanh-cong-cu-cau {
position: sticky;
top: 5rem;
z-index: 20;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
/* Bù đúng p-4 (1rem) của khung trắng bao ngoài để dải nền chạy hết bề ngang: không bù thì ảnh
câu hỏi cuộn qua bên dưới sẽ lộ ra ở hai mép 1rem. margin-bottom 1rem thay cho lớp mb-4 vừa gỡ. */
margin: -1rem -1rem 1rem;
padding: 0.75rem 1rem;
background: var(--trang);
border-bottom: 1px solid var(--stone-200);
/* Áo mới 25/08/2026: khung trắng bao ngoài nay bo 14px, mà thanh này tràn sát mép khung
(margin âm ở trên) — không bo hai góc trên theo (trừ 1px viền) thì mảng nền trắng vuông
của nó đè mất cung viền của khung lúc trang chưa cuộn. Lúc ĐANG ghim giữa trang, hai góc
bo để lộ hai khe ~13px cho ảnh câu hỏi ló qua — chấp nhận được so với viền gãy thường trực. */
border-radius: calc(var(--ao-r-nho) - 1px) calc(var(--ao-r-nho) - 1px) 0 0;
}
/* Mở tờ insert thì BỎ ghim, ở MỌI bề rộng. Bản đầu chỉ bỏ ghim từ 1024px với lý do "dưới mốc đó hai
khung xếp dọc nên trang cuộn thật" — soi lại thì chính chỗ đó mới đau: trên điện thoại tờ insert cao
46vh còn thanh công cụ ghim chiếm tới hơn một phần ba màn hình, nên nó che mất thanh tiêu đề của tờ
insert (số trang + ba nút zoom/đóng) và cú bấm vào nút zoom rơi trúng nút Mark Scheme nằm dưới.
PHẢI đứng SAU .thanh-cong-cu-cau ở trên: hai selector cùng độ ưu tiên (0,1,0), thứ tự trong file mới
là thứ quyết định. */
.thanh-cong-cu-cau--khong-ghim {
position: static;
}
/* ---- Cụm "Câu trước / Câu tiếp theo" (lỗi A5) ---- */
.dieu-huong-cau {
display: flex;
align-items: center;
gap: 0.5rem;
}
.dieu-huong-cau__nut {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.5rem 0.875rem;
border: 1px solid var(--ao-vien);
background: var(--trang);
border-radius: var(--ao-r-vien-thuoc); /* áo mới 25/08/2026: nút = viên thuốc (xem cuối theme.css) */
font-size: 0.75rem;
font-weight: 700;
color: var(--navy-900);
white-space: nowrap;
transition: border-color 0.15s ease, background-color 0.15s ease;
}
.dieu-huong-cau__nut:hover:not(:disabled) {
border-color: var(--navy-500);
background: var(--ao-nen-lanh);
}
/* Hết danh sách (câu đầu / câu cuối): làm mờ chứ KHÔNG giấu nút — giấu thì bố cục nhảy chỗ mỗi lần
sang câu, hai nút cứ trượt qua trượt lại. Vòng focus bàn phím dùng luật chung ở theme.css. */
.dieu-huong-cau__nut:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.dieu-huong-cau__vi-tri {
font-size: 0.6875rem;
font-weight: 700;
color: var(--stone-600);
white-space: nowrap;
}
/* Bản GỌN nằm trong thanh công cụ đã ghim — nhãn ngắn để còn chỗ cho Question / Mark Scheme. */
.dieu-huong-cau--gon .dieu-huong-cau__nut {
padding: 0.5rem 0.75rem;
}
/* Dưới 640px thì GIẤU hẳn bản gọn. Màn hình điện thoại chỉ đủ chỗ cho Question / Mark Scheme và hai
nút đánh dấu; nhét thêm cụm điều hướng là thanh công cụ dàn thành ba hàng và ăn hơn một phần ba
chiều cao màn hình — ghim một thanh như thế thì hại nhiều hơn lợi. Cụm ĐÁY vẫn còn nguyên, và trên
màn hẹp nó mới là chỗ tay người dùng với tới thuận nhất. */
@media (max-width: 639px) {
.dieu-huong-cau--gon {
display: none;
}
}
/* Bản ĐÁY: một dải trắng riêng ngay dưới khung xem, hai nút đẩy ra hai mép. Là dải RIÊNG (nằm ngoài
khung trắng của câu) để dùng chung được cho cả câu đang bị khoá — vào câu khoá vẫn còn lối đi tiếp. */
.dieu-huong-cau--day {
justify-content: space-between;
margin-top: 0.75rem;
padding: 0.75rem 1rem;
background: var(--trang);
border: 1px solid var(--ao-vien);
border-radius: var(--ao-r-nho); /* áo mới 25/08/2026: dải trắng riêng cũng là một thẻ -> bo 14px */
}
/* Từng mục trong dropdown Cấp Học / Môn Học. Đi bằng mũi tên thì PHẢI nhìn ra mình đang đứng ở mục
nào — hover không giúp gì cho người dùng bàn phím (lỗi A12).
Vì sao phải viết riêng thay vì để luật chung của theme.css lo: luật đó vẽ vòng focus NGOÀI phần tử
2px, mà hộp dropdown có overflow-hidden nên vòng bị cắt cụt hai bên trái/phải (mục rộng đúng bằng
hộp). Đẩy vào trong -2px thì vòng nằm trọn bên trong.
Viết tay trong file này nên KHÔNG cần chạy npm run build:css. */
.vp-option-dropdown:focus-visible {
outline-offset: -2px;
background-color: var(--stone-100);
}
/* =====================================================================================
ÁO MỚI 25/08/2026 — phần riêng của trang Ôn Luyện (lớp đè chung nằm CUỐI theme.css).
File này nạp SAU theme.css nên mấy giá trị viết cứng ở trên đã được đổi thẳng về token
áo mới; hai luật dưới đây là chỗ theme.css KHÔNG với tới được vì phần tử thiếu class
rounded-sm hoặc mang nhầm "vai" thẻ HTML.
===================================================================================== */
/* Nút mở dropdown Cấp Học / Môn Học: nhìn và dùng như Ô NHẬP (có nhãn nổi đè lên viền)
nên bo 11px như .o-nhap, KHÔNG viên thuốc — viên thuốc thì cung góc (~25px) nuốt mất
chỗ nhãn "Cấp Học" đang đứng ở left 14px. */
#nut-dropdown-cap, #nut-dropdown-mon { border-radius: 11px; }
/* Thẻ chọn môn / chọn năm ở tab Kho Past Papers: hình dáng là THẺ nhưng thẻ HTML là