/* Sửa giao diện điện thoại / máy tính bảng (nạp sau site.css). */

/* Banner đầu trang: giữ đúng tỉ lệ ảnh (3:1) để không bị cắt mất chữ hai bên */
@media (max-width:767px){
	.hk-visual,.hk-visual-wrap--auth .hk-visual{min-height:0;height:auto;aspect-ratio:3/1}
	.hk-visual__slide{background-position:center center}
	.hk-visual__arrow{display:none}
}

/* "Hình ảnh nổi bật": 2 cột thay vì 4 ảnh xếp dọc rất dài */
@media (max-width:639px){
	.hk-gallery-slider__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
	.hk-gallery-cap{font-size:.82rem;line-height:1.35}
	.hk-gallery-meta{font-size:.7rem}
}

/* Thanh menu dưới đáy: chừa chỗ để không che nội dung cuối trang, tránh phần vuốt của iPhone */
@media (max-width:1023px){
	.hk-main-scroll{padding-bottom:calc(68px + env(safe-area-inset-bottom,0px))}
	.hk-mnav{padding-bottom:env(safe-area-inset-bottom,0px)}
	.hk-mnav__btn{min-height:44px}
}

/* Ô nhập 16px: iPhone không tự phóng to trang khi bấm vào ô */
@media (max-width:767px){
	input[type=text],input[type=password],input[type=email],input[type=search],input[type=number],input:not([type]),select,textarea{font-size:16px}
}

/* Thanh trên gọn cho điện thoại (thanh menu lớn chỉ hiện từ 1024px) - thay khoảng trống 80px cũ */
.hk-mtop{display:none}
@media (max-width:1023px){
	.hk-main-scroll{padding-top:0}
	.hk-mtop{position:sticky;top:0;z-index:100090;display:flex;align-items:center;gap:8px;height:52px;padding:0 10px;padding-top:env(safe-area-inset-top,0px);background:#1b1e22f2;color:#f1f5f9;border-bottom:1px solid #ffffff1a;backdrop-filter:blur(6px)}
	.hk-mtop__logo{display:flex;align-items:center;gap:8px;min-width:0;flex:1;color:inherit;text-decoration:none;font-weight:800;font-size:15px}
	.hk-mtop__logo img{width:40px;height:40px;object-fit:contain;flex:none}
	.hk-mtop__logo span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
	.hk-mtop__btn{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border-radius:999px;border:1px solid #ffffff26;color:#f1f5f9;text-decoration:none;font-size:13px;font-weight:700;white-space:nowrap}
	.hk-mtop__btn--dl{background:linear-gradient(180deg,#f59e0b,#d97706);border-color:#f59e0b;color:#1b1300}
}
@media (max-width:380px){.hk-mtop__btn span{display:none}.hk-mtop__logo span{font-size:14px}}

/* Nút START + linh vật: không đè lên banner, nhỏ lại cho đỡ chiếm cả màn hình */
@media (max-width:767px){
	.hk-notice{margin-top:4px}
	.hk-notice__start{margin-top:0;display:flex;justify-content:center}
	.hk-notice__start img{max-width:210px;height:auto}
}

/* Nút nhạc nổi: sang góc phải, nhỏ lại, nằm trên thanh menu dưới đáy (không che nút / chữ bên trái) */
@media (max-width:1023px){
	.hk-bgm{left:auto !important;right:10px;bottom:calc(76px + env(safe-area-inset-bottom,0px)) !important}
	.hk-bgm__fab{width:38px !important;height:38px !important;opacity:.9}
	.hk-bgm__panel{left:auto !important;right:0}
}

/* Ô "Ghi nhớ đăng nhập 7 ngày" ở trang đăng nhập */
.hk-auth__remember{display:flex;align-items:center;gap:.5rem;margin:.25rem 0 .75rem;font-size:.9rem;cursor:pointer;user-select:none}
.hk-auth__remember input{width:18px;height:18px;accent-color:#f59e0b;cursor:pointer}

/* ---- Popup Cẩm nang tân thủ / đọc bài (Tin mới, Tin tức, Cẩm nang): cuộn được bằng con lăn ----
   Lỗi cũ: khung dùng lưới (grid) chỉ có max-height => phần nội dung cao theo bài viết rồi bị cắt mất,
   không có thanh cuộn. Đổi sang flex: phần nội dung bị giới hạn đúng chiều cao khung và tự cuộn. */
.hk-guide-modal__dialog{display:flex;align-items:stretch}
.hk-guide-modal__nav{flex:0 0 200px;width:200px;min-height:0}
.hk-guide-modal__main{flex:1 1 auto;min-width:0;min-height:0}
.hk-guide-modal__body{min-height:0;overscroll-behavior:contain}
.hk-guide-modal__nav-list{overscroll-behavior:contain}
.hk-reader .hk-reader--nonav .hk-guide-modal__nav{display:none}
@media (max-width:767px){
	.hk-guide-modal__dialog{flex-direction:column}
	.hk-guide-modal__nav{flex:0 0 auto;width:auto}
}

/* Giao diện tối: nút "Tài khoản" trên thanh menu không bị trắng tinh (chữ trắng trên nền trắng) */
html.dark .hk-header__account{background-color:#0f172a;color:#fff;border:1px solid rgba(255,255,255,.22)}
html.dark .hk-header__account:hover{background-color:#1e293b}

/* Menu Tài khoản trên thanh menu (đã đăng nhập): rê chuột hoặc bấm để mở */
.hk-acct{position:relative;display:inline-block}
.hk-acct>.hk-header__account{cursor:pointer;border:0;font-family:inherit}
html.dark .hk-acct>.hk-header__account{border:1px solid rgba(255,255,255,.22)}
.hk-acct__pop{display:none;position:absolute;right:0;top:100%;padding-top:8px;z-index:1000;min-width:210px}
.hk-acct.is-open>.hk-acct__pop,.hk-acct:hover>.hk-acct__pop,.hk-acct:focus-within>.hk-acct__pop{display:block}
.hk-acct__menu{list-style:none;margin:0;padding:6px;background:#0f172a;border:1px solid rgba(255,255,255,.16);border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.45)}
.hk-acct__menu a{display:block;padding:8px 12px;border-radius:7px;color:#e5e7eb;font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap}
.hk-acct__menu a:hover,.hk-acct__menu a:focus-visible{background:#1e293b;color:#fff;outline:none}
.hk-acct__hello{padding:8px 12px 9px;margin-bottom:4px;border-bottom:1px solid rgba(255,255,255,.12);color:#fde047;font-size:13px;font-weight:700}
.hk-acct__hello a{display:inline;padding:0;color:#fff;text-decoration:underline;font-size:14px}
.hk-acct__hello a:hover{background:none}
.hk-acct__menu a.hk-acct__admin{color:#f5b53f}
.hk-acct__out{margin-top:4px;border-top:1px solid rgba(255,255,255,.12);padding-top:4px}
.hk-acct__out a{color:#fca5a5}