/* trang-chu.css — giao diện thân trang chủ (bản thiết kế v3 đã duyệt 24/08/2026).
   PORT NGUYÊN VĂN từ sandbox/trang-chu-v3/trang-chu-v3.src.html. Mọi selector bọc dưới class
   .tc — gắn trên CẢ HAI vùng thân trang: <div id="tc-lien-he" class="tc"> (thanh liên hệ, nằm
   TRÊN header dùng chung) và <main id="tc" class="tc"> — để không giẫm class trùng tên của
   Tailwind build (.nut, .o-nhap...) và không rò kiểu ra header/footer dùng chung.
   Đã bỏ kiểu chỉ-cho-bản-nháp (.ghi/.mau/.anh-mau); thanh .nhap đổi tên .tc-xemthu (thanh
   BẢN NHÁP của chế độ xem thử, page.js chèn vào #tc-lien-he).
   Font Plus Jakarta Sans + Lora tự host sẵn ở assets/vendor/fonts/ — KHÔNG link Google Fonts.
   Sửa giao diện trang chủ: sửa Ở ĐÂY + bộ dựng assets/js/trang-chu-render.js, rồi chạy
   node scripts/sinh-trang-tinh.js. Đừng sửa sandbox nữa — bản nháp đã xong vai. */

.tc{
    --navy-900:#0D1F33; --navy-800:#122840; --navy-700:#16324F; --navy-500:#2C4A6E;
    --navy-300:#8FA4BB; --navy-100:#DCE4EC; --navy-50:#EEF2F6;
    --gold-700:#8A5F19; --gold-600:#A6741F; --gold-500:#C08A2E; --gold-400:#D1A544;
    --gold-300:#E3B95C; --gold-100:#F5E4BB; --gold-50:#FBF3E2;
    --trang:#FFFFFF; --nen-am:#FBF8F2; --nen-lanh:#F4F7FC; --vien:#E8E6E1;
    --chu:#3F4A56; --chu-nhat:#6B7684;
    --xanh:#1D9A6C; --xanh-nen:#E9F7F1;
    --maxw:1180px;
    --r-the:16px; --r-lon:26px; --r-vien-thuoc:999px;
    --bong:0 2px 4px rgba(13,31,51,.04), 0 12px 28px rgba(13,31,51,.07);
    --bong-cao:0 8px 16px rgba(13,31,51,.07), 0 24px 48px rgba(13,31,51,.13);
    --ease:cubic-bezier(.22,.61,.36,1);
}
.tc *, .tc *::before, .tc *::after{box-sizing:border-box}
html{scroll-behavior:smooth}
.tc{
    margin:0;background:var(--trang);color:var(--chu);
    font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
    font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
.tc img{max-width:100%;display:block}
.tc [hidden]{display:none!important}
.tc a{color:inherit;text-decoration:none}
.tc h1, .tc h2, .tc h3, .tc h4, .tc p, .tc ul, .tc ol{margin:0}
.tc p{text-wrap:pretty}
.tc :focus-visible{outline:3px solid var(--navy-500);outline-offset:2px;border-radius:4px}
.tc .num{font-variant-numeric:tabular-nums}
.tc .wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.tc .band{padding:84px 0}
.tc .band--am{background:var(--nen-am)}
.tc .band--lanh{background:var(--nen-lanh)}
.tc .band--toi{background:var(--navy-900);color:var(--navy-100)}
.tc h1{
    font-size:clamp(34px,4.9vw,56px);line-height:1.08;font-weight:800;
    letter-spacing:-.028em;color:var(--navy-900);text-wrap:balance;
}
.tc h2{
    font-size:clamp(26px,3.3vw,40px);line-height:1.14;font-weight:800;
    letter-spacing:-.024em;color:var(--navy-900);text-wrap:balance;
}
.tc .band--toi h2{color:#fff}
.tc h3{font-size:20px;line-height:1.3;font-weight:700;color:var(--navy-900);letter-spacing:-.012em}
.tc .mo-dau{max-width:60ch;margin-top:16px;font-size:17px;color:var(--chu-nhat)}
.tc .band--toi .mo-dau{color:var(--navy-300)}
.tc .nhan-muc{
    display:inline-block;font-size:12.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
    color:var(--gold-600);margin-bottom:14px;
}
.tc .band--toi .nhan-muc{color:var(--gold-300)}
.tc .giua{text-align:center}
.tc .giua .mo-dau{margin-left:auto;margin-right:auto}
.tc .nut{
    display:inline-flex;align-items:center;justify-content:center;gap:9px;border:2px solid transparent;
    font:800 16px/1 "Plus Jakarta Sans",sans-serif;padding:16px 30px;border-radius:var(--r-vien-thuoc);
    cursor:pointer;transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s,border-color .18s,color .18s;
}
.tc .nut--chinh{background:var(--gold-500);color:#fff;box-shadow:0 6px 18px rgba(192,138,46,.32)}
/* đợt 1 mục 1.3: phần ĐỔI MÀU và ĐỔI BÓNG ở lại ngoài khối @media bên dưới, vì máy cảm ứng vẫn
   cần một phản hồi khi ngón tay chạm vào nút. Chỉ phần transform mới phải chắn lại. */
.tc .nut--chinh:hover{background:var(--gold-600);box-shadow:0 10px 26px rgba(192,138,46,.42)}
.tc .nut--phu{background:var(--trang);color:var(--navy-900);border-color:var(--vien)}
.tc .nut--phu:hover{border-color:var(--navy-500)}
.tc .nut--toi{background:var(--navy-900);color:#fff}
.tc .nut--toi:hover{background:var(--navy-700)}
/* đợt 1 mục 1.3: nhấc nút CHỈ dành cho máy có chuột thật. Trên điện thoại trạng thái :hover dính
   lại sau cú chạm, nên nút bị nâng lên 2px rồi treo ở đó cho tới khi người dùng chạm chỗ khác.
   Biên độ nút giữ đúng 2px (nhấc THẺ mới là 3px), đây là hai con số cứng của cả hệ. */
@media (hover: hover) and (pointer: fine){
.tc .nut--chinh:hover{transform:translateY(-2px)}
.tc .nut--phu:hover{transform:translateY(-2px)}
.tc .nut--toi:hover{transform:translateY(-2px)}
}
.tc .nut--ma{background:transparent;color:#fff;border-color:rgba(255,255,255,.34)}
.tc .nut--ma:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.tc .nut--nho{padding:11px 20px;font-size:14px}
.tc .nut svg{width:17px;height:17px;flex:none;transition:transform .18s var(--ease)}
/* Đợt 1 mục 1.3 (bổ sung sau lượt thẩm tra): ba luật hover có transform dưới đây bị bỏ sót ở
   lượt bọc đầu vì bản kế hoạch chỉ liệt kê bảy dòng hover của THẺ và NÚT, không tính ba dòng đẩy
   icon này. Trên máy cảm ứng chúng dính lại y hệt: chạm một cái là mũi tên trượt sang phải rồi
   nằm im ở đó cho tới khi chạm chỗ khác. */
@media (hover: hover) and (pointer: fine){
.tc .nut:hover svg.ten{transform:translateX(4px)}
}
.tc .tc-xemthu{position:sticky;top:0;z-index:70;background:var(--navy-900);color:#fff}
.tc .tc-xemthu .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding-block:9px}
.tc .tc-xemthu .the{
    font:800 11px/1 "Plus Jakarta Sans",sans-serif;letter-spacing:.1em;text-transform:uppercase;
    color:var(--navy-900);background:var(--gold-400);padding:5px 9px;border-radius:var(--r-vien-thuoc);
}
.tc .tc-xemthu .noi{font-size:12.5px;color:var(--navy-300);margin-right:auto}
.tc .tc-xemthu .noi i{font-style:normal;text-decoration:underline;text-decoration-style:dashed;text-decoration-color:var(--gold-400);text-underline-offset:4px}
.tc .tc-xemthu button{
    background:transparent;border:1px solid rgba(255,255,255,.28);color:#fff;cursor:pointer;
    font:700 12px/1 "Plus Jakarta Sans",sans-serif;padding:8px 14px;border-radius:var(--r-vien-thuoc);
}
.tc .tc-xemthu button[aria-pressed="true"]{background:var(--gold-400);color:var(--navy-900);border-color:var(--gold-400)}
/* Sáu luật .tc .lien-he ĐÃ CHUYỂN sang assets/css/theme.css (25/08/2026). Lý do: dải liên hệ nay
   chạy trên mọi trang, mà theme.css là file duy nhất mọi trang đều nạp — để ở đây thì 20+ trang
   kia phải nạp thêm cả file này, kéo theo dòng html{scroll-behavior:smooth} bên dưới và bịt mất
   lựa chọn prefers-reduced-motion của practice.html. Trang chủ vẫn hiện đúng vì cũng nạp theme.css,
   và biến --navy-900/--navy-300/--gold-300 vẫn lấy từ khối .tc{} phía trên file này. */
.tc .header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--vien)}
.tc .header .wrap{display:flex;align-items:center;justify-content:space-between;height:74px;gap:20px}
.tc .hieu{display:flex;align-items:center;gap:11px}
.tc .hieu span.o{
    width:40px;height:40px;background:var(--navy-900);color:#fff;border-radius:11px;
    display:flex;align-items:center;justify-content:center;font-weight:800;font-size:19px;
}
.tc .hieu .ten{display:block;font-weight:800;font-size:20px;color:var(--navy-900);letter-spacing:-.03em;line-height:1}
.tc .hieu .phu{display:block;font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--chu-nhat);margin-top:3px}
.tc nav.chinh{display:flex;align-items:center;gap:26px;font-size:15px;font-weight:600;color:var(--chu)}
.tc nav.chinh a:hover{color:var(--navy-900)}
.tc nav.chinh a.dang{color:var(--navy-900);font-weight:700}
.tc .header .phai{display:flex;align-items:center;gap:12px}
.tc .header .phai .dn{font-size:15px;font-weight:700;color:var(--navy-900)}
@media(max-width:1100px){
.tc nav.chinh{display:none}
}
@media(max-width:560px){
.tc .header .phai .dn{display:none}
}
.tc .hero{position:relative;overflow:hidden;padding:74px 0 80px}
.tc .hero::before{
    content:'';position:absolute;inset:0;pointer-events:none;
    background:
        radial-gradient(58% 60% at 78% 8%,rgba(192,138,46,.16),transparent 62%),
        radial-gradient(52% 55% at 6% 88%,rgba(44,74,110,.13),transparent 64%);
}
.tc .hero .wrap{position:relative;z-index:1}
.tc .hero-luoi{display:grid;grid-template-columns:1.02fr .98fr;gap:60px;align-items:center}
@media(max-width:980px){
.tc .hero-luoi{grid-template-columns:1fr;gap:52px}
}
.tc .sao-hang{
    display:inline-flex;align-items:center;gap:10px;background:var(--trang);border:1px solid var(--vien);
    padding:8px 16px 8px 12px;border-radius:var(--r-vien-thuoc);box-shadow:var(--bong);margin-bottom:24px;
    font-size:13.5px;font-weight:600;color:var(--navy-900);
}
.tc .sao{display:inline-flex;gap:2px;color:var(--gold-500)}
.tc .sao svg{width:15px;height:15px}
.tc .hero h1 em{font-style:normal;color:var(--gold-600);position:relative;white-space:nowrap}
.tc .hero h1 em::after{
    content:'';position:absolute;left:0;right:0;bottom:.02em;height:.16em;border-radius:3px;
    background:var(--gold-300);opacity:.42;
}
.tc .hero-dan{margin-top:22px;font-size:18.5px;line-height:1.6;color:var(--chu-nhat);max-width:52ch}
.tc .hero-nut{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.tc .hero-nho{margin-top:16px;font-size:14px;color:var(--chu-nhat);display:flex;flex-wrap:wrap;gap:6px 18px}
.tc .hero-nho span{display:inline-flex;align-items:center;gap:7px}
.tc .hero-nho svg{width:15px;height:15px;color:var(--xanh)}
.tc .hero-anh{position:relative}
.tc .hero-anh .khung{position:relative;
    border-radius:var(--r-lon);overflow:hidden;box-shadow:var(--bong-cao);
    aspect-ratio:4/3.05;background:var(--navy-100);
}
.tc .hero-anh .khung img{width:100%;height:100%;object-fit:cover}
.tc .the-noi{
    position:absolute;background:var(--trang);border-radius:14px;box-shadow:var(--bong-cao);
    padding:14px 16px;
}
.tc .the-noi.tren{top:22px;right:-14px;display:flex;align-items:center;gap:12px}
.tc .the-noi.duoi{bottom:-24px;left:-18px;width:min(280px,84%)}
@media(max-width:980px){
.tc .the-noi.tren{right:0}
.tc .the-noi.duoi{left:0}
}
.tc .vong{
    width:44px;height:44px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
    font-weight:800;font-size:15px;color:#fff;background:var(--xanh);
}
.tc .the-noi .nho{display:block;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--chu-nhat)}
.tc .the-noi .to{display:block;font-size:17px;font-weight:800;color:var(--navy-900);line-height:1.2;margin-top:2px}
.tc .ms-hang{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.tc .ms-the{
    font-size:11px;font-weight:800;color:var(--gold-700);background:var(--gold-50);
    border:1px solid var(--gold-100);padding:4px 9px;border-radius:var(--r-vien-thuoc);
}
.tc .the-noi .cau{font-size:13px;color:var(--chu);line-height:1.5;margin-top:9px}
.tc .loi-di-luoi{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:66px}
@media(max-width:860px){
.tc .loi-di-luoi{grid-template-columns:1fr}
}
.tc .loi-di{
    display:flex;align-items:center;gap:16px;background:var(--trang);border:1px solid var(--vien);
    border-radius:var(--r-the);padding:20px;box-shadow:var(--bong);
    transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s;
}
/* đợt 1 mục 1.3: bóng và viền để ngoài cho máy cảm ứng, chỉ transform vào trong khối chuột thật. */
.tc .loi-di:hover{box-shadow:var(--bong-cao);border-color:transparent}
@media (hover: hover) and (pointer: fine){
.tc .loi-di:hover{transform:translateY(-3px)}
}
.tc .loi-di .o{
    width:50px;height:50px;border-radius:14px;flex:none;display:flex;align-items:center;justify-content:center;
    background:var(--o-nen);color:var(--o-chu);
}
.tc .loi-di .o svg{width:24px;height:24px}
.tc .loi-di .ten{display:block;font-size:17px;font-weight:800;color:var(--navy-900);line-height:1.25}
.tc .loi-di .phu{display:block;font-size:13.5px;color:var(--chu-nhat);margin-top:3px}
.tc .loi-di .ten-mt{margin-left:auto;color:var(--navy-300);flex:none}
.tc .loi-di:hover .ten-mt{color:var(--navy-900)}
.tc .loi-di .ten-mt svg{width:20px;height:20px;transition:transform .2s var(--ease)}
@media (hover: hover) and (pointer: fine){
.tc .loi-di:hover .ten-mt svg{transform:translateX(4px)}
}
.tc .so-luoi{display:grid;grid-template-columns:repeat(4,1fr);gap:34px}
@media(max-width:860px){
.tc .so-luoi{grid-template-columns:repeat(2,1fr);gap:30px}
}
.tc .so-luoi .so{font-size:clamp(32px,4.4vw,48px);font-weight:800;color:#fff;line-height:1;letter-spacing:-.03em}
.tc .so-luoi .ten{font-size:14.5px;color:var(--navy-300);margin-top:11px;line-height:1.4}
/* Ô dải số bấm được (01/09/2026). Trông y hệt ô thường: chỉ khi rê chuột mới lộ ra là link, để
   dải số vẫn đọc như một dải số chứ không thành hàng nút. Không đặt rounded-sm ở thẻ a — theme.css
   bo mọi a.rounded-sm thành viên thuốc 999px (bẫy đã làm vỡ thẻ Cẩm Nang 31/08). */
.tc .so-luoi a.o-dan{display:block;text-decoration:none;color:inherit}
.tc .so-luoi a.o-dan:hover .ten{color:var(--gold-500);text-decoration:underline;text-underline-offset:3px}
.tc .so-luoi a.o-dan:focus-visible{outline:2px solid var(--gold-500);outline-offset:6px}
/* Hàng đường dẫn phụ dưới một khối (lưới môn, bảng giá): đưa người đọc sang khu có trang riêng. */
.tc .lien-ket-them{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 30px;margin-top:34px}
.tc .lien-ket-them a{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:700;color:var(--navy-700);text-decoration:none}
.tc .lien-ket-them a:hover{color:var(--navy-900);text-decoration:underline;text-underline-offset:3px}
.tc .lien-ket-them i{font-size:9px}
/* Khối đổi sang nền tối thì chữ navy chìm hẳn — cùng luật đã có cho .so-luoi .so ngay dưới đây. */
.tc .band--toi .lien-ket-them a{color:#fff}
.tc .band--toi .lien-ket-them a:hover{color:var(--gold-500)}
.tc .video-khung{
    position:relative;border-radius:var(--r-lon);overflow:hidden;box-shadow:var(--bong-cao);
    aspect-ratio:16/9;background:var(--navy-800);margin-top:38px;
}
.tc .video-khung img{width:100%;height:100%;object-fit:cover;opacity:.5}
.tc .video-nut{
    position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
    border:0;background:transparent;cursor:pointer;color:#fff;
}
.tc .video-nut .tron{
    width:82px;height:82px;border-radius:50%;background:var(--gold-500);display:flex;align-items:center;justify-content:center;
    box-shadow:0 12px 34px rgba(0,0,0,.36);transition:transform .2s var(--ease);
}
@media (hover: hover) and (pointer: fine){
.tc .video-nut:hover .tron{transform:scale(1.07)}
}
.tc .video-nut .tron svg{width:30px;height:30px;margin-left:5px}
.tc .video-nut .chu{font:700 15.5px/1.4 "Plus Jakarta Sans",sans-serif;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.tc .video-chu-thich{
    position:absolute;left:18px;bottom:18px;background:rgba(13,31,51,.82);color:#fff;
    font-size:12px;font-weight:700;padding:8px 14px;border-radius:var(--r-vien-thuoc);
}
.tc .ly-do{display:grid;grid-template-columns:1fr 1.12fr;gap:58px;align-items:center}
.tc .ly-do+.ly-do{margin-top:86px}
.tc .ly-do.dao .hinh{order:-1}
@media(max-width:940px){
.tc .ly-do{grid-template-columns:1fr;gap:36px}
.tc .ly-do.dao .hinh{order:0}
}
.tc .ly-do .stt{
    display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;
    background:var(--navy-900);color:#fff;font-weight:800;font-size:16px;margin-bottom:18px;
}
.tc .ly-do h3{font-size:clamp(22px,2.7vw,30px);line-height:1.18;letter-spacing:-.02em}
.tc .ly-do p.giai{margin-top:14px;font-size:16.5px;color:var(--chu-nhat)}
.tc .gach-dau{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:11px}
.tc .gach-dau li{display:flex;gap:11px;font-size:15.5px;color:var(--chu)}
.tc .gach-dau svg{width:20px;height:20px;flex:none;color:var(--xanh);margin-top:2px}
.tc .trich{
    margin-top:24px;padding:18px 20px;border-radius:14px;background:var(--nen-am);border:1px solid var(--vien);
}
.tc .trich p{font-family:Lora,Georgia,serif;font-style:italic;font-size:16px;color:var(--navy-900);line-height:1.55}
.tc .trich .ai{margin-top:10px;font-size:13px;font-weight:700;color:var(--chu-nhat);font-family:"Plus Jakarta Sans",sans-serif;font-style:normal}
/* ---- Ô ẢNH SẢN PHẨM CỦA KHỐI BA LÝ DO: CỐ Ý KHÔNG ĐẶT TỈ LỆ, đọc trước khi "sửa" -----------
   Bản chỉ dẫn hình ảnh (sandbox/ban-chi-dan-hinh-anh.md mục 6.6) đề xuất ép aspect-ratio:16/9 vào
   đúng luật này. ĐÃ ĐO NGÀY 28/08/2026 VÀ ĐỀ XUẤT ĐÓ SAI, ba ảnh thật đang dùng:
       assets/anh/trang-chu/sp-giasu.jpg     1248 x 574   tỉ lệ 2,174
       assets/anh/trang-chu/sp-khoahoc.jpg   1250 x 560   tỉ lệ 2,232
       assets/anh/trang-chu/sp-topical.jpg   1090 x 500   tỉ lệ 2,180
   Không tấm nào là 16/9 (1,778). Ép 16/9 cộng object-fit:cover là cắt cụt khoảng 18% chiều ngang
   ảnh chụp màn hình, mà thứ bị cắt ở ảnh chụp giao diện lại chính là nội dung; để object-fit
   contain thì thay bằng hai dải trống trên dưới.
   Ba số 2,174 / 2,232 / 2,180 cũng KHÔNG bằng nhau, nên một con số chung cũng không có tấm nào
   đúng. Lý lẽ "ba thẻ đứng cạnh nhau nên mắt bắt được chỗ lệch" của bản chỉ dẫn không đúng với bố
   cục thật ở đây: .tc .ly-do là lưới HAI CỘT, mỗi lý do một hàng riêng, cách nhau 60px, nên ba
   ảnh xếp DỌC cách nhau cả màn hình chứ không bao giờ đứng cạnh nhau để so.
   Và ba ảnh này admin thay được qua CMS (quan-tri-trang-chu.html), tức tỉ lệ đổi bất cứ lúc nào.

   VÌ SAO KHÔNG GIỮ CHỖ LUÔN. Đây đúng là lỗi .khung-anh-de của assets/css/pages/practice.css vừa
   phải gỡ trong ngày 28/08: ở đó min-height 260px được chọn khi lập kế hoạch mà không có phép đo
   nào chống lưng, ảnh thật chỉ cao khoảng 111px, kết quả là một ô kem trống gần 150px dưới mỗi
   ảnh và chủ dự án báo ngay trong ngày. Bài học ghi ở đó: giữ chỗ cho ảnh CHỈ đúng khi biết tỉ lệ
   THẬT. Không biết mà vẫn giữ là đổi một lỗi thấy được (bố cục nhảy một lần lúc ảnh về) lấy một
   lỗi thấy được khác và khó chịu hơn (ô trống thường trực).
   Thiệt hại của việc không giữ chỗ ở đây cũng nhỏ hơn nhiều so với ở practice: cả ba ô đều nằm
   dưới màn hình đầu nên không đụng tới LCP, và ảnh mang loading="lazy" nên chúng tải khi người
   xem đã cuộn gần tới, tức cú dịch bố cục xảy ra ngoài tầm mắt.

   CÁCH SỬA GỐC, khi nào muốn CLS về 0: ghi kích thước thật của ảnh lúc admin tải lên (cùng đường
   với mục 2.2 của sandbox/ke-hoach-chuyen-dong.md cho bảng topical_question_images), rồi cho
   khối CMS phát width/height thật ra thẻ img trong mediaLyDo của assets/js/trang-chu-render.js.
   Lúc đó trình duyệt tự chừa ĐÚNG tỉ lệ từng tấm, không cần một con số chung nào cả.
   Trước khi có số đo thật thì KHÔNG đặt tỉ lệ vẫn là câu trả lời đúng.

   Biến thể video ở cuối file (.tc .hinh .anh-sp.media-video) CÓ aspect-ratio:16/9, và đó không
   mâu thuẫn: khung video do CSS quyết định chứ không suy từ file, còn 16/9 là tỉ lệ quay chuẩn
   ghi trong bản chỉ dẫn cho clip giới thiệu. */
.tc .hinh .anh-sp{border-radius:var(--r-the);overflow:hidden;border:1px solid var(--vien);box-shadow:var(--bong-cao);background:var(--trang)}
.tc .hinh .chu-thich{margin-top:12px;font-size:13px;color:var(--chu-nhat);text-align:center}
.tc .tab-cap{display:inline-flex;background:var(--trang);border:1px solid var(--vien);border-radius:var(--r-vien-thuoc);padding:5px;gap:4px;box-shadow:var(--bong)}
.tc .tab-cap button{
    background:transparent;border:0;cursor:pointer;padding:11px 22px;border-radius:var(--r-vien-thuoc);
    font:700 14.5px/1 "Plus Jakarta Sans",sans-serif;color:var(--chu-nhat);transition:background .18s,color .18s;
}
.tc .tab-cap button[aria-selected="true"]{background:var(--navy-900);color:#fff}
.tc .mon-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:16px;margin-top:36px}
.tc .mon{
    background:var(--trang);border:1px solid var(--vien);border-radius:var(--r-the);padding:20px;
    display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden;
    transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s;
}
.tc .mon::before{content:'';position:absolute;left:0;right:0;top:0;height:4px;background:var(--m)}
/* đợt 1 mục 1.3 kèm đợt 3 mục 3.2: hạ biên độ nhấc thẻ từ 4px về đúng 3px cho khớp cả site
   (theme.css và courses.css đã là 3px), rồi đưa transform vào khối chỉ dành cho chuột thật. */
.tc .mon:hover{box-shadow:var(--bong-cao);border-color:transparent}
@media (hover: hover) and (pointer: fine){
.tc .mon:hover{transform:translateY(-3px)}
}
.tc .mon .dau{display:flex;align-items:center;gap:10px}
.tc .mon .ma{
    font-size:11.5px;font-weight:800;letter-spacing:.05em;color:var(--m);
    background:color-mix(in srgb,var(--m) 11%,#fff);padding:4px 9px;border-radius:var(--r-vien-thuoc);
}
.tc .mon h3{font-size:17.5px}
.tc .mon .dong{display:flex;gap:20px;margin-top:auto;padding-top:4px}
.tc .mon .dong .s{font-size:20px;font-weight:800;color:var(--navy-900);line-height:1}
.tc .mon .dong .t{font-size:11.5px;color:var(--chu-nhat);margin-top:5px;font-weight:600}
.tc .mon .nam{font-size:13px;color:var(--chu-nhat)}
.tc .mon .sap{font-size:12px;font-weight:700;color:var(--chu-nhat);background:var(--nen-am);padding:5px 11px;border-radius:var(--r-vien-thuoc);align-self:flex-start}
.tc .kh-luoi{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:38px}
@media(max-width:1000px){
.tc .kh-luoi{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
.tc .kh-luoi{grid-template-columns:1fr}
}
.tc .kh{
    background:var(--trang);border:1px solid var(--vien);border-radius:var(--r-the);overflow:hidden;
    display:flex;flex-direction:column;transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
/* đợt 1 mục 1.3 kèm đợt 3 mục 3.2: 4px xuống 3px, transform vào khối chuột thật. */
.tc .kh:hover{box-shadow:var(--bong-cao)}
@media (hover: hover) and (pointer: fine){
.tc .kh:hover{transform:translateY(-3px)}
}
.tc .kh .dai{height:6px;background:var(--m)}
.tc .kh .than{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1}
.tc .kh .ma{display:block;font-size:11.5px;font-weight:800;color:var(--m);letter-spacing:.05em}
.tc .kh h3{font-size:17px;line-height:1.3}
.tc .kh .mota{display:block;font-size:13.5px;color:var(--chu-nhat)}
.tc .kh .gia{display:block;margin-top:auto;padding-top:14px;border-top:1px solid var(--vien)}
.tc .kh .gia .tu{display:block;font-size:12px;color:var(--chu-nhat);font-weight:600}
.tc .kh .gia .tien{font-size:23px;font-weight:800;color:var(--navy-900);letter-spacing:-.02em;line-height:1.2}
.tc .kh .giam{display:inline-block;margin-top:8px;font-size:11.5px;font-weight:800;color:var(--xanh);background:var(--xanh-nen);padding:4px 10px;border-radius:var(--r-vien-thuoc)}
.tc .gs-luoi{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px}
@media(max-width:900px){
.tc .gs-luoi{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
.tc .gs-luoi{grid-template-columns:1fr}
}
.tc .gs{
    background:var(--trang);border:1px solid var(--vien);border-radius:var(--r-the);padding:20px;
    display:flex;flex-direction:column;gap:12px;transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
/* đợt 1 mục 1.3 kèm đợt 3 mục 3.2: 4px xuống 3px, transform vào khối chuột thật. */
.tc .gs:hover{box-shadow:var(--bong-cao)}
@media (hover: hover) and (pointer: fine){
.tc .gs:hover{transform:translateY(-3px)}
}
.tc .gs .dau{display:flex;gap:14px;align-items:center}
.tc .gs .anh{position:relative;flex:none}
.tc .gs .anh img{width:66px;height:66px;border-radius:50%;object-fit:cover;background:var(--navy-50)}
.tc .gs .anh .tick{
    position:absolute;right:-2px;bottom:-2px;width:22px;height:22px;border-radius:50%;background:var(--xanh);
    border:2.5px solid #fff;display:flex;align-items:center;justify-content:center;color:#fff;
}
.tc .gs .anh .tick svg{width:11px;height:11px}
.tc .gs .ten{display:block;font-size:17px;font-weight:800;color:var(--navy-900);line-height:1.25}
.tc .gs .diem{display:flex;align-items:center;gap:5px;font-size:13px;color:var(--chu-nhat);margin-top:4px}
.tc .gs .diem b{color:var(--navy-900)}
.tc .gs .diem svg{width:14px;height:14px;color:var(--gold-500)}
.tc .gs .nghe{display:block;font-size:14px;color:var(--chu-nhat);line-height:1.5}
.tc .gs .the-hang{display:flex;flex-wrap:wrap;gap:6px}
.tc .gs .the-hang span{font-size:11.5px;font-weight:700;color:var(--navy-700);background:var(--navy-50);padding:4px 10px;border-radius:var(--r-vien-thuoc)}
.tc .gs-chan{margin-top:auto;padding-top:14px;border-top:1px solid var(--vien);display:flex;align-items:center;justify-content:space-between;gap:10px}
.tc .gs-chan .g{font-size:17px;font-weight:800;color:var(--navy-900)}
.tc .gs-chan .g small{font-size:12px;font-weight:600;color:var(--chu-nhat)}
.tc .kq-luoi{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:38px}
@media(max-width:900px){
.tc .kq-luoi{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){
.tc .kq-luoi{grid-template-columns:1fr}
}
.tc .kq{background:var(--trang);border:1px solid var(--vien);border-radius:var(--r-the);padding:22px;text-align:center;box-shadow:var(--bong)}
.tc .kq .anh{display:block;position:relative;width:84px;height:84px;margin:0 auto 14px}
.tc .kq .anh img{width:84px;height:84px;border-radius:50%;object-fit:cover}
.tc .kq .ten{font-size:16.5px;font-weight:800;color:var(--navy-900)}
.tc .kq .truong{font-size:13px;color:var(--chu-nhat);margin-top:3px}
.tc .kq .diem{
    display:inline-flex;align-items:baseline;gap:6px;margin-top:12px;padding:7px 14px;border-radius:var(--r-vien-thuoc);
    background:var(--gold-50);border:1px solid var(--gold-100);
}
.tc .kq .diem b{font-size:19px;font-weight:800;color:var(--gold-700);letter-spacing:-.01em}
.tc .kq .diem span{font-size:12px;font-weight:700;color:var(--gold-700)}
.tc .nx-luoi{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px}
@media(max-width:900px){
.tc .nx-luoi{grid-template-columns:1fr}
}
.tc .nx{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-the);padding:24px;display:flex;flex-direction:column;gap:16px}
.tc .nx .sao{color:var(--gold-300)}
.tc .nx p.cau-noi{font-family:Lora,Georgia,serif;font-style:italic;font-size:16.5px;line-height:1.6;color:#fff}
.tc .nx .nguoi{display:flex;align-items:center;gap:12px;margin-top:auto}
.tc .nx .nguoi img{width:46px;height:46px;border-radius:50%;object-fit:cover}
.tc .nx .nguoi .t{display:block;font-size:15px;font-weight:800;color:#fff}
.tc .nx .nguoi .v{display:block;font-size:12.5px;color:var(--navy-300)}
/* Lưới bảng giá: SỐ CỘT THEO SỐ GÓI (bộ dựng đắp .gia-luoi--N, N là 2 tới 5). Trước 26/08
   lưới chốt cứng 3 cột, thêm gói 6 tháng là thẻ thứ 4 rơi xuống hàng dưới đứng lẻ loi.
   Lớp trần .gia-luoi vẫn giữ 3 cột để bản HTML bake CŨ (chưa có .gia-luoi--N) không vỡ. */
.tc .gia-luoi{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px;align-items:start}
.tc .gia-luoi--2{grid-template-columns:repeat(2,1fr);max-width:760px;margin-left:auto;margin-right:auto}
.tc .gia-luoi--4{grid-template-columns:repeat(4,1fr);gap:16px}
.tc .gia-luoi--5{grid-template-columns:repeat(5,1fr);gap:14px}
/* Từ 4 thẻ trở lên mỗi thẻ chỉ còn ~270px: siết padding, cỡ giá và cỡ điểm bán cho vừa. */
.tc .gia-luoi--4 .goi,.tc .gia-luoi--5 .goi{padding:22px 20px;gap:12px}
.tc .gia-luoi--4 .goi .tien,.tc .gia-luoi--5 .goi .tien{font-size:27px}
.tc .gia-luoi--4 .goi li,.tc .gia-luoi--5 .goi li{font-size:13.5px;gap:8px}
.tc .gia-luoi--4 .goi li svg,.tc .gia-luoi--5 .goi li svg{width:16px;height:16px;margin-top:2px}
/* Nhãn giảm nhỏ lại một nấc: ở 4 cột "1.399.000đ Giảm 42%" rộng gần đúng bằng lòng thẻ (228px),
   thừa một chữ số là nhãn rơi xuống dòng riêng trong khi ba thẻ kia vẫn nằm cùng dòng. */
.tc .gia-luoi--4 .goi .km,.tc .gia-luoi--5 .goi .km{font-size:11.5px;padding:3px 8px;margin-left:5px;vertical-align:3px}
.tc .gia-luoi--5 .goi .goi-nhan{white-space:normal;text-align:center;max-width:calc(100% - 16px);line-height:1.3}
/* Lề hẹp: 4-5 thẻ ghé về 2 cột trước, xuống hẳn 1 cột thì trang dài quá. */
@media(max-width:1080px){
.tc .gia-luoi--4,.tc .gia-luoi--5{grid-template-columns:repeat(2,1fr);gap:20px}
/* Về 2 cột thì thẻ lại rộng như cũ — trả nguyên cỡ chữ, đừng giữ bản siết của 4-5 cột. */
.tc .gia-luoi--4 .goi,.tc .gia-luoi--5 .goi{padding:28px;gap:14px}
.tc .gia-luoi--4 .goi .tien,.tc .gia-luoi--5 .goi .tien{font-size:32px}
.tc .gia-luoi--4 .goi li,.tc .gia-luoi--5 .goi li{font-size:14.5px;gap:10px}
.tc .gia-luoi--4 .goi li svg,.tc .gia-luoi--5 .goi li svg{width:18px;height:18px;margin-top:3px}
.tc .gia-luoi--4 .goi .km,.tc .gia-luoi--5 .goi .km{font-size:12.5px;padding:4px 10px;margin-left:6px;vertical-align:4px}
}
@media(max-width:900px){
.tc .gia-luoi,.tc .gia-luoi--2,.tc .gia-luoi--4,.tc .gia-luoi--5{grid-template-columns:1fr}
.tc .gia-luoi--2{max-width:none}
}
.tc .goi{background:var(--trang);border:1px solid var(--vien);border-radius:var(--r-lon);padding:28px;display:flex;flex-direction:column;gap:14px}
.tc .goi.noi-bat{border:2px solid var(--gold-500);box-shadow:var(--bong-cao);position:relative}
.tc .goi .ten{font-size:19px;font-weight:800;color:var(--navy-900)}
.tc .goi .tien{font-size:32px;font-weight:800;color:var(--navy-900);letter-spacing:-.03em;line-height:1.15}
.tc .goi .tien small{font-size:14px;font-weight:600;color:var(--chu-nhat)}
.tc .goi ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.tc .goi li{display:flex;gap:10px;font-size:14.5px;color:var(--chu)}
.tc .goi li svg{width:18px;height:18px;flex:none;color:var(--xanh);margin-top:3px}
.tc .goi .nut{margin-top:auto;width:100%}
.tc .faq{max-width:820px;margin:34px auto 0}
.tc .faq details{background:var(--trang);border:1px solid var(--vien);border-radius:var(--r-the);margin-bottom:12px;overflow:hidden}
.tc .faq summary{
    cursor:pointer;list-style:none;padding:20px 52px 20px 22px;position:relative;
    font-size:17px;font-weight:700;color:var(--navy-900);line-height:1.4;
}
.tc .faq summary::-webkit-details-marker{display:none}
.tc .faq summary::after{
    content:'';position:absolute;right:22px;top:26px;width:10px;height:10px;
    border-right:2.5px solid var(--chu-nhat);border-bottom:2.5px solid var(--chu-nhat);
    transform:rotate(45deg);transition:transform .2s var(--ease);
}
.tc .faq details[open] summary::after{transform:rotate(-135deg)}
.tc .faq .tl{padding:0 22px 22px;font-size:15.5px;color:var(--chu-nhat)}
.tc .tu-van{
    background:var(--navy-900);border-radius:var(--r-lon);padding:46px;color:var(--navy-100);
    display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;
}
@media(max-width:900px){
.tc .tu-van{grid-template-columns:1fr;padding:32px 24px;gap:30px}
}
.tc .tu-van h2{color:#fff}
.tc .tu-van .loi-ich{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:11px}
.tc .tu-van .loi-ich li{display:flex;gap:11px;font-size:15.5px;color:var(--navy-100)}
.tc .tu-van .loi-ich svg{width:19px;height:19px;flex:none;color:var(--gold-300);margin-top:3px}
.tc .o-form{background:var(--trang);border-radius:var(--r-the);padding:26px}
.tc .o-form label{display:block;font-size:12.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--chu-nhat);margin-bottom:7px}
.tc .o-form input, .tc .o-form select{
    width:100%;padding:14px 16px;border:1.5px solid var(--vien);border-radius:11px;font:500 15.5px/1.3 "Plus Jakarta Sans",sans-serif;
    color:var(--navy-900);background:var(--trang);margin-bottom:16px;
}
.tc .o-form input:focus, .tc .o-form select:focus{border-color:var(--navy-500);outline:none}
.tc .o-form .nut{width:100%}
.tc .o-form .rieng{margin-top:14px;font-size:12.5px;color:var(--chu-nhat);text-align:center}
.tc .chan{background:var(--navy-900);color:var(--navy-300);font-size:14px;padding:62px 0 34px}
.tc .chan-luoi{display:grid;grid-template-columns:2fr 1fr 1fr 1.3fr;gap:36px}
@media(max-width:860px){
.tc .chan-luoi{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
.tc .chan-luoi{grid-template-columns:1fr}
}
.tc .chan h4{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--navy-300);margin-bottom:15px}
.tc .chan .cot{display:flex;flex-direction:column;gap:10px}
.tc .chan a:hover{color:#fff}
.tc .chan .ten{font-size:18px;font-weight:800;color:#fff;margin-bottom:12px}
.tc .chan .bq{line-height:1.65;font-size:13px;max-width:44ch}
.tc .chan .cuoi{margin-top:34px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);font-size:12.5px}
@media(max-width:520px){
.tc .hieu .phu{display:none}
.tc .header .wrap{height:64px}
.tc .header .phai .nut{padding:10px 16px;font-size:13.5px}
.tc .band{padding:60px 0}
.tc .hero{padding:48px 0 60px}
}
.tc .moi-gs{margin-top:16px;padding:16px 18px;border-radius:14px;background:var(--nen-lanh);border:1px solid var(--navy-100);font-size:14.5px;line-height:1.6;color:var(--chu)}
.tc .moi-gs b{color:var(--navy-900)}
.tc .km-khoa{max-width:820px;margin:30px auto 0;padding:16px 20px;border-radius:14px;background:var(--gold-50);border:1px solid var(--gold-100);display:flex;gap:14px;align-items:flex-start;font-size:14.5px;line-height:1.6;color:var(--chu)}
.tc .km-khoa b{color:var(--navy-900)}
.tc .km-khoa .qua{flex:none;width:38px;height:38px;border-radius:10px;background:var(--gold-100);color:var(--gold-700);display:flex;align-items:center;justify-content:center}
.tc .km-khoa .qua svg{width:20px;height:20px}
.tc .goi .gia-phu{font-size:13px;font-weight:600;color:var(--chu-nhat);margin-top:-6px}
.tc .goi .gia-cu{font-size:15px;font-weight:600;color:var(--chu-nhat);margin-bottom:-10px}
.tc .goi .gia-cu s{text-decoration:line-through;text-decoration-thickness:1.5px}
.tc .goi .km{display:inline-block;font-size:12.5px;font-weight:800;color:var(--xanh);background:var(--xanh-nen);padding:4px 10px;border-radius:var(--r-vien-thuoc);vertical-align:4px;margin-left:6px;white-space:nowrap}
.tc .goi.uu-dai{border:2px solid var(--xanh);position:relative}
.tc .gia-luu-y{max-width:760px;margin:32px auto 0;padding:20px 24px;border-radius:14px;background:var(--gold-50);border:1px solid var(--gold-100);display:flex;flex-direction:column;gap:10px}
.tc .gia-luu-y .tde{display:block;font-weight:800;font-size:16.5px;color:var(--navy-900)}
.tc .gia-luu-y p{display:flex;gap:10px;font-size:15px;font-weight:600;line-height:1.6;color:var(--chu)}
.tc .gia-luu-y svg{width:18px;height:18px;flex:none;color:var(--xanh);margin-top:4px}
/* đợt 1 mục 1.9: VÁ LỖI FAIL-CLOSED. index.html xuất xưởng 26 phần tử mang class "hien", mà luật
   này đặt opacity:0 còn class "ra" thì CHỈ do JS thêm (IntersectionObserver trong index.page.js).
   Nghĩa là JS về chậm hoặc lỗi trên 3G thì phần lớn trang chủ vô hình. Từ nay luật chỉ chạy khi
   index.page.js đã gắn class vp-js lên thẻ html: không có JS thì không có hiệu ứng, chứ không
   phải không có nội dung.
   CẢ BA luật dưới phải mang chung tiền tố html.vp-js, kể cả luật nằm trong khối giảm chuyển động,
   bỏ sót một cái là bậc ưu tiên lệch và luật đó hết đè được.
   đợt 3 mục 3.7: hạ nhịp hiện dần. Quãng dịch 18px xuống 12px, thời lượng .55s (vượt ngưỡng gây
   khó chịu 500ms) xuống var(--ao-cham) tức 420ms là trần trên của cả hệ, và easing đổi sang
   var(--ao-ease-vao) vốn dành riêng cho hiệu ứng XUẤT HIỆN. */
/* đợt 3 mục 3.7 + sửa lại 28/08 sau thẩm tra: hiện dần làm bằng ANIMATION, không phải TRANSITION.

   VÌ SAO PHẢI ĐỔI. Bản đầu dùng transition cho cả hiện dần lẫn hover, và hai việc đó tranh nhau
   đúng một thuộc tính là transform, nên chữa được cái này là hỏng cái kia:
     giữ độ trễ so le  ->  rê chuột vào thẻ thứ ba phải chờ 140ms mới thấy nó nhúc nhích;
     ép transition-delay:0s  ->  hết trễ hover nhưng ba thẻ hiện cùng lúc, mất hẳn so le.
   Animation có đồng hồ riêng: animation-delay KHÔNG đụng gì tới transition-delay, nên so le và
   hover sống chung được mà không phải đánh đổi.

   VÀ VÌ SAO KEYFRAME DÙNG `translate` CHỨ KHÔNG DÙNG `transform`. Animation thắng mọi khai báo
   thường, nên nếu keyframe chạm vào transform thì với fill `both` nó sẽ GIỮ transform ở giá trị
   khung cuối vĩnh viễn, đè chết luôn transform:translateY(-3px) của hover. `translate` là thuộc
   tính độc lập, không nằm trong transform, nên hai bên không giẫm nhau. Giá trị cuối 0 0 cũng
   đúng bằng mặc định nên fill `both` không để lại di chứng gì. */
html.vp-js .tc .hien{opacity:0}
html.vp-js .tc .hien.ra{animation:tc-hien var(--ao-cham) var(--ao-ease-vao) both}
@keyframes tc-hien{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}

/* đợt 1 mục 1.5: SO LE, nay đặt bằng CSS thay vì style nội tuyến của bộ dựng.
   Trước đây assets/js/trang-chu-render.js gắn transition-delay thẳng vào thuộc tính style, mà
   style nội tuyến thì không luật CSS thường nào đè nổi, nên độ trễ đó rớt luôn vào hover. Đã gỡ
   khỏi bộ dựng (cả ba thẻ lối đi lẫn bốn ô dải số) và dựng lại ở đây bằng animation-delay.
   Chỉ so le hai nhóm này vì chỉ chúng là hàng ngang vài phần tử, mắt bắt được nhịp. */
html.vp-js .tc .loi-di-luoi .hien.ra:nth-child(2){animation-delay:70ms}
html.vp-js .tc .loi-di-luoi .hien.ra:nth-child(3){animation-delay:140ms}
html.vp-js .tc .so-luoi .hien.ra:nth-child(2){animation-delay:70ms}
html.vp-js .tc .so-luoi .hien.ra:nth-child(3){animation-delay:140ms}
html.vp-js .tc .so-luoi .hien.ra:nth-child(4){animation-delay:210ms}

@media(prefers-reduced-motion:reduce){
html.vp-js .tc .hien{opacity:1}
html.vp-js .tc .hien.ra{animation:none}
html{scroll-behavior:auto}
/* Sửa 28/08 sau thẩm tra: hai giá trị này trước là `none`, và vì chúng mang !important cộng phạm
   vi .tc * nên chúng ĐÈ CHẾT lớp bảo vệ giảm chuyển động phổ quát vừa dựng ở cuối theme.css, trên
   toàn bộ thân trang chủ. `none` là sai vì khi đó sự kiện transitionend và animationend KHÔNG bao
   giờ bắn, nên bất kỳ đoạn logic nào chờ chúng sẽ treo vĩnh viễn. Dùng .01ms thì hiệu ứng vẫn
   biến mất với mắt người mà sự kiện vẫn bắn đúng, khớp với nguyên tắc của mục 1.2. */
.tc *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
/* ===== phần thêm cho bản CMS (không có trong v3) ===== */
.tc .goi .goi-nhan{position:absolute;top:-13px;left:50%;transform:translateX(-50%);font-size:11.5px;font-weight:800;padding:5px 14px;border-radius:var(--r-vien-thuoc);white-space:nowrap}
.tc .goi.noi-bat{position:relative}
.tc .goi .goi-nhan--vang{background:var(--gold-500);color:#fff}
.tc .goi .goi-nhan--xanh{background:var(--xanh);color:#fff}
/* ---- Ô CHỮ CÁI ĐẦU: chia đôi quyền, MẶT MŨI cho lớp dùng chung, CỠ cho trang chủ ----------
   Bối cảnh: assets/css/theme.css khai lớp dùng chung .o-chu-dau (bản thiết kế mới: nền navy đặc,
   chữ vàng, vành vàng mảnh), thay bản cũ nền navy-50 chữ navy-700 nhạt tới mức đọc ra là ô đang
   chờ tải chứ không phải một quyết định thiết kế. Bộ dựng trang chủ nay phát ra cả hai tên lớp
   (xem hàm oChuDau trong assets/js/trang-chu-render.js).

   VẤN ĐỀ PHẢI GIẢI, và nó KHÔNG phải chuyện thứ tự nạp file. Đúng là index.html nạp theme.css
   trước trang-chu.css, nhưng thứ tự chỉ phân thắng bại giữa hai luật CÙNG BẬC. Ở đây hai luật
   khác bậc hẳn: .tc .chu-dau là 0-2-0 còn .o-chu-dau là 0-1-0, nên .tc .chu-dau thắng dù nằm ở
   file nào. Nghĩa là cứ để nguyên luật cũ thì trang chủ sẽ ĐÈ CHẾT lớp dùng chung và ở lại với ô
   nhạt cũ, trong khi mọi trang khác đã sang bản mới. Đổi thứ tự nạp cũng không chữa được.

   CÁCH XỬ LÝ: tách làm hai nhóm luật, mỗi nhóm một bậc ưu tiên có chủ ý.
   1) MẶT MŨI (màu nền, màu chữ, vành, bo góc) viết trong :where() nên bậc bằng 0-0-0. Bậc 0 thì
      .o-chu-dau (0-1-0) tự động thắng ngay khi nó có mặt, không cần ai sửa lại file này, và cũng
      không cần canh thứ tự nạp. Đây là bản DỰ PHÒNG ĐẦY ĐỦ: nó tự vẽ đúng ngôn ngữ mới, nên
      trong quãng lớp dùng chung chưa lên, hoặc với bản index.html đã bake từ trước (HTML cũ chưa
      có tên lớp o-chu-dau, phải chạy lại scripts/sinh-trang-tinh.js mới có), trang chủ vẫn đúng
      chứ không rơi về ô không nền không màu. Hỏng theo kiểu an toàn, không hỏng theo kiểu trắng ô.
   2) CỠ (width, height, font-size, canh lề) giữ bậc thường vì đó là chuyện BỐ CỤC của riêng trang
      chủ: ba ô ở đây là 84px, 66px, 46px, lớp dùng chung không có quyền và cũng không nên biết.
      Cỡ chữ đặt bằng khoảng 42% đường kính ô theo bản thiết kế T3 (mục 5.3 của bản chỉ dẫn).

   Tương phản đã đo, không phải áng chừng: gold-400 #D1A544 trên navy-900 #0D1F33 được 7,28:1,
   qua cả ngưỡng AAA. Bản cũ navy-700 trên navy-50 là chỗ nhạt nhất trang.
   Vàng ở đây đóng vai MỰC và VẠCH trên nền navy, không phải mảng nền vàng, nên vẫn nằm trong bộ
   quy tắc "VÀNG DẪN MẮT" ở theme.css (luật cấm là chữ gold-500 trở lên TRÊN NỀN TRẮNG HAY KEM).
   CỐ Ý KHÔNG phủ hoa văn kẻ ô T1 ở đây, dù assets/anh/hoa-van/ke-o.svg vừa được một phiên khác
   tạo ra chiều 28/08. Lý do: hoa văn là chuyện MẶT MŨI, mà mặt mũi thuộc lớp dùng chung. Thêm
   background-image ở luật này chỉ tạo một bản sao thứ hai để lệch dần, và nếu .o-chu-dau đặt
   background theo lối viết gộp thì nó xoá luôn ảnh nền của bản dự phòng, ra kết quả khác nhau
   giữa trang chủ và các trang khác. Cần hoa văn thì thêm một lần ở theme.css. */
:where(.tc) :where(.chu-dau){
    display:flex;align-items:center;justify-content:center;border-radius:50%;
    background:var(--navy-900);color:var(--gold-400);font-weight:800;
    /* VÀNH VÀNG ĐÃ GỠ KHỎI ĐÂY (28/08/2026, lượt thẩm tra bắt được).
       Luật này từng tự vẽ vành bằng hai box-shadow inset lồng nhau. Nhưng lớp dùng chung
       .o-chu-dau trong theme.css cũng vẽ vành, bằng ::before đặt inset 3px, ĐÚNG CÙNG một dải và
       cùng màu. Hai bên không đè nhau được vì là hai thuộc tính khác nhau: box-shadow không bị
       ::before ghi đè, nên kết quả là HAI vành vàng chồng khít, dày gấp đôi ý đồ.
       Bọc :where() chỉ hạ bậc ưu tiên xuống 0, nó KHÔNG cứu được ca này: có hạ xuống 0 thì
       box-shadow vẫn được vẽ, vì không có luật nào khác khai box-shadow để mà thắng.
       Nay vành do MỘT nơi lo: theme.css. Cần đổi vành thì đổi ở đó, đổi một lần cho cả site. */
}
/* Ô 46px của thẻ cảm nhận: vành mảnh hơn nay do lớp dùng chung lo, qua biến thể .o-chu-dau--nho
   mà bộ dựng gắn vào (assets/js/trang-chu-render.js, hàm oChuDau). Bỏ box-shadow ở đây cùng lý do
   như khối trên: nó chồng thêm một vành thứ hai lên vành của ::before. */
.tc .gs .anh .chu-dau{width:66px;height:66px;font-size:28px}
.tc .nx .nguoi .chu-dau{width:46px;height:46px;font-size:19px;flex:none}
.tc .kq .anh .chu-dau{width:84px;height:84px;font-size:35px;margin:0 auto}
.tc .video-khung video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#000}
.tc .tc-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.tc .o-form .tc-bao{margin-top:12px;font-size:14px;font-weight:600}
.tc .o-form .tc-bao--loi{color:#B4232C}
.tc .o-form .tc-bao--ok{color:var(--xanh)}

/* ===== video walkthrough + siết khoảng trống + doodle (góp ý chủ dự án 24/08 đêm) ===== */
/* Khung video rộng đầy cột, tỉ lệ 16:9 — thay chỗ ảnh chụp màn hình khi admin gắn video */
.tc .hinh .anh-sp.media-video{aspect-ratio:16/9}
.tc .anh-sp.media-video video,.tc .anh-sp.media-video iframe{display:block;width:100%;height:100%;border:0;background:#000}
/* Siết khoảng trống: band 84->72, media của lý do rộng hơn, giãn cách giữa các lý do gọn lại */
.tc .band{padding:72px 0}
.tc .ly-do{grid-template-columns:.95fr 1.18fr;gap:46px}
.tc .ly-do+.ly-do{margin-top:60px}
@media(max-width:940px){.tc .ly-do{grid-template-columns:1fr;gap:32px}}
/* Doodle vẽ tay kiểu kawaii (con vật + đồ vật dễ thương — chủ dự án chọn hướng này 25/08,
   thay bộ ký hiệu toán). Span là con trực tiếp của <section> nên top/left/right tính theo CẢ
   BỀ NGANG TRANG: giá trị px nhỏ = nép sát hai lề trống, giá trị % lớn hơn = ôm quanh các hộp
   hẹp nằm giữa (ô miễn phí 760px, cột FAQ 820px). Thuần trang trí: dưới nội dung, không bắt
   chuột, đứng im theo prefers-reduced-motion (khối reduced-motion chung đã tắt animation),
   và ẨN khi màn dưới 1360px vì lúc đó lề hai bên không còn. */
.tc .hero,.tc .band{position:relative}
.tc .wrap{position:relative;z-index:1}
.tc .tc-doodle{position:absolute;z-index:0;pointer-events:none;user-select:none;opacity:.55;animation:tc-troi 9s ease-in-out infinite alternate;animation-delay:var(--tre,0s)}
.tc .tc-doodle svg{display:block;width:100%;height:100%}
.tc .tc-doodle--sao{width:44px;height:44px;color:var(--gold-400)}
.tc .tc-doodle--may{width:50px;height:50px;color:var(--navy-300)}
.tc .tc-doodle--sach{width:54px;height:54px;color:var(--navy-300)}
.tc .tc-doodle--but-chi{width:46px;height:46px;color:var(--gold-400)}
.tc .tc-doodle--den{width:44px;height:44px;color:var(--gold-400)}
.tc .tc-doodle--tra-sua{width:48px;height:48px;color:var(--gold-400)}
.tc .tc-doodle--ten-lua{width:50px;height:50px;color:var(--gold-400)}
.tc .tc-doodle--hanh-tinh{width:54px;height:54px;color:var(--navy-300)}
.tc .tc-doodle--mu{width:52px;height:52px;color:var(--navy-300)}
.tc .tc-doodle--xoan{width:58px;height:26px;color:var(--gold-400)}
.tc .tc-doodle--gau{width:50px;height:50px;color:var(--navy-300)}
.tc .tc-doodle--meo{width:50px;height:50px;color:var(--navy-300)}
.tc .tc-doodle--tho{width:46px;height:46px;color:var(--gold-400)}
.tc .tc-doodle--cu{width:52px;height:52px;color:var(--navy-300)}
.tc .tc-doodle--ong{width:46px;height:46px;color:var(--gold-400)}
.tc .tc-doodle--quai{width:46px;height:46px;color:var(--navy-300)}
/* Biến thể trên dải nền tối */
.tc .tc-doodle--mau-sang{color:rgba(255,255,255,.55);opacity:.7}
@keyframes tc-troi{0%{transform:translate(0,0) rotate(-5deg)}100%{transform:translate(11px,-13px) rotate(6deg)}}
@media(max-width:1360px){.tc .tc-doodle{display:none}}


/* ===== Màu nền khối đổi được trong trình soạn (25/08/2026) =====
   Từ nay admin chọn màu nền cho từng khối (mauNen, 4 dải nền), nên MỌI khối phải sống được trên
   CẢ BỐN nền — trước đây mỗi khối chỉ được vẽ cho đúng một nền và có hai chỗ gán màu cứng:

     chiều 1 — dải số + cảm nhận vốn chỉ có bản NỀN TỐI (chữ #fff, thẻ trong suốt): kéo hai khối
               đó sang nền sáng là chữ trắng trên nền trắng, mất sạch;
     chiều 2 — các khối sáng có chữ xám đậm nằm THẲNG trên nền (không nằm trong thẻ trắng): đặt
               lên navy là chữ chìm.

   Hai nhóm luật dưới trám đúng hai chiều đó. Nguyên tắc: kiểu MẶC ĐỊNH viết cho nền SÁNG, rồi
   .band--toi đè lại cho nền tối — thêm khối mới thì theo đúng nếp này. Chỉ đụng chữ nằm thẳng
   trên nền; chữ trong thẻ trắng (.mon .kh .gs .kq .goi .faq details) và trong hộp sáng có nền
   riêng (.trich .moi-gs .km-khoa .gia-luu-y) không cần và KHÔNG ĐƯỢC đè, đè là hỏng ngược. */

/* chiều 1: dải số */
.tc .so-luoi .so{color:var(--navy-900)}
.tc .so-luoi .ten{color:var(--chu-nhat)}
.tc .band--toi .so-luoi .so{color:#fff}
.tc .band--toi .so-luoi .ten{color:var(--navy-300)}

/* chiều 1: cảm nhận — nền sáng thì thành thẻ trắng như mọi thẻ khác của trang */
.tc .nx{background:var(--trang);border-color:var(--vien);box-shadow:var(--bong)}
.tc .nx .sao{color:var(--gold-500)}
.tc .nx p.cau-noi{color:var(--navy-900)}
.tc .nx .nguoi .t{color:var(--navy-900)}
.tc .nx .nguoi .v{color:var(--chu-nhat)}
.tc .band--toi .nx{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.14);box-shadow:none}
.tc .band--toi .nx .sao{color:var(--gold-300)}
.tc .band--toi .nx p.cau-noi,.tc .band--toi .nx .nguoi .t{color:#fff}
.tc .band--toi .nx .nguoi .v{color:var(--navy-300)}

/* chiều 2: ba lý do — cả ba tầng chữ đều nằm thẳng trên nền */
.tc .band--toi .ly-do h3{color:#fff}
.tc .band--toi .ly-do p.giai{color:var(--navy-300)}
.tc .band--toi .gach-dau li{color:var(--navy-100)}
.tc .band--toi .hinh .chu-thich{color:var(--navy-300)}
/* Số thứ tự vốn là chấm navy đậm — trên nền navy nó biến mất, đổi sang chấm vàng. */
.tc .band--toi .ly-do .stt{background:var(--gold-400);color:var(--navy-900)}

/* chiều 2: form tư vấn — hộp .tu-van vốn là khối navy nổi trên nền sáng; đặt lên chính nền navy
   thì mất viền hộp, thêm một đường viền mờ cho còn thấy mép. */
.tc .band--toi .tu-van{border:1px solid rgba(255,255,255,.14)}


/* ===== ĐỢT 3 MỤC 3.3: TRẢ HOVER CHO NĂM NHÓM ĐANG BẤT ĐỘNG (28/08/2026) =====
   Năm nhóm dưới đây trước nay không phản hồi gì khi rê chuột, trong khi các thẻ đứng NGAY CẠNH
   chúng (.mon, .kh, .gs) đều nhấc lên. Thẻ vinh danh .kq thậm chí là nhóm duy nhất có bóng đổ mà
   không có hover, lại nằm cùng một hàng với .gs nên sự chênh lệch nhìn thấy rõ.
   CHỈ đổi viền sang vàng và nền sang kem, KHÔNG transform. Chính vì không có transform nên năm
   nhóm này KHÔNG cần bọc @media (hover: hover): màu dính lại một nhịp trên máy cảm ứng thì vô
   hại, còn thẻ bị nâng lên rồi treo mới là có hại.
   .goi.noi-bat và .goi.uu-dai bị LOẠI TRỪ có chủ ý: hai thẻ đó đã mang sẵn viền vàng và viền xanh
   để đánh dấu gói nổi bật và gói ưu đãi, tô thêm viền vàng lúc hover là xoá mất tín hiệu vốn có,
   nên chúng cần một bậc tín hiệu khác. */
/* THU HẸP PHẠM VI 28/08 sau thẩm tra. Bản đầu trả hover cho cả năm nhóm, nhưng ba trong số đó
   KHÔNG BẤM ĐƯỢC: .the-noi và .ms-the là hai thẻ trang trí vẽ đè lên ảnh hero, .kq là thẻ vinh
   danh học sinh. Cho chúng đổi viền vàng khi rê chuột là hứa hẹn một cú bấm không tồn tại, mà
   vàng trong hệ này lại đang là ký hiệu của "bấm được" (xem bộ quy tắc VÀNG DẪN MẮT ở cuối
   theme.css). Lập luận ban đầu là "chúng đứng cạnh .mon .kh .gs mà không phản hồi thì lệch", chỗ
   đó sai: ba thẻ kia đều là thẻ LINK, nên sự khác biệt mới là đúng chứ không phải lỗi.
   Giữ hover cho đúng hai nhóm thật sự tương tác được: thẻ gói giá và dòng câu hỏi FAQ. */
.tc .goi{
    transition:border-color var(--ao-nhanh) var(--ao-ease),background-color var(--ao-nhanh) var(--ao-ease);
}
.tc .faq summary{transition:background-color var(--ao-nhanh) var(--ao-ease)}
/* .goi.noi-bat và .goi.uu-dai bị loại trừ có chủ ý: hai thẻ đó đã mang sẵn viền vàng và viền xanh
   để đánh dấu gói nổi bật và gói ưu đãi, tô thêm viền vàng lúc hover là xoá mất tín hiệu vốn có. */
.tc .goi:not(.noi-bat):not(.uu-dai):hover{border-color:var(--gold-500);background-color:var(--nen-am)}
/* Dòng câu hỏi FAQ có cursor:pointer nhưng nền không đổi, nên không có gì báo rằng CẢ DÒNG là
   vùng bấm được. Summary không mang viền nên ở đây chỉ đổi nền. */
.tc .faq summary:hover{background-color:var(--nen-am)}

/* ===== ĐỢT 1 MỤC 1.7: NÚT TRANG CHỦ PHẢI NHÚN KHI BẤM GIỮ =====
   theme.css đã có .nut:active:not(:disabled){transform:translateY(0) scale(.97)} cho cả site,
   nhưng nó thua .tc .nut--chinh:hover ở đầu file này (cùng bậc 0-3-0 mà theme.css nạp TRƯỚC), nên
   riêng trang chủ bấm giữ nút vàng không thấy nhún, đúng cái nút Học Thử Miễn Phí. Luật này đặt
   CUỐI file và mang bậc 0-4-0 nên thắng mọi luật :hover phía trên. */
.tc .nut:active:not(:disabled){transform:translateY(0) scale(.97)}

/* ===== ĐỢT 3 MỤC 3.1: GẠCH CHÂN VÀNG TRÊN TRANG CHỦ (bổ sung 28/08 sau thẩm tra) =====
   Kiểu nền của span.gach-vang khai một lần ở assets/css/theme.css, không ràng buộc ngữ cảnh.
   Đây chỉ là ba dòng KÍCH HOẠT cho ba loại thẻ-link của trang chủ. Bộ dựng
   assets/js/trang-chu-render.js đã bọc chữ tiêu đề của cả ba trong <span class="gach-vang">.
   Lượt đầu bỏ sót cả ba nhóm này, chỉ làm mỗi thẻ khóa học ở courses.html. */
@media (hover: hover) and (pointer: fine){
    .tc .mon:hover span.gach-vang,
    .tc .kh:hover span.gach-vang,
    .tc .gs:hover span.gach-vang{ background-size:100% 2px }
}