/* Bộ V3 — KHUNG: thành phần chung của mọi công cụ.
   Tiêu chuẩn: KE-HOACH.md mục 5.1 đến 5.13. Chỉ dùng biến của v3-thang.css.
   Tool KHÔNG vẽ lại các thành phần ở đây; tool.css chỉ kể câu chuyện riêng (mục 5.3).
   Quy ước chuyển động: chỉ transform và opacity. Quy ước trạng thái xem thử: .v3-hover, .v3-bam,
   .v3-tieu-diem giả lập rê, bấm, focus để soi trên trang /v3-mau/ (không dùng trong tool). */

/* ═══ 0. BÍ DANH DẪN XUẤT TỪ THANG (không thêm màu, cỡ mới) ═══ */
:root {
  /* Lớp phủ vàng/lỗi/đạt/đất trộn từ màu thang theo bậc độ mờ */
  --v3-ph-vang-1: color-mix(in srgb, var(--v3-c-vang) calc(var(--v3-mo-1) * 100%), transparent);
  --v3-ph-vang-2: color-mix(in srgb, var(--v3-c-vang) calc(var(--v3-mo-2) * 100%), transparent);
  --v3-ph-vang-3: color-mix(in srgb, var(--v3-c-vang) calc(var(--v3-mo-3) * 100%), transparent);
  --v3-ph-loi: color-mix(in srgb, var(--v3-c-loi) calc(var(--v3-mo-2) * 100%), transparent);
  --v3-ph-ok: color-mix(in srgb, var(--v3-c-dat-ok) calc(var(--v3-mo-2) * 100%), transparent);
  --v3-ph-dat: color-mix(in srgb, var(--v3-c-dat) calc(var(--v3-mo-2) * 100%), transparent);
  --v3-ph-nen: color-mix(in srgb, var(--v3-n-0) calc(var(--v3-mo-5) * 100%), transparent);
  /* Nền đặc (đục) dùng cho ô dính, hàng đang chọn: trộn lên nền thẻ để không lộ chữ phía sau */
  --v3-nen-chon: color-mix(in srgb, var(--v3-c-vang) calc(var(--v3-mo-1) * 100%), var(--v3-n-2));
  --v3-c-vang-nga: color-mix(in srgb, var(--v3-c-vang) 35%, var(--v3-c-nga));
  /* Ánh sơn mài ở mép trên thẻ */
  --v3-anh-son: linear-gradient(180deg, var(--v3-ph-vang-1), transparent 48%);
  /* Kích thước dùng chung: vùng chạm tối thiểu 44 px, ba cỡ biểu tượng */
  --v3-cao-cham: 2.75rem;
  --v3-bt-16: 1rem; --v3-bt-20: 1.25rem; --v3-bt-24: 1.5rem;
}

/* ═══ 1. BỘ BIỂU TƯỢNG SVG (một nét 1,5; ba cỡ 16, 20, 24) ═══
   Cách dùng: <span class="v3-bt v3-bt--tick v3-bt--20" aria-hidden="true"></span>.
   Hình khai báo một lần ở :root, thành phần khác gọi lại bằng var(--v3-hinh-<tên>). */
:root {
  --v3-hinh-mui-ten-xuong: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --v3-hinh-mui-ten-len: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E");
  --v3-hinh-mui-ten-trai: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
  --v3-hinh-mui-ten-phai: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  --v3-hinh-ve-dau: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E");
  --v3-hinh-buoc-tiep: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --v3-hinh-dong: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
  --v3-hinh-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --v3-hinh-cong: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  --v3-hinh-tru: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
  --v3-hinh-canh-bao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0zM12 9v4M12 17h.01'/%3E%3C/svg%3E");
  --v3-hinh-thong-tin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM12 16v-4M12 8h.01'/%3E%3C/svg%3E");
  --v3-hinh-loi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM15 9l-6 6M9 9l6 6'/%3E%3C/svg%3E");
  --v3-hinh-dat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM8 12l3 3 5-6'/%3E%3C/svg%3E");
  --v3-hinh-dau-hoi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3M12 17h.01'/%3E%3C/svg%3E");
  --v3-hinh-chia-se: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7M16 6l-4-4-4 4M12 2v13'/%3E%3C/svg%3E");
  --v3-hinh-sao-chep: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 9h11v11H9zM5 15V5h10'/%3E%3C/svg%3E");
  --v3-hinh-tai-xuong: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3'/%3E%3C/svg%3E");
  --v3-hinh-tai-len: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12'/%3E%3C/svg%3E");
  --v3-hinh-lam-lai: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-3-6.7L21 8M21 3v5h-5'/%3E%3C/svg%3E");
  --v3-hinh-lich: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zM16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
  --v3-hinh-dong-ho: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM12 6v6l4 2'/%3E%3C/svg%3E");
  --v3-hinh-tim-kiem: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM21 21l-4.3-4.3'/%3E%3C/svg%3E");
  --v3-hinh-anh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zM8.5 10a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM21 15l-5-5L5 21'/%3E%3C/svg%3E");
  --v3-hinh-mat-mang: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 2l20 20M8.5 16.4a5 5 0 0 1 7 0M2 8.8a15 15 0 0 1 4.2-2.6M10.7 5.1A15 15 0 0 1 22 8.8M5 12.9a10 10 0 0 1 5.2-2.7M19 12.9a10 10 0 0 0-2.4-1.9M12 20h.01'/%3E%3C/svg%3E");
  --v3-hinh-hop-rong: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2M5.5 5.1 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.5-6.9A2 2 0 0 0 16.7 4H7.3a2 2 0 0 0-1.8 1.1z'/%3E%3C/svg%3E");
  --v3-hinh-khoa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 11h12a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2zM8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
  --v3-hinh-sao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l3 7h7l-5.5 4.5 2 7.5L12 17l-6.5 4 2-7.5L2 9h7z'/%3E%3C/svg%3E");
  --v3-hinh-vuot-ngang: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h18M7 8l-4 4 4 4M17 8l4 4-4 4'/%3E%3C/svg%3E");
  --v3-hinh-nguoi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z'/%3E%3C/svg%3E");
  --v3-hinh-cham: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 12h.01'/%3E%3C/svg%3E");
}
.v3-bt {
  display: inline-block; flex: none; inline-size: var(--v3-bt-20); block-size: var(--v3-bt-20);
  background-color: currentColor;
  -webkit-mask: var(--v3-bt-hinh) center / contain no-repeat;
  mask: var(--v3-bt-hinh) center / contain no-repeat;
}
.v3-bt--16 { inline-size: var(--v3-bt-16); block-size: var(--v3-bt-16); }
.v3-bt--20 { inline-size: var(--v3-bt-20); block-size: var(--v3-bt-20); }
.v3-bt--24 { inline-size: var(--v3-bt-24); block-size: var(--v3-bt-24); }
.v3-bt--mui-ten-xuong { --v3-bt-hinh: var(--v3-hinh-mui-ten-xuong); }
.v3-bt--mui-ten-len { --v3-bt-hinh: var(--v3-hinh-mui-ten-len); }
.v3-bt--mui-ten-trai { --v3-bt-hinh: var(--v3-hinh-mui-ten-trai); }
.v3-bt--mui-ten-phai { --v3-bt-hinh: var(--v3-hinh-mui-ten-phai); }
.v3-bt--ve-dau { --v3-bt-hinh: var(--v3-hinh-ve-dau); }
.v3-bt--buoc-tiep { --v3-bt-hinh: var(--v3-hinh-buoc-tiep); }
.v3-bt--dong { --v3-bt-hinh: var(--v3-hinh-dong); }
.v3-bt--tick { --v3-bt-hinh: var(--v3-hinh-tick); }
.v3-bt--cong { --v3-bt-hinh: var(--v3-hinh-cong); }
.v3-bt--tru { --v3-bt-hinh: var(--v3-hinh-tru); }
.v3-bt--canh-bao { --v3-bt-hinh: var(--v3-hinh-canh-bao); }
.v3-bt--thong-tin { --v3-bt-hinh: var(--v3-hinh-thong-tin); }
.v3-bt--loi { --v3-bt-hinh: var(--v3-hinh-loi); }
.v3-bt--dat { --v3-bt-hinh: var(--v3-hinh-dat); }
.v3-bt--dau-hoi { --v3-bt-hinh: var(--v3-hinh-dau-hoi); }
.v3-bt--chia-se { --v3-bt-hinh: var(--v3-hinh-chia-se); }
.v3-bt--sao-chep { --v3-bt-hinh: var(--v3-hinh-sao-chep); }
.v3-bt--tai-xuong { --v3-bt-hinh: var(--v3-hinh-tai-xuong); }
.v3-bt--tai-len { --v3-bt-hinh: var(--v3-hinh-tai-len); }
.v3-bt--lam-lai { --v3-bt-hinh: var(--v3-hinh-lam-lai); }
.v3-bt--lich { --v3-bt-hinh: var(--v3-hinh-lich); }
.v3-bt--dong-ho { --v3-bt-hinh: var(--v3-hinh-dong-ho); }
.v3-bt--tim-kiem { --v3-bt-hinh: var(--v3-hinh-tim-kiem); }
.v3-bt--anh { --v3-bt-hinh: var(--v3-hinh-anh); }
.v3-bt--mat-mang { --v3-bt-hinh: var(--v3-hinh-mat-mang); }
.v3-bt--hop-rong { --v3-bt-hinh: var(--v3-hinh-hop-rong); }
.v3-bt--khoa { --v3-bt-hinh: var(--v3-hinh-khoa); }
.v3-bt--sao { --v3-bt-hinh: var(--v3-hinh-sao); }
.v3-bt--vuot-ngang { --v3-bt-hinh: var(--v3-hinh-vuot-ngang); }
.v3-bt--nguoi { --v3-bt-hinh: var(--v3-hinh-nguoi); }
.v3-bt--cham { --v3-bt-hinh: var(--v3-hinh-cham); }
/* Biểu tượng + chữ cùng dòng: căn giữa dọc bằng flex, lệch ≤ 1 px */
.v3-dong { display: inline-flex; align-items: center; gap: var(--v3-k-8); }

/* ═══ 2. VAI CHỮ (mục 5.10) ═══ */
.v3-tieu-de-trang, .v3-tieu-de-khoi, .v3-tieu-de-nho, .v3-gia-tri-lon, .v3-gia-tri {
  margin: 0; font-family: var(--v3-f-serif); font-weight: var(--v3-dam-6);
  font-variant-numeric: lining-nums; text-wrap: balance; overflow-wrap: break-word;
}
.v3-tieu-de-trang { font-size: var(--v3-cs-tieu-de); line-height: var(--v3-cd-tieu-de); letter-spacing: var(--v3-gc-1); color: var(--v3-c-vang-nga); }
.v3-tieu-de-khoi { font-size: var(--v3-cs-24); line-height: var(--v3-cd-tieu-de); letter-spacing: var(--v3-gc-0); color: var(--v3-c-vang); }
.v3-tieu-de-nho { font-size: var(--v3-cs-20); line-height: var(--v3-cd-tieu-de); letter-spacing: var(--v3-gc-0); color: var(--v3-c-nga); }
.v3-gia-tri-lon { font-size: var(--v3-cs-24); line-height: var(--v3-cd-tieu-de); letter-spacing: var(--v3-gc-0); color: var(--v3-c-vang); }
.v3-gia-tri { font-size: var(--v3-cs-18); line-height: var(--v3-cd-giao-dien); letter-spacing: var(--v3-gc-0); color: var(--v3-c-nga); }
.v3-chu-doc, .v3-chu-phu, .v3-chu-thich, .v3-nhan, .v3-so {
  margin: 0; font-family: var(--v3-f-ui); overflow-wrap: break-word;
}
.v3-chu-doc { font-size: var(--v3-cs-16); font-weight: var(--v3-dam-4); line-height: var(--v3-cd-doc); letter-spacing: var(--v3-gc-0); color: var(--v3-c-nga-phu); text-wrap: pretty; }
.v3-chu-phu { font-size: var(--v3-cs-14); font-weight: var(--v3-dam-4); line-height: var(--v3-cd-giao-dien); letter-spacing: var(--v3-gc-0); color: var(--v3-c-nga-phu); }
.v3-chu-thich { font-size: var(--v3-cs-13); font-weight: var(--v3-dam-4); line-height: var(--v3-cd-giao-dien); letter-spacing: var(--v3-gc-1); color: var(--v3-c-nhan); }
.v3-nhan { font-size: var(--v3-cs-12); font-weight: var(--v3-dam-5); line-height: var(--v3-cd-giao-dien); letter-spacing: var(--v3-gc-3); text-transform: uppercase; color: var(--v3-c-nhan); }
.v3-so { font-size: var(--v3-cs-14); font-weight: var(--v3-dam-5); line-height: var(--v3-cd-giao-dien); letter-spacing: var(--v3-gc-0); color: var(--v3-c-nga); font-variant-numeric: lining-nums tabular-nums; }
/* Chữ Hán chen giữa chữ Việt: line-height 1 để không đẩy lệch dòng; bản khối dùng cao dòng giao diện */
.v3-han { white-space: nowrap; font-family: var(--v3-f-han); font-weight: var(--v3-dam-5); line-height: 1; letter-spacing: var(--v3-gc-0); }
.v3-han--khoi { display: block; line-height: var(--v3-cd-giao-dien); }
.v3-chu-doc + .v3-chu-doc { margin-block-start: var(--v3-nhip-nhom); }
@media (min-width: 768px) {
  .v3-tieu-de-khoi, .v3-gia-tri-lon { font-size: var(--v3-cs-32); }
  .v3-tieu-de-nho { font-size: var(--v3-cs-24); }
}

/* Tiện ích bố cục nhỏ */
.v3-can-giua { text-align: center; }
.v3-chong-nhom, .v3-chong-giua, .v3-chong-phan { display: grid; min-inline-size: 0; }
.v3-chong-nhom { gap: var(--v3-nhip-nhom); }
.v3-chong-giua { gap: var(--v3-nhip-giua); }
.v3-chong-phan { gap: var(--v3-nhip-phan); }
.v3-nhom-nut { display: flex; flex-wrap: wrap; align-items: center; gap: var(--v3-k-12); }
.v3-chi-rong { display: none; }
@media (min-width: 768px) {
  .v3-chi-rong { display: revert; }
  .v3-chi-hep { display: none; }
}

/* ═══ 3. KHUNG 3 MÀN (mục 5.2, 5.6) ═══
   Lề 16/24/32 theo thang. Nội dung tối đa 1080 px (1024–1919), 1280 px từ 1920. */
.v3-trang {
  box-sizing: border-box; inline-size: 100%; min-inline-size: 0;
  max-inline-size: calc(var(--v3-r-tool) + 2 * var(--v3-le));
  margin-inline: auto; padding: var(--v3-k-24) var(--v3-le) calc(var(--v3-nhip-phan) + var(--v3-k-48));
  scroll-margin-block-start: var(--header-height);
  overflow-x: clip; /* chú thích nổi đang ẩn không được làm trang tràn ngang */
}
@media (min-width: 1920px) {
  .v3-trang { max-inline-size: calc(var(--v3-r-rong) + 2 * var(--v3-le)); }
}
.v3-man-nhap[hidden], .v3-man-cho[hidden], .v3-man-kq[hidden] { display: none; }
/* Màn nhập: 1 cột dưới 1024 (form tối đa 560 và căn giữa từ 768), 2 cột cân từ 1024 */
.v3-man-nhap { display: grid; gap: var(--v3-nhip-giua); align-items: center; }
.v3-nhap-chuyen, .v3-nhap-form { min-inline-size: 0; inline-size: 100%; }
.v3-nhap-chuyen { display: grid; gap: var(--v3-nhip-nhom); align-content: center; }
.v3-nhap-chuyen__hinh { display: grid; place-items: center; }
@media (min-width: 768px) {
  .v3-nhap-chuyen, .v3-nhap-form { max-inline-size: var(--v3-r-form); margin-inline: auto; }
}
@media (min-width: 1024px) {
  .v3-man-nhap { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--v3-k-48); }
}
/* Màn chờ: giữa màn, không bao giờ trắng */
.v3-man-cho { display: grid; place-items: center; min-block-size: 60svh; padding-block: var(--v3-nhip-phan); text-align: center; }
/* Màn kết quả: kết luận trước, chi tiết sau, mỗi phần cách nhau một nhịp "phần" */
.v3-man-kq { display: grid; gap: var(--v3-nhip-phan); min-inline-size: 0; }
.v3-khoi { display: grid; gap: var(--v3-nhip-giua); min-inline-size: 0; }
.v3-khoi__dau { display: grid; gap: var(--v3-nhip-nhom); }
/* Vào màn: mờ dần + trượt 8 px (JS v3.man thêm lớp này rồi gỡ khi xong) */
.v3-vao { animation: v3-vao var(--v3-t-360) var(--v3-e-ra) both; }
@keyframes v3-vao {
  from { opacity: 0; transform: translateY(var(--v3-k-8)); }
  to { opacity: 1; transform: translateY(0); }
}

/* Hàng ô chia cột theo bề rộng: ngày/tháng/năm, giờ/phút */
.v3-hang { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: var(--v3-k-8); }
.v3-hang--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.v3-hang--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Ô chọn trong hàng nhiều cột: đệm hẹp hơn để chữ không bị cắt */
.v3-hang .v3-chon__nut { gap: var(--v3-k-4); padding-inline: var(--v3-k-12); }
.v3-hang .v3-chon__mui { inline-size: var(--v3-bt-16); block-size: var(--v3-bt-16); }

/* ═══ 4. DÙNG CHUNG CHO ĐIỂM CHẠM ═══ */
/* Viền focus: một kiểu duy nhất */
.v3-nut:focus-visible, .v3-o:focus-visible, .v3-chon__nut:focus-visible, .v3-tab:focus-visible,
.v3-gap > summary:focus-visible, .v3-the--bam:focus-visible, .v3-doan__vao:focus-visible + .v3-doan__chu,
.v3-tron:focus-visible, .v3-vuong:focus-visible, .v3-truot:focus-visible, .v3-dinh-kem:focus-within,
.v3-chu-thich-noi__nut:focus-visible, .v3-bai a:focus-visible, .tc-prose a:focus-visible,
.tc-accordion-toggle:focus-visible, .tc-faq-q:focus-visible, .tc-cta-btn:focus-visible, .sm-share__btn:focus-visible,
.smh-card:focus-visible, .sm-post-card a:focus-visible, .v3-muc-luc a:focus-visible,
.v3-nut.v3-tieu-diem, .v3-o.v3-tieu-diem, .v3-tab.v3-tieu-diem {
  outline: var(--v3-vien-2) solid var(--v3-c-vang); outline-offset: var(--v3-vien-2);
}

/* ═══ 5. FORM: TRƯỜNG, NHÃN, GỢI Ý, LỖI ═══ */
.v3-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--v3-nhip-nhom); min-inline-size: 0; }
.v3-form__chan { display: grid; gap: var(--v3-nhip-nhom); margin-block-start: var(--v3-nhip-nhom); }
.v3-truong { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--v3-k-8); min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.v3-truong > legend { padding: 0; }
.v3-goi-y { margin: 0; font-family: var(--v3-f-ui); font-size: var(--v3-cs-13); line-height: var(--v3-cd-giao-dien); letter-spacing: var(--v3-gc-1); color: var(--v3-c-nhan); }
/* Lỗi nằm ngay dưới đúng ô sai; có biểu tượng để không chỉ dựa vào màu */
.v3-loi {
  display: flex; align-items: flex-start; gap: var(--v3-k-8); margin: 0;
  font-family: var(--v3-f-ui); font-size: var(--v3-cs-14); line-height: var(--v3-cd-giao-dien); color: var(--v3-c-loi);
}
.v3-loi::before { --v3-bt-hinh: var(--v3-hinh-canh-bao); margin-block-start: calc((var(--v3-cs-14) * var(--v3-cd-giao-dien) - var(--v3-bt-16)) / 2); inline-size: var(--v3-bt-16); block-size: var(--v3-bt-16); }
/* Biểu tượng giả (::before) dùng chung một cách vẽ */
.v3-loi::before, .v3-thong-bao::before, .v3-gap > summary::after, .tc-accordion-arrow::before, .tc-faq-arrow::before,
.v3-chon__muc[aria-selected="true"]::after, .v3-vuong::before {
  content: ''; display: block; flex: none; background-color: currentColor;
  -webkit-mask: var(--v3-bt-hinh) center / contain no-repeat; mask: var(--v3-bt-hinh) center / contain no-repeat;
}

/* ═══ 6. Ô NHẬP (chữ, số, ngày giờ, nhiều dòng) ═══
   Ô cao ≥ 44 px, chữ ≥ 16 px (không bị iOS phóng to). Viền màu nhãn để thấy rõ với người lớn tuổi. */
.v3-o {
  box-sizing: border-box; inline-size: 100%; max-inline-size: var(--v3-r-form); min-block-size: var(--v3-cao-cham); margin: 0;
  padding: var(--v3-k-12) var(--v3-k-16);
  font-family: var(--v3-f-ui); font-size: var(--v3-cs-16); font-weight: var(--v3-dam-4); line-height: var(--v3-cd-giao-dien); letter-spacing: var(--v3-gc-0);
  color: var(--v3-c-nga); caret-color: var(--v3-c-vang); color-scheme: dark;
  background: var(--v3-n-1); border: var(--v3-vien-1) solid var(--v3-c-nhan); border-radius: var(--v3-bo-4);
  -webkit-appearance: none; appearance: none; touch-action: manipulation;
}
textarea.v3-o { display: block; min-block-size: 7.5rem; resize: vertical; }
input[type="number"].v3-o { -moz-appearance: textfield; appearance: textfield; font-variant-numeric: lining-nums tabular-nums; }
.v3-o::-webkit-outer-spin-button, .v3-o::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.v3-o::placeholder { color: var(--v3-c-nhan); opacity: var(--v3-mo-6); }
/* Ô ngày giờ: bộ chọn gốc của trình duyệt, đổi sang tông tối */
.v3-o::-webkit-calendar-picker-indicator { cursor: pointer; opacity: var(--v3-mo-5); }
.v3-o::-webkit-date-and-time-value { min-block-size: var(--v3-cd-giao-dien); text-align: start; }
/* Tự điền của trình duyệt: giữ nền tối, chữ ngà */
.v3-o:-webkit-autofill { -webkit-text-fill-color: var(--v3-c-nga); caret-color: var(--v3-c-vang); box-shadow: 0 0 0 62.5rem var(--v3-n-1) inset; }
.v3-o:autofill { color: var(--v3-c-nga); box-shadow: 0 0 0 62.5rem var(--v3-n-1) inset; }
.v3-o:disabled, .v3-o[aria-disabled="true"] { opacity: var(--v3-mo-4); cursor: not-allowed; }
.v3-o:is(:focus, .v3-tieu-diem):not(:disabled) { border-color: var(--v3-c-vang); }
.v3-o[aria-invalid="true"]:not(:disabled), .v3-truong--loi .v3-o:not(:disabled) { border-color: var(--v3-c-loi); }

/* Ô chọn tự vẽ. <select> gốc vẫn nằm trong DOM (ẩn bằng mắt) để JS tool đọc giá trị. */
.v3-chon { position: relative; max-inline-size: var(--v3-r-form); }
.v3-chon__goc { position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 1px; min-block-size: 1px; block-size: 1px; padding: 0; opacity: 0; pointer-events: none; overflow: hidden; }
.v3-chon__nut { display: flex; align-items: center; justify-content: space-between; gap: var(--v3-k-8); text-align: start; cursor: pointer; }
.v3-chon__nut[data-rong] .v3-chon__gia-tri { color: var(--v3-c-nhan); }
.v3-chon__gia-tri { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-chon__mui { transition: transform var(--v3-t-200) var(--v3-e-deu); }
.v3-chon__nut[aria-expanded="true"] .v3-chon__mui { transform: rotate(180deg); }
.v3-chon__ds {
  position: absolute; z-index: var(--v3-z-dinh); inset-inline: 0; inset-block-start: calc(100% + var(--v3-k-4));
  box-sizing: border-box; max-block-size: 16rem; margin: 0; padding: var(--v3-k-4); list-style: none; overflow-y: auto; overscroll-behavior: contain;
  background: var(--v3-n-3); border: var(--v3-vien-1) solid var(--v3-v-2); border-radius: var(--v3-bo-4); box-shadow: var(--v3-bong-3);
  animation: v3-vao-nhe var(--v3-t-120) var(--v3-e-ra) both;
}
.v3-chon--tren .v3-chon__ds { inset-block-start: auto; inset-block-end: calc(100% + var(--v3-k-4)); }
.v3-chon__nhom { padding: var(--v3-k-8) var(--v3-k-12) var(--v3-k-4); font-family: var(--v3-f-ui); font-size: var(--v3-cs-12); font-weight: var(--v3-dam-5); letter-spacing: var(--v3-gc-3); text-transform: uppercase; color: var(--v3-c-nhan); }
.v3-chon__muc {
  display: flex; align-items: center; justify-content: space-between; gap: var(--v3-k-8); min-block-size: var(--v3-cao-cham); box-sizing: border-box; padding: var(--v3-k-8) var(--v3-k-12);
  font-family: var(--v3-f-ui); font-size: var(--v3-cs-16); line-height: var(--v3-cd-giao-dien); color: var(--v3-c-nga-phu); border-radius: var(--v3-bo-4); cursor: pointer;
}
.v3-chon__muc[aria-selected="true"] { color: var(--v3-c-vang); }
.v3-chon__muc[aria-selected="true"]::after { --v3-bt-hinh: var(--v3-hinh-tick); inline-size: var(--v3-bt-16); block-size: var(--v3-bt-16); }
.v3-chon__muc[aria-disabled="true"] { opacity: var(--v3-mo-4); cursor: not-allowed; }
.v3-chon__muc:is(.v3-dang-chon, .v3-hover) { background: var(--v3-ph-vang-2); color: var(--v3-c-nga); }
@keyframes v3-vao-nhe {
  from { opacity: 0; transform: translateY(calc(-1 * var(--v3-k-4))); }
  to { opacity: 1; transform: translateY(0); }
}

/* Ô tròn, ô vuông: bấm cả dòng nhãn (cao ≥ 44) */
.v3-lua { display: flex; align-items: center; gap: var(--v3-k-12); min-block-size: var(--v3-cao-cham); cursor: pointer; font-family: var(--v3-f-ui); font-size: var(--v3-cs-16); line-height: var(--v3-cd-giao-dien); color: var(--v3-c-nga-phu); }
.v3-tron, .v3-vuong {
  -webkit-appearance: none; appearance: none; flex: none; display: inline-grid; place-content: center; box-sizing: border-box; margin: 0;
  inline-size: var(--v3-bt-24); block-size: var(--v3-bt-24); color: var(--v3-c-vang); cursor: pointer;
  background: var(--v3-n-1); border: var(--v3-vien-1) solid var(--v3-c-nhan);
}
.v3-tron { border-radius: var(--v3-bo-tron); }
.v3-vuong { border-radius: var(--v3-bo-4); }
.v3-tron::before, .v3-vuong::before { opacity: 0; transform: scale(.6); transition: transform var(--v3-t-120) var(--v3-e-ra), opacity var(--v3-t-120) var(--v3-e-ra); }
.v3-tron::before { content: ''; inline-size: var(--v3-k-12); block-size: var(--v3-k-12); border-radius: var(--v3-bo-tron); background: currentColor; }
.v3-vuong::before { --v3-bt-hinh: var(--v3-hinh-tick); inline-size: var(--v3-bt-16); block-size: var(--v3-bt-16); }
.v3-tron:checked, .v3-vuong:checked { border-color: var(--v3-c-vang); background: var(--v3-ph-vang-2); }
.v3-tron:checked::before, .v3-vuong:checked::before { opacity: 1; transform: scale(1); }
.v3-tron:disabled, .v3-vuong:disabled { opacity: var(--v3-mo-4); cursor: not-allowed; }
.v3-tron[aria-invalid="true"], .v3-vuong[aria-invalid="true"] { border-color: var(--v3-c-loi); }
/* Nhóm chọn một (giới tính, âm/dương lịch): các đoạn liền nhau, mỗi đoạn cao ≥ 44 */
.v3-doan { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); box-sizing: border-box; max-inline-size: var(--v3-r-form); overflow: hidden; background: var(--v3-n-1); border: var(--v3-vien-1) solid var(--v3-c-nhan); border-radius: var(--v3-bo-4); }
.v3-doan__muc { position: relative; display: grid; min-inline-size: 0; cursor: pointer; }
/* Nhãn dài ngắn khác nhau (Bản Mệnh, Lưu Niên 2026): cột theo chữ để cả hàng nằm trên một dòng */
.v3-doan--tu-co { grid-auto-columns: auto; max-inline-size: 100%; }
.v3-doan--tu-co .v3-doan__chu { padding-inline: var(--v3-k-8); }
@media (max-width: 359px) {
  .v3-doan--tu-co .v3-doan__chu { padding-inline: var(--v3-k-4); }
}
.v3-doan__muc + .v3-doan__muc { border-inline-start: var(--v3-vien-1) solid var(--v3-v-2); }
.v3-doan__vao { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; }
.v3-doan__chu {
  display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-block-size: var(--v3-cao-cham); padding: var(--v3-k-8) var(--v3-k-12); text-align: center;
  font-family: var(--v3-f-ui); font-size: var(--v3-cs-14); font-weight: var(--v3-dam-6); line-height: var(--v3-cd-giao-dien); letter-spacing: var(--v3-gc-2); color: var(--v3-c-nga-phu);
}
/* Đoạn đang chọn theo màu riêng của tool, để vàng dành cho điểm nhấn chính của màn */
.v3-doan__vao:checked + .v3-doan__chu { color: var(--v3-tool-chu, var(--v3-c-vang)); background: color-mix(in srgb, var(--v3-tool, var(--v3-c-vang)) 28%, transparent); box-shadow: inset 0 0 0 var(--v3-vien-1) var(--v3-tool-chu, var(--v3-c-vang)); }
.v3-doan__vao:disabled + .v3-doan__chu { opacity: var(--v3-mo-4); cursor: not-allowed; }
/* Thanh trượt */
.v3-truot { -webkit-appearance: none; appearance: none; inline-size: 100%; max-inline-size: var(--v3-r-form); block-size: var(--v3-cao-cham); margin: 0; background: transparent; cursor: pointer; touch-action: manipulation; }
.v3-truot::-webkit-slider-runnable-track { block-size: var(--v3-k-4); background: var(--v3-c-nhan); border-radius: var(--v3-bo-tron); }
.v3-truot::-moz-range-track { block-size: var(--v3-k-4); background: var(--v3-c-nhan); border-radius: var(--v3-bo-tron); }
.v3-truot::-webkit-slider-thumb { -webkit-appearance: none; inline-size: var(--v3-bt-24); block-size: var(--v3-bt-24); margin-block-start: calc((var(--v3-k-4) - var(--v3-bt-24)) / 2); background: var(--v3-c-vang); border: var(--v3-vien-2) solid var(--v3-n-0); border-radius: var(--v3-bo-tron); box-shadow: var(--v3-bong-vang); }
.v3-truot::-moz-range-thumb { inline-size: var(--v3-bt-24); block-size: var(--v3-bt-24); box-sizing: border-box; background: var(--v3-c-vang); border: var(--v3-vien-2) solid var(--v3-n-0); border-radius: var(--v3-bo-tron); box-shadow: var(--v3-bong-vang); }
.v3-truot:disabled { opacity: var(--v3-mo-4); cursor: not-allowed; }
/* Ô đính kèm */
.v3-dinh-kem { position: relative; display: flex; align-items: center; gap: var(--v3-k-12); box-sizing: border-box; max-inline-size: var(--v3-r-form); min-block-size: var(--v3-cao-cham); padding: var(--v3-k-12) var(--v3-k-16); cursor: pointer; font-family: var(--v3-f-ui); font-size: var(--v3-cs-14); line-height: var(--v3-cd-giao-dien); color: var(--v3-c-nga-phu); background: var(--v3-n-1); border: var(--v3-vien-1) dashed var(--v3-c-nhan); border-radius: var(--v3-bo-4); }
.v3-dinh-kem__vao { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; }
.v3-dinh-kem__ten { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--v3-c-nhan); }

/* ═══ 7. NÚT: chính, phụ, liên kết ═══
   Mỗi trang chỉ một nút chính. Rê sáng viền 120 ms, bấm lún nhẹ 120 ms, chỉ bằng transform/opacity:
   lớp ::before là tấm phủ sáng, ::after là vành viền sáng, cả hai đổi opacity. */
.v3-nut, .tc-cta-btn, .sm-share__btn {
  --v3-nut-mau: var(--v3-c-vang); --v3-nut-nen: transparent; --v3-nut-vien: var(--v3-v-2);
  --v3-nut-lop: var(--v3-c-vang); --v3-nut-vanh: inset 0 0 0 var(--v3-vien-1) var(--v3-c-vang);
  position: relative; isolation: isolate; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: var(--v3-k-8);
  min-block-size: var(--v3-cao-cham); margin: 0; padding: var(--v3-k-12) var(--v3-k-24);
  font-family: var(--v3-f-ui); font-size: var(--v3-cs-14); font-weight: var(--v3-dam-6); line-height: var(--v3-cd-giao-dien); letter-spacing: var(--v3-gc-2);
  text-align: center; text-decoration: none; color: var(--v3-nut-mau); background: var(--v3-nut-nen);
  border: var(--v3-vien-1) solid var(--v3-nut-vien); border-radius: var(--v3-bo-4);
  cursor: pointer; -webkit-appearance: none; appearance: none; user-select: none; -webkit-user-select: none;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: transform var(--v3-t-120) var(--v3-e-deu);
}
.v3-nut::before, .tc-cta-btn::before, .sm-share__btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--v3-nut-lop); opacity: 0;
  transition: opacity var(--v3-t-120) var(--v3-e-deu);
}
.v3-nut::after, .tc-cta-btn::after, .sm-share__btn::after {
  content: ''; position: absolute; inset: calc(-1 * var(--v3-vien-1)); z-index: -1; border-radius: inherit; box-shadow: var(--v3-nut-vanh); opacity: 0;
  transition: opacity var(--v3-t-120) var(--v3-e-deu);
}
.v3-nut--chinh {
  --v3-nut-mau: var(--v3-n-0); --v3-nut-nen: var(--v3-c-vang); --v3-nut-vien: var(--v3-c-vang);
  --v3-nut-lop: var(--v3-c-nga); --v3-nut-vanh: var(--v3-bong-vang);
}
.v3-nut--rong { inline-size: 100%; max-inline-size: var(--v3-r-form); }
.v3-nut--vuong, .sm-share__btn { inline-size: var(--v3-cao-cham); padding: 0; }
.v3-nut--lien-ket { --v3-nut-vien: transparent; padding: var(--v3-k-8) var(--v3-k-4); text-decoration: underline; text-decoration-thickness: var(--v3-vien-1); text-underline-offset: .25em; }
.v3-nut--lien-ket::before, .v3-nut--lien-ket::after { display: none; }
.v3-nut--lien-ket:is(:hover, .v3-hover) { color: var(--v3-c-nga); }
/* Rê chuột chỉ áp cho thiết bị có chuột, tránh dính hover trên điện thoại */
@media (hover: hover) {
  .v3-nut:is(:hover, .v3-hover)::before, .tc-cta-btn:hover::before, .sm-share__btn:hover::before { opacity: var(--v3-mo-2); }
  .v3-nut:is(:hover, .v3-hover)::after, .tc-cta-btn:hover::after, .sm-share__btn:hover::after { opacity: var(--v3-mo-6); }
  .v3-o:is(:hover, .v3-hover):not(:disabled, :focus) { border-color: var(--v3-c-nga-phu); }
  .v3-chon__muc:hover { background: var(--v3-ph-vang-2); color: var(--v3-c-nga); }
  .v3-tron:hover:not(:disabled, :checked), .v3-vuong:hover:not(:disabled, :checked) { border-color: var(--v3-c-nga-phu); }
  .v3-doan__muc:hover .v3-doan__chu { color: var(--v3-c-nga); }
  .v3-dinh-kem:hover { background: var(--v3-ph-vang-1); border-color: var(--v3-c-nga-phu); }
}
/* Bấm: lún nhẹ. Đặt sau khối rê để thắng khi vừa rê vừa bấm */
.v3-nut:is(:active, .v3-bam), .tc-cta-btn:active, .sm-share__btn:active { transform: translateY(var(--v3-vien-1)) scale(.98); }
.v3-nut:is(:active, .v3-bam)::before, .tc-cta-btn:active::before, .sm-share__btn:active::before { opacity: var(--v3-mo-3); }
/* Khoá */
.v3-nut:disabled, .v3-nut[aria-disabled="true"] { opacity: var(--v3-mo-4); cursor: not-allowed; pointer-events: none; }
/* Đang chờ: chữ ẩn, vòng quay thay chỗ, bề rộng nút không đổi */
.v3-nut[aria-busy="true"] { color: transparent; pointer-events: none; }
.v3-nut[aria-busy="true"]::before {
  inset: 50% auto auto 50%; inline-size: var(--v3-bt-20); block-size: var(--v3-bt-20); box-sizing: border-box; background: none; opacity: var(--v3-mo-6);
  border: var(--v3-vien-2) solid var(--v3-nut-mau); border-inline-end-color: transparent; border-radius: var(--v3-bo-tron);
  transform: translate(-50%, -50%) rotate(0deg); animation: v3-xoay-giua var(--v3-t-dinh) linear infinite;
}
@keyframes v3-xoay-giua {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
.sm-share__btn svg { inline-size: var(--v3-bt-20); block-size: var(--v3-bt-20); }
.sm-share__btn.copied { --v3-nut-mau: var(--v3-c-dat-ok); --v3-nut-vien: var(--v3-c-dat-ok); }

/* Phần tử có display riêng vẫn phải tuân thuộc tính hidden */
.v3-nut[hidden], .v3-tab[hidden], .v3-thong-bao[hidden], .v3-rong[hidden], .v3-the[hidden], .v3-loi[hidden], .v3-lua[hidden], .v3-bang-goi-y[hidden] { display: none; }

/* ═══ 8. THẺ (mục 5.11, 5.12) ═══ */
.v3-the {
  position: relative; box-sizing: border-box; display: grid; align-content: start; gap: var(--v3-nhip-nhom); min-inline-size: 0; padding: var(--v3-k-24);
  background-color: var(--v3-n-2); background-image: var(--v3-anh-son);
  border: var(--v3-vien-1) solid var(--v3-v-1); border-radius: var(--v3-bo-8); box-shadow: var(--v3-bong-1);
}
.v3-the--lom { background-image: none; background-color: var(--v3-n-1); box-shadow: none; }
/* Thẻ nhấn: viền vàng đậm hơn và hai góc ấn triện, mỗi màn chỉ nên dùng một thẻ nhấn */
.v3-the--vang { border-color: var(--v3-v-2); }
.v3-the--vang::before, .v3-the--vang::after { content: ''; position: absolute; inline-size: var(--v3-k-16); block-size: var(--v3-k-16); border: 0 solid var(--v3-c-vang); pointer-events: none; }
.v3-the--vang::before { inset-block-start: calc(-1 * var(--v3-vien-1)); inset-inline-start: calc(-1 * var(--v3-vien-1)); border-block-start-width: var(--v3-vien-2); border-inline-start-width: var(--v3-vien-2); border-start-start-radius: var(--v3-bo-8); }
.v3-the--vang::after { inset-block-end: calc(-1 * var(--v3-vien-1)); inset-inline-end: calc(-1 * var(--v3-vien-1)); border-block-end-width: var(--v3-vien-2); border-inline-end-width: var(--v3-vien-2); border-end-end-radius: var(--v3-bo-8); }
/* Thẻ bấm được: vành viền sáng và nhấc nhẹ khi rê */
.v3-the--bam { color: inherit; text-decoration: none; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform var(--v3-t-120) var(--v3-e-deu); }
.v3-the--bam::after { content: ''; position: absolute; inset: calc(-1 * var(--v3-vien-1)); border-radius: inherit; box-shadow: inset 0 0 0 var(--v3-vien-1) var(--v3-c-vang); opacity: 0; pointer-events: none; transition: opacity var(--v3-t-120) var(--v3-e-deu); }
.v3-the--bam:is(:active, .v3-bam) { transform: scale(.99); }
@media (hover: hover) {
  .v3-the--bam:is(:hover, .v3-hover) { transform: translateY(calc(-1 * var(--v3-k-4) / 2)); }
  .v3-the--bam:is(:hover, .v3-hover)::after { opacity: var(--v3-mo-6); }
}
/* Lưới thẻ: cùng hàng cao bằng nhau, hàng cuối không đủ cột thì căn giữa */
.v3-luoi-the, .smh-grid, .sm-blog-grid { --v3-cot: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--v3-k-16); }
.v3-luoi-the > *, .smh-grid > *, .sm-blog-grid > * { flex: 0 0 calc((100% - (var(--v3-cot) - 1) * var(--v3-k-16)) / var(--v3-cot)); min-inline-size: 0; }
@media (min-width: 768px) {
  .v3-luoi-the, .smh-grid, .sm-blog-grid { --v3-cot: 2; }
}
@media (min-width: 1024px) {
  .v3-luoi-the, .smh-grid, .sm-blog-grid { --v3-cot: 3; }
  .v3-luoi-the--2, .smh-grid--2 { --v3-cot: 2; }
}
.smh-grid--2 { max-inline-size: var(--v3-r-chu); margin-inline: auto; }
.v3-luoi-the--1, .smh-grid--1 { --v3-cot: 1; max-inline-size: calc(var(--v3-r-form) / 2); margin-inline: auto; }
/* Lá số, bàn cung: ô cùng kích thước tuyệt đối, ô giữa trải 2×2. Ô xếp theo thứ tự tự nhiên, bỏ qua ô giữa */
.v3-luoi-cung {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--v3-vien-1); box-sizing: border-box; max-inline-size: var(--v3-r-chu); margin-inline: auto;
  overflow: hidden; background: var(--v3-v-2); border: var(--v3-vien-1) solid var(--v3-v-2); border-radius: var(--v3-bo-8);
}
.v3-luoi-cung__o { box-sizing: border-box; align-self: stretch; justify-self: stretch; aspect-ratio: 1 / 1; min-inline-size: 0; display: grid; grid-template-columns: minmax(0, 1fr); align-content: space-between; gap: var(--v3-k-4); padding: var(--v3-k-8); overflow-wrap: anywhere; background: var(--v3-n-2); }
.v3-luoi-cung__o[aria-selected="true"] { background: var(--v3-nen-chon); }
.v3-luoi-cung__giua { grid-area: 2 / 2 / 4 / 4; display: grid; place-content: center; gap: var(--v3-k-8); padding: var(--v3-k-16); text-align: center; background: var(--v3-n-1); }

/* ═══ 9. BẢNG (mục 5.11) ═══
   Dưới 768 px: bảng ≤ 3 cột hiện đủ; bảng ≥ 4 cột cuộn ngang trong khung riêng, cột đầu dính, bóng mép phải, gợi ý vuốt. */
/* scrollbar-width đè mất ::-webkit-scrollbar ở Chrome, Windows hiện lại nút mũi tên, nên chỉ dành cho Firefox */
@supports not selector(::-webkit-scrollbar) {
  .v3-cuon, .v3-bang-cuon, .tc-table-wrap { scrollbar-width: thin; scrollbar-color: var(--v3-c-nhan) transparent; }
}
.v3-cuon { overflow: auto; overscroll-behavior: contain; }
.v3-bang-cuon, .tc-table-wrap {
  overflow-x: auto; overscroll-behavior-x: contain; box-sizing: border-box; max-inline-size: 100%;
  border: var(--v3-vien-1) solid var(--v3-v-1); border-radius: var(--v3-bo-8);
  background-color: var(--v3-n-2);
  background-image: linear-gradient(to left, var(--v3-n-2) 30%, transparent), radial-gradient(farthest-side at 100% 50%, var(--v3-ph-nen), transparent);
  background-repeat: no-repeat; background-position: right center, right center; background-size: var(--v3-k-32) 100%, var(--v3-k-12) 100%;
  background-attachment: local, scroll;
}
.v3-bang, .tc-table { inline-size: 100%; border-collapse: separate; border-spacing: 0; font-family: var(--v3-f-ui); font-size: var(--v3-cs-14); font-weight: var(--v3-dam-4); line-height: var(--v3-cd-giao-dien); color: var(--v3-c-nga-phu); text-align: start; font-variant-numeric: lining-nums; }
.v3-bang { table-layout: fixed; }
.v3-bang th, .tc-table th {
  box-sizing: border-box; padding: var(--v3-k-12) var(--v3-k-16); overflow-wrap: break-word; vertical-align: middle; text-align: start;
  font-size: var(--v3-cs-12); font-weight: var(--v3-dam-5); letter-spacing: var(--v3-gc-3); text-transform: uppercase; color: var(--v3-c-nhan);
  background: var(--v3-n-3); border-block-end: var(--v3-vien-1) solid var(--v3-v-2);
}
.v3-bang td, .tc-table td { box-sizing: border-box; padding: var(--v3-k-12) var(--v3-k-16); overflow-wrap: break-word; vertical-align: middle; border-block-end: var(--v3-vien-1) solid var(--v3-v-1); }
.v3-bang tbody tr:last-child > *, .tc-table tbody tr:last-child > * { border-block-end: 0; }
.v3-bang td:empty::before, .tc-table td:empty::before { content: "\2014"; color: var(--v3-c-nhan); }
/* Cột đầu dính; khi đã cuộn (JS đặt data-v3-cuon) hiện bóng mép trái của cột dính */
.v3-bang :is(th, td):first-child, .tc-table :is(th, td):first-child { position: sticky; inset-inline-start: 0; z-index: var(--v3-z-noi); }
.v3-bang tbody :is(th, td):first-child, .tc-table tbody :is(th, td):first-child { font-variant-numeric: lining-nums tabular-nums; background: var(--v3-n-2); color: var(--v3-c-nga); font-weight: var(--v3-dam-5); }
[data-v3-cuon="giua"] :is(th, td):first-child, [data-v3-cuon="cuoi"] :is(th, td):first-child { box-shadow: var(--v3-k-8) 0 var(--v3-k-8) calc(-1 * var(--v3-k-8)) var(--v3-ph-nen); }
.v3-bang tr[aria-selected="true"] > *, .v3-bang tbody tr[aria-selected="true"] > :first-child { background: var(--v3-nen-chon); color: var(--v3-c-vang); }
.v3-bang .v3-so, .tc-table .v3-so { text-align: end; }
.v3-bang .v3-can-giua { text-align: center; }
.v3-bang caption, .tc-caption { caption-side: bottom; padding: var(--v3-k-8) var(--v3-k-4) 0; font-size: var(--v3-cs-13); letter-spacing: var(--v3-gc-1); color: var(--v3-c-nhan); text-align: start; }
.v3-bang-goi-y { display: none; align-items: center; justify-content: center; gap: var(--v3-k-8); margin: var(--v3-k-8) 0 0; font-family: var(--v3-f-ui); font-size: var(--v3-cs-13); line-height: var(--v3-cd-giao-dien); letter-spacing: var(--v3-gc-1); color: var(--v3-c-nhan); }
.v3-bang--4 { --v3-cot-bang: 4; } .v3-bang--5 { --v3-cot-bang: 5; } .v3-bang--6 { --v3-cot-bang: 6; } .v3-bang--7 { --v3-cot-bang: 7; }
.v3-bang--8 { --v3-cot-bang: 8; } .v3-bang--9 { --v3-cot-bang: 9; } .v3-bang--10 { --v3-cot-bang: 10; } .v3-bang--12 { --v3-cot-bang: 12; }
@media (max-width: 767px) {
  .v3-bang { min-inline-size: calc(var(--v3-cot-bang, 0) * 7rem); }
  .tc-table:has(th:nth-child(4)) { min-inline-size: 40rem; }
  .v3-bang-cuon[data-v3-tran]:not([data-v3-da-cuon]) + .v3-bang-goi-y, .tc-table-wrap[data-v3-tran]:not([data-v3-da-cuon]) + .v3-bang-goi-y { display: flex; }
}

/* ═══ 10. TAB, GẤP MỞ ═══ */
.v3-tab-ds { display: flex; gap: var(--v3-k-4); overflow-x: auto; scrollbar-width: none; border-block-end: var(--v3-vien-1) solid var(--v3-v-1); }
.v3-tab {
  position: relative; flex: none; box-sizing: border-box; min-block-size: var(--v3-cao-cham); margin: 0; padding: var(--v3-k-8) var(--v3-k-16);
  font-family: var(--v3-f-ui); font-size: var(--v3-cs-14); font-weight: var(--v3-dam-6); line-height: var(--v3-cd-giao-dien); letter-spacing: var(--v3-gc-2); white-space: nowrap;
  color: var(--v3-c-nga-phu); background: none; border: 0; cursor: pointer; -webkit-appearance: none; appearance: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
/* Vạch chân tab: trượt ra từ giữa bằng transform */
.v3-tab::after { content: ''; position: absolute; inset-inline: var(--v3-k-8); inset-block-end: calc(-1 * var(--v3-vien-1)); block-size: var(--v3-vien-2); background: var(--v3-c-vang); transform: scaleX(0); transition: transform var(--v3-t-200) var(--v3-e-ra); }
.v3-tab[aria-selected="true"] { color: var(--v3-c-vang); }
.v3-tab[aria-selected="true"]::after { transform: scaleX(1); }
.v3-tab:disabled { opacity: var(--v3-mo-4); cursor: not-allowed; }
@media (hover: hover) {
  .v3-tab:is(:hover, .v3-hover):not([aria-selected="true"]) { color: var(--v3-c-nga); }
}
.v3-tab-bang { padding-block-start: var(--v3-nhip-giua); }
.v3-tab-bang:not([hidden]) { animation: v3-vao var(--v3-t-200) var(--v3-e-ra) both; }
/* Gấp mở: không giật trang, thân mở hiện bằng mờ dần */
.v3-gap, .tc-accordion { box-sizing: border-box; min-inline-size: 0; background-color: var(--v3-n-2); background-image: var(--v3-anh-son); border: var(--v3-vien-1) solid var(--v3-v-1); border-radius: var(--v3-bo-8); }
.v3-gap[open], .tc-accordion[open] { border-color: var(--v3-v-2); }
.v3-gap > summary, .tc-accordion-toggle, .tc-faq-q { list-style: none; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.v3-gap > summary::-webkit-details-marker, .tc-accordion-toggle::-webkit-details-marker, .tc-faq-q::-webkit-details-marker { display: none; }
.v3-gap > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--v3-k-12); box-sizing: border-box; min-block-size: var(--v3-cao-cham); padding: var(--v3-k-12) var(--v3-k-16); font-family: var(--v3-f-serif); font-size: var(--v3-cs-20); font-weight: var(--v3-dam-6); line-height: var(--v3-cd-tieu-de); color: var(--v3-c-nga); }
.v3-gap[open] > summary { color: var(--v3-c-vang); }
.v3-gap > summary::after, .tc-accordion-arrow::before, .tc-faq-arrow::before { --v3-bt-hinh: var(--v3-hinh-mui-ten-xuong); inline-size: var(--v3-bt-20); block-size: var(--v3-bt-20); transition: transform var(--v3-t-200) var(--v3-e-deu); }
.v3-gap[open] > summary::after, .tc-accordion[open] > .tc-accordion-toggle .tc-accordion-arrow::before, .tc-faq-item[open] .tc-faq-arrow::before { transform: rotate(180deg); }
.v3-gap__than { padding: 0 var(--v3-k-16) var(--v3-k-16); }
.v3-gap[open] > .v3-gap__than { animation: v3-vao var(--v3-t-200) var(--v3-e-ra) both; }
@media (hover: hover) {
  .v3-gap > summary:hover, .tc-accordion-toggle:hover, .tc-faq-q:hover { color: var(--v3-c-vang); }
}

/* ═══ 11. THÔNG BÁO, HỘP THOẠI, LỚP PHỦ, CHÚ THÍCH NỔI ═══ */
.v3-thong-bao {
  --v3-tb-mau: var(--v3-c-vang); --v3-tb-nen: var(--v3-ph-vang-1); --v3-tb-hinh: var(--v3-hinh-thong-tin);
  display: flex; align-items: flex-start; gap: var(--v3-k-12); box-sizing: border-box; margin: 0; padding: var(--v3-k-12) var(--v3-k-16);
  font-family: var(--v3-f-ui); font-size: var(--v3-cs-14); line-height: var(--v3-cd-giao-dien); color: var(--v3-c-nga-phu);
  background: var(--v3-tb-nen); border: var(--v3-vien-1) solid color-mix(in srgb, var(--v3-tb-mau) calc(var(--v3-mo-4) * 100%), transparent); border-radius: var(--v3-bo-8);
}
.v3-thong-bao::before { --v3-bt-hinh: var(--v3-tb-hinh); inline-size: var(--v3-bt-20); block-size: var(--v3-bt-20); color: var(--v3-tb-mau); margin-block-start: calc((var(--v3-cs-14) * var(--v3-cd-giao-dien) - var(--v3-bt-20)) / 2); }
.v3-thong-bao--ok { --v3-tb-mau: var(--v3-c-dat-ok); --v3-tb-nen: var(--v3-ph-ok); --v3-tb-hinh: var(--v3-hinh-dat); }
.v3-thong-bao--canh-bao { --v3-tb-mau: var(--v3-c-dat); --v3-tb-nen: var(--v3-ph-dat); --v3-tb-hinh: var(--v3-hinh-canh-bao); }
.v3-thong-bao--loi { --v3-tb-mau: var(--v3-c-loi); --v3-tb-nen: var(--v3-ph-loi); --v3-tb-hinh: var(--v3-hinh-loi); }
.v3-thong-bao__tieu { display: block; font-weight: var(--v3-dam-6); color: var(--v3-c-nga); }
/* Hộp thoại dùng thẻ <dialog> gốc: tự giữ focus, đóng bằng Esc, trả focus về nút mở */
.v3-hop-thoai {
  box-sizing: border-box; inline-size: calc(100% - 2 * var(--v3-le)); max-inline-size: calc(var(--v3-r-form) - var(--v3-k-32)); max-block-size: calc(100svh - 2 * var(--v3-k-24)); margin: auto; padding: 0; overflow: auto;
  font-family: var(--v3-f-ui); color: var(--v3-c-nga); background: var(--v3-n-3); border: var(--v3-vien-1) solid var(--v3-v-2); border-radius: var(--v3-bo-8); box-shadow: var(--v3-bong-3);
}
.v3-hop-thoai[open] { animation: v3-vao var(--v3-t-200) var(--v3-e-ra) both; }
/* ::backdrop không thấy biến tuỳ biến ở trình duyệt cũ nên ghi thẳng: 72% = bậc độ mờ .72 */
.v3-hop-thoai::backdrop { background: color-mix(in srgb, black 72%, transparent); }
.v3-hop-thoai__dau { display: flex; align-items: center; justify-content: space-between; gap: var(--v3-k-12); padding: var(--v3-k-16); border-block-end: var(--v3-vien-1) solid var(--v3-v-1); }
.v3-hop-thoai__than { display: grid; gap: var(--v3-nhip-nhom); padding: var(--v3-k-16); }
.v3-hop-thoai__chan { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--v3-k-8); padding: var(--v3-k-12) var(--v3-k-16) var(--v3-k-16); border-block-start: var(--v3-vien-1) solid var(--v3-v-1); }
/* Khoá cuộn trang khi có hộp thoại mở */
html:has(dialog.v3-hop-thoai[open]) { overflow: hidden; }
.v3-lop-phu { position: fixed; inset: 0; z-index: var(--v3-z-hop-thoai); background: var(--v3-ph-nen); }
/* Chú thích nổi: hiện khi rê hoặc focus, không chặn thao tác */
.v3-chu-thich-noi { position: relative; display: inline-flex; }
.v3-chu-thich-noi__nut { display: inline-grid; place-items: center; box-sizing: border-box; inline-size: var(--v3-cao-cham); block-size: var(--v3-cao-cham); margin: 0; padding: 0; color: var(--v3-c-nhan); background: none; border: 0; border-radius: var(--v3-bo-tron); cursor: help; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.v3-chu-thich-noi__nd {
  position: absolute; z-index: var(--v3-z-noi); inset-block-end: calc(100% - var(--v3-k-4)); inset-inline-start: 50%; inline-size: max-content; max-inline-size: min(16rem, 80vw); box-sizing: border-box;
  padding: var(--v3-k-8) var(--v3-k-12); font-family: var(--v3-f-ui); font-size: var(--v3-cs-13); line-height: var(--v3-cd-giao-dien); letter-spacing: var(--v3-gc-1); color: var(--v3-c-nga-phu);
  background: var(--v3-n-3); border: var(--v3-vien-1) solid var(--v3-v-2); border-radius: var(--v3-bo-4); box-shadow: var(--v3-bong-2);
  opacity: 0; pointer-events: none; transform: translate(-50%, var(--v3-k-4)); transition: opacity var(--v3-t-120) var(--v3-e-deu), transform var(--v3-t-120) var(--v3-e-deu);
}
.v3-chu-thich-noi--trai .v3-chu-thich-noi__nd { inset-inline-start: 0; transform: translate(0, var(--v3-k-4)); }
.v3-chu-thich-noi--phai .v3-chu-thich-noi__nd { inset-inline-start: auto; inset-inline-end: 0; transform: translate(0, var(--v3-k-4)); }
.v3-chu-thich-noi:is(:hover, :focus-within, .v3-hover) .v3-chu-thich-noi__nd { opacity: var(--v3-mo-6); transform: translate(-50%, 0); }
.v3-chu-thich-noi--trai:is(:hover, :focus-within, .v3-hover) .v3-chu-thich-noi__nd, .v3-chu-thich-noi--phai:is(:hover, :focus-within, .v3-hover) .v3-chu-thich-noi__nd { transform: translate(0, 0); }

/* ═══ 12. RỖNG, MẤT MẠNG, KHUNG XƯƠNG, ẢNH, KHUNG NHÚNG, ĐƯỜNG KẺ ═══ */
.v3-rong { display: grid; justify-items: center; gap: var(--v3-nhip-nhom); box-sizing: border-box; padding: var(--v3-k-48) var(--v3-k-24); text-align: center; background: var(--v3-n-1); border: var(--v3-vien-1) dashed var(--v3-v-2); border-radius: var(--v3-bo-8); }
.v3-rong__hinh { display: grid; place-items: center; box-sizing: border-box; inline-size: var(--v3-k-48); block-size: var(--v3-k-48); color: var(--v3-c-nhan); border: var(--v3-vien-1) solid var(--v3-v-2); border-radius: var(--v3-bo-tron); }
.v3-rong--mang { border-style: solid; border-color: color-mix(in srgb, var(--v3-c-dat) calc(var(--v3-mo-4) * 100%), transparent); }
.v3-rong--mang .v3-rong__hinh { color: var(--v3-c-dat); border-color: var(--v3-c-dat); }
.v3-xuong { position: relative; overflow: hidden; min-block-size: var(--v3-k-16); background: var(--v3-n-3); border: var(--v3-vien-1) solid var(--v3-v-1); border-radius: var(--v3-bo-4); }
.v3-xuong::after, .v3-dang-tai::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--v3-ph-vang-1), transparent); transform: translateX(-100%); animation: v3-quet var(--v3-t-dinh) var(--v3-e-deu) infinite; }
@keyframes v3-quet { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.v3-xuong--dong { block-size: var(--v3-k-16); }
.v3-xuong--ngan { inline-size: 60%; }
.v3-xuong--hinh { aspect-ratio: 16 / 9; max-inline-size: var(--v3-r-form); }
.v3-xuong--tron { inline-size: var(--v3-k-48); block-size: var(--v3-k-48); border-radius: var(--v3-bo-tron); }
.v3-anh { position: relative; overflow: hidden; background: var(--v3-n-3); border-radius: var(--v3-bo-8); }
.v3-anh__img { display: block; inline-size: 100%; block-size: auto; }
.v3-dang-tai > .v3-anh__img { opacity: 0; }
.v3-anh__loi { display: none; }
.v3-anh-loi > .v3-anh__img { display: none; }
.v3-anh-loi { aspect-ratio: 16 / 9; }
.v3-anh-loi > .v3-anh__loi { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--v3-k-8); font-family: var(--v3-f-ui); font-size: var(--v3-cs-13); letter-spacing: var(--v3-gc-1); color: var(--v3-c-nhan); }
.v3-nhung { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--v3-n-1); border: var(--v3-vien-1) solid var(--v3-v-1); border-radius: var(--v3-bo-8); }
.v3-nhung > iframe, .v3-nhung > video { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; }
/* Đường kẻ có mặt thoi ở giữa */
.v3-ke { position: relative; block-size: var(--v3-vien-1); margin-block: var(--v3-nhip-giua); background: linear-gradient(90deg, transparent, var(--v3-v-2), transparent); }
.v3-ke::after { content: ''; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: var(--v3-k-8); block-size: var(--v3-k-8); background: var(--v3-c-vang); opacity: var(--v3-mo-4); transform: translate(-50%, -50%) rotate(45deg); }

/* ═══ 13. MÀN CHỜ ═══
   Trạng thái do v3.cho đặt vào thuộc tính data-v3-cho: cho, cham (quá 8 giây), loi (lỗi hoặc quá 20 giây). */
.v3-cho { display: grid; justify-items: center; text-align: center; gap: var(--v3-nhip-giua); max-inline-size: var(--v3-r-form); min-inline-size: 0; }
.v3-cho__hinh { display: grid; place-items: center; }
.v3-cho__chu { margin: 0; font-family: var(--v3-f-serif); font-size: var(--v3-cs-20); font-weight: var(--v3-dam-6); line-height: var(--v3-cd-tieu-de); color: var(--v3-c-nga); text-wrap: balance; }
.v3-cho__vach { position: relative; overflow: hidden; inline-size: min(100%, 12rem); block-size: var(--v3-vien-2); background: var(--v3-v-1); border-radius: var(--v3-bo-tron); }
.v3-cho__vach::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--v3-c-vang), transparent); transform: translateX(-100%); animation: v3-quet var(--v3-t-dinh) var(--v3-e-deu) infinite; }
.v3-cho__nhac, .v3-cho__loi { display: none; }
.v3-cho[data-v3-cho="cham"] .v3-cho__nhac { display: block; animation: v3-vao-nhe var(--v3-t-200) var(--v3-e-ra) both; }
.v3-cho[data-v3-cho="loi"] .v3-cho__loi { display: grid; justify-items: center; gap: var(--v3-nhip-nhom); }
.v3-cho[data-v3-cho="loi"] :is(.v3-cho__chu, .v3-cho__vach, .v3-cho__nhac) { display: none; }

/* ═══ 14. MỤC LỤC ═══ */
.v3-muc-luc { display: grid; gap: var(--v3-k-8); padding: var(--v3-k-16); background: var(--v3-n-1); border: var(--v3-vien-1) solid var(--v3-v-1); border-radius: var(--v3-bo-8); }
.v3-muc-luc ol { margin: 0; padding: 0; list-style: none; counter-reset: v3-muc; }
.v3-muc-luc li { counter-increment: v3-muc; }
.v3-muc-luc a { display: flex; align-items: baseline; gap: var(--v3-k-12); min-block-size: var(--v3-cao-cham); box-sizing: border-box; padding-block: var(--v3-k-8); font-family: var(--v3-f-ui); font-size: var(--v3-cs-14); line-height: var(--v3-cd-giao-dien); color: var(--v3-c-nga-phu); text-decoration: none; }
.v3-muc-luc a::before { content: counter(v3-muc, decimal-leading-zero); flex: none; font-weight: var(--v3-dam-5); font-variant-numeric: lining-nums tabular-nums; color: var(--v3-c-vang); }
@media (hover: hover) {
  .v3-muc-luc a:hover { color: var(--v3-c-vang); }
}

/* ═══ 15. NỘI DUNG BÀI: đoạn, tiêu đề, danh sách, trích dẫn, hình, link, chữ Hán ═══
   Bảng trong bài bọc trong .v3-bang-cuon và dùng .v3-bang (mục 9). */
.v3-bai { box-sizing: border-box; max-inline-size: var(--v3-r-chu); min-inline-size: 0; font-family: var(--v3-f-ui); font-size: var(--v3-cs-16); font-weight: var(--v3-dam-4); line-height: var(--v3-cd-doc); color: var(--v3-c-nga-phu); overflow-wrap: break-word; }
.v3-bai > * { margin-block: 0; }
.v3-bai > * + * { margin-block-start: var(--v3-nhip-nhom); }
.v3-bai > :first-child { margin-block-start: 0; }
.v3-bai > :is(h2, h3, h4) { margin-block-start: var(--v3-nhip-giua); }
.v3-bai h2 { font-family: var(--v3-f-serif); font-size: var(--v3-cs-24); font-weight: var(--v3-dam-6); line-height: var(--v3-cd-tieu-de); color: var(--v3-c-vang); text-wrap: balance; }
.v3-bai h3 { font-family: var(--v3-f-serif); font-size: var(--v3-cs-20); font-weight: var(--v3-dam-6); line-height: var(--v3-cd-tieu-de); color: var(--v3-c-nga); text-wrap: balance; }
.v3-bai h4 { font-family: var(--v3-f-serif); font-size: var(--v3-cs-18); font-weight: var(--v3-dam-6); line-height: var(--v3-cd-giao-dien); color: var(--v3-c-nga); }
.v3-bai p { text-wrap: pretty; }
.v3-bai strong { font-weight: var(--v3-dam-6); color: var(--v3-c-nga); }
/* Danh sách: mặt thoi vàng thay chấm, số đếm vàng */
.v3-bai ul, .v3-bai ol, .tc-use-list, .tc-diff-list, .tc-steps { margin: 0; padding: 0; list-style: none; }
.v3-bai li { position: relative; padding-inline-start: var(--v3-k-24); }
.v3-bai li + li { margin-block-start: var(--v3-k-8); }
.v3-bai ul > li::before { content: ''; position: absolute; inset-inline-start: var(--v3-k-4); inset-block-start: calc((var(--v3-cs-16) * var(--v3-cd-doc) - var(--v3-k-8)) / 2); inline-size: var(--v3-k-8); block-size: var(--v3-k-8); background: var(--v3-c-vang); transform: rotate(45deg) scale(.7); }
.v3-bai ol { counter-reset: v3-so; }
.v3-bai ol > li { counter-increment: v3-so; }
.v3-bai ol > li::before { content: counter(v3-so) "."; position: absolute; inset-inline-start: 0; font-weight: var(--v3-dam-5); font-variant-numeric: lining-nums tabular-nums; color: var(--v3-c-vang); }
.v3-bai blockquote { margin-inline: 0; padding: var(--v3-k-12) var(--v3-k-16); color: var(--v3-c-nga); background: var(--v3-ph-vang-1); border-inline-start: var(--v3-vien-2) solid var(--v3-c-vang); border-radius: var(--v3-bo-4); }
.v3-bai blockquote > * { margin: 0; }
.v3-bai figure { margin-inline: 0; display: grid; gap: var(--v3-k-8); }
.v3-bai img { display: block; max-inline-size: 100%; block-size: auto; border-radius: var(--v3-bo-8); }
.v3-bai figcaption { font-size: var(--v3-cs-13); line-height: var(--v3-cd-giao-dien); letter-spacing: var(--v3-gc-1); color: var(--v3-c-nhan); }
.v3-bai hr { block-size: var(--v3-vien-1); margin-block: var(--v3-nhip-giua); border: 0; background: var(--v3-v-2); }
.v3-dai { overflow-wrap: anywhere; }
/* Link trong đoạn: gạch chân mảnh vàng, rê thì đậm lên */
.v3-bai a, .v3-chu-doc a, .v3-chu-phu a, .tc-section a, .sm-disclaimer a { color: var(--v3-c-vang); text-decoration: underline; text-decoration-thickness: var(--v3-vien-1); text-decoration-color: var(--v3-ph-vang-3); text-underline-offset: .2em; }
.tc-demo-link { text-decoration-style: dashed; }
@media (hover: hover) {
  .v3-bai a:hover, .v3-chu-doc a:hover, .v3-chu-phu a:hover, .tc-section a:hover, .sm-disclaimer a:hover { color: var(--v3-c-nga); text-decoration-color: currentColor; }
}

/* ═══ 16. KHỐI DƯỚI CÔNG CỤ: tc-* (components/tool-content-section.php) ═══
   Giữ nguyên HTML. Lưu ý: file PHP có thẻ <style> nội tuyến ép padding 16px 20px của summary và ẩn tiêu đề con,
   nên thân mở dùng cùng lề 16+4 để thẳng mép. */
.tc-section { box-sizing: border-box; display: grid; gap: var(--v3-nhip-nhom); inline-size: 100%; min-inline-size: 0; max-inline-size: calc(var(--v3-r-chu) + 2 * var(--v3-le)); margin: var(--v3-nhip-phan) auto 0; padding-inline: var(--v3-le); }
.tc-accordion-toggle { align-items: center; justify-content: space-between; gap: var(--v3-k-12); box-sizing: border-box; min-block-size: var(--v3-cao-cham); }
.tc-accordion-label { flex: 1 1 auto; min-inline-size: 0; font-family: var(--v3-f-serif); font-size: var(--v3-cs-20); font-weight: var(--v3-dam-6); line-height: var(--v3-cd-tieu-de); color: var(--v3-c-nga); text-wrap: balance; }
.tc-accordion[open] .tc-accordion-label { color: var(--v3-c-vang); }
.tc-accordion-arrow, .tc-faq-arrow { display: grid; place-items: center; flex: none; font-size: 0; line-height: 0; color: var(--v3-c-vang); }
.tc-accordion-body { display: grid; gap: var(--v3-nhip-giua); padding: 0 calc(var(--v3-k-16) + var(--v3-k-4)) calc(var(--v3-k-16) + var(--v3-k-4)); }
.tc-accordion[open] > .tc-accordion-body { animation: v3-vao var(--v3-t-200) var(--v3-e-ra) both; }
.tc-block { display: grid; gap: var(--v3-nhip-nhom); min-inline-size: 0; }
.tc-lead-inject { font-family: var(--v3-f-ui); font-size: var(--v3-cs-16); font-weight: var(--v3-dam-4); line-height: var(--v3-cd-doc); letter-spacing: var(--v3-gc-0); color: var(--v3-c-nga-phu); }
.tc-prose { margin: 0; font-family: var(--v3-f-ui); font-size: var(--v3-cs-16); font-weight: var(--v3-dam-4); line-height: var(--v3-cd-doc); color: var(--v3-c-nga-phu); overflow-wrap: break-word; text-wrap: pretty; }
.tc-section-title { margin: 0; font-family: var(--v3-f-serif); font-size: var(--v3-cs-24); font-weight: var(--v3-dam-6); line-height: var(--v3-cd-tieu-de); color: var(--v3-c-vang); text-wrap: balance; }
.tc-subtitle { margin: var(--v3-nhip-nhom) 0 0; font-family: var(--v3-f-serif); font-size: var(--v3-cs-20); font-weight: var(--v3-dam-6); line-height: var(--v3-cd-tieu-de); color: var(--v3-c-nga); text-wrap: balance; }
.tc-highlight-box { display: flex; align-items: flex-start; gap: var(--v3-k-12); padding: var(--v3-k-16); background: var(--v3-ph-vang-1); border: var(--v3-vien-1) solid var(--v3-v-2); border-radius: var(--v3-bo-8); }
.tc-highlight-box > .tc-prose { flex: 1 1 auto; min-inline-size: 0; }
.tc-highlight-icon, .tc-diff-icon, .tc-use-icon { flex: none; color: var(--v3-c-vang); }
.tc-highlight-icon { inline-size: var(--v3-bt-20); block-size: var(--v3-bt-20); margin-block-start: calc((var(--v3-cs-16) * var(--v3-cd-doc) - var(--v3-bt-20)) / 2); }
.tc-diff-icon, .tc-use-icon { inline-size: var(--v3-bt-16); block-size: var(--v3-bt-16); margin-block-start: calc((var(--v3-cs-16) * var(--v3-cd-doc) - var(--v3-bt-16)) / 2); }
.tc-figure { display: grid; gap: var(--v3-k-8); margin: 0; min-inline-size: 0; }
.tc-td--name { color: var(--v3-c-nga); font-weight: var(--v3-dam-5); }
.tc-td--note { inline-size: 40%; }
.tc-diagram { box-sizing: border-box; padding: var(--v3-k-16); overflow-x: auto; background: var(--v3-n-1); border: var(--v3-vien-1) solid var(--v3-v-1); border-radius: var(--v3-bo-8); }
.tc-diagram svg { display: block; max-inline-size: 100%; block-size: auto; margin-inline: auto; }
.tc-steps { counter-reset: tc-buoc; }
.tc-step { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--v3-k-12); padding-block: var(--v3-k-12); border-block-end: var(--v3-vien-1) solid var(--v3-v-1); }
.tc-step:last-child { border-block-end: 0; }
.tc-step-num { display: grid; place-items: center; box-sizing: border-box; inline-size: var(--v3-k-32); block-size: var(--v3-k-32); font-family: var(--v3-f-serif); font-size: var(--v3-cs-18); font-weight: var(--v3-dam-6); font-variant-numeric: lining-nums; line-height: 1; color: var(--v3-c-vang); border: var(--v3-vien-1) solid var(--v3-c-vang); border-radius: var(--v3-bo-4); }
.tc-step-text { min-inline-size: 0; font-family: var(--v3-f-ui); font-size: var(--v3-cs-16); line-height: var(--v3-cd-doc); color: var(--v3-c-nga-phu); overflow-wrap: break-word; }
.tc-step-text > strong { display: block; font-weight: var(--v3-dam-6); color: var(--v3-c-nga); }
.tc-example-box { display: grid; gap: var(--v3-k-8); padding: var(--v3-k-16); background: var(--v3-n-1); border-inline-start: var(--v3-vien-2) solid var(--v3-c-vang); border-radius: var(--v3-bo-4); }
.tc-example-title { margin: 0; font-family: var(--v3-f-serif); font-size: var(--v3-cs-18); font-weight: var(--v3-dam-6); line-height: var(--v3-cd-giao-dien); color: var(--v3-c-vang); }
.tc-example-body { font-family: var(--v3-f-ui); font-size: var(--v3-cs-16); line-height: var(--v3-cd-doc); color: var(--v3-c-nga-phu); overflow-wrap: break-word; }
.tc-diff-list, .tc-use-list { display: grid; gap: var(--v3-k-12); }
.tc-diff-item, .tc-use-item { display: flex; align-items: flex-start; gap: var(--v3-k-12); font-family: var(--v3-f-ui); font-size: var(--v3-cs-16); line-height: var(--v3-cd-doc); color: var(--v3-c-nga-phu); overflow-wrap: break-word; }
.tc-diff-item > span, .tc-use-item > span { min-inline-size: 0; }
.tc-faq-list { display: grid; }
.tc-faq-item { border-block-end: var(--v3-vien-1) solid var(--v3-v-1); }
.tc-faq-item:last-child { border-block-end: 0; }
.tc-faq-q { display: flex; align-items: center; justify-content: space-between; gap: var(--v3-k-12); box-sizing: border-box; min-block-size: var(--v3-cao-cham); padding-block: var(--v3-k-12); }
.tc-faq-q-text { min-inline-size: 0; font-family: var(--v3-f-serif); font-size: var(--v3-cs-18); font-weight: var(--v3-dam-6); line-height: var(--v3-cd-giao-dien); color: var(--v3-c-nga); text-wrap: balance; }
.tc-faq-item[open] .tc-faq-q-text { color: var(--v3-c-vang); }
.tc-faq-a { padding-block-end: var(--v3-k-16); }
.tc-faq-a > p { margin: 0; font-family: var(--v3-f-ui); font-size: var(--v3-cs-16); line-height: var(--v3-cd-doc); color: var(--v3-c-nga-phu); overflow-wrap: break-word; text-wrap: pretty; }
.tc-faq-item[open] > .tc-faq-a { animation: v3-vao var(--v3-t-200) var(--v3-e-ra) both; }
.v3-bang tbody th, .tc-table tbody th { background: transparent; border-block-end-color: var(--v3-v-1); }
.tc-transparency .tc-table th { inline-size: 35%; }
.tc-cta-wrap { display: flex; justify-content: center; margin-block-start: var(--v3-nhip-nhom); }
.tc-cta-icon { inline-size: var(--v3-bt-20); block-size: var(--v3-bt-20); }

/* ═══ 17. BỘ CÔNG CỤ CÙNG NHÓM: smh-* (components/tool-grid.php) ═══ */
.smh-section { box-sizing: border-box; padding: var(--v3-nhip-phan) var(--v3-le); border-block-start: var(--v3-vien-1) solid var(--v3-v-1); }
.smh-section--standalone { border-block-start: 0; padding-block-start: var(--v3-k-24); }
.smh-inner { display: grid; gap: var(--v3-nhip-giua); max-inline-size: var(--v3-r-tool); margin-inline: auto; }
.smh-head, .smh-hero { display: grid; justify-items: center; gap: var(--v3-nhip-nhom); text-align: center; }
.smh-meander { inline-size: min(100%, 20rem); line-height: 0; opacity: var(--v3-mo-4); }
.smh-meander svg { display: block; }
.smh-head__title { display: flex; align-items: center; justify-content: center; gap: var(--v3-k-8); margin: 0; font-family: var(--v3-f-serif); font-size: var(--v3-cs-24); font-weight: var(--v3-dam-6); line-height: var(--v3-cd-tieu-de); color: var(--v3-c-vang); text-wrap: balance; }
.smh-head__title > svg { stroke: var(--v3-c-vang); }
.smh-head__sub, .smh-hero__sub { margin: 0; font-family: var(--v3-f-ui); font-size: var(--v3-cs-14); line-height: var(--v3-cd-giao-dien); color: var(--v3-c-nga-phu); }
.smh-hero__title { display: grid; justify-items: center; gap: var(--v3-k-8); margin: 0; }
.smh-hero__name { font-family: var(--v3-f-serif); font-size: var(--v3-cs-tieu-de); font-weight: var(--v3-dam-6); line-height: var(--v3-cd-tieu-de); letter-spacing: var(--v3-gc-1); color: var(--v3-c-vang-nga); text-wrap: balance; }
.smh-hero__han { font-family: var(--v3-f-han); font-size: var(--v3-cs-20); font-weight: var(--v3-dam-5); line-height: var(--v3-cd-giao-dien); color: var(--v3-c-nga-phu); }
.smh-hero__stats { margin: 0; font-family: var(--v3-f-ui); font-size: var(--v3-cs-13); line-height: var(--v3-cd-giao-dien); letter-spacing: var(--v3-gc-1); color: var(--v3-c-nhan); }
.smh-card {
  --smh-accent: var(--v3-c-vang);
  position: relative; isolation: isolate; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: var(--v3-k-8); overflow: hidden; padding: var(--v3-k-24) var(--v3-k-16);
  text-align: center; text-decoration: none; color: var(--v3-c-nga); background-color: var(--v3-n-2); background-image: var(--v3-anh-son);
  border: var(--v3-vien-1) solid var(--v3-v-1); border-radius: var(--v3-bo-8); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: transform var(--v3-t-120) var(--v3-e-deu);
}
.smh-card::after { content: ''; position: absolute; inset: calc(-1 * var(--v3-vien-1)); z-index: -1; border-radius: inherit; box-shadow: inset 0 0 0 var(--v3-vien-1) var(--smh-accent); opacity: 0; transition: opacity var(--v3-t-120) var(--v3-e-deu); }
.smh-card--current { border-color: var(--v3-c-vang); }
.smh-card--soon { opacity: var(--v3-mo-4); pointer-events: none; }
.smh-card:active { transform: scale(.99); }
.smh-card__frame { position: absolute; inset: var(--v3-k-8); z-index: -1; border: var(--v3-vien-1) solid var(--v3-v-1); border-radius: var(--v3-bo-4); pointer-events: none; }
.smh-card__bracket { position: absolute; inline-size: var(--v3-k-16); block-size: var(--v3-k-16); border: 0 solid var(--smh-accent); opacity: var(--v3-mo-5); }
.smh-card__bracket--bl { inset-block-end: calc(-1 * var(--v3-vien-1)); inset-inline-start: calc(-1 * var(--v3-vien-1)); border-block-end-width: var(--v3-vien-2); border-inline-start-width: var(--v3-vien-2); }
.smh-card__bracket--br { inset-block-end: calc(-1 * var(--v3-vien-1)); inset-inline-end: calc(-1 * var(--v3-vien-1)); border-block-end-width: var(--v3-vien-2); border-inline-end-width: var(--v3-vien-2); }
.smh-card__watermark { position: absolute; z-index: -1; inset-block-start: var(--v3-k-8); inset-inline-end: var(--v3-k-8); inline-size: var(--v3-k-64); block-size: var(--v3-k-64); color: var(--smh-accent); opacity: var(--v3-mo-1); pointer-events: none; }
.smh-card__watermark svg, .smh-card__icon svg { display: block; inline-size: 100%; block-size: 100%; }
.smh-card__ring { display: grid; place-items: center; box-sizing: border-box; inline-size: var(--v3-k-48); block-size: var(--v3-k-48); color: var(--smh-accent); border: var(--v3-vien-1) solid var(--smh-accent); border-radius: var(--v3-bo-tron); }
.smh-card__icon { inline-size: var(--v3-bt-24); block-size: var(--v3-bt-24); }
.smh-card__badge { padding: var(--v3-k-4) var(--v3-k-8); font-family: var(--v3-f-ui); font-size: var(--v3-cs-12); font-weight: var(--v3-dam-5); line-height: var(--v3-cd-giao-dien); letter-spacing: var(--v3-gc-3); text-transform: uppercase; color: var(--v3-c-nhan); border: var(--v3-vien-1) solid var(--v3-v-2); border-radius: var(--v3-bo-tron); }
.smh-card__badge--live { color: var(--v3-c-dat-ok); }
.smh-card__badge--current { color: var(--v3-c-vang); background: var(--v3-ph-vang-2); border-color: var(--v3-c-vang); }
.smh-card__name { font-family: var(--v3-f-serif); font-size: var(--v3-cs-18); font-weight: var(--v3-dam-6); line-height: var(--v3-cd-giao-dien); font-variant-numeric: lining-nums; color: var(--v3-c-nga); text-wrap: balance; }
.smh-card__desc { font-family: var(--v3-f-ui); font-size: var(--v3-cs-14); line-height: var(--v3-cd-giao-dien); color: var(--v3-c-nga-phu); overflow-wrap: break-word; }
.smh-card__cta { display: inline-flex; align-items: center; gap: var(--v3-k-8); margin-block-start: auto; padding-block-start: var(--v3-k-8); font-family: var(--v3-f-ui); font-size: var(--v3-cs-14); font-weight: var(--v3-dam-6); line-height: var(--v3-cd-giao-dien); letter-spacing: var(--v3-gc-2); color: var(--v3-c-vang); }
.smh-card__arrow { display: inline-block; transition: transform var(--v3-t-120) var(--v3-e-deu); }
@media (hover: hover) {
  .smh-card:hover { transform: translateY(calc(-1 * var(--v3-k-4) / 2)); }
  .smh-card:hover::after { opacity: var(--v3-mo-6); }
  .smh-card:hover .smh-card__arrow { transform: translateX(var(--v3-k-4)); }
}

/* ═══ 18. CHIA SẺ: sm-tool-share (tool-grid.php) ═══ */
.sm-tool-share { box-sizing: border-box; padding: var(--v3-nhip-phan) var(--v3-le) 0; }
.sm-tool-share__inner { display: grid; justify-items: center; gap: var(--v3-nhip-nhom); max-inline-size: var(--v3-r-chu); margin-inline: auto; text-align: center; }
.sm-tool-share__lead { margin: 0; font-family: var(--v3-f-ui); font-size: var(--v3-cs-14); line-height: var(--v3-cd-giao-dien); color: var(--v3-c-nga-phu); }
.sm-share { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--v3-k-8); }
.sm-share__label { font-family: var(--v3-f-ui); font-size: var(--v3-cs-12); font-weight: var(--v3-dam-5); line-height: var(--v3-cd-giao-dien); letter-spacing: var(--v3-gc-3); text-transform: uppercase; color: var(--v3-c-nhan); }

/* ═══ 19. ĐỌC THÊM: sm-tool-reading và thẻ bài sm-post-card ═══ */
.sm-tool-reading { box-sizing: border-box; padding: var(--v3-nhip-phan) var(--v3-le); border-block-start: var(--v3-vien-1) solid var(--v3-v-1); }
.sm-tool-reading .sm-container { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--v3-nhip-giua); max-inline-size: var(--v3-r-tool); margin-inline: auto; }
.sm-related__title { margin: 0; font-family: var(--v3-f-serif); font-size: var(--v3-cs-24); font-weight: var(--v3-dam-6); line-height: var(--v3-cd-tieu-de); color: var(--v3-c-vang); text-wrap: balance; }
.sm-post-card { position: relative; box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden; background-color: var(--v3-n-2); background-image: var(--v3-anh-son); border: var(--v3-vien-1) solid var(--v3-v-1); border-radius: var(--v3-bo-8); }
.sm-post-card__frame, .sm-post-card__astrolabe { display: none; }
.sm-post-card__thumb { display: block; overflow: hidden; aspect-ratio: 16 / 9; background: var(--v3-n-3); }
.sm-post-card__thumb img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.sm-post-card__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--v3-k-12); padding: var(--v3-k-16); }
.sm-badge--category { align-self: flex-start; padding: var(--v3-k-4) var(--v3-k-8); font-family: var(--v3-f-ui); font-size: var(--v3-cs-12); font-weight: var(--v3-dam-5); line-height: var(--v3-cd-giao-dien); letter-spacing: var(--v3-gc-3); text-transform: uppercase; text-decoration: none; color: var(--v3-c-vang); border: var(--v3-vien-1) solid var(--v3-v-2); border-radius: var(--v3-bo-4); }
.sm-post-card__title { margin: 0; font-family: var(--v3-f-serif); font-size: var(--v3-cs-20); font-weight: var(--v3-dam-6); line-height: var(--v3-cd-tieu-de); font-variant-numeric: lining-nums; text-wrap: balance; }
.sm-post-card__title a { color: var(--v3-c-nga); text-decoration: none; }
.sm-post-card__excerpt { margin: 0; font-family: var(--v3-f-ui); font-size: var(--v3-cs-14); line-height: var(--v3-cd-giao-dien); color: var(--v3-c-nga-phu); overflow-wrap: break-word; }
.sm-post-card__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--v3-k-12); margin-block-start: auto; padding-block-start: var(--v3-k-12); border-block-start: var(--v3-vien-1) solid var(--v3-v-1); }
.sm-post-card__meta { display: inline-flex; align-items: center; gap: var(--v3-k-8); font-family: var(--v3-f-ui); font-size: var(--v3-cs-13); line-height: var(--v3-cd-giao-dien); letter-spacing: var(--v3-gc-1); color: var(--v3-c-nhan); }
.sm-post-card__meta-icon { inline-size: var(--v3-bt-16); block-size: var(--v3-bt-16); stroke: currentColor; }
.sm-post-card__read { display: inline-flex; align-items: center; gap: var(--v3-k-8); min-block-size: var(--v3-cao-cham); font-family: var(--v3-f-ui); font-size: var(--v3-cs-14); font-weight: var(--v3-dam-6); line-height: var(--v3-cd-giao-dien); letter-spacing: var(--v3-gc-2); color: var(--v3-c-vang); text-decoration: none; }
.sm-post-card__read svg { inline-size: var(--v3-bt-16); block-size: var(--v3-bt-16); }
@media (hover: hover) {
  .sm-post-card__title a:hover, .sm-post-card__read:hover { color: var(--v3-c-nga); }
}
.sm-disclaimer { box-sizing: border-box; max-inline-size: var(--v3-r-chu); margin: var(--v3-nhip-giua) auto 0; padding: var(--v3-k-16) var(--v3-le) 0; border-block-start: var(--v3-vien-1) solid var(--v3-v-1); }
.sm-disclaimer p { margin: 0; font-family: var(--v3-f-ui); font-size: var(--v3-cs-13); line-height: var(--v3-cd-giao-dien); letter-spacing: var(--v3-gc-1); color: var(--v3-c-nhan); }
.sm-disclaimer svg { inline-size: var(--v3-bt-16); block-size: var(--v3-bt-16); vertical-align: -.2em; stroke: var(--v3-c-dat); }

/* ═══ 20. CHẾ ĐỘ CHỮ TO A+ ═══
   Toàn bộ cỡ dùng rem nên tự lớn theo html font-size 100–140%. Ở đây chỉ bảo đảm không vỡ khi chữ to:
   hàng ô tự xuống dòng (auto-fit), tab cuộn ngang, bảng cuộn trong khung riêng, chữ dài tự ngắt. */
/* .v3-trang chừa đáy 64+48 px cho cụm nút nổi; .v3-hang dùng auto-fit nên tự xuống dòng khi chữ to */

/* ═══ 21. CHUYỂN ĐỘNG GIẢM: máy khách đã bật prefers-reduced-motion thì tắt hoạt cảnh, kết quả hiện ngay ═══ */
@media (prefers-reduced-motion: reduce) {
  .sm-v3 *, .sm-v3 *::before, .sm-v3 *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .v3-cho__vach::after { transform: none; }
}

/* ═══ 22. BẢN IN: nền sáng, chữ đen, bỏ nút và khối điều hướng, bảng không cắt ngang hàng ═══ */
@media print {
  .sm-v3 { background: white !important; color: black !important; }
  .sm-v3 * { color: black !important; background: transparent !important; box-shadow: none !important; text-shadow: none !important; }
  .sm-footer, .v3-nut, .tc-cta-btn, .sm-tool-share, .smh-section, .sm-tool-reading, .v3-man-cho, .v3-hop-thoai, .v3-bang-goi-y, .v3-muc-luc, .v3-khong-in { display: none !important; }
  .v3-the, .tc-accordion, .v3-bang-cuon, .tc-table-wrap, .v3-gap { border-color: gray !important; }
  .v3-bang-cuon, .tc-table-wrap { overflow: visible !important; }
  .v3-bang tr, .tc-table tr, .v3-the, .tc-step { break-inside: avoid; }
}