/* * Bổ sung/tinh chỉnh riêng cho frontend v5 (nạp SAU theme.css). * Chỗ để những thứ theme.css v4 chưa có, tránh sửa thẳng file lớn. */ /* Tắt scroll-behavior:smooth mặc định của Bootstrap reboot (:root) — nó làm * position:sticky (vd nút "Bắt đầu thi" ở .exam-cta) trôi theo thao tác vuốt * trên mobile Safari/Chrome thay vì dính đúng vị trí. Những chỗ cần cuộn mượt * đã tự truyền behavior:'smooth' riêng trong JS (exam.js, map-korea.js) nên tắt * default này không ảnh hưởng gì. */ :root { scroll-behavior: auto; } /* ---------- Header: 1 hàng, không đè lên hero ---------- * theme.css để .banner absolute + #maincontent margin-top:65px (bù chiều cao). * Trong BS5, .navbar-header là block nên logo và menu rớt 2 hàng -> navbar cao * gấp đôi, đè khuất dòng eyebrow của hero. Cho navbar nằm trong luồng (relative) * và xếp 1 hàng bằng flex ở desktop -> hết đè, khớp bản v4. * * padding:0 — Bootstrap 5 tự thêm padding:.5rem 1rem cho .navbar (v4 không có * class này, mọi cỡ đã tính đủ ở .navbar-brand/.header-tools/#menu = 65px sẵn * rồi) nên bị cộng dư 16px cao -> logo/menu trông như bị đệm thêm khoảng trắng * trên dưới, cả banner cao hơn 65px thật sự. */ .navbar.banner { position: relative !important; padding: 0 !important; } #maincontent { margin-top: 0 !important; } /* ---------- Header dính khi cuộn LÊN ---------- * Mặc định header vẫn nằm trong luồng (position:relative ở trên) — không đổi * gì khi cuộn xuống. theme.js chỉ chuyển sang position:fixed lúc đang cuộn LÊN * (và chưa ở đỉnh trang), đồng thời gán chiều cao cho .hdr-spacer đúng bằng * header lúc chuyển để trang khỏi giật (bù đúng khoảng trống header để lại * trong luồng). Cuộn lên tới đỉnh (scrollY=0) thì bỏ hẳn 2 class này, header * về lại vị trí tĩnh ban đầu. */ .hdr-spacer { height: 0; } .navbar.banner.hdr-fixed { position: fixed !important; top: 0; left: 0; right: 0; transform: translateY(-100%); transition: transform .35s ease; z-index: 1030; } .navbar.banner.hdr-fixed.hdr-show { transform: translateY(0); } @media (min-width: 992px) { .banner > .container > [class*="col-"] { display: flex; align-items: center; flex-wrap: nowrap; gap: 10px; } .banner .navbar-header { flex: 0 0 auto; margin: 0; } .banner #menu { flex: 1 1 auto; } } @media (max-width: 991px) { .banner .navbar-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; } } /* ---------- Menu mobile: NGĂN KÉO (off-canvas drawer) ---------- * theme.css (bê từ v4) mở #menu kiểu accordion NẰM TRONG LUỒNG (đẩy trang * xuống), nhưng submenu con (.menucategory > ul) lại luôn position:absolute * (không có nhánh riêng cho mobile) — mở 1 danh mục cấp 1 (vd "Du Học Hàn * Quốc") là nó ĐÈ LÊN các mục cấp 1 khác bên dưới thay vì đẩy giãn ra (bug * Ba báo qua ảnh chụp). Đổi hẳn sang ngăn kéo trượt từ trái, có lớp phủ nền * + nút đóng — submenu giờ nằm trong luồng ngăn kéo (đẩy giãn thật), hết đè. * * Đóng/mở KHÔNG viết lại: nút X + lớp phủ đều tự mang data-bs-toggle="collapse" * data-bs-target="#menu" giống hệt nút 3 gạch có sẵn (header.php) — Bootstrap * 5 tự lo toggle + đồng bộ aria-expanded ở MỌI phần tử trỏ chung 1 target. * CSS chỉ bám theo class .show mà Bootstrap tự gắn/gỡ cho #menu (kể cả lớp * phủ, qua tổ hợp anh em kề "#menu.show ~ .menu-backdrop"). Riêng khoá cuộn * trang (body.menu-open) cần 1 đoạn JS nhỏ ở theme.js lắng nghe đúng 2 sự * kiện show.bs.collapse/hide.bs.collapse có sẵn của Bootstrap — không có * cách CSS thuần nào gắn class lên dựa vào trạng thái của #menu. * * Desktop (≥992px) KHÔNG bị đụng: toàn bộ khối này nằm trong @media * (max-width:991px); #menu vẫn display:flex nằm ngang như cũ (theme.css * dòng ~1138), 2 phần tử mới (.menu-close/.menu-backdrop) có base display:none * nên vô hình ở mọi cỡ màn hình lớn hơn. Vị trí #navbarToggleDot (chấm thông * báo trên nút 3 gạch, NẰM NGOÀI #menu) và .usertop-dot/.usertop-menu-count * (NẰM TRONG #menu nhưng chỉ đổi qua toggle [hidden] + textContent) không hề * đổi cấu trúc — ainotify.js vẫn tìm thấy nguyên 3 phần tử đó, chỉ khác chỗ * chúng hiện ra (trong ngăn kéo thay vì accordion cũ). */ .menu-backdrop, .menu-close { display: none; } body.menu-open { overflow: hidden; } @media (max-width: 991px) { .menu-backdrop { display: block; position: fixed; inset: 0; z-index: 1040; background: rgba(20, 12, 4, .45); opacity: 0; pointer-events: none; transition: opacity .28s ease; } #menu.navbar-collapse.show ~ .menu-backdrop { opacity: 1; pointer-events: auto; } /* Trình duyệt mobile mặc định tô 1 lớp xám/trắng mờ mỗi lần chạm link (-webkit-tap-highlight-color) — trên nền nâu tối của ngăn kéo nhìn như vệt trắng bệch, phải tắt hẳn và tự lo trạng thái chạm bằng CSS riêng. */ #menu.navbar-collapse, #menu.navbar-collapse a, #menu.navbar-collapse button, .menu-close, .menu-backdrop { -webkit-tap-highlight-color: transparent; } #menu.navbar-collapse { display: block !important; position: fixed; top: 0; left: 0; bottom: 0; width: 86%; max-width: 320px; margin: 0; background: linear-gradient(165deg, #402a12, #2f2011 65%); box-shadow: 16px 0 40px rgba(0, 0, 0, .35); z-index: 1045; transform: translateX(-100%); visibility: hidden; transition: transform .32s cubic-bezier(.22, .9, .32, 1), visibility 0s linear .32s; } #menu.navbar-collapse.show { transform: translateX(0); visibility: visible; transition: transform .32s cubic-bezier(.22, .9, .32, 1), visibility 0s linear 0s; } /* Bootstrap Collapse chỉ gắn .show SAU KHI animation chiều cao nội bộ của chính nó chạy xong (350ms mặc định) — nếu để nguyên, ngăn kéo sẽ "đứng hình" gần 350ms rồi mới bắt đầu trượt (khớp .show quá trễ). Ép animation chiều cao nội bộ đó gần như tức thời để .show đổi ngay khi bấm, nhường toàn bộ hiệu ứng trượt cho transition transform ở trên tự lo. */ #menu.navbar-collapse.collapsing { transition: height .01s linear !important; } /* Cùng selector (khớp độ đặc thù) với #menu.navbar-collapse.collapse.show của theme.css để chắc chắn thắng — nó đang set overflow:visible!important (đúng cho accordion-trong-luồng cũ) nhưng ngăn kéo cần TỰ cuộn dọc riêng. */ #menu.navbar-collapse.collapse.show { overflow-y: auto !important; overflow-x: hidden !important; max-height: none !important; -webkit-overflow-scrolling: touch; } .menu-close { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin: 12px 12px 0 auto; border: 0; border-radius: 9px; background: rgba(255, 255, 255, .08); color: #f1e6d5; font-size: 16px; cursor: pointer; } .menu-close:hover, .menu-close:focus-visible { background: rgba(255, 255, 255, .16); } .menu-close:focus-visible { outline: 2px solid var(--accent-soft, #f0a638); outline-offset: 2px; } /* Mục cấp 1: cỡ chữ 13px của theme.css hơi nhỏ trên điện thoại thật, tăng nhẹ + nới khoảng đệm cho dễ bấm. Bấm vào mục đang mở (.mopen) KHÔNG dùng gạch chân cam nữa (đó là kiểu "active/hover" của desktop, để lẫn trên mobile nhìn rối) — đổi sang tô nền nhẹ, đồng bộ với cách báo "đang mở" của submenu bên dưới. */ #menu > ul > li > a { display: block !important; width: 100%; box-sizing: border-box; font-size: 14.5px !important; padding: 13px 34px 13px 15px !important; } #menu > ul > li.has-sub.mopen > a { background: rgba(255, 255, 255, .05); border-bottom-color: transparent !important; } /* Submenu: bỏ position:absolute của theme.css -> nằm trong luồng ngăn kéo, đẩy giãn thay vì đè lên mục cấp 1 khác (fix bug gốc). Bỏ luôn viền cam/bo tròn/đổ bóng kiểu "thẻ nổi trên desktop" (theme.css, #menu .menucategory > ul — không có nhánh mobile riêng nên tràn xuống đây) vì trong ngăn kéo tối nó lạc tông; chỉ giữ 1 vạch dẫn bên trái cho biết đây là mục con. */ #menu .menucategory > ul { position: static !important; width: auto !important; max-width: none !important; white-space: normal !important; box-shadow: none !important; border-top: 0 !important; border-radius: 0 !important; background: transparent !important; margin: 0 !important; padding: 2px 0 6px 24px !important; border-left: 1px solid rgba(255, 255, 255, .12) !important; margin-left: 26px !important; } #menu .menucategory > ul a { border-bottom: 0 !important; color: #d9c9ab !important; padding: 8px 10px !important; font-size: 13.5px !important; font-weight: 500 !important; text-transform: none !important; border-radius: 7px !important; } #menu .menucategory > ul li a:hover, #menu .menucategory > ul li a:focus-visible { color: #fff !important; background: rgba(255, 255, 255, .07); } /* Ba muốn: bỏ hẳn avatar, menu tài khoản nối NGAY sau menu chính (đứng TRƯỚC tìm kiếm/ngôn ngữ), tìm kiếm + ngôn ngữ đẩy xuống cuối cùng — dùng order của flexbox, không đổi thứ tự HTML thật (khỏi đụng header.php/usertop.php, badge thông báo an toàn). */ .header-tools { flex-wrap: wrap !important; row-gap: 10px; } /* Chỉ đẩy lên đầu + full-width khi ĐÃ đăng nhập (có .usertop, tức có danh sách để hiện). Khách (.usertop-guest, chỉ 1 icon "Đăng nhập") KHÔNG có gì để xổ ra thêm — giữ nguyên chung hàng với tìm kiếm/ngôn ngữ như cũ, khỏi tự nhảy lên thành 1 hàng riêng trông lạc lõng. */ .usertop-wrap:has(.usertop) { flex: 1 1 100% !important; order: -1; width: 100% !important; } .header-tools .usertop-toggle { display: none !important; } /* theme.css cho .usertop display:inline-flex (avatar + mũi tên nằm NGANG, kiểu desktop) — trên mobile phải là khối DỌC để .usertop-menu chiếm full-width, không bị bó theo chiều rộng avatar (giờ đã ẩn). */ .header-tools .usertop { display: block !important; width: 100%; } .header-tools .usertop .usertop-menu { display: block !important; position: static !important; left: auto !important; right: auto !important; top: auto !important; width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: 4px 0 !important; background: rgba(255, 255, 255, .05) !important; border: 0 !important; box-shadow: none !important; border-radius: 10px !important; } .usertop-menu .usertop-hello { padding: 10px 14px !important; border-bottom: 1px solid rgba(255, 255, 255, .1) !important; color: #c9b696 !important; font-size: 12.5px !important; } .usertop-menu .usertop-name { color: #fff !important; } .usertop-menu .divider { display: none !important; } .usertop-menu > li > a { color: #f1e6d5 !important; padding: 10px 14px !important; font-size: 13.5px !important; } .usertop-menu > li > a:hover { background: rgba(255, 255, 255, .06) !important; } .usertop-menu > li > a i { color: var(--accent-soft, #f0a638) !important; } } @media (prefers-reduced-motion: reduce) { #menu.navbar-collapse, .menu-backdrop { transition: none !important; } } /* ---------- Slide đối tác dùng chung (partnerSlider) ---------- * 1 hàng trượt ngang bằng JS thuần (theme.js, [data-partner-slider]) — mỗi lần * bấm mũi tên trượt đúng 1 khung nhìn, số thẻ hiện cùng lúc giảm dần theo màn * hình. Dùng chung cho cả "Trường đại học liên kết" (thẻ có tên) và dải logo * đối tác cuối trang (chỉ có logo) — 2 nơi khác nhau qua modifier bên dưới. */ .partnerSlider { position: relative; padding: 0 6px; } .partnerSlider-viewport { overflow: hidden; } .partnerSlider-track { display: flex; gap: 14px; transition: transform .35s ease; } .partnerSlider-item { flex: 0 0 calc((100% - 3 * 14px) / 4); max-width: calc((100% - 3 * 14px) / 4); } .partnerSlider-nav { position: absolute; top: 43%; transform: translateY(-50%); z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: none; background: rgba(0, 0, 0, .35); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s, opacity .15s; } .partnerSlider-nav:hover { background: rgba(0, 0, 0, .55); } .partnerSlider-nav[disabled] { opacity: .3; cursor: default; pointer-events: none; } .partnerSlider-prev { left: -13px; } .partnerSlider-next { right: -13px; } @media (max-width: 991px) { .partnerSlider-item { flex: 0 0 calc((100% - 2 * 14px) / 3); max-width: calc((100% - 2 * 14px) / 3); } } @media (max-width: 767px) { .partnerSlider-item { flex: 0 0 calc((100% - 14px) / 2); max-width: calc((100% - 14px) / 2); } } @media (max-width: 575px) { .partnerSlider { padding: 0 30px; } .partnerSlider-item { flex: 0 0 100%; max-width: 100%; } .partnerSlider-nav { width: 32px; height: 32px; } .partnerSlider-prev { left: -6px; } .partnerSlider-next { right: -6px; } } /* ---------- Đồng nhất thẻ trường đối tác (khắc phục tên to/nhỏ lệch) ---------- */ /* Ảnh cùng tỉ lệ, tên căn trái đều nhau, thẻ cao bằng nhau trong 1 hàng. */ .homeschool .newsitem { display: flex; flex-direction: column; height: 100%; margin: 0; } .homeschool .newsitem > h3 { margin-top: auto; } /* ---------- Học bổng GSK: partnerSlider nằm trong col-lg-8 (hẹp hơn cả trang) ---------- * Cỡ mặc định của partnerSlider (4 thẻ/hàng) tính theo cả .container nên đặt ở * cột 8/12 sẽ ra thẻ hẹp bất thường — thu còn 3/2/1 khớp lưới cũ (col-md-4/col-sm-6). */ .hocbong .newsitem { height: 100%; } .hocbong .partnerSlider-item { flex: 0 0 calc((100% - 2 * 14px) / 3); max-width: calc((100% - 2 * 14px) / 3); } @media (max-width: 767px) { .hocbong .partnerSlider-item { flex: 0 0 calc((100% - 14px) / 2); max-width: calc((100% - 14px) / 2); } } @media (max-width: 575px) { .hocbong .partnerSlider-item { flex: 0 0 100%; max-width: 100%; } } /* ---------- Dải logo đối tác cuối trang (banner zone footer_partner) ---------- * Cùng cơ chế slide với partnerSlider ở trên, chỉ đổi cỡ thẻ (nhiều logo hơn * mỗi hàng vì không có tên trường) và bỏ khung viền quanh logo cho gọn. */ .footer-partners { padding: 26px 0; background: var(--paper, #faf7f1); border-top: 1px solid var(--line, #e8dfce); } .footer-partners .fp-head { text-align: center; margin-bottom: 18px; } .footer-partners .fp-head .title { position: relative; margin: 0 !important; padding-bottom: 14px; font-size: clamp(18px, 2.4vw, 24px) !important; text-transform: uppercase; } .footer-partners .fp-head .title::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 54px; height: 3px; border-radius: 3px; background: var(--accent); } .footer-partners .partnerSlider-item { flex: 0 0 calc((100% - 4 * 14px) / 5); max-width: calc((100% - 4 * 14px) / 5); } .footer-partners .fp-item { display: flex; align-items: center; justify-content: center; height: 74px; padding: 8px 10px; background: #fff; border: 1px solid var(--line, #e8dfce); border-radius: 12px; box-shadow: var(--shadow-sm, 0 2px 8px rgba(74, 45, 12, .07)); transition: transform .18s, box-shadow .18s; } .footer-partners .fp-item:hover { transform: translateY(-3px); box-shadow: var(--shadow, 0 8px 24px rgba(74, 45, 12, .12)); } .footer-partners .fp-item img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } @media (max-width: 991px) { .footer-partners .partnerSlider-item { flex: 0 0 calc((100% - 3 * 14px) / 4); max-width: calc((100% - 3 * 14px) / 4); } } @media (max-width: 575px) { .footer-partners .partnerSlider-item { flex: 0 0 calc((100% - 2 * 14px) / 3); max-width: calc((100% - 2 * 14px) / 3); } .footer-partners .fp-item { height: 60px; } } /* ---------- Nút 3 gạch (hamburger): theme.css (bê từ v4) trông cậy Bootstrap 3 tự ẩn .navbar-toggle mặc định (chỉ hiện lại ở @media ≤991px chính nó khai). BS5 (đang dùng ở v5) không có rule mặc định đó nên nút lộ ra cả desktop, đè lên logo — bù lại đúng 1 rule Bootstrap 3 vốn có. PHẢI bọc trong @media (min-width:992px): để trần thì cùng specificity với rule "hiện lại" ở ≤991px của theme.css, mà web.css nạp SAU nên luôn thắng — ẩn mất luôn cả ở mobile, khoá tay khách không mở được menu (bug thật, phát hiện khi rà lại header). ---------- */ @media (min-width: 992px) { .navbar-toggle { display: none; } } /* ---------- Marker chấm tròn đè lên chữ menu ---------- * #menu > ul chuyển display:flex ở desktop (xem trên) nhưng theme.css chỉ đặt * list-style:none cho .menucategory > ul (submenu), không đặt cho chính